Adding a section
The section is static on a product page template, it was added initially and cannot be removed.
Section settings
-
Enable zoom – the setting allows you to enable the Zoom function that appears when you click on the image;
-
Media layout – the setting allows you to choose the appearance of the product image gallery (Carousel, Stacked, Stacked 2 columns)
-
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”;
-
Image object fit – the setting allows you to select object fit variation for main media slider;
-
Enable masonry layout – this feature eliminates vertical gaps between images of different aspect ratios by packing them into a dense, staggered grid. This setting applies to Desktop only. It requires Media layout to be set to “Stacked 2 columns” and Media height to “Full size” to function correctly;
-
Enable media scroll for stacked layout – the setting allows you to enable scroll to variant image when changing product options for stacked layout.
General
-
Show messsage 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;
-
Media decor image – the setting allows you to set decor image for the section;
-
Enable sticky add to cart – the setting allows you to show sticky add to cart when the main add to cart is not visible.
Size guide
-
Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;
-
Button label – the settings allows you to set a size guide button label;
-
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 size guide general tab;
Model tab label – the setting allows you to setthe text for size guide mobel 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:
-
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.
Product complementary
-
Enable – enable product complementary block;
-
Heading – the setting allows you to set a title for the block.
Tabs content
This settings allows you to show additional information under the main product section in the tabs.
-
Tab product description heading – the setting allows you to set title for the description tab panel;
-
Tab 1 heading – the setting allows you to set title for the first tab panel;
-
Tab 1 content – the setting allows you to set text content for the first tab panel;
-
Tab 2 heading – the setting allows you to set title for the first tab panel;
-
Tab 2 content – the setting allows you to set text content for the first tab panel;
-
Tab 3 heading – the setting allows you to set title for the first tab panel;
-
Tab 3 content – the setting allows you to set text content for the first tab panel;
Colors
-
UI button color – the setting allows you to set the UI button’s color. Will also be used for shadow color;
-
UI button background color – the setting allows you to set the UI button’s background color;
-
UI button border color – the setting allows you to set the UI button’s border color;
-
Media background color – the setting allows you to set the media background color;
Layout
-
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 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:
-
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 “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 “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 replace 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 “Description”
-
Read more label -lLeave empty to show all product description in the block. Add some text, to add additional text section with full product description under the product section. The button will be shown if the product description has more than 20 words.
Block “Collapsed content”
Author content
-
Heading – the setting allows you to set title for the accordion;
-
Author image – the setting allows you to set the image for the author;
-
Author name label – the setting allows you to set the text for the label (“Author:”);
-
Author name – the setting allows you to set the author name;
-
Text – the setting allows you to set text content about the author;
-
Button label – the setting allows you to set text for the author link;
-
Button link – the setting allows you to set URL for the author link;
Custom content 1..3
-
Heading – the setting allows you to set title for the accordion;
-
Text – the setting allows you to set text content for the accordion;
-
Button label – the setting allows you to set text for custom link;
-
Button link – the setting allows you to set URL for the custom link;
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”;
Layout settings allow you to select offsets of the section.
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 “Price and quantity“
Enable inventory status – with this setting, you can show a message about product variant inventory status.
You can help customers detect which product variant has a low/high stock inventory.
-
Enable inventory status – with this setting, you can show a message about product variant inventory status.
-
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;
-
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;
-
Low stock icon – the setting allows you to set the icon of the “Low stock text”;
-
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.
-
Show inventory count – setting shows the number of products
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).
Block “Notify me”
Button settings
-
Button label – the setting allows you to set the text for the button. Required field;
Form settings
-
Heading – the setting allows you to set the popup title text field;
-
Email label – the setting allows you to set the label for the input;
-
Email placeholder – the setting allows you to set the placeholder for the input;
-
Button label – the setting allows you to set the label for the submit button;
-
Success message – the setting allows you to set a message that the form was sent successfully.
Layout settings allow you to select offsets of the section.
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 “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 “Custom field”
-
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.
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 “Custom liquid”
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.
-
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.
