Adding a section
The section is static on a product page template, it was added initially and cannot be removed.
Section settings
Media
Enable zoom – the setting allows you to enable the Zoom function that appears when you click on the image;Show arrows on mobile – the setting is responsible for whether the slider arrows will be shown in the mobile version;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.
Thumbnails position – the setting allows you to select the location for the thumbnails, only works if the media layout is a carousel. Has several options: left, bottom;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”.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
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;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;Enable sticky add to cart – the setting allows you to show a sticky add to cart when the main add to cart is not visible.
Size guide
Allows you to show a size-guide button. The content for the size guide can be unique for each product based on the metafields.
Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;Button placement – the setting is responsible for selecting a place where you want to show the size guide button: “Under product options”, “Drawer” Button label – the text of the size guide button;Button icon – the setting allows you to set the icon of the size guide button;Drawer heading – the setting allows you to set the title of the size guide popup;General tab label – the setting allows you to set the text for the size guide general tab;
Model tab label – the setting allows you to set 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. The 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:
- Create product metafield with Name: “Size guide model image”, Namespace and key:
custom.size_guide_model_image. The content type must be a file (images only).
- Create product metafield with Name: “Size guide model info”, Namespace and key:
custom.size_guide_model_info. The content type must be Multi-line text.
- 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.
- 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
UI button color – the setting allows you to set the UI button’s color. Цill also be used for shadow color;UI button background color – the setting allows you to set the UI button’s background color;UI buttom border color – the setting allows you to set the UI button’s border color.
Layout
Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;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.
Blocks settings
Block Badges
The block has no settings, it displays product tags that are added in the product admin panel.
- 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;
- Colors for modifiers are configured in the theme settings
Customizer → Theme settings → Product → Labels.
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
Layout settings allow you to select offsets of the section.
Block Vendor and SKU
Show SKU – the setting allows you to show SKU of the product;SKU text – the setting allows you to set the text of the SKU. You need to use an {SKU} in the text field, which will be replaced on the product SKU;Show vendor – the setting allows you to show a product vendor;Make vendor link to collection – the setting allows you to wrap a vendor into to link.
Layout settings allow you to select offsets of the section.
Block Title
The block has no settings, it displays the title of the product, which is added to the product admin panel.
Layout settings allow you to select offsets of the section.
Block Text
The block displays the text that is added to the setting text.
Block Description
The block has no settings. The block displays the product description, which is added to the product admin panel.
Layout settings allow you to select offsets of the section.
Block Countdown timer
General
Text – the setting allows you to set the text before the countdown timer;Icon – the setting allows you to set the image before the countdown timer. (Recommended size 48×48).
Colors
Text – the setting allows you to set the text before the countdown timer color;Timer text – the setting allows you to set the timer cells’ text color;Timer background – the setting allows you to set the timer cells’ background color.
Layout settings allow you to select offsets of the section.
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:
- 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.
- 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.
- Open “Metafields” settings (Admin/Settings/Custom data)) and click “Products”
- Click “Add definition”
- In the name field, write something Variation value*.* Select the Single-line-text **metafield type, and make sure that “One value” is checked:
- 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:
- 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;
- 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).
Block Options
Variant picker – the setting allows you to 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 always be a button. You can select “Buttons” or “Dropdown”;
Color swatch type – the setting allows you to choose the type of color swatch. Can be: “Small square”, “Big square”, “Square with label”;Enable color swatch preview – the setting allows you to show a preview image of the swatch;Enable color swatch max height – the setting allows you to add a container with a scrollbar to the swatches. You can use this feature when you have many swatches.
Layout settings allow you to select offsets of the section.
Block Quantity
Layout settings allow you to select offsets of the section.
Block Price
The block has no settings, 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.
- In this block, a message will be displayed stating that taxes are included in the price;
- In this block, the installment purchase form will be displayed.
Layout settings allow you to select offsets of the section.
Block Add to cart
Button style – the setting allows you to add to cart button style;Button ‘Buy it now’ button – the setting allows you to set the ‘Buy it now’ button style;Show additional payment buttons – the setting allows you to add the “Buy it now” buttons;Show recipient information form for gift cards – the setting allows customers to send gift cards on a scheduled date along with a personal message (works only on a gift product).
Layout settings allow you to select offsets of the section.
Block Pickup availability
The block has no settings, it reflects the addresses where the product is available for pickup.
Layout settings allow you to select offsets of the section.
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.
Custom drawers
Page – the setting allows you to select a page to show its content in the drawer;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.
Heading – the setting allows you to set the heading for the block.
Layout settings allow you to select offsets of the section.
Block Sales point
With this block, you can add simple text content with an icon.
You can add a simple text block with an icon.
Icon image – the setting allows you to set an icon for the message;Text – the setting allows you to set the text of the block.
Layout settings allow you to select offsets of the section.
Block Inventory status
With this block, you can show a message about product variant 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.
Low stock text – the setting allows you to set the text that appears when variant inventory quantity is less or equal “Low stock threshold” value;Low stock icon – the setting allows you to set the icon of the “Low stock text”;High stock text – the setting allows you to set the text that appears when variant inventory quantity is more than the “Low stock threshold” value;High stock icon – the setting allows you to set the icon of the “High stock text”;Low stock threshold – the 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.
Colors
The color settings allows you to set the color for the inventory status.
Layout settings allow you to select offsets of the section.
Block Upsell product
Add a block to show the “Add upsell product” button in the product section. This block doesn’t have any settings. You can learn more about the “Upsell product button” in the “Upsell product” section.
Layout settings allow you to select offsets of the section.
Block Notify me
Button settings
Button label – the setting allows you to set the text for the button. Required field;Button icon – the setting allows you to set the icon for the button.
Form settings
Heading – the setting allows you to set the popup title text field. Required field;Email label – the setting allows you to set the label for the input. Required field;Button label – the setting allows you to set the label for the submit button. Required field;Button style – the setting allows you to select the style of the submit button;Success message – the setting allows you to set a message that the form was sent successfully. Required field.
Layout settings allow you to select offsets of the section.
Translations settings:
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.
Notify me logic:
- The “Notify me” button is displayed when the product is “Sold out”;
- When clicking on the “Notify me” 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 Ask a question
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.
Button settings
Button label – the setting allows you to set the text for the button. Required field;Button icon – the setting allows you to set the icon for the button.
Form settings
Heading – the setting allows you to set the heading for the popup form;Email label – the setting allows you to set the label for the email field. Required field;Name label – the setting allows you to set the label for the name field. Required field;Phone label – the setting allows you to set the label for the phone field. Leave blank to hide;Product URL label – the setting allows you to set the label for the product URL field. Required field;Message label – the setting allows you to set the label for the message field;Success message – the setting allows you to set the text of the success message after the form is submitted;Submit button label – the setting allows you to set the text for the submit button;Button style – the setting allows you to select the style of the submit button.
Layout settings allow you to select offsets of the section.
Block Custom field
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
Field label – the setting is responsible for the label text for the input;Required text – the setting is responsible for the label text for the checkbox.
Layout settings allow you to select offsets of the section.
Custom field 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 field 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 Socials
With this block, you can allow customers to share your product page.
Show Facebook – the setting allows you to show a Facebook social share link;Show X (Twitter) – the setting allows you to show an X(Twitter) social share link;Show Pinterest – the setting allows you to show a Pinterest social share link.
Layout settings allow you to select offsets of the section.
Block Benefits
With this block, you can add three blocks with some short information about your services, guarantees, or something like that.
You can add max 2 blocks of this type and 3 “Benefit” items per block.
Icon – the setting allows you to set the icon of the benefit item;Heading – the setting allows you to set the title of the benefit item;Link label – the setting allows you to set the link text of the benefit item;Link url – the setting allows you to set the link URL of the benefit item;
Layout settings allow you to select offsets of the section.
Block Option accuracy
Heading – the setting allows you to set the title of the option accuracy block;Active state – the setting allows you to set the number of active items. You can set from 1 to 6;Point 1 – Point 3 – the settings allows you to set the heading of the point.
Layout settings allow you to select offsets of the section.
Block Progress range
In the block you can set items from 1 to 4
Show – the setting allows you to show or hide the item;Heading – the setting allows you to set the heading of the item;Value – the settings allows you to set the value of the item. You can set it from 0% to 100%.
Layout settings allow you to select offsets of the section.
Block Discount
Heading – the setting allows you to set the heading of the discount block;Text – the setting allows you to set the text of the discount block;Discount code – the setting allows you to set the discount code, which can be copied.
Layout settings allow you to select offsets of the section.
Block @app
The block allows you to connect applications, such as Reviews, etc.
Block Custom liquid
Custom liquid – the setting allows you to add your liquid code.
Layout settings allow you to select offsets of the section.
You can learn more about liquid here – https://shopify.dev/api/liquid.
Additional information
- To select complementary products, add the Search & Discovery app (Shopify app). Learn more
