To show colored background gradient and ellipse on the active slide image, you need to create a new product metafield:
Name – Main background color;
Namespace and key: custom.main_background_color
Go to the product page in the admin panel and select a color:
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;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;
Media height – the setting allows you to select the size of the image. Has several options: Full size, Square;Image object fit – the setting allows you to select object fit variation for main media slider;Enable media scroll for stacked layout – the setting allows you to enable scroll to variant image when changing product options for the stacked layout.Enable sticky scrollbar – the setting allows you to enable the scroll bar to be fixed in the product area (works only for desktop).Enable blurred background for the sticky scrollbar – the setting allows you to enable background blur for the sticky scroll bar.Decor image first – the setting allows you to show a decor image;
Decor image second – the setting allows you to show a decor image;
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;
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 icon – the setting allows you to set the icon of the size guide button;Popup 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. 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. 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. 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 – the setting allows you to display complementary products;Heading – the setting allows you to set title for the complementary block;
Colors
Enable color scheme inheritance – the setting allows you to enable or disable color scheme inheritance;Color scheme – the setting allows you to select a color scheme for the section (works only when “Enable color scheme inheritance” is disabled);UI button color – the setting allows you to set the UI button’s color (zoom button, video, 3d-model play buttons)UI button background color – the setting allows you to set the UI button’s background color (zoom button, video, 3d-model play buttons);UI buttom border color – the setting allows you to set the UI button’s border color (zoom button, video, 3d-model play buttons);
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.
Blocks settings
Block Badges
- 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 in 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 a link;
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 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
Read more label – Leave 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.
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;
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 Options
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”;
Buttons:
Dropdown:
Color swatch type – the setting allows you to choose the type of color swatch. Can be: “Rectangle”, “Square”;
Layout settings allow you to select offsets of the section.
Block Price and quantity
This block show product price and quantity. 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
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).
Color settings allows you to select buttons colors.
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.
Block Drawers
Displays up to 3 additional buttons with a popup:
Custom drawer 1 – the settings allows you to add any text content to show its content in the drawer;Custom drawer 2 – the settings allows you to choose any page to show its content in drawer;Custom drawer 3 – the settings allows you to choose any page to show its content in drawer;Custom drawer 4 – the settings allows you to choose any page to show its content in drawer;
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;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 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 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;Success message – the setting allows you to set a message that the form was sent successfully. Required field.
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 its selected variant.
Button settings
Button label – the text for the button. Required field;Button icon – the icon for the button.
Form settings
Heading – the setting allows you to set the heading for 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;
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.
Layout
Block column position – specifies the column in which the block is located when the section setting Layout in value Three columnsDesktop 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.
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 – show a Facebook social share link;Show X (Twitter) – show a X(Twitter) social share link;Show Pinterest – show a Pinterest social share link.
Layout settings allow you to select offsets of the section.
Block Gift wrap product
You can select a product to be added to your cart after clicking on Add gift box button. This feature can be useful when you want to allow the buyer to buy additionally, for example, a gift box, a box, etc.
The gift button will appear if the selected Product is available.
Settings
Product – select a product to be added to your cart after clicking on “Add gift box” button;Button label – text of the button;Button icon – an icon of the button. If not set, the icon from the theme files will be used.
Block @app
The block allows you to connect applications, such as Reviews, etc.
Block Custom liquid
Custom liquid – 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
