Product template

Adding a section

The section is static on a product page template, it was added initially and cannot be removed.

Section settings

Media

1. Enable zoom - the setting allows you to enable the Zoom function that appears when you click on the image;

2. Show arrows on mobile - the setting is responsible for whether the slider arrows will be shown in the mobile version;

3. Media layout - the setting allows you to choose the appearance of the product image gallery:

   • Carousel - horizontal slider;

   

   • Stacked - vertically stacked images one below the other;

   

   • Stacked 2 columns - vertically stacked images, two images in one row below the other.

   

• Stacked 2 columns with big image - vertically stacked images, one big image and 4 small ones, then repeat.

⚠️ Only for Product layout: Two columns. For a Three Columns value, the media will always be a Carousel

1. Thumbnails position - setting allows you to select the location for the thumbnails, only works if the media layout is a carousel. Has two options: left and bottom;

2. Media height - the setting allows you to select the size of the image. Has several options: Full size, Square, Fit to screen. Note: Fit to screen” on the mobile will be the same as “Full size”;

3. Make smooth scroll for stacked gallery - in the Stacked, Stacked 2 columns, Stacked 2 columns with big image gallery mode, it has Thumbnails on the left, clicking on which will scroll to the desired image. This parameter will determine whether the movement will be instantaneous or smooth.

General

1. Layout - setting is responsible for the structure of the template:

   • Two columns - setting divides the template into 2 columns, with media on the left and blocks on the right;

   

   • Three columns - setting divides the template into 3 columns, with blocks on the left and right and media in the middle;

   
2. Show message of taxes included - if taxes are included in the price of the product in the store, then this parameter will control the visibility of the corresponding message;

3. Show pay installments - if the store has the right to sell by installments and this feature is enabled in the store settings, then this parameter will control the visibility of the installment block;

4. Enable sticky add to cart - shows sticky add to cart when the main add to cart is not visible.

Size guide

Allow customers to view a size-guide button. The content for the size guide can be unique for each product based on the metafields.

1. Show size guide - the setting is responsible for showing/hiding the popup and the button for opening the popup;

2. Button label - popup button text;

3. Button icon - the icon of the size guide button;

4. Popup heading - the title of the size guide popup;

5. General tab label - the text for size guide general tab;

6. Model tab label - the text for the size guide model tab.

To show the size guide:

• Create product metafield with Name: “Size guide page”, Namespace and key: size_guide.page. Content type must be Page;

• Create a page with content for a size guide (you can select a unique page with a size guide for every product. For shorts, skirts, etc);

• Add a page in the product meta field (page content must not be empty);

In the Size guide popup you can add information about the product model information:

Follow the steps:

1. Create product metafield with Name: “Size guide model image”, Namespace and key: custom.size_guide_model_image. Content type must be a file (images only);

2. Create product metafield with Name: “Size guide model info”, Namespace and key: custom.size_guide_model_info. Content type must be Multi-line text;

3. Go to the product in the admin and add values to these metafields. You can set both or one of these fields to see tabs in the size guide popup;

4. Now when you open the Size guide popup on the product you will see tabs with the default size guide and size guide for the product model.

Colors

1. UI button color - the setting allows you to set the UI button's color. Will also be used for shadow color;

2. UI button background color - the setting allows you to set the UI button's background color;

3. UI buttom border color - the setting allows you to set the UI button’s border color.

Layout

1. Container width - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

Blocks settings

Block Badges

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

The block displays tags added to the product according to the template - label__%tag%:modifer:

• label__ - tag prefix by which tags are selected for output;

• %tag% - display tag;

• :modifer - color modifier;

The modifier can have 2 values: primary and secondary or completely absent;

For example, if you want to add two labels: “Sale” and “Top” with primary and secondary styles you need to add these tags for the product:

• label__Top:secondary

• label__Sale:primary

HINT: you can also add an icon to the your labels.

To do this you need:

1. Copy the name of the label from the admin product page without color identificator (”:primary”, “:secondary”). For example, if your label is “label__top:secondary”, just a copy “label__top”;

2. Prepare an image file with the name in next format: [label name].png . Where [label name] is a name of your label that you copied in the previous step. “PNG” format is important. So your file name must be a “label__top.png”. If you have a product tag with few words, like a “label__Top sale:secondary”, you need replace a white space with a “-” symbol. So a file name for the “label__Top sale:secondary” tag will be “label__Top-sale.png”. The size of the image must be 40x40 pixels;

3. Upload an image in the admin panel “Content / Files”.

Block Badge images

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

To show the badge images:

• Create product metafield with Name: “Badge images”, Namespace and key: custom.badge_images. Content type must be File as List;

• Add badge images to the product:

Block Vendor and SKU

General

• Show SKU - the setting that allows to show SKU of the product;

• SKU text - the text of the SKU field. You need to include the “{SKU}” in the text field, which will be replaced with the product’s SKU number;

• Show vendor - the setting that allows you to show the product’s vendor;

• Make vendor link to collection - the setting that allows to wrap a vendor into a link.

Layout

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Title

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Description

• Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

• Desktop offset top - the top indent of the section on the desktop;

• Desktop offset bottom - the bottom indent of the section on the desktop;

• Mobile offset top - the top indent of the section on the mobile;

• Mobile offset bottom - the bottom indent of the section on the mobile.

Block Sale Timer

General

1. Text - the text before the countdown timer;

2. Icon - the image before the countdown timer. (Recommended size 48x48 px).

Colors

1. Text - the text before the countdown timer color;

2. Timer text - the timer cells’ text color;

3. Timer background - the timer cells’ background color.

Layout

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

To show the countdown timer:

• Create product metafield with Name: “Promo time”, Namespace and key: custom.promo_timer_date. Content type must be Date and time;

• Add promo time to the product

Block Product combination

In Shopify, you can add variants to create different options for the product. Product variants are very useful, but they can be too limited if you want to create vastly different pages for each variant.

For instance, you may want to create products where colors of the product must be a linked products with each other like products, not a color variant.

If you select a color variation (on the bottom image), you are redirected to a different product page. The image of the swatch - is a product featured (main) image.

INFO: While this feature allows you to emulate variations on a given product page, internally, each product will still be an individual product. Each variation will appear as an individual product on the collection and search pages. Showing swatches in collection pages won't be possible, either.

To add product combination, please follow the instructions below:

1. Create one product for each variation in your Shopify admin. If you want to create one product page per color, create one product for every color variation.

2. You will now need to create two product metafields: one for the actual value for the option (for instance, "Red," "Blue,"...). And one metafield for the list of products to show.

3. Open “Metafields” settings (Admin/Settings/Custom data)) and click “Products”

   
4. Click “Add definition”

   
5. In the name field, write something Variation value. Select the Single-line-text metafield type, and make sure that "One value" is checked:

   
6. Click "Add definition" again to create a second product metafield. In the name field, write Variation products, select "Product reference" as metafield type, and select "List of products". It should look like this:

   
7. Once the meta fields are created, you need to add the “Product combination” block to the “Product template” section.

   

   

   Option name - text label for the product variations. If you create different products grouped by colors, you can set “Color” value;

   

   Option value metafield - in this setting you need add a dynamic source from your product metafield “Variation value” that you added in the 5 step;

   

   Products - in this setting you need add a dynamic source from your product metafield “Variation products” that you added in the 6 step;

8. You need filling in the information for all your products to create the link between them. To do that, in your Shopify admin, open the first product you want to link and scroll down to the "Metafields" section:

   

   For "Variation value," enter the option value for the variation (if you want to create variations based on the color, then the variation value should hold the actual color value for this product, such as "Red," "Blue," "Green" etc). For the "Variation products" metafields, select all the product variations that should appear in this product (make sure to include the product itself as well).

   Finally, repeat the same process for every variation product by adjusting the variation value for each product (the "Variation products" metafields, on the other hand, should contain the same list of products for every product within a group).

   Layout

   1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

   2. Desktop offset top - the top indent of the section on the desktop;

   3. Desktop offset bottom - the bottom indent of the section on the desktop;

   4. Mobile offset top - the top indent of the section on the mobile;

   5. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Options

1. Variant picker - select a view of variant options type. Note: if you have enabled a color swatch option then the option that is related to color swatch will be always like a button. You can select “Buttons” or “Dropdown”.

Layout

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Quantity

Layout

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Price

It displays the price of the product or the selected option. Also outputs the unit cost if the product has a unit cost instead of a quantity cost.

1. In this block, a message will be displayed stating that taxes are included in the price;

2. In this block, the installment purchase form will be displayed.

Layout

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Desktop offset top - the top indent of the section on the desktop;

3. Desktop offset bottom - the bottom indent of the section on the desktop;

4. Mobile offset top - the top indent of the section on the mobile;

5. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Add to cart

General

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Button style - add to cart button style;

3. Button 'Buy it now' style - 'Buy it now' button style;

4. Show additional payment buttons - add "Buy it now" buttons;

5. Show recipient information form for gift cards - allows customers to send gift cards on a scheduled date along with a personal message (works only on a gift product).

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Pickup availability

The block has no settings, it reflects the addresses where the product is available for pickup.

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Drawers

Displays up to 3 additional buttons with a popup:

• Description - the setting allows you to output the product description;

• Custom drawer 1 - the setting allows you to choose any page to show its content in the drawer;

• Custom drawer 2 - the setting allows you to choose any page to show its content in drawer 2.

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns.

Product description

1. Show description - the setting allows you to show the product description button;

2. Button label - the setting allows you to set the button label for the drawer toggler;

3. Drawer heading - the setting allows you to set the heading for the drawer.

Custom drawers

1. Page - the setting allows you to select a page to show its content in the drawer;

2. Button label - the setting allows you to set the button label for the drawer toggler.

Layout settings allow you to select offsets of the section.

Block Complementary products

With this block, you can show complementary products of the current product. To configure upsell products you can use the “Search & Discovery” APP.

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Heading - setting allows you to set heading for the block.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Highlight Point

With this block, you can add simple text content with an icon.

You can add a simple text block with an icon.

1. Block column position - specifies the column in which the block is located when section setting Layout in value Three column;

2. Icon image - the setting allows you to set an icon for the message;

3. Text - the text of the block.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Inventory status

With this block, you can show a message about product variant’s inventory status.

You can help customers detect which product variant has a low/high stock inventory.

If a variant is not available - the block will be hidden.

1. Low stock text - text that appears when variant inventory quantity is less or equal ”Low stock threshold” value;

2. High stock text - text that appears when variant inventory quantity is more than the “Low stock threshold” value;

3. Low stock threshold - a setting that allows you to select the minimum number of variant inventory quantities to show a “Low stock text” message. If the variant inventory quantity is more than the value of the setting, then “High stock text” will appear;

4. Show inventory count - setting shows the number of products

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Colors

1. Text color - setting allows you to change the text color.

2. Low stock color - setting allows you to set a color for low stock status.

3. High stock color - setting allows you to set a color for high stock status.

4. Show background - setting allows you to show background color.

5. Background color - setting allows you to choose the background color.

6. Background opacity - setting allows you to change the transparency of the background.

Block Gift product

Add a block to show the “Add gift box” button in the product section. This block doesn’t have any settings. You can learn more about the “Gift wrap button” in the “Gift wrap product” section.

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Stock Alert

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns.

Button settings

1. Button label - the text for the button. Required field;

2. Button icon - the icon for the button.

Form settings

1. Heading - the popup title text field. Required field;

2. Email label - the label for the input. Required field;

3. Button label - the label for the submit button. Required field;

4. Button style - style of the submit button;

5. Success message - the message that the form was sent successfully. Required field.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Translations settings:

1. Product notify me message - the message that will be sent to the email when the user submits the form. Using "{{ product_title }}" in the message allows you to replace it with the product title Required field.

“Stock Alert“ logic:

• The "Stock Alert" button is displayed when the product is "Sold out";

• When clicking on the "Stock Alert" button, a popup with a form will be displayed;

• The user can enter the "Email" form;

• The form has two hidden fields. Message - contains the message that is specified in the translations in the "Product notify me message" field. ProductURL - contains a link to the variant of the current, selected "Sold out" product;

• If the form is sent successfully, the email will be sent and a "Success message" will be displayed;

• If the form is sent unsuccessfully, an "Error message" will be shown.

Block Question Form

With this block, you can add a button to the product form that triggers a popup with the Shopify contact form (but with some additional fields).

That allows customers to send emails to you with questions about the current product. The field with the product URL is filled automatically based on the product and his selected variant.

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns.

Button settings

1. Button label - the text for the button. Required field;

2. Button icon - the icon for the button.

Form settings

1. Heading - the heading for popup form;

2. Email label - the label for the email field. Required field;

3. Name label - the label for the name field. Required field;

4. Phone label - the label for the phone field. Leave blank to hide;

5. Product URL label - the label for the product URL field. Required field;

6. Message label - the label for the message field;

7. Success message - the text of the success message after the form is submitted;

8. Submit button label - the text for the submit button;

9. Button style - style of the submit button.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Custom Text Box

With this block, you can display a text field (input type='text'), which will represent the line_item property of the product. When a product is added to a cart with a filled field, the value of this field will be added to the cart, checkout, and order.

Settings

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Field label - the setting is responsible for the label text for the input;

3. Required text - the setting is responsible for the label text for the checkbox.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Custom Text Box logic:

If the Required text is not filled in, only the text input will be displayed. In this case, if the field is filled - the user information will be added to the order.

If Required text is filled in, a checkbox will be displayed under the Custom Text Box, with a message from that field. If the checkbox is not clicked OR the Custom field is empty, the product cannot be added to the cart, and the corresponding error is displayed.

Block Share

With this block, you can allow customers to share your product page.

1. Block column position - specifies the column in which the block is located when the section setting Layout in value Three columns;

2. Show Facebook - show a Facebook social share link;

3. Show X (Twitter) - show a X(Twitter) social share link;

4. Show Pinterest - show a Pinterest social share link.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block Benefits

With this block, you can add three blocks with some short information about your services, guarantees, or something like that.

1. Block column position - specifies the column in which the block is located when section setting Layout in value Three column.

Benefits

You can add max 2 blocks of this type and 3 “Benefit” items per block. They have the same settings:

• Icon - the icon of the benefit item;

• Heading - the title of the benefit item;

• Link label - the link text of the benefit item;

• Link url - the link URL of the benefit item.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Block @app

The block allows you to connect applications, such as Reviews, etc.

Show block on the third column when section setting Layout in value Three column.

Block Custom liquid

1. Block column position - specifies the column in which the block is located when section setting Layout in value Three column;

2. Custom liquid - setting allows you to add your liquid code.

You can learn more about liquid here - https://shopify.dev/api/liquid.

Layout

1. Desktop offset top - the top indent of the section on the desktop;

2. Desktop offset bottom - the bottom indent of the section on the desktop;

3. Mobile offset top - the top indent of the section on the mobile;

4. Mobile offset bottom - the bottom indent of the section on the mobile.

Additional information

1. To select complementary products, add the Search & Discovery app (Shopify app). Learn more