Product information in product page

In this article, we'll delve into the customization of the "Product Information" section. This section, automatically included on every product page, encompasses vital details like product price, add-to-cart buttons, images, and additional product information.

To edit the product information on a product page, follow these steps:

Navigate to the central menu in the theme settings.

Click on "Home page," then "Products. Choose the product template you want to edit, usually the default one if you want the changes to reflect on all products.

If you prefer not to apply these changes to all products, you can create a new template and assign it to specific products to achieve the desired style.

You can assign a new template to a product, by going in Shopify admin> Products> Create/Edit a product > Theme template. There in that dropdown below, you will have all the products templates and you can choose the desired template from the available options.

Learn more about this process in the Shopify documentation here.

To edit this section, simply click on it. You'll then be able to access the section settings (2) and its individual blocks (1).

First, we'll discuss the section settings, and then we'll address each block individually to discuss its settings.

Section settings

You can update the color scheme of the section by updating the value in the setting above.

The "Section size" setting allows you to adjust the section's size between container and full width. Here are screenshots illustrating the two options.

Container

Full width

The next group of seetings are for the gallery and different kinds of media you can have displayed.

You can select the position of the gallery on desktop by updating the value in the setting below. Choose between left, center, or right alignment. The position is automatically optimized for mobile devices.

The next setting is the media aspect ratio. Adjusting the "Media aspect ratio" setting ensures uniformity in the displayed size of all your product images, maintaining consistency across your storefront.

We've introduced a new setting for the gallery on mobile devices. You can choose to have the gallery scroll horizontally by checking the checkbox or leave it unchecked for vertical scrolling.

If you wish to enable the display of product images in a popup for zoomed viewing, you can adjust the setting below. We've incorporated three styles for the button that triggers the zoom, as well as an option to disallow this popup feature altogether.

The following setting is particularly crucial for products with variants, especially when each variant has different pictures associated with it. We've included examples of products grouped by color. With this setting, you have the flexibility to:

Display all pictures on all variant product pages.
Only show the selected variant images.
Show the general product pictures first, followed by the selected variant images.

The next setting, will change something only if in the previous setting you have selected General and selected variant images. And in the next setting, you can shoose if you want the general pictures of the product dispalayed first of last (after the variant specific images)

Since we utilize options on product pages, it's essential to identify the option name that triggers the switching between images. In the input below, please provide all the naming options for this purpose. If your store is available in multiple languages, please separate the options with commas.

The product tabs can be presented in two different styles: collapsible content or as a drawer. By default, this applies to the Product tab (block). However, for blocks like Description and Complementary Products, this feature is applicable only when they are displayed as tabs.

An example of products tabs is:

You can incorporate product tabs by simply adding blocks into the designated section.

The final general settings are for adjusting the top and bottom spacing for the Product Information section.

Individual blocks settings

You have the flexibility to include various types of simple blocks to provide additional details within the section. These blocks can contain simple text, SKU, product rating, or custom liquid code.

In a text block, for instance, you can incorporate dynamic sources such as metafield values, the product vendor, or any other information stored in Shopify.