Product
Last updated
Last updated
Customize Theme → Drop-down menu in the top center → Products
The Product template is a fundamental aspect of a Shopify store, as it determines how product listings are displayed to customers. Customizing the Product template enables merchants to showcase merchandise effectively, provide essential product information, and create a visually appealing browsing experience for visitors.
The Sections Overview provides a detailed exploration of the various customizable sections available within the Product template. Each section offers unique settings and options to aid in tailoring the appearance and functionality of product pages, aligning with the brand and meeting business objectives. From the product grid and featured collections to related products and testimonials, a range of versatile sections are available to enhance merchandise presentation and elevate the shopping experience for customers. ONLY the sections that are present but not available in the home page template will be included in the following description:
Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Enable image zoom gallery*: Allows the user to use image zoom functionality.
Autoplay first video*: Gives the user the option to autoplay the first video if a such is uploaded.
* Note: For better understanding the above, please refer to the examples given for the same settings in 'Featured product' section.
Enable autoplay: It enables or disables the setting for autoplaying the slideshow mode.
Change slides every: Give the user the control to modify the interval in seconds for every slide to stand on the screen. It can vary from 3 to 10 seconds. A loop mode is automatically enabled.
Media ratio on desktop: Gives control over the media ratio for the desktop version.
Media ratio on mobile: Gives control over the media ratio for the mobile version.
Media layout on desktop: Gives the user the choice between two layout styles: Grid and Thumbs.
Thumbs position: If a Thumb layout is chosen, the user can select on which side the thumbs to be presented. One of three possibilities is to be chosen: Left, Right or Bottom.
Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Badges: Represents the badges for the product.
Heading: Represents the heading of the product.
Price: Represents the price of the product.
Vendor: Add the block, and the vendor will appear, which has been provided in the product settings in the admin panel.
Stock notification: Responsible for tracking the quantity of every variant in stock.
Threshold: A setting that gives the user the option to control the minimum quantity of every variant, so the block activates the stock notification message.
Variant picker: Represents the variants of the product.
Size guide page: Select a size guide page preliminary created.
Pickup availability: Represents the pickup availability of the product.
Purchase Options: It's a block responsible for the purchase options in the quick view window of a product. For a better understanding of this block, please refer to the additional information given for the same block in the 'Featured product' section.
Label: Enter the label for the purchase options.
Description: Represents the description of the product.
Collapsible description: A block gives the user the option to add a collapsible description.
Open: Enables or disables the setting responsible for the Description to stay open or not.
Heading: Enter a heading for the block.
Description: Enter a description for the block.
Quantity: A block that activates the quantity setting in the quick view window.
Buy buttons: Represents the 'Add to card' button.
Shop Pay Installments: Allows the user to use Installment payments. Note: 'shop' app should be installed prior to using this feature. For more information, please see the following link.
Custom liquid: Тhis block allows the users to directly put in a code into the field through which they can build a completely custom block.
In this section, the user can set the appearance of the related products. The related products can be customized manually by adding 'Complementary products' through the app 'Search & Discovery', which can be found in the app store.
Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Swap image and content: With that setting, the user can swap the product image and the slideshow position. By default, the image is on the left, and accordingly, the slideshow with the related products is on the right.
Media ratio on mobile: Gives control over the media ratio for the mobile version.
Enable autoplay: It enables or disables the setting for autoplaying the slideshow mode.
Change slides every: Give the user the control to modify the interval in seconds for every slide to stand on the screen. It can vary from 3 to 10 seconds. A loop mode is automatically enabled.
Maximum products to show: Gives the user the option to choose how many products to be visible on the slideshow part of the section. They can vary from 2 to 12.
Alt text: The default media is the first picture of the product. This setting allows the user to change the picture presenting the product by adding an 'Alt text' of the image in the product through Admin panel → Products → Select the desired product → Select the desired Picture → Add alt text. The same alt text should be put in the field.
Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Heading: Enter a heading for the section.
Caption: Enter a caption for the section.
Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.
In this section, the user can set the appearance of recommended products. The recommended products can be generated automatically or manually for each product. Manual customization can be done by adding products in 'Related products' through the app 'Search & Discovery', which can be found in the app store.
Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Enable slider: It enables or disables the setting for manually sliding the products arranged in one row on different slides.
Enable arrows: Gives the user the control to change the slides manually via the arrows in the top right corner.
Enable scrollbar: Enables or disables the scrollbar right under the products.
Enable autoplay: It enables or disables the setting for autoplaying the slideshow.
Change slides every: Gives the user the control to modify the interval in seconds for every slide to stand on the screen. It can vary from 3 to 10 seconds.
Maximum products to show: Gives the user the option to choose how many products to be visible in this section. They can vary from 6 to 20.
Number of columns on desktop: Gives the user the option to choose how many product columns to be presented on the desktop version. It can vary from 2 to 5.
Number of columns on tablet: Gives the user the option to choose how many product columns are to be presented on the tablet. It can vary from 2 to 4.
Number of columns on mobile: Gives the user the option to choose how many product columns to be presented on the mobile version. It can vary from 1 to 2.
Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Heading: Enter a heading for the section.
Caption: Enter a caption for the section.
Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.
Horizontal content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.
Enable pagination: Enables or disables the pagination setting of the Hero slideshow.
Button label: Choose a label for the button.
Button link: With that setting, the user can choose one of the store links or enter an external link.
Media ratio on desktop: Gives control over the media ratio for the desktop version.
Media ratio on mobile: Gives control over the media ratio for the mobile version.
Image on desktop: Select an image for the desktop version.
Image on mobile: Select an image for the mobile version.
Color scheme: With that setting, the user can choose the color scheme of the section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Heading: Enter a heading for the section.
Description: Enter a description for the section.
Horizontal content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.
Vertical content alignment: Gives control over the vertical positioning of all the content. One of three possibilities is to be chosen: Top, Center or Bottom.
Add block: All the blocks compile information about the product. Most of them don't have additional settings for customization.
Show size guide: That setting enables or disables the 'Size Chart' button right next to the variants.
The user can change the preview product by clicking the Change button on the top left corner of the page.
