This settings block is intended for general Typography settings on the site.
In order to get to the Typography settings block, you need to go to Customizer → Theme Settings → Typography.
Base font – font picker for plain text throughout the store;Heading font – font picker for headings throughout the store;Base font size – plain text size;Heading font size – heading text size.This settings block is intended for general Colors settings on the site.
In order to get to the Colors settings block, you need to go to Customizer → Theme Settings → Colors.
Primary – base text;Secondary – additional text color;Headings – color for headings;Link – color for links in RTE content.
Page – page background color;
Primary – color for primary borders;Secondary – color for secondary borders;Thirdly – color for third borders.
Attention – auxiliary color: attention, error, etc.;Success – auxiliary color – success.
Background – overlay background color.
Text – main button text color;Background – main button background color;Border – main button border color;Text (hover) – button text color on hover;Background (hover) – background color of the main button on hover;Border (hover) – main button border color on hover.
Text – secondary button text color;Background – secondary button background color;Border – secondary button border color;Text (hover) – secondary button text color on hover;Background (hover) – secondary button background color on hover;Border (hover) – secondary button border color on hover.
Text – play button text color;Background – play button background color;Text (hover) – play button text color on hover;Background (hover) – play button background color on hover.
Icon – media button icon color;Background – media button background color;Border – media button border color;Icon (hover) – media button icon color on hover;Background (hover) – media button background color on hover;Border (hover) – media button border color on hover.
Circle – color circle loader;Item – the color of the animated loader element;Overlay – overlay color when adding loader.
Thumb – scrollbar thumb color;Track – scrollbar track color;Thumb opacity – transparency of the scrollbar thumb as a percentage of black;Track opacity – transparency of the scrollbar track as a percentage of black.
Background – background color of slider arrow;Icon – icon color of slider arrow;Background (hover) – background color of slider arrow on hover;Icon (hover) – background color of slider arrow on hover.This settings block is intended for general Favicon settings on the site.
In order to get to the Favicon settings block, you need to go to Customizer → Theme Settings → Favicon.
Favicon image – the setting is responsible for the store icon that is displayed in the browser tab.This settings block is intended for general Layout settings on the site.
In order to get to the Layout settings block, you need to go to Customizer → Theme Settings → Layout.
Container width – the setting allows you to select the width of the container for the sections, where you can make the section full size.Video guide: How to set up Cart Page and Cart Drawer.
This settings block is intended for general Cart settings on the site.
In order to get to the Cart settings block, you need to go to Customizer → Theme Settings → Cart.
Cart type – the setting is responsible for the type of cart. It has several values: drawer, page;Show product vendor – the setting is responsible for showing/hiding the product vendor;Show cart discounts – the setting is responsible for showing/hiding cart discount form;Show cart notes – the setting is responsible for showing/hiding cart notes;Show tax and shipping message – the setting is responsible for showing/hiding the tax and shipping message;Show dynamic checkout buttons – the setting is responsible for showing/hiding dynamic checkout buttons;Show payment types – the setting is responsible for showing/hiding payment types;Show shipping rates calculator – enable the shipping rates calculator in the cart drawer and cart page. if you have multiple currencies in your store – disable this feature. The shipping calculator does not support the store with multiple currencies;
Show compare-at-price in Cart – the option allows you to display compare-at-price in Cart.Checkout button label – label for the Checkout button;Terms and conditions text – the setting allows you to specify the Terms and Conditions text.
Show cart notification – the setting is responsible for showing/hiding the popup when adding to the cart.
Empty cart heading – message displayed when the cart is empty;Show continue shopping link – the setting is responsible for showing/hiding the link;Empty cart link text – link text displayed when the page is empty;Empty cart link URL – URL of the link displayed when the page is empty (/collections/all – default).
Enable – enable minimum order amount block;Goal amount – subtotal that allows the client to go to checkout;Goal message – message to show the client if he is not eligible to go to checkout;Goal is reached message – message to show client if he is eligible to go to checkout;Text color – message to show client if he is not eligible to go to checkout color;Reached goal text color – message to show client if he is eligible to go to checkout color.Disclaimer: This feature only makes the checkout button disabled, the user still can go to checkout with a direct link.
This settings block is intended for general Product settings on the site.
In order to get to the Product settings block, you need to go to Customizer → Theme Settings → Product.
Default product image – this image will be used when the product has no image;Show unit price – the setting is responsible for displaying the Unit price. More information here – https://help.shopify.com/en/manual/intro-to-shopify/initial-setup/sell-in-germany/price-per-unit.
Enable labels – setting is responsible for whether labels will be shown on the product card. In order for the label to be displayed, a tag must be added to the product, for example, label__new the base label that will display NEW with the base color. To change the type of a label, you need to add a :type such as label__new:primary or label__new:secondary. The number of displayed labels is limited to 3, as well as a soldout label in case the product is not available;primary, secondary, base, soldout;
Enable color swatches – the setting is responsible for whether color swatches will be displayed on the product card. By default, Shopify swatches will be used. Learn more about setup swatches for product options – https://help.shopify.com/en/manual/products/details/product-category . If Shopify swatches are not added, then theme swatches will work. Color swatches depend on the Color option. If the name of the color is split, then the last word is taken and substituted into the CSS palette. There is a chance that this color will not be in the CSS palette, then it will just be a white swatch. In this case, you must add an image to Shopify files of 50*50 px size in .png format with swatch- prefix. For example, the image name for banana-yellow would be swatch-banana-yellow.png;Swatch option – the setting is intended for stores that have a different option for color swatches than color. For example, a user has a purely German store, whose color option is called – Farbe, thus the user will need to specify a name for this setting. The default value is Color. NOTE: This setting works only for the theme swatches, not for the Shopify swatches.This block of settings is intended for general Product card settings on the site.
In order to get to the Product card settings block, you need to go to Customizer→Theme Settings→Product card.
Show vendor – the setting is responsible for whether the vendor of the product will be shown;Enable quick view – the setting is responsible for whether the quick view will be enabled. Otherwise, the user will need to go to the product to see other options and add to the cart;Buttons type – a type of quick view / add to cart button (icon or text);Show currency code – the setting is responsible for whether the currency code will be shown;Show borders – the setting is responsible for whether borders will be added to the card;Border color – card border-color;Border color (hover) – card border color on hover;Object fit image – the setting is responsible for stretching the image. If Cover(default) is selected – the image will take all the space available for it, that is, it will stretch as much as possible, and if Contain – it will retain its proportions;Image width – the setting is responsible for the width of the block. If Cropped(default) is selected – the block will be limited, and if Full width – the block will be stretched across the entire width of the product card;Quick view background – adds a background for the Quick view button on the Desktop. Works if Image width is set to – full width;Text color – product card text color.
Enable image change on hover – the setting is responsible for whether the second image will be shown on hover. To add an image, you need to add the product_card.hover_image metafield, where product_card are the namespace and hover_image the field name. The Content type must be file, where you can allow both images and videos.
Label – setting allows you to set the color of the button label;Background – setting allows you to set the color of the button background color;Border – setting allows you to set the color of the button border color;Label (hover) – setting allows you to set the color of the button label on hover;Background (hover) – setting allows you to set the color of the button background color on hover;Border (hover) – setting allows you to set the color of the button border color on hover.Video guide: How to set up the Compare Products feature.
This block of settings is intended for Compare products settings on the site.
In order to get to the Compare products settings block, you need to go to Customizer → Theme Settings → Compare products.
Enable – the setting allows you to display or not display product compare buttons;Popup heading – heading of compare buttons popupCompare products feature allows users to compare up to 6 products.
This block of settings is intended for general settings of the Article card on the site.
In order to get to the Article card settings block, you need to go to Customizer → Theme Settings → Article card.
Default article image – the setting is used to add a default image if the article does not have one;Show borders – the setting is responsible for showing/hidden borders;Show blog post date – the setting is responsible for showing/hiding the publication dates of the article;Show blog post author – the setting is responsible for showing/hiding the author of the article;Show blog post tag – the setting is responsible for showing/hiding article tags;Strip title to 3 line – the setting is responsible for trimming the title of the article to 3 lines;Strip content to 3 line – the setting is responsible for trimming the content of the article to 3 lines;Show comments count – the setting is responsible for showing/hiding the number of comments;Border color – border color.
Video guide: How to set up the Quick view.
Show additional payment buttons – the setting allows you to display or not display dynamic checkout buttons;Variant picker – the setting allows you to select the type of variant selection, two options are presented: buttons or dropdown;Object fit image – setting allows you to set the value for the object-fit property of the image.
Show – if checked – the countdown timer will be shown;Text – Text before countdown timer;Icon – Image before countdown timer. (Recommended size 48×48);Text color – Text before countdown timer color;Timer text color – Timer cells text color;Timer background color – Timer cells background color.
To show the countdown timer:
custom.promo_timer_date. Content type must be Date and time;
Default product image – this image will be used when the product has no image;Show unit price – the setting is responsible for displaying the Unit price. More information here – https://help.shopify.com/en/manual/intro-to-shopify/initial-setup/sell-in-germany/price-per-unit.
Enable labels – setting is responsible for whether labels will be shown on the product card. For the label to be displayed, a tag must be added to the product, for example, label__new the base label that will display NEW with the base color. To change the type of a label, you need to add a :type such as label__new:primary or label__new:secondary. The number of displayed labels is limited to 3, as well as a soldout label in case the product is not available;primary, secondary, base, soldout;
Enable color swatches – the setting is responsible for whether color swatches will be displayed on the product card. Color swatches depend on the Color option. The name of the color is split, and the last word is taken and substituted into the CSS palette. There is a chance that this color will not be in the CSS palette, then it will just be a white swatch. In this case, you need to add an image to Shopify files of 50*50 px size in .png format with swatch- prefix. For example, the image name for banana-yellow would be swatch-banana-yellow.png;Swatch option – the setting is intended for stores that have a different option for color swatches than color. For example, a user has a purely German store, whose color option is called – Farbe, thus the user will need to specify a name for this setting. The default value is Color.price.liquid – a snippet that displays price, compare_price, and unit_price. If the card is used as a stub, the default price will be $19.99.
product – the product object from which all information about the price is pulled;price_class – a string in which you can specify a custom class;use_variant – setting responsible for what will be taken as a basis. If true, product.selected_or_first_available_variant will be used, if false, product;currency_code_enabled – setting responsible for whether a currency code will be displayed near the price, for example, USD for dollars;show_unit_price – setting responsible for whether unit_price will be shown. Used for German shops.quick-view-image.liquid – a snippet that displays the image.
image – image link.quick-view-form.liquid – a snippet that displays the form for the submitted product.
product – the product object from which all information is pulled.Quick View opens when an Event with the name – product-card:quick-view:clicked is generated. In this event, handle the product is passed.
The remaining settings (texts) are taken from the translations. Quick view:
Add to cart – setting allows you to set the text inside the “Add to cart” button;Visit product page – the setting allows you to set the text inside the “Visit product page” button;Close popup – setting allows you to set the text inside the “Close popup” button.This block of settings is intended for general Predictive search settings on the site.
In order to get to the Predictive search settings block, you need to go to Customizer → Theme Settings → Predictive search.
Enable search by articles – setting allows to include of articles in the search;Enable search by pages – setting allows to include of pages in the search.This block of settings is intended for general settings of Social media on the site.
In order to get to the Social media settings block, you need to go to Customizer → Theme Settings → Social media.
Twitter – link to the store’s Twitter account;Facebook – link to the store’s Facebook account;Pinterest -link to the store’s Pinterest account;Instagram – link to the store’s Instagram account;Tumblr – link to the store’s Tumblr account;YouTube – link to the store’s YouTube account;TikTok – link to the store’s TikTok account.
Video guide: How to set up the Cookie Bar Popup.
Enable – the setting is responsible for enabling popup;Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;Heading – setting allows you to set title text;Description – setting allows you to set description text;Button labels – setting allows you to set button text.
Background – the setting is responsible for widget background color;Text – the setting is responsible for widget text color;Button background – the setting is responsible for the button background color;Button label – the setting is responsible for button text color;Button border – the setting is responsible for button border color;Button background (hover) – the setting is responsible for the button background color on hover;Button label (hover)– the setting is responsible for button text color on hover;Button border(hover) – the setting is responsible for the button border color on hover.The cookie-bar.liquid a snippet is included in the theme.liquid file.
Video guide: How to set up the Cart Reminder Popup.
This block of settings is intended for the general settings of the Cart reminder on the site.
In order to get to the Cart reminder settings block, you need to go to Customizer → Theme Settings → Cart reminder.
Enable – the setting is responsible for enabling/disabling the popup;Cookie time – the setting is responsible for the period after which the cart reminder popup will be shown. It has several values: 10 minutes, 30 minutes, 1 hour, 8 hours, 1 day;Display frequency – the setting is responsible for the behavior of the popup. If one time is selected, in this case when interacting with the popup, it will be closed for 24 hours. If the Cookie interval is selected, the value from the Cookie time setting will be taken;Text – the setting is responsible for the text inside the popup;Color text – the setting is responsible for the text color;Color background – the setting is responsible for the popup background.Video guide: How to set up the Newsletter Popup.
This block of settings is intended for the general settings of the Newsletter popup on the site.
In order to get to the Newsletter popup settings block, you need to go to Customizer → Theme Settings → Newsletter popup.
Enable – the setting is responsible for enabling/disabling the popup;Cookie time – the setting is responsible for the period for which the popup will be hidden when it is closed. Has several values: 1 day, 1 week, 1 month, 3 months, 1 year;Heading – popup title text field;Text – text field for text content;Input placeholder – placeholder for the input;Button submit label – label for the submit button;Button close label – label for the close button;Image desktop – image picker for Desktop;Image mobile – image picker for Mobile (Desktop – default);Hide image on mobile – the setting is responsible for showing/hiding the image on mobile;Show socials – enable to show social links.Video guide: How to set up the Age Check Popup.
This block of settings is intended for general settings of the Age check popup on the site.
If the customer closes the popup – the redirect will work.
If the customer clicks on the main button – the popup will close and the customer can use a site.
In order to get to the Age check popup settings block, you need to go to Customizer → Theme Settings → Age check popup.
Enable – the setting is responsible for enabling/disabling the popup;Cookie time – the setting is responsible for the period for which the popup will be hidden when it is closed. Has several values: 1 day, 1 week, 1 month, 3 months, 1 year;Heading – popup title text field;Text – text field for text content;Button label – label for the main button;Button close label – label for the close button;Redirect link – link for redirect if the customer closes the popup. The “www.google.com” link is used by default ;Image desktop – image picker for Desktop;Image mobile – image picker for Mobile (Desktop – default);Hide image on mobile – the setting is responsible for showing/hiding the image on mobile.
Video guide: How to set up the Product Promo Popup.
Enable – the setting is responsible for enabling popup;Layout – the setting is responsible for choosing the layout. There are two settings to choose from: Text, Product;
Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;Heading – setting allows you to set title text;Product description – setting allows you to set product description quick view which opens on click;Product – setting allows you to set the product to open quick view on click.
Background – setting allows you to set the background color;Border – setting allows you to set border color;Text – setting allows you to set text color;Button background – setting allows you to set button background color;Button label – setting allows you to set button label color;Button border – setting allows you to set button border color;Button background (hover) – setting allows you to set button background color on hover;Button label (hover) – setting allows you to set button label color on hover;Button border (hover) – setting allows you to set button border color on hover.The product-promo.liquid a snippet is included in the theme.liquid file.
The remaining settings (texts) are taken from the translations. Product promo:
Button aria – message for button aria-label.Video guide: How to set up the Promotion Banner Popup.
With this section, you can show your customer’s banner at the bottom of the page with some text about your new collections, hot sales, promotions, etc.
Enable – enable popup;Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;Heading – a title of the banner;Subheading – a subtitle of the banner;Button label – a text of the button;Button link – a link to the button;Image – an image of the banner;Products – products that will appear in the popup, after clicking on the banner;Background color – setting allows you to set the background color;Text color – setting allows you to set text color;Product – setting allows you to set the product to open quick view on click;Product description – setting allows you to set product description quick view which opens on click.
Background– background color of the banner;Text – a color text of the banner;Button background – a button background color;Button text – a button text color;Button border – a button border color;Button background (hover) – a button background color on hover;Button text (hover) – a button text color on hover;Button border (hover) – a button border color on hover.If the setting “Products” is empty and the setting “Button link” is filled, clicking on the banner will open a link.
If the setting “Products” is not empty, clicking on the banner will open a popup with products.
Video guide: How to add the Gift box button.
With this feature, you can show Add gift box button on the Product template, Featured product, Cart drawer, and Cart sections.
To show Add gift box button in the above sections, you need to go settings of these sections. In the current Gift wrap product theme settings, you can select the product, text, and icon of the button.
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.
In order to get to the Gift wrap product settings block, you need to go to Customizer → Theme Settings → Gift wrap product.
Product – select a product to be added to your cart after clicking on the “Add gift box” button;Button label – text of the button;Button icon – the icon of the button. If not set – icon from theme files will be used.This settings block is intended for general Breadcrumbs settings on the site.
In order to get to the Breadcrumbs settings block, you need to go to Customizer → Theme Settings → Breadcrumbs.
Show breadcrumbs – the setting is responsible for showing/hiding breadcrumbs.This settings block is intended for general Seo settings on the site.
In order to get to the Seo settings block, you need to go to Customizer → Theme Settings → Seo.
Hide site from search engine – the setting is responsible for hiding pages from indexing by search robots.This block of settings is intended for general Checkout settings on the site.
In order to get to the Checkout settings block, you need to go to Customizer → Theme Settings → Checkout.
Background image – background image for the banner.
Custom image – picker image that will be displayed as a logo;Position – logo positioning. Has several values: left, center, and right;Logo size – choice of logo size. It has several meanings: small, medium, and large.
Background image – background image for the main part;Background color – background color for the main part;Form fields – input color. It has several meanings: white, transparent.
Background image – background image for the block with goods;Background color – background color for the block with goods.
Headings – font selection select for headings;Body – font selection select for plain text.
Accents – accent color;Buttons – buttons color;Errors – errors color.
This block of settings is intended for general Custom CSS settings on the site.
In order to get to the Custom CSS settings block, you need to go to Customizer → Theme Settings → Custom CSS.
Textarea – a text area where you can add your CSS code for customization.Gain Theme supports B2B selling of a specific minimum quantity of items.
The number of items by which the variant can be purchased, if the variant only sells in multiples of a set quantity. This field restrict customers from buying a quantity that’s not in multiples of the quantity increment.
To set quantity rules, you need to set a value of 1 or greater for both Quantity Increment and Minimum Order Quantity. The Maximum Order Quantity field is optional, and can be left blank.
If the values for Quantity Increment, Minimum Order Quantity, and Maximum Order Quantity are all blank for the same row, then the quantity rules for that product variant are removed.
The fewest number of items of the variant that a customer can purchase at the same time.
To set quantity rules, you need to set a value of 1 or greater for both Quantity Increment and Minimum Order Quantity.
To learn more about the quantity rule for B2B, check out this article from Shopify.
This is a homepage with a default template index.json
The homepage is the main store page that your customers see first. On this page, you can display any dynamic sections and build your unique store.
The only thing that limits you is the section limit – 25.
This is a collection page with a default template collection.json
This template is used by default for the collection page. You don’t need to add anything for this template to be displayed.
You can use the section “Collection template” to configure the appearance and additional settings of the page.
Video guide: How to set up the Collection Page.
This is a product page with a default template product.json
This template is used by default for the product page. You don’t need to add anything for this template to be displayed.
You can use the section “Product template” to configure the appearance and additional settings of the page.
This is a product page with default template product.pre-order.json
This template can be used to show customers that the product is available for Pre-order purchase.
INFO: The logic of purchasing a product does not change, the only difference is changing the text of the “Add to cart” button to “Pre-order”. When a customer purchases a product, thеn in the admin panel on the “Order status page” you can see an additional property “Pre-order”:
You can use the section “Product template” to configure the appearance and additional settings of the page.
You can use a block “Countdown timer” to set a timer that indicates how long the product will be available for the Pre-order or something like this.
This is a page with a default template cart.json
This template is used by default for the cart page. You don’t need to add anything for this template to be displayed.
You can use the section “Cart template” to configure the appearance and additional settings of the page.
Video guide: How to set up the Collection List section and page.
This is a page with a default template list-collections.json
This template is used by default for the collection list page. You don’t need to add anything for this template to be displayed.
You can use the section “List collections” to configure the appearance and additional settings of the page.
Video guide: How to set up the Search Page.
This is a page with a default template search.json
This template is used by default for the search page. You don’t need to add anything for this template to be displayed.
You can use the section “Search template” to configure the appearance and additional settings of the page.
Video guide: How to create the Blog and the Blog Post in your Shopify Admin Panel.
This is a blog page with a default template blog.json
This template is used by default for the blog page. You don’t need to add anything for this template to be displayed.
You can use the section “Blog template” to configure the appearance and additional settings of the page.
This is a blog post page with a default template article.json
This template is used by default for the single blog page. You don’t need to add anything for this template to be displayed.
You can use the section “Article template” to configure the appearance and additional settings.
Video guide: How to create and set up the Our Story Page.
This is a page with a unique template page.our-story.json
This template can be used to tell your users about your team. By default, the template includes a set of sections that are ideal for this.
You can use the section “Our team” to add information about your team.
Video guide: How to set up the Store Locator Page.
This is a page with a unique template page.store-locator.json
This template can be used to show customers short information about your stores, with image or Google map.
You can use the section “Store location” to add information about the stores.
Video guide: How to set up the FAQs Page.
This is a page with a unique template page.faq.json
This template can be used to show customers the answers to the frequently asked questions.
You can use the FAQ template section to add answers to frequently asked questions.
Video guide: How to create and set up the Shipping Page.
This is a page with a unique template page.shipping.json
This template can be used to show customers full information about your policies of shipping.
You can use the section “Shipping template” to customize section offsets.
Video guide: How to create and add the Contact Page.
This is a page with a unique template page.contact.json
This template is used for the Contact page to show contact information for your customers.
You can use the “Contact template” section to configure the appearance and additional settings of the page.
Video guide: How to set up the 404 (Not Found) Page.
This is a page with a unique template 404.json
This template can be used to display information for the user when they open a hidden or non-existent page.
You can use the section “404 template” to add additional information for the user.
Video guide: How to set up the Password Page.
This is a page with a unique template password.json
This template is used by default for the password page. You don’t need to add anything for this template to be displayed.
You can use “Password header”, “Password content”, “Password footer” sections to configure the appearance and additional settings of the page.
Video guide: How to create and set up the Gift Card.
This is a page with a unique template gift_card.liquid
This template is used by default for the Gift card. You don’t need to add anything for this template to be displayed.
You can use “Gift card” section to configure the appearance and additional settings of the page.
This is a page with a unique template login.json
This template is used by default for the Login page. You don’t need to add anything for this template to be displayed.
You can use the section “Login template” to configure the appearance and additional settings of the page.
This is a page with a unique template register.json
This template is used by default for the Register page. You don’t need to add anything for this template to be displayed.
You can use the section “Register template” to configure the appearance and additional settings of the page.
This is a page with a unique template activate.json
This template is used by default for the Activate account page. You don’t need to add anything for this template to be displayed.
You can use the section “Activate template” to configure the appearance and additional settings of the page.
This is a page with a unique template reset.json
This template is used by default for the Reset account page. You don’t need to add anything for this template to be displayed.
You can use the section “Reset template” to configure the appearance and additional settings of the page.
This is a page with a unique template order.json
This template is used by default for the Order page. You don’t need to add anything for this template to be displayed.
You can use the section “Order template” to configure the appearance and additional settings of the page.
This is a page with a unique template account.json
This template is used by default for the Account page. You don’t need to add anything for this template to be displayed.
You can use the section “Account template” to configure the appearance and additional settings of the page.
This is a page with a unique template addresses.json
This template is used by default for the Addresses page. You don’t need to add anything for this template to be displayed.
You can use the section “Addresses template” to configure the appearance and additional settings of the page.
Video guide: How to set up the Announcement Bar.
The section is static, it is added initially and cannot be removed. This is done so that the Announcement bar in the DOM is higher than the Header.
You can show static content or enable a slideshow if you add “Text slide” blocks to the section.
Enable autoplay – enable autoplay in the slideshow, if blocks added to the section;Autoplay speed – select an autoplay speed in the slideshow, if blocks added to the section.
Show – the setting is responsible for displaying the Announcement bar;Layout – the setting is responsible for choosing the type of display. There are two options to choose from:
Countdown timer – a countdown timer will be displayed, the settings for it are below in the Countdown timer block;Simple text – plain text will be displayed, the settings for it are below in the Simple text block;Background image – adding a background image;Background image type – Selecting the type of background image display:
Stretch – this setting will stretch the image across the width of the entire block;Repeat – this setting will make the picture repeat, the number of repetitions depends on the width of the picture;Show bottom border – the setting is responsible for adding a border below the Announcement bar;Show socials – the setting is responsible for displaying social icons;Additional menu – the setting is responsible for displaying links.
Text desktop – text content for Desktop;Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.
Video guide: How to set up Countdown Timer.
Text desktop – text content for Desktop;Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.Year – years until the end of the countdown;Month – months until the end of the countdown;Day – days until the end of the countdown;Hour – hours until the end of the countdown;Timezone – Timezone of the countdown;Button label – button label;Button link – button link.
Background – section background color;Border bottom color – the color of the bottom border section;Text – text color;Link – link color;Button label– button label color;Button background – button background color;Button border – button border color;Button cross – close button color;Button label (hover) – button label color on hover;Button background (hover) – button background color on hover;Button border (hover) – button border color on hover;Button cross (hover) – the color of the close button on hover;Social icon – the color of the social icons;Social icon (hover) – the color of the social icons on hover.Section has blocks “Text slide”.
Layout – the setting is responsible for choosing the type of display. There are two options to choose from:
Countdown timer – a countdown timer will be displayed, the settings for it are below in the Countdown timer block;Simple text – plain text will be displayed, the settings for it are below in the Simple text block;
Text desktop – text content for Desktop;Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.
Text desktop – text content for Desktop;Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.Year – years until the end of the countdown;Month – months until the end of the countdown;Day – days until the end of the countdown;Hour – hours until the end of the countdown;Timezone – Timezone of the countdown;Button label – button label;Button link – button link.announcement-bar:loaded.announcement-bar:changed.noscript mode, the Announcement bar is not displayed.
Video guide: How to set up the Header section.
The section is static, it is added initially and cannot be removed.
Type – header type, 3 options are presented:
Static
Sticky
Sticky (hide on scroll down)
Enable transparent header – setting allows you to enable a transparent header. This setting only works for the homepage. When the setting is enabled, the header will be transparent only in the top position, when hovering and scrolling the page, the header will have a background;
Show bottom border – when enabled, a border appears under the header;Show borders in mega menu – the setting is responsible for showing/hiding borders between mega menu elements;Show box shadow – when enabled, a box-shadow appears under the header;Show language selector – when enabled in the main and mobile menus, a language selector is added;Show country/region selector – the checkbox is responsible for enabling/disabling change of the country (currency). To manage, go to settings → payments.
Image – logo image picker, if not specified, the text name of the store will be displayed;Image (transparent header) – logo image picker for transparent header, if not specified, the image will be displayed. We recommend using a logo of the same size as the opaque header;Logo width – range with which you can specify the width of the logo from 20px to 250px on the Desktop. On the mobile, if there is not enough space, the logo will automatically shrink;Desktop position – the setting is responsible for the position of the logo on the Desktop, either top, left (by default) or centered.
Video guide: How to set up the Dropdown Menu and Mega Menu.
Main menu – a menu picker that will be used for both Desktop and Mobile;Type – nested menu type selector for Desktop:
both
dropdown
mega menu
Open by – submenu opening selection selector on Desktop: By hover, By click.Make 1st-level menu clickable – the setting allows you make 1st-level menu clickable if it has submenu. Only works with open on hover for desktop, if the menu item has a link.
Background – picker for header background and dropdown menus;Background mobile menu – background for mobile menu;Text – text color picker;Text (transparent header) – text color picker for the transparent header;Icon – picker color icons;Icon (transparent header) – picker color icons for the transparent header;Count text – color picker for the text of the number of items in the cart;Count text (transparent header) – color picker for the text of the number of items in the cart for the transparent header;Count background – color picker for the background of the number of items in the cart;Count background (transparent header) – color picker for the background of the number of items in the cart for the transparent header;Border – the color of the bottom border in the header and the border in the mega menu;Megamenu image text – color for the image text in the mega menu;Megamenu image overlay – overlay color picker for the first image in the mega menu.Video Guide: How to set up every Mega Menu block.
Menu handle – in this field, you must specify the handle of the first-level link to which the mega menu should be added. In handle format, all letters must be in lowercase, whitespace replaced with ‘-’, e.x: if you want a sub-menu to be Home Decor, you need to enter in handle as home-decor;Menu type – setting allows you to select the type of menu display. There are 2 types:
Tabs – in this item, the second menu level is displayed, by clicking on the items which you can select the 3rd menu level;
List – in this menu item, a menu is naturally displayed, where the second level is the title and the 3rd level is like a list under it. If the second level menu link is set to “#”, then the plain text will be displayed;
Badge text – this setting allows you to add a badge above the menu;
Badge text color – this setting allows you to set the text color of the badge;Badge background color – this setting allows you to set the color background color of the badge.
Image – the first image in the mega menu;Label – the label of the first image in the mega menu;Heading – heading the first image in the mega menu;Link – link the first image in the mega menu.Product – this setting allows you to display a product card. The product has a higher priority than the picture.
Menu handle – in this field, you must specify the handle of the first-level link to which the mega menu should be added. In handle format, all letters must be in lowercase, whitespace replaced with ‘-’, e.x: if you want a sub-menu to be Home Decor, you need to enter in handle as home-decor;Badge text – this setting allows you to add a badge above the menu;
Badge text color – this setting allows you to set the text color of the badge;Badge background color – this setting allows you to set the background color of the badge.
Heading – the setting allows you to specify a heading;Subheading – the setting allows you to specify a subheading;Short text – the setting allows you to specify a text;Button label 1 – the setting allows you to specify a label for button 1;Button link 1 – the setting allows you to specify a link for button 1;Button style 1 – the setting allows you to select a style for button 1;Button label 2 – the setting allows you to specify a label for button 2;Button link 2 – the setting allows you to specify a link for button 2;Button style 2 – the setting allows you to select a style for button 2.
Image – the setting allows you to specify the image;Show shadow – this setting is responsible for whether the shadow will be shown over the picture;Shadow color – the setting allows you to specify shadow color on the Desktop;Shadow color mobile – the setting allows you to specify the image on Mobile;
Menu handle – in this field, you must specify the handle of the first-level link to which the mega menu should be added. In handle format, all letters must be in lowercase, whitespace replaced with ‘-’, e.x: if you want a sub-menu to be Home Decor, you need to enter in handle as home-decor;Badge text – this setting allows you to add a badge above the menu;
Badge text color – this setting allows you to set the text color of the badge;Badge background color – this setting allows you to set the background color of the badge.
Image – the setting allows you to specify an image;Label – the setting allows you to specify a label;Heading – the setting allows you to specify a heading;Link – the setting allows you to specify a link;Link label – the setting allows you to specify a link label;Product – the setting allows you to specify a product. The product has a higher priority than the picture.
Menu handle – in this field, you must specify the handle of the first-level link to which the mega menu should be added. In handle format, all letters must be in lowercase, whitespace replaced with ‘-’, e.x: if you want a sub-menu to be Home Decor, you need to enter in handle as home-decor;Badge text – this setting allows you to add a badge above the menu;
Badge text color – this setting allows you to set the text color of the badge;Badge background color – this setting allows you to set the background color of the badge.header-menu.liquid – this snippet renders the menu on the Desktop.
menu – menu object;menu_type_desktop – the type of submenu to display. There are two options – dropdown and mega menu;blocks – the blocks object is passed further nested in the header-mega-menu.liquid snippet.header-mobile-menu.liquid – this snippet renders the menu on Mobile.
menu – menu object;is_show_language_selector – the condition by which the language selector is rendered.header-mega-menu.liquid – the mega menu is rendered in this snippet.
menu – menu object. The first menu level is passed, from which the rest of the nested items are displayed;blocks – the blocks object is used to display media content for a specific mega menu.language-localization-form.liquid – the snippet is used to render the language selector.
class – used to add a custom class.
Video guide: How to set up Cart Page and Cart Drawer.
The section is static on a cart page template, it was added initially and cannot be removed.
Heading – section title. The default is taken from translations;Show gift wrap button – enable show the “Add gift box” button in the Cart drawer. You can learn more about the “Gift wrap button” in the “Gift wrap product” section.
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.
Free shipping amount – the desired goal to be achieved by the user;Shipping message – a message that will be displayed near the progress bar. ${amout} will be replaced with the missing amount;Shipping congratulatory message – message to be displayed instead of the progress bar;Congratulatory icon – the icon that will be displayed to the left of the Shipping congratulatory message.
Custom liquid – setting allows you to add your own liquid code.You can learn more about liquid here – https://shopify.dev/api/liquid.
Only one block type is available for a section – @app. This block is for apps that need to be integrated into the shopping cart.
cart-empty.liquid – a snippet of an empty cart;
cart-items.liquid – the snippet contains a list of products in the cart;
lazy_load – the parameter is responsible for enabling/disabling lazy load for product images.breadcrumbs.liquid – snippet outputs breadcrumbs;
preloader.liquid – snippet renders preloader.
Video guide: How to set up Cart Drawer.
The section is static, it is added initially and cannot be deleted. The section will be added if the Drawer type is selected in the Cart global settings.
Heading – setting allows you to set the text for the section title. By default, it is taken from translations;Show items count in the cart – the setting is responsible for displaying the number of products in the cart;Show gift wrap button – enable show the “Add gift box” button in the Cart drawer. You can learn more about the “Gift wrap button” in the “Gift wrap product” section.Blocks are introduced to provide dynamic content in the cart. Blocks can also be swapped to get different combinations. Usually, this feature is not available in other themes.
Block limit – 1
The block is responsible for displaying the products in the cart. The block has no settings.
Block limit – 1
The block is responsible for displaying upsell products in the cart.
Heading – setting allows you to set the text for the block title;Products – setting allows you to select products that act as upsells. Limit – 12 products.Block limit – 1
Block is responsible for displaying the Shipping bar.
Free shipping amount – the setting allows you to set the amount of US money that the user must spend to fill the bar;Shipping message – setting allows you to set the text of the message that the user sees when the bar is not filled;Shipping congratulatory message – setting allows you to customize the text of the message that the user sees when the bar is full;Icon – setting allows you to set the image in the congratulatory message.Block limit – 1
Text – RTE field for adding text content.
Text – color for text;Background – setting the background color for the block.cart-empty.liquid – a snippet of an empty cart;cart-items.liquid – the snippet contains a list of products in the cart;
lazy_load – the setting is responsible for enabling/disabling lazy load for images.cart-footer.liquid – snippet contains buttons for payment methods, cart notes, and icons for payment methods;
payments.liquid – snippet contains icons of payment methods;
preloader.liquid – snippet renders preloader.cart-upsell.liquid – upsell block in mini cart.
products – list of products to display;heading – block heading;lazy_load – the setting is responsible for enabling/disabling lazy load for images.add to cart button, Quick View is called;
The section is static, it is added initially and cannot be removed. This is done so that the Footer in the DOM will always be the bottom section.
Video guide: How to set up the Footer Section.
Logo image – image picker for logo;Logo width – logo width;Show top border – the setting is responsible for showing/hiding the top border;Copyright text – copyright text, where %date% is a shortcut that will be replaced with the current year;Show back to top button – the setting is responsible for showing the scroll to the top button.
Show country/region selector – The checkbox is responsible for enabling/disabling the change of the country (currency). To manage, go to settings → payments.
Show language selector – The checkbox is responsible for enabling/disabling language changes. To manage, go settings → languages.
Show payment icons – the checkbox is responsible for displaying icons of payment providers. To manage, go to settings → payments.
Enable Follow on Shop – enable “Follow on Shop” which allows customers to follow your store on the Shop app. Learn more in the Shopify documentation.
Section background – background color setting;Border top color – color setting for a top border;Heading – setting text color for headings;Text – setting text color for text;Copyright text – color setting for text inside Copyright;Link – color setting for links;Link (hover) – color setting for links on hover;Socials icon – color setting for social links icon;Socials background – color setting for social links background;Socials border – color setting for social links border;Socials icon (hover) – color setting for social links icon on hover;Socials background (hover) – color setting for social links background on hover;Socials border (hover) – color setting for social links border on hover.Total block limit – 4
Block limit – 1
Heading – text field for adding a block title;Text – RTE field for adding text content;Show media links – setting allows you to show/hide links to social networks.Block limit – 3
Heading – text field to add;Menu – picker menu. Only the first level of links will be displayed.language-localization-form.liquid – the snippet is used to render the language selector.
class – used to add a custom class.country-localization-form.liquid – The snippet is used to render the country selector.
class – used to add a custom class.
Enable search by articles – setting allows you to include articles in the search;Enable search by pages – setting allows you to include pages in the search.Enable search by articles or Enable search by pages setting is enabled, then tabs appear in the search sidebar. If no results are found in any of the categories, then this tab will be disabled.
predictive-search.liquid snippet is included in the code, in the theme.liquid file.
Icon– color picker which is responsible for the color of the stars;Text– color picker which is responsible for the color of the text.
Show vendor – the setting is responsible for whether the vendor of the product will be shown;Enable quick view – the setting is responsible for whether the quick view will be enabled. Otherwise, the user will need to go to the product to see other options and add to the cart;Buttons type – a type of quick view / add to card button (icon or text);Show product rating – the setting is responsible for whether the product rating will be shown. Used native Shopify app as in Dawn theme. More information here – https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-features#featured-collection-show-product-rating. Since the rating is made globally, the color settings are moved to the general colors by a separate group;Show currency code – the setting is responsible for whether the currency code will be shown;Show borders – the setting is responsible for whether borders will be added to the card;Border color – card border color;Border color (hover) – card border color on hover;Object fit image – the setting is responsible for stretching the image. If Cover(default) is selected – the image will take all the space available for it, that is, it will stretch as much as possible, and if Contain – it will retain its proportions;Image width – the setting is responsible for the width of the block. If Cropped(default) is selected – the block will be limited, and if Full width – the block will be stretched across the entire width of the product card;Quick view background – adds a background for the Quick view button on the Desktop. Works if Image width is set to – full width;Rating background – background is added for Product rating on the Desktop. Works if the Image width setting is set to – full width;Text color – product card text color.
Enable image change on hover – the setting is responsible for whether the second image will be shown on hover. To add an image, you need to add the product_card.hover_image metafield, where product_card are the namespace and hover_image the field name. The Content type must be file, where you can allow both images and videos.
Text – setting allows you to set the color of the button text;Background – setting allows you to set the color of the button background color;Border – setting allows you to set the color of the button border color;Text (hover) – setting allows you to set the color of the button text on hover;Background (hover) – setting allows you to set the color of the button background color on hover;Border (hover) – setting allows you to set the color of the button border color on hover.
product – the product object is passed to the card;size (min-width: 768px) – transfer the size of the picture to the Desktop. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the default value will be taken – 300;tablet_size (max-width: 767px)– transfer the size of the picture to the Tablet. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value – size will be taken;mobile_ size (max-width: 480px) – transfer the size of the picture for Mobile. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value will be taken – tablet_size;is_lazy – this parameter is responsible for whether it will be enabled for images in the lazy loading card. This will be useful if the section in which the product cards are present will be located in the visible area when the page is loaded, we add a setting to the section that is responsible for disabling lazy loading, thus we will not slow down the page loading. If nothing is passed, lazy loading will be enabled by default.product-card-image.liquid – this snippet renders images for the product card.
product – used to pull the title if the image does not have alt;image – the picture itself is transmitted. It can be either a regular picture or a hover picture;size – image size defined in the main snippet. Used for Desktop;tablet_size – image size defined in the main snippet. Used for Tablet;mobile_size – image size defined in the main snippet. Used for Mobile;is_lazy – the parameter is responsible for whether the lazy load will be enabled for the image. If the lazy load was enabled, but js didn’t work for some reason, the image from <noscript> will be displayed.is_hover_image – a parameter responsible for whether a class will be added to the image that is intended for images that are shown on hover.product-card-swatches.liquid – this snippet displays color swatches.
Swatches – an object with an array of swatches.product-rating-short.liquid – the snippet displays the rating of the product. One star (svg) with product rating below.
product – is used to pull meta fields that contain product rating data.product-rating-long.liquid – the snippet displays the rating of the product. Five stars are made through the filling of elements with a product rating on the side.
product – is used to pull meta fields that contain product rating data.price.liquid – a snippet that displays price, compare_price, and unit_price. If the card is used as a stub, the default price will be $19.99.
product – the product object from which all information about the price is drawn;price_class – a string in which you can specify a custom class;use_variant – setting responsible for what will be taken as a basis. If true, product.selected_or_first_available_variant will be used, if false, product;currency_code_enabled – a setting that determines whether code currencies will be displayed near the price, for example, USD for dollars;show_unit_price – setting responsible for whether unit_price will be shown. Used for German shops.product-card:quick-view:clicked is generated. In this event, handle the product is passed.Color option. The name of the color is split, and the last word is taken and substituted into the CSS palette. There is a chance that this color will not be in the CSS palette, then it will just be a white swatch. In this case, you need to add an image to Shopify files of 1*1 px size in .png format with swatch- prefixes. For example, the image name banana-yellow would be swatch-banana-yellow.png.Farbe, thus the user will need to specify the name in the swatch option setting. The default value is Color.label__new the base label that will display NEW with the base color. To change the type of a label, you need to add a :type such as label__new:primary or label__new:secondary. The number of displayed labels is limited to 3, as well as a soldout label in case the product is not available.product_card.hover_image metafield, where product_card is the namespace, and hover_image the field name. The Content type must be file, where only one file is allowed, namely an image.
size, material, etc., then you only need to add an image to the first variant of each color.
Enable – the setting is responsible for enabling popup;Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;Heading – setting allows you to set title text;Text – setting allows you to set text content;Input placeholder – the setting allows you to set the text for the input placeholder;Button submit label – setting allows you to set the label for the submit button;Button close label – setting allows you to set the label for the close button;Image desktop – setting allows you to set the image for the desktop;Image mobile – setting allows you to set the image for mobile;Hide image on mobile – the setting allows you to hide the image for mobile.The newsletter-popup.liquid a snippet is included in the theme.liquid file.
Label;Success – message on successful subscription;Button label.
Video guide: How to set up the Collection List section and page.
In order to add a section, you need to go to Customizer → Add Section → Collection list.
Heading – heading of the section;Button link – link for the button below the section;Button label – label for the button below the section;Link aria-label – aria-label for the button below the section. This attribute allows screen readers to better convey information to people with disabilities;Text alignment – text alignment of the title and product count;Button style – style for the button below the section;Image aspect ratio – aspect ratio of the images. Can be square, portrait, or landscape;Show products count – show the product count of the collection under the title.
Make full width – if disabled – container width will be set 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.
Collection – collection;Image – image picker. Use instead of collection image. If the setting is empty and the collection image is empty then an image from the first product of the collection will be shown.
Video guide: How to set up the Cards Grid section.
In order to add a section, you need to go to Customizer → Add Section → Cards grid
Heading – heading of the section;Text – text description of the section;Cards per row – number of cards per row on desktop. You can show 2, 3, or 4 cards per row. On mobile, the display of cards will automatically change;
Center blocks on desktop – if checked, cards will be centered in the row on the desktop.
Make full width – If disabled – container width will be set 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.
Image– image for the block;Heading– the title of the block;Text – text of the block;Link – you can set a link for the block. If a link is set, then the image and heading will be a link.
Video guide: How to set up the Collection Page.
The section is static on a collection page template, it was added initially and cannot be removed.
Show collection image – the setting is responsible for displaying the image of the collection;Show collection description – the setting is responsible for displaying the description of the collection;Enable product cards indent – the setting is responsible for adding indents between product cards. On mobile, indents for the wrapper also will be added;Show color swatch in filters – if checked, the filter group with the name, that specified in the Theme settings / Product / Swatch option (“Color” by default) will be shown a checkbox like color swatch;
Show grid selector – setting allows the display of grid-view buttons. You can change the product count per row from 3 or 4 on the desktop (with a “Basic” grid layout)
Filters type – setting allows selecting view of filters: “Drawer” or “Sidebar”. Setting works only for desktop resolution. On the mobile filters will be always in the “Drawer” view;
Paginate by – the setting is responsible for displaying a certain number of cards per page when the value of the Grid view setting is With big card. The minimum quantity is 10, the maximum quantity is 50;Paginate by (basic grid) – the setting is responsible for displaying a certain number of cards per page when the value of the Grid view setting is Basic. The minimum number is 12, the maximum number is 48;Pagination type – the setting is responsible for the type of loading product cards.
Grid view – the setting is responsible for the display of the product grid. It has two meanings “Basic”, and “With big card”. Type “Basic” – 4 ordinary cards are displayed in a row in a grid. Type “With big card” – in the grid, ordinary cards are supplemented by large cards;
Make grid full width – a setting that is responsible for the width of the grid container with products. If the setting is ON – the container is stretched to fit the width of the screen. If the setting is OFF – container width will be set 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.breadcrumbs.liquid – snippet outputs breadcrumbs.product-filters-and-sort.liquid – this snippet displays filtering and sorting.
product_list – expected to pass a collection or search object.product-card.liquid – in this snippet, a product card is displayed.
product – passing the product object to the card;size – we transfer the size of the picture to the Desktop. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the default value will be taken – 300;tablet_size (max-width: 767px) – we pass the image size for Tablet. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value – size will be taken;mobile_ size (max-width: 480px) – we pass the size of the image for Mobile. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value will be taken – tablet_size;is_lazy – this parameter is responsible for whether it will be enabled for images in the lazy loading card. This will be useful if the section in which the product cards are present will be located in the visible area when the page is loaded, we add a setting to the section that is responsible for disabling lazy loading, thus we will not slow down the page loading. If nothing is passed, lazy loading will be enabled by default.Pagination;
Video guide: How to set up the Product Page.
The section is static on a product page template, it was added initially and cannot be removed.
Video guide: How to set up: Product Page Media Layout.
Enable lazy load – setting allows you to set lazy loading for product images;Enable zoom – the setting allows you to enable the Zoom function that appears when you click on the image;Show borders – the setting adds Borders inside and around the perimeter of the section;Show arrows on mobile – the setting is responsible for whether the slider arrows will be shown in the mobile version;Media layout – setting allows you to choose the appearance for 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.Thumbnails position – 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, to screen;Make smooth scroll for stacked gallery – in the Stacked , Stacked 2 columns 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.Enable media scroll for stacked layout – enables scroll to variant image when changing product options for stacked layout; 
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;Show share buttons – shows “Share” buttons;Enable sticky add to cart – shows a sticky add to cart when the main add to cart is not visible.
Border colors – the setting allows you to set the section border color;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.
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.
Video guide: How to add Badges.
The block has no settings, it displays product tags that are added in the product admin panel.
label__%tag%:modifer:
label__ – tag prefix by which tags are selected for output;%tag% – display tag;:modifer – color modifier;primary and secondary or completely absent;Customizer → Theme settings → Product → Labels.
The block has no settings, it displays the vendor of the product, which is added to the product admin panel.
The block has no settings, it displays the title of the product, which is added to the product admin panel.
The block has no settings, it displays the description of the product, which is added to the product admin panel.
Video guide: How to set up Countdown Timer.
Text – text before the countdown timer;Icon – image before the countdown timer. (Recommended size 48×48).
Text – text before the countdown timer color.Timer text – timer cells text color;Timer background – Timer cells background color.To show the countdown timer:
custom.promo_timer_date. Content type must be Date and time;
Show SKU – display the SKU of a product or variant;SKU text – You can set your text for the SKU and insert a variable into it. For example: “Art: %SKU%” will always output “Art: ” before the value.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:
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;
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).
Show labels – the setting is responsible for showing/hiding labels for options;Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;
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.Buttons
Dropdown
Size guide option name – the name of the option for which you want to display the size guide button (most often it is “Size”). If this field is empty or the option name does not exist the size guide button will appear under the options;
Size guide general tab label – label for size guide general tab;
Size guide model tab label – label for size guide model tab;
Size guide drawer title – the title for the popup, which is called by the Size guide button;Size guide button icon – button icon;Size guide button label – button label;To show the size guide:
size_guide.page. Content type must be Page;
Size guide option name choose in which option you want to see the size guide button;
If field Size guide option name is empty or the option name does not exist the size guide button will appear under the options.
In the Size guide popup you can add information about the product model information:
Follow the steps:
custom.size_guide_model_image. Content type must be file (images only).
custom.size_guide_model_info. Content type must be Multi-line text.
If one of the options is named “Color” or “Colour“, then it will be processed as a color. She will have a circle with a color on the left, which will be filled in this way:
swatch-%value%.png. For example, swatch-sky-blue.png;Sky Blue will be converted to just Blue from the CSS palette;30*30px.In the 2.4.0 update, the drawer size guide has been added to open the drawer in full screen for easy viewing of the size table.
Show label – will display the label for the quantity change widget.
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.
Button type – add to cart button style;Show additional payment buttons – adds “Buy it now” buttons;Show enabled payment types – adds a list with icons of supported payment types;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).
Video guide: How to set up the Pickup Availability for your Shopify Store.
The block has no settings, it reflects the addresses where the product is available for pickup.
Displays up to 3 additional buttons with a popup:
Description – product description;Shipping & Returns – page with the rules of delivery and return.Custom drawer – custom rich text content
Show description – shows the product description button;Button label – setting allows you to set button label for drawer toggler;Drawer heading – setting allows you to set the heading for the drawer.
Drawer content – selection of the page with the rules of delivery and return;Button label – setting allows you to set a button label for the drawer toggler.
Drawer heading – setting allows you to set the heading for the drawer.Drawer content – setting allows you to set the content for the drawer.
Video guide: How to set up the Complementary Products and Recommendations.
Heading – setting allows you to set the heading for the block.
You can add a simple text block with an icon.
Icon image – setting allows you to set an icon for the message;Text – text of the block.
With this block, you can show 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 – text that appears when variant inventory quantity is less or equal ”Low stock threshold” value;High stock text – text that appears when variant inventory quantity is more than the “Low stock threshold” value;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;
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.
Video guide: How to add the Gift box button.
Button label – text for the button. Required field;Button icon – icon for the button.
Heading – popup title text field. Required field;Email placeholder – placeholder for the input. Required field;Button label – label for the submit button. Required field;Success message – a message that the form was sent successfully. Required field.Translations settings:
Product notify me message – a 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:
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 email 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 label – text for the button. Required field;Button icon – icon for the button.
Heading – heading for popup form;Email placeholder – placeholder for the email field. Required field;Name placeholder – placeholder for the name field. Required field;Phone placeholder – placeholder for the phone field. Leave blank to hide;Product URL placeholder – placeholder for the product URL field. Required field;Success message – text of the success message after the form submit;Submit button label – text for the submit button.
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.
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.
The block allows you to connect applications, such as ReCharge, etc.
Custom liquid – setting allows you to add your liquid code.You can learn more about liquid here – https://shopify.dev/api/liquid.
Video guide: How to set up the Products Bundle.
In order to add a section, you need to go to Customizer → Add Section → Products bundle.
Heading – section heading;Subheading – section subheading;Products – the setting is responsible for products to show in the section;Button label – the setting is responsible for the button label;Disabled button label – the setting is responsible for button label when not all products are set;Button type – the setting is responsible for button style type.Show total price – the setting is responsible for showing total price above add to card button.
Product card border – the setting is responsible for border color;Checkbox – the setting is responsible for checkbox color.
Make full width – the setting is responsible for container width;Desktop offset top – top indent of the section on the desktop;Desktop offset bottom – bottom indent of the section on the desktop;Mobile offset top – top indent of the section on the mobile;Mobile offset bottom – bottom indent of the section on the mobile.
Video guide: How to set up the Search Page.
The section is static on a Search page template, it was added initially and cannot be removed.
Enable search by articles – setting allows to include articles in the search;Enable search by pages – setting allows to include pages in the search;Show color swatch in filters – if checked, the filter group with the name, specified in the Theme settings / Product / Swatch option (“Color” by default) will be shown a checkbox like color swatch;
Enable cards indent – the setting is responsible for adding indents between product cards. On mobile, indents for the wrapper also will be added;Filters type – setting allows selecting view of filters: “Drawer” or “Sidebar”. Setting works only for desktop resolution. On the mobile filters will be always in the “Drawer” view;
Paginate by – setting allows specifying the number of results in the search sidebar;Pagination type – setting allows to selection the type of pagination. Has several meanings:
Pagination – default pagination of elements;Load more – loading a group of elements on a button click;Infinite scrolling – loading elements on scroll.
Show borders – the setting is responsible for showing/hiding borders;Border color – the setting is responsible for the color of the borders.
Make grid full width – if disabled – container width will be set 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.breadcrumbs.liquid – snippet outputs breadcrumbs.product-filters-and-sort.liquid – This snippet displays filtering and sorting.
product_list – expected to pass a collection or search object.product-card.liquid – in this snippet, a product card is displayed.
product – passing the product object to the card;size – we transfer the size of the picture to the Desktop. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the default value will be taken – 300;tablet_size (max-width: 767px) – we pass the image size for Tablet. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value – size will be taken;mobile_ size (max-width: 480px) – we pass the size of the image for Mobile. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value will be taken – tablet_size;is_lazy – this parameter is responsible for whether it will be enabled for images in the lazy loading card. This will be useful if the section in which the product cards are present will be located in the visible area when the page is loaded, we add a setting to the section that is responsible for disabling lazy loading, thus we will not slow down the page loading. If nothing is passed, lazy loading will be enabled by default.article-card.liquid – the snippet displays the article card.
article – article object;layout – variable to set the size of the image.page-card.liqiud – the snippet displays the page card.
page – page object.
Video guide: How to set up the Blog page and the Blog Post page.
The section is static on a blog page template, it was added initially and cannot be removed.
Paginate by – setting allows you to select the number of articles per page. The minimum number is 6, the maximum number is 24;Pagination type – setting allows you to select the type of pagination;Load more button type – the setting is responsible for the style of the load more button;Show filter by tag – the setting is responsible for displaying the filter by tag.
Blog post – setting allows you to select an additional post. It is always displayed, even if the blog is empty;Background color – the setting allows you to set the background color for the “Featured blog post”;Border color – setting sets border color for “Featured blog post”;Text color – setting sets the text color for “Featured blog post”;Date color – setting sets Date color for “Featured blog post”;Show borders – setting enables/disables border for “Featured blog post”;Enable image lazy loading – the setting is responsible for the lazy loading of the image for the additional post;Button type – the setting is responsible for the style of the featured blog button;Button aria-label – setting allows you to set the text for the aria-label attribute. This attribute allows screen readers to better convey information to people with disabilities.
Make full width – if disabled – container width will be set 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.pagination.liquid – snippet displays pagination.
paginate – pagination object.article-card.liquid – the snippet displays the article card.
article – article object;layout – variable to set the size of the image.
Video guide: How to set up the Blog page and the Blog Post page.
The section is static on an article page template, it was added initially and cannot be removed.
Banner type – the setting is responsible for the display type of the article banner. If you select the Full width setting, then the text content will be superimposed on top of the image, and the image, in turn, will stretch to the full width of the page. If you select the Container setting, then the text content will be in front of the article’s picture and, together with the picture, will be limited to the container;
Banner text color – the setting is responsible for what the color of the banner text will be if the banner type settings are set to full width;Overlay opacity – the setting changes the transparency of the overlay with black color on the image from 0% to 100%;Show author – the setting is responsible for whether the author of the article will be displayed;Show tag – the setting is responsible for whether article tags will be shown;Show socials – the setting is responsible for showing share social buttons.
Show – the setting is responsible for showing/hiding the Related articles section;Label – text field for adding a label to the section;Heading – text field for adding a heading to the section;Show blog button – the setting is responsible for showing a button that leads to the blog page;Button style – a setting that is responsible for changing the style of the button between primary and secondary.
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.
Comment background – background color of the comment section.related-articles.liquid – the snippet is responsible for displaying the last 3 articles from the blog.
current_article_id – article id to exclude this article from suggested articles;blog – the blog object from which the proposed articles are displayed;label – block label;heading – block heading;show_back_to_blog_btn – condition for displaying the button leading to the blog page;button_style – select the style of the button leading to the blog page.article-card.liquid – the snippet is responsible for rendering the article card.
article – article object;layout – layout of the article card output.comment-form.liquid – the snippet is responsible for displaying the form for adding comments, as well as for existing comments.
socials-share.liquid – the snippet is responsible for displaying buttons for sharing.
The section is static on a regular page template, it was added initially and cannot be removed.
This section does not have any settings in the customizer. It serves to display content that is taken from the page settings.
Video guide: How to create and add the Contact Page.
The section is static on a contact page template, it was added initially and cannot be removed.
Information heading – setting allows you to set the text for the information block;Adress heading – setting allows you to set the text for the title of the block with the address;Adress text – setting allows you to set the text of the address;Phone heading – setting allows you to set the text for the title of the block with the phone;Phone text – setting allows you to set the text of the phone;Email heading – setting allows you to set the text for the header of the block with mail;Email text – setting allows you to set the text of the mail;Social heading – setting allows you to set the text for the title of the block with social networks;Show social – the setting is responsible for displaying the block with social networks;Google maps API key – setting allows you to add a Google maps API key. Learn more about how to create an API key;Map query – the setting allows you to add a query parameter that is responsible for adding a point on the map. In our case, only the place mode has been added. You can add one point to the map in many ways. Learn more about how to add a query parameter;Map url – setting allows you to set a link to the map;Map image desktop – setting allows you to set the map image for the desktop;Map image mobile – setting allows you to set the image for mobile.
Form heading – setting allows you to set the title for the form;Name placeholder – the setting allows you to set the placeholder for the Name field;Email placeholder – the setting allows you to set the placeholder for the Email field;Message placeholder – the setting allows you to set the placeholder for the Message field;Button label – setting allows you to set the text for the button.
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.breadcrumbs.liquid – snippet outputs breadcrumbs.social-links.liquid – snippet displays a list of social networks.
Map url or Map image fields are not specified in the section settings, the map will not be displayed;
Video guide: How to set up the FAQs Page.
The section is static on a faq page template, it was added initially and cannot be removed.
Heading – setting allows you to set the text for the title. If the value is not specified, the name of the page to which the template is applied is displayed.
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.The block is responsible for displaying the question-answer pair. When rendering, it is displayed as an accordion.
Heading – accordion title, question;Text – response, accordion content;Icon – icon in the accordion header.The block is designed to group question-answer pairs by category. Rendered as a header separating a group of accordions. In addition, adding blocks of this type makes it possible to build section navigation in the form of a side menu (desktop), and a fixed category bar (mobile). Clicking on a menu item scrolls to the corresponding category.
Heading – title, category name.Heading and Text fields are not specified;Heading the field is not specified.
Video guide: How to create and set up the Shipping Page.
The section is static on a shipping page template, it was added initially and cannot be removed.
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.
Video guide: How to set up the 404 (Not Found) Page.
The section is static on a 404 page template, it was added initially and cannot be removed.
Heading – setting allows you to set the text for the title;Subheading – setting allows you to set the text for the subtitle;Text – setting allows you to set text content;Button link – setting allows you to set a link for the button;Button label – setting allows you to set the label for the button;Navigation – setting allows you to select a menu from Navigation.
Video guide: How to create and set up the Gift Card.
The section is static on a Gift cart page layout, it was added initially and cannot be removed. It is not possible to add other sections on this page.
Logo – the setting allows you to specify a logo, otherwise, the name of the store will be displayed;Width – setting allows you to specify the size of the logo;Start shopping button type – sets the style of the “Start shipping” button;Print button type – sets the style of the “Print” button.
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.
Video guide: How to set up the Password Page.
The section is static on a password page layout, it was added initially and cannot be removed.
Button label – the setting allows you to set the label of the popup opening button (If not set, it is taken from translations).
Logo – the setting allows you to set the logo image (If not set, shop.name is displayed);Logo width – setting allows you to set the width of the logo (min 20px, max 250px, step 5px, default 50px).
Heading – setting allows you to set the title text of the popup;Input placeholder – the setting allows you to set the placeholder text of the popup input (if not set, it is taken from translations);Button label – setting allows you to set the label of the popup button (If not set, it is taken from translations);Bottom text – setting allows you to set the text below the form.
Section background – setting allows you to set the background color of the section;Section text – setting allows you to set the color of the section text;Popup text – setting allows you to set the color of the popup text;Popup background – setting allows you to set the popup background;Input text – setting allows you to set the input text color;Input border– setting allows you to set the border color of the popup form input;Popup button label – setting allows you to set the label color of the popup form button;Popup button background – setting allows you to set the background color of the popup form button.
Video guide: How to set up the Password Page.
The section is static on a password page layout, it was added initially and cannot be removed.
Heading – setting allows you to set the text of the section title;Text – setting allows you to set the text of the section text;Success message – the setting allows you to set the text when the form is successfully submitted (If not set, it is taken from translations);Show form – the setting allows you to show/hide the form;Input placeholder – the setting allows you to specify the placeholder text of the forms input. (If not set – taken from translations);Button aria-label – the setting allows you to set the text for the aria-label attribute of the button. This attribute allows screen readers to better convey information to people with disabilities;Background image – setting allows you to set a background image;Background image mobile – the setting allows you to set the background image on the mobile (if not set, the Background image is taken).
Overlay – setting allows you to specify an overlay;Background – setting allows you to specify the section background color;Heading – setting allows you to specify the text color for the heading;Description – setting allows you to specify the text color for the description;Input text – setting allows you to specify the text color for input;Input Border – setting allows you to set the border color for the text input.
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.
Video guide: How to set up the Password Page.
The section is static on a password page layout, it was added initially and cannot be removed.
Text – setting allows you to set the text of the section (If not set, it is taken from translations).
Text – setting allows you to set the color of the section text;Background – setting allows you to set the background color of the section;Top border – setting allows you to set the color of the section border.
The section is static on a list collection page template, it was added initially and cannot be removed.
Heading – setting allows you to set the text for the title;Text – setting allows you to set text content;Paginate by – setting allows you to determine the number of collections to display per page. The minimum number of cards is 6, the maximum number is 24.
Make full width – if disabled – container width will be set 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.collection-card.liquid – the snippet displays the collection card.
сollection – collection object.pagination.liquid – snippet displays pagination.
paginate – pagination object.
Video guide: How to set up the Featured collection (PLP example).
In order to add a section, you need to go to Customizer → Add Section → Featured collection.
Collection – setting allows you to select a collection;Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the title;Link url – setting allows you to set a custom link for the button. By default selected collection url will be used;Link label – setting allows you to set the label for the view all link;Link aria-label – setting allows you to set the aria-label for the view all link. This attribute allows screen readers to better convey information to people with disabilities;Button style – setting allows you to choose the style for the view all button;Layout – setting allows you to select the number of products that will be displayed: 5 products, 10 products;Enable product cards indent – enable if you want to add space between product cards.
Make full width – if the setting is disabled – container width will be set 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.product-card.liquid – in this snippet, a product card is displayed.
product – passing the product object to the card;size – we transfer the size of the picture to the Desktop. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the default value will be taken – 300;tablet_size (max-width: 767px) – we pass the image size for Tablet. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value – size will be taken;mobile_ size (max-width: 480px) – we pass the size of the image for Mobile. This size is automatically multiplied by 2 and added for Retina displays (x2). If nothing is passed, the value will be taken – tablet_size;is_lazy – this parameter is responsible for whether it will be enabled for images in the lazy loading card. This will be useful if the section in which the product cards are present will be located in the visible area when the page is loaded, we add a setting to the section that is responsible for disabling lazy loading, thus we will not slow down the page loading. If nothing is passed, lazy loading will be enabled by default.
Video guide: How to set up the Featured Products section.
In order to add a section, you need to go to Customizer → Add Section → Featured products.
Heading – setting allows you to add a section title;Products – the setting is responsible for selecting products to display. Limit: 12 pcs. If more is selected than specified in the Layout setting, then a scroll appears. If no products are selected, then 3 placeholder cards are displayed;Layout – setting allows you to change the number of displayed cards on the Desktop. On Mobile, 2 will be displayed, regardless of how many are selected on Desktop;Full width – if the setting is enabled, then the section is stretched to the full width of the screen. If the setting is disabled, then the section is placed in a 1920px container;Enable product cards indent – enable if you want to add space between product cards.
Link url – setting allows you to set a custom link for the button;Link label – setting allows you to set a text for the button;Link aria-label – setting allows you to set the aria-label for the button;Button style – setting allows you to choose the style for the view all button.
Make full width – if disabled – container width will be set 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.
Video guide: How to set up the Product Tabs section.
In order to add a section, you need to go to Customizer → Add Section → Product tabs.
Heading – section heading;Enable product cards indent – enable if you want to add space between product cards.
Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;Desktop offset top – top indent of the section on the desktop;Desktop offset bottom – bottom indent of the section on the desktop;Mobile offset top – top indent of the section on the mobile;Mobile offset bottom – bottom indent of the section on the mobile.
Heading – the setting is responsible for tab button text;Products – the setting is responsible for products in the tab. Limit: 4 products.
The remaining settings (texts) are taken from the translations. Product promo:
Button aria – message for button aria-label.
Video guide: How to set up the Best Sellers section.
In order to add a section, you need to go to Customizer → Add Section → Best sellers.
Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the title.
Show product type – setting responsible for whether the product type will be shown.
Info text color – setting allows you to change the color for the text.Info backgrount color – setting allows you to change the background color.Info opacity – setting allows you to change the transparency of the background.
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.
Collection – setting allows you to set the collection for block(setting mustn’t be empty);Product – setting allows you to set the product for block(setting mustn’t be empty);Image – setting allows you to set the custom image for the block (default: featured image of the product).label__new is the base label that will display NEW with the base color. To change the type of a label, you need to add a :type, such as label__new:primary or label__new:secondary. The number of displayed labels is limited to 3, as well as a soldout label in case the product is not available.
Video guide: How to set up the Featured Product (PDP example).
In order to add a section, you need to go to Customizer → Add Section → Featured product.
Product – product picker.
Video guide: How to set up: Product Page Media Layout.
Enable lazy load – setting allows you to set lazy loading for product images;Enable zoom – the setting allows you to enable the Zoom function that appears when you click on the image;Show borders – the setting adds Borders inside and around the perimeter of the section;Show arrows on mobile – the setting is responsible for whether the slider arrows will be shown in the mobile version;Media layout – setting allows you to choose the appearance for 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.Thumbnails position – 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, fit to screen;Make smooth scroll for stacked gallery – in the Stacked, Stacked 2 columns 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.Enable media scroll for stacked layout – enables scroll to variant image when changing product options for stacked layout.
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;Show share buttons – Shows “Share” buttons.
Border colors – the setting allows you to set the section border color;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.
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.
Video guide: How to add Badges.
The block has no settings, it displays product tags that are added in the product admin panel.
label__%tag%:modifer:
label__ – tag prefix by which tags are selected for output;%tag% – display tag;:modifer – color modifier;primary and secondary or completely absent;Customizer → Theme settings → Product → Labels.
The block has no settings, it displays the vendor of the product, which is added to the product admin panel.
The block has no settings, it displays the title of the product, which is added to the product admin panel.
The block has no settings, it displays the description of the product, which is added to the product admin panel.
Video guide: How to set up Countdown Timer.
Text – text before the countdown timer;Icon – image before the countdown timer. (Recommended size 48×48).
Text – text before the countdown timer color.Timer text – timer cells text color;Timer background – Timer cells background color.To show the countdown timer:
custom.promo_timer_date. Content type must be Date and time;
Show SKU – display the SKU of a product or variant;SKU text – you can set your text for the SKU and insert a variable into it. For example: “Art: %SKU%” will always output “Art: ” before the value.
Show labels – the setting is responsible for showing/hiding labels for options;Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;
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.ButtonsDropdown Size guide option name – the name of the option in which you want to display the size guide button (most often it is the “Size”). If this field is empty or option name not exist the size guide button will be appear under the options;Size guide general tab label – label for size guide general tab;Size guide model tab label – label for size guide model tab;Size guide drawer title – the title for the popup, which is called by the Size guide button;Size guide button icon – button icon;Size guide button label – button label.To show the size guide:
size_guide.page. Content type must be Page.Size guide option name to choose which option you want see the size guide button.If field Size guide option name is empty or the option name does not exist the size guide button will appear under the options.
In the Size guide popup you can add information about the product model information:
Follow the steps:
custom.size_guide_model_image. Content type must be file (images only).custom.size_guide_model_info. Content type must be Multi-line text.If one of the options is named “Color” or “Colour“, then it will be processed as a color. She will have a circle with a color on the left, which will be filled in this way:
swatch-%value%.png. For example, swatch-sky-blue.png;Sky Blue will be converted to just Blue from the CSS palette;30*30px.In the 2.4.0 update, the drawer size guide has been added to open the drawer in full screen for easy viewing of the size table.
Show label – will display the label for the quantity change widget.
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.
Button type – add to cart button style;Show additional payment buttons – add “Buy it now” buttons;Show enabled payment types – adds a list with icons of supported payment types;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).
Video guide: How to set up the Pickup Availability for your Shopify Store.
The block has no settings, it reflects the addresses where the product is available for pickup.
Displays up to 3 additional buttons with a popup:
Description – product description;Shipping & Returns – page with the rules of delivery and return;Custom drawer – custom rich text content.
Show description – shows the product description button;Button label – setting allows you to set button label for drawer toggler;Drawer heading – setting allows you to set the heading for the drawer.
Drawer content – selection of the page with the rules of delivery and return;Button label – setting allows you to set a button label for the drawer toggler.
Drawer heading – setting allows you to set the heading for the drawer.Drawer content – setting allows you to set the content for the drawer.
Video guide: How to set up the Complementary Products and Recommendations.
Heading – setting allows you to set the heading for the block.
You can add a simple text block with an icon.
Icon image – setting allows you to set an icon for the message;Text – text of the block.
With this block, you can show 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 – text that appears when variant inventory quantity is less or equal ”Low stock threshold” value;High stock text – text that appears when variant inventory quantity is more than the “Low stock threshold” value;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.
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.
Video guide: How to add the Gift box button.
Button label– text for the button. Required field;Button icon – icon for the button.
Heading – popup title text field. Required field;Email placeholder – placeholder for the input. Required field;Button label – label for the submit button. Required field;Success message – a message that the form was sent successfully. Required field.Translations settings:
Product notify me message – a 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:
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 email 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 label – text for the button. Required field;Button icon – icon for the button.
Heading – heading for popup form;Email placeholder – placeholder for the email field. Required field;Name placeholder – placeholder for the name field. Required field;Phone placeholder – placeholder for the phone field. Leave blank to hide;Product URL placeholder – placeholder for the product URL field. Required field;Success message – text of the success message after the form submit;Submit button label – text for the submit button.
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.
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.
The block allows you to connect applications, such as ReCharge, etc.
Custom liquid – setting allows you to add your liquid code.You can learn more about liquid here – https://shopify.dev/api/liquid.
Video guide: How to set up the Complementary Products and Recommendations.
The section is static on a product page template, it was added initially and cannot be removed.
Heading – section title;Subheading – section subtitle.
Use Shopify recommendations – use the list of products that Shopify provides for recommendations. Read more here: https://shopify.dev/themes/product-merchandising/recommendations;Resource collection – use your collection as a recommendation list. Works if Shopify recommendations are disabled;Products to show – how many products to show.
Show – if a checked tab with the recently viewed products will be added;Tab label – the label of a recently viewed tab;Products to show – how many products to show.View with recently viewed tab:
Layout – number of visible products without scrolling;
Enable product cards indent – enable if you want to add space between product cards;
Make full width – display on the entire width of the page without indents on the left and right;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.
Video guide: How to set up Shop the look section.
In order to add a section, you need to go to Customizer → Add Section → Shop the look.
Heading – a title of the section;Image – the picture for the section is set. If the image is not set, the placeholder will be used;Image position – setting responsible for the direction of the section. If Left is selected, then there will be a picture on the left and a product slider with the LTR direction on the right, and if Right is selected, the picture on the right, the slider on the left, the RTL slider;Enable lazy loading – the setting is responsible for whether the lazy load will be enabled for images in the section, this applies to both the main image and product cards. If the section is in scope when loading, then it is recommended to turn off a lazy load;Enable point button animation – the setting is responsible for whether the animation will be enabled for the point button;Image background – the setting adds a background to the main image with 10% (0.1) opacity. For the best effect, it is recommended to use png images with a transparent background.
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 limit – 5
Product – the setting is responsible for the output of the product to which the point button will refer;Point position top – the setting is responsible for positioning the point button vertically;Point position left – the setting is responsible for positioning the point button horizontally.shop-the-look-image.liquid – this snippet renders a picture for the section.
image – the picture is transmitted;is_lazy – the parameter is responsible for whether the lazy load will be enabled for the image. If the lazy load was enabled, but js didn’t work for some reason, the image from <noscript> will be displayed.shop-the-look:loaded is dropped.
Video guide: How to set up the Product Banner section.
In order to add a section, you need to go to Customizer → Add Section → Product banner.
Label – the setting is responsible for adding the label;Heading – the setting is responsible for adding the heading;Text – the setting is responsible for adding the text;Enable lazy load – the setting is responsible for enabling/disabling lazy load for images. We recommend using this setting if the section is not visible when the page loads. Otherwise, it’s best to leave it disabled;Overlay opacity – the setting is responsible for changing the transparency of the rear image overlay.
Arrows background – the setting is responsible for changing the color of the arrow’s background;Arrows color – the setting is responsible for changing the color of the arrows;Label color – the setting is responsible for changing the color of the label;Heading color – the setting is responsible for changing the color of the heading;Text color – the setting is responsible for changing the color of the text;Overlay -the setting is responsible for changing the color of the overlay;Section background – the setting is responsible for changing the color of the section background.
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.
Product – the setting is responsible for selecting the product in the product card;Banner HTML5 desktop video – the setting is responsible for selecting a video for the back slider on the desktop. If the video is specified, it has a higher priority than the image;Banner HTML5 mobile video – the setting is responsible for selecting a video for the back slider on the mobile. If the video is specified, it has a higher priority than the image. If the video is not specified, the video will be taken from the desktop;Banner image desktop – the setting is responsible for selecting an image for the back slider on the desktop;Banner image mobile – the setting is responsible for choosing an image for the back slider on the mobile. If the image is not specified, the image will be taken from the desktop.Video guide: How to set up the Trend Products section.
In this section, you can add max 3 blocks with images and add hot spots that help customers buy specific products.
In order to add a section, you need to go to Customizer → Add Section → Trend products.
Heading – heading of the section;Make the first hotspot opened – checkbox to have the first hotspot opened;
Make full width – If disabled – container width will be set 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.
Image – an image of the block.
Product – product, that will show in the popup after clicking on hotspot;Product image – the setting allows you to select a custom image instead of a product image;Spot horizontal position – horizontal position of the hotspot;Spot vertical position – vertical position of the hotspot.
Video guide: How to set up the Shop by brand section.
In order to add a section, you need to go to Customizer → Add Section → Shop by brand.
Heading – setting allows you to set the text for the title;Card background – setting allows you to set the background color for the cards.
Make full width – If disabled – container width will be set 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.
Image – setting allows you to set the image for the card;Image link – setting allows you to set the link for the card.
Video guide: How to set up the Slideshow section.
In order to add a section, you need to go to Customizer → Add Section → Slideshow.
Slides view – the setting is responsible for the appearance of the slides;
Desktop section height – the setting is responsible for the height of the section for the desktop;Mobile section height – the setting is responsible for the height of the section for mobile;Subtract header height – the setting is responsible for subtracting the header height from the slideshow size. This will be useful when you set the slideshow size to 100% and turn on the setting, then you will fit the announcement bar, header, and slideshow on one screen;
Desktop offset top – top indent of the section on the desktop;Desktop offset bottom – bottom indent of the section on the desktop;Mobile offset top – top indent of the section on the mobile;Mobile offset bottom – bottom indent of the section on the mobile.
Show arrows – the setting is responsible for displaying the arrows for switching between slides;Show pagination – the setting is responsible for displaying pagination;Show progress bar – the setting is responsible for displaying the progress bar;Enable loop – the setting is responsible for setting the infinite scrolling of the slider;Enable autoplay – the setting is responsible for setting the automatic switching of slides;Autoplay speed – the setting is responsible for the speed of automatic switching of slides;Animation speed – setting allows you to set the animation speed of switching slides;Animation type – setting allows you to set the type of animation for switching slides:
Fade
Slide
Flip
Creative
Parallax
Enable lazy load – the setting is responsible for the slow loading of slides.
Background – setting allows you to set the background color of the section;Probress bar – setting allows you to set the color of the progress bar;Arrows – setting allows you to set the color for the arrows for switching between slides;Pagination – setting allows you to set colors for pagination.Accessibility content is in translations. To go, you need to click on the more options button in the customizer or the online store (themes) and select edit default theme content:
Image (desktop) – setting allows you to set the image for the desktop;Image (mobile) – setting allows you to set the image for mobile;Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the title;Text – setting allows you to set the text for the text;Button label – setting allows you to set the label for the button;Button aria-label – setting allows you to set the text for the aria-label attribute. This attribute allows screen readers to better convey information to people with disabilities;Button link – setting allows you to set a link for the button;Open link in a new tab – setting allows you to choose how the link will open, in the current tab or the new;Make link clickable on the entire slide – enable the full slide to be clickable;Second button label – setting allows you to set the label for the second label;Second button aria-label – setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;Second button link – setting allows you to set a link for the second button;Open second link in a new tab – setting allows you to indicate how the second link will open, in the current tab or the new.
Text alignment inside block – setting allows you to set the alignment for the text;Content alignment – setting allows you to set the alignment for the content.
Background – setting allows you to set the background color of the slide;Label – setting allows you to set the color for the label;Heading – setting allows you to set the color for the header;Text – setting allows you to set the color for the text;Button label – setting allows you to set the color for the button label;Button background – setting allows you to set the background color for the button;Button border – setting allows you to set the border color for the button;Button label (hover) – setting allows you to set the color for the button label on hover;Button background (hover) – setting allows you to set the background color for the button on hover;Button border (hover) – setting allows you to set the border color for the button;Second button label – setting allows you to set the color for the second button label;Second button background – setting allows you to set the background color for the second button;Second button border – setting allows you to set the border color for the second button;Second button label (hover) – setting allows you to set the color for the second button label on hover;Second button background (рover) – setting allows you to set the background color for the second button on hover;Second button border (hover) – setting allows you to set the border color for the second button;Overlay – setting allows you to set the color for the overlay.
Video (desktop) – setting allows you to select a video from the picker for the desktop;Video (mobile) – setting allows you to select a video from the picker for mobile;Preview image (desktop) – setting allows you to set the image for the desktop;Preview image (mobile) – setting allows you to set the image for mobile;Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the title;Text – setting allows you to set the text for the text;Button label – setting allows you to set the text for the label;Button aria-label – setting allows you to set the text for the aria-label attribute. This attribute allows screen readers to better convey information to people with disabilities;Button link – setting allows you to set a link for the button;Open link in a new tab – setting allows you to choose how the link will open, in the current tab or the new;Make link clickable on the entire slide – enable the full slide to be clickable;Second button label – setting allows you to set the label for the second label;Second button aria-label – setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;Second button link – setting allows you to set a link for the second button;Open second link in a new tab – setting allows you to indicate how the second link will open, in the current tab or the new.
Play type – setting allows you to set the playback type for the video.
Text alignment inside block – setting allows you to set the alignment for the text;Content alignment – setting allows you to set the alignment for the content.
Background – setting allows you to set the background color of the slide;Label – setting allows you to set the color for the label;Heading – setting allows you to set the color for the header;Text – setting allows you to set the color for the text;Button label – setting allows you to set the color for the button label;Button background – setting allows you to set the background color for the button;Button border – setting allows you to set the border color for the button;Button label (hover) – setting allows you to set the color for the button label on hover;Button background (hover) – setting allows you to set the background color for the button on hover;Button border (hover)– setting allows you to set the border color for the button on hover;Second button label – setting allows you to set the color for the second button label;Second button background – setting allows you to set the background color for the second button;Second button border – setting allows you to set the border color for the second button;Second button label (hover) – setting allows you to set the color for the second button label on hover;Second button background (hover) – setting allows you to set the background color for the second button on hover;Second button border (hover) – setting allows you to set the border color for the second button;Overlay – setting allows you to set the color for the overlay.
Video url (desktop) – setting allows you to set a link to the video for desktop;Video url (mobile) – setting allows you to set a link to a video for mobile;Preview image (desktop) – setting allows you to set the image for the desktop;Preview image (mobile) – setting allows you to set the image for mobile;Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the title;Text– setting allows you to set the text for the text;Button label – setting allows you to set the label for the button;Button aria-label – setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;Button link – setting allows you to set a link for the button;Open link in a new tab – setting allows you to indicate how the link will open, in the current tab or the new;Make link clickable on the entire slide – enable the full slide to be clickable;Second button label – setting allows you to set the label for the second label;Second button aria-label – setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;Second button link – setting allows you to set a link for the second button;Open second link in a new tab – setting allows you to indicate how the second link will open, in the current tab or in the new.
Play type – setting allows you to set the playback type for the video.
Text alignment inside block – setting allows you to set the alignment for the text;Content alignment – setting allows you to set the alignment for the content.
Background – setting allows you to set the background color of the slide;Label – setting allows you to set the color for the label;Heading – setting allows you to set the color for the header;Text – setting allows you to set the color for the text;Button label – setting allows you to set the color for the button label;Button background – setting allows you to set the background color for the button;Button border – setting allows you to set the border color for the button;Button label (hover) – setting allows you to set the color for the button label on hover;Button background (hover) – setting allows you to set the background color for the button on hover;Button border (hover)– setting allows you to set the border color for the button on hover;Second button label – setting allows you to set the color for the second button label;Second button background – setting allows you to set the background color for the second button;Second button border – setting allows you to set the border color for the second button;Second button label (hover) – setting allows you to set the color for the second button label on hover;Second button background (hover) – setting allows you to set the background color for the second button on hover;Second button border (hover) – setting allows you to set the border color for the second button;Overlay – setting allows you to set the color for the overlay.This block (slide) contains three columns. In the first and last columns, you can set media content (Image, HTML5 video, YouTube/Vimeo) and in the second column, you can show the label, title, and button. You can mix media types for different columns. For example, in the first column, you can show an image and in the third column, you can show HTML 5 video.
Video play type – setting allows you to set the playback type for the video.
Media type – the setting allow you select a media content type do you want to show (Image, HTML 5 video, YouTube/Vimeo);Image desktop – desktop image;Image mobile – mobile image. If not set – desktop image will be used;Video (desktop) – HTML5 desktop video;Video (mobile) – HTML5 mobile video. If not set – desktop video will be used;YouTube/Vimeo url (desktop) -YouTube/Vimeo desktop video url;YouTube/Vimeo url (mobile) – YouTube/Vimeo mobile video url. f not set – desktop video will be used.
Label – setting allows you to set the text for the label;Heading – setting allows you to set the label for the button;Button label – setting allows you to set the label for the button;Button aria-label – setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;Button link – setting allows you to set a link for the button;Open link in a new tab – the setting allows you to indicate how the second link will open, in the current tab or the new.Make link clickable on the entire slide – enable the full slide to be clickable;
Media type – the setting allows you to select a media content type that you want to show (Image, HTML 5 video, YouTube/Vimeo);Image desktop – desktop image;Image mobile – mobile image. If not set – desktop image will be used;Video (desktop) – HTML5 desktop video;Video (mobile) – HTML5 mobile video. If not set – desktop video will be used;YouTube/Vimeo url (desktop) -YouTube/Vimeo desktop video url;YouTube/Vimeo url (mobile) – YouTube/Vimeo mobile video url. f not set – desktop video will be used.This block (slide) contains two columns. In the first media content, you can show an Image, HTML5 video, or YouTube/Vimeo, and in the second column, you can show the label, title, text, and button. You can change the position of the media column (left or right).
Media position – select a position of media column. Can be left or right.
Label – setting allows you to set the text for the label;Heading – setting allows you to set the label for the button;Text – setting allows you to set a text for the slide;Button label – setting allows you to set the label for the button;Button aria-label – setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;Button link – setting allows you to set a link for the button;Open link in a new tab – the setting allows you to indicate how the second link will open, in the current tab or the new.Make link clickable on the entire slide – enable the full slide to be clickable;
Media type – the setting allows you to select a media content type that you want to show (Image, HTML 5 video, YouTube/Vimeo);Video play type – setting allows you to set the playback type for the video;Image desktop – desktop image;Image mobile – mobile image. If not set – desktop image will be used;Video (desktop) – HTML5 desktop video;Video (mobile) – HTML5 mobile video. If not set – desktop video will be used;YouTube/Vimeo url (desktop) -YouTube/Vimeo desktop video url;YouTube/Vimeo url (mobile) – YouTube/Vimeo mobile video url. f not set – desktop video will be used.
Background – setting allows you to set the background color of the slide;Label – setting allows you to set the color for the label;Heading – setting allows you to set the color for the header;Text– setting allows you to set the color for the description;Button label– setting allows you to set the color for the button label;Button background – setting allows you to set the background color for the button;Button border – setting allows you to set the border color for the button;Button label (hover) – setting allows you to set the color for the button label on hover;Button background (hover) – setting allows you to set the background color for the button on hover;Button border (hover) – setting allows you to set the border color for the button;Overlay – setting allows you to set the color for the overlay.slideshow-slide.liquid – this snippet renders a carousel slide.
image_mobile – link to an image for mobile;image_desktop – link to an image for desktop;height_mobile – height for mobile, used to calculate the height of images;height_desktop – height for desktop, used to calculate the height of images;enable_lazy_load – a variable responsible for using lazy load;small_width – image width for devices with screen widths from 768px to 991px;small_width_retina – image width for devices with screen width from 768px to 991px, for retina screens;medium_width – image width for devices with screen widths from 992px to 1199px;medium_width_retina – image width for devices with screen width from 768px to 1199px, for retina screens;large_width – image width for devices with screen width from 1200px to 1500px;large_width_retina – image width for devices with screen width from 1200px to 1500px, for retina screens;extra_large_width – image width for devices with screen widths from 1501px to 1680px;extra_large_width_retina – image width for devices with screen width from 1501px to 1680px, for retina screens;full_hd_width – image width for devices with a screen width of 1681px and above;full_hd_width_retina – image width for devices with a screen width of 1681px and above, for retina screens.
Video guide: How to set up the Banner section.
In order to add a section, you need to go to Customizer → Add Section → Banner.
Section background – background color setting;Text – text color setting;Link – setting link text color;Button background – setting the background color of the button;Button label – setting button label color;Button border – setting the color of the button border;Button background (hover) – setting the background color of the button on hover;Button label (hover) – setting button label color on hover;Button border (hover) – setting the button border color on hover.
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 limit – 1
The section contains three different types of blocks (banner option): Full width , Countdown timer, and Two columns.
Desktop banner min height – the setting allows you to specify a minimum height for the banner on the desktop;Mobile banner min height – the setting allows you to specify a minimum height for the banner on the mobile;Media type – selector for selecting the type of media content to be displayed. Available types are:
Image – a normal image will be displayed;HTML5 video – HTML5 video will be displayed;Youtube/Vimeo – a video from the Youtube or Vimeo platform will be displayed.Label – field for Label;Heading – field for Heading;Text – field for Text;Button label – a field for the label content of the button;Button link – the URL field for the button;Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;Make link clickable on the entire media – enable the full media to be clickable;Overlay opacity – overlay transparency adjustment;Overlay color – setting allows you to select the color of the overlay;Image desktop – picker picture displayed on Desktop;Image mobile – picker picture displayed on Mobile;Image border width – the setting allows you to set the size of the border;Image border indent – The setting allows you to set the indent of the border;Enable lazy load – enable/disable the lazy load function.
HTML5 Desktop Video – a field to add an HTML5 Video displayed on the Desktop;HTML5 Mobile Video – a field to add an HTML5 Video displayed on Mobile;Youtube/Vimeo Desktop Video Url – a field for adding a link to Youtube or Vimeo video displayed on the Desktop;Youtube/Vimeo Mobile Video Url – field to add a link to Youtube or Vimeo video displayed on Mobile.
Content alignment – content position selector within the block. Text can have 4 positions:
Left – content positioning on the left edge;Center – positioning content in the center;Right – positioning content on the right edge;Justify – content positioning on the left edge with stretching in width.Content alignment mobile – content position selector within the block on mobile. Text can have 4 positions:
Left – content positioning on the left edge;Center – positioning content in the center;Right – positioning content on the right edge;Justify – content positioning on the left edge with stretching in width.Block alignment – block position selector. A block can have 3 positions.
Left – block positioning on the left side of the container;Center – block positioning in the center of the container;Right – block positioning on the right side of the container.
Desktop banner min height – the setting allows you to specify a minimum height for the banner on the desktop;Mobile banner min height – the setting allows you to specify a minimum height for the banner on the mobile;Media type – selector for selecting the type of media content to be displayed. Available types are:
Image – a normal image will be displayed;HTML5 video – HTML5 video will be displayed;Youtube/Vimeo – a video from the Youtube or Vimeo platform will be displayed;Media content position – image position selector. There are two options:
First – the image will be placed before the text block;Last – the image will be placed after the text block;Label – field for Label;Heading – field for Heading;Text – field for Text;Button label – a field for the label content of the button;Button link – the URL field for the button;Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;Make link clickable on the entire media – enable the full media to be clickable;Overlay opacity – adjustment of the degree of transparency of the overlay;Image desktop – picker picture displayed on Desktop;Image mobile – picker picture displayed on Mobile.Image border width – the setting allows you to set the size of the border on image;Image border indent – the setting allows you to set the indent of the border on image;Background image desktop – picker of the background image of the content of the image displayed on the Desktop;Background image mobile – picker of the background image of the content of the image displayed on the Mobile;Background image border width – the setting allows you to set the size of the border on background image;Background image border indent – the setting allows you to set the indent of the border on background image;Background image border color – border color picker on background image;Background overlay – overlay color picker;Enable lazy load – enable/disable the lazy load function.
HTML5 Desktop Video – a field to add an HTML5 Video displayed on the Desktop;HTML5 Mobile Video – a field to add an HTML5 Video displayed on Mobile;Youtube/Vimeo Desktop Video Url – a field for adding a link to Youtube or Vimeo video displayed on the Desktop;Youtube/Vimeo Mobile Video Url – field to add a link to Youtube or Vimeo video displayed on Mobile.
Content alignment – content position selector within the block. Text can have 4 positions:
Left – content positioning on the left edge;Center – positioning content in the center;Right – positioning content on the right edge;Justify – content positioning on the left edge with stretching in width.Content alignment mobile – content position selector within the block on mobile. Text can have 4 positions:
Left – content positioning on the left edge;Center – positioning content in the center;Right – positioning content on the right edge;Justify – content positioning on the left edge with stretching in width.
Video guide: How to set up Countdown Timer.
Desktop banner min height – the setting allows you to specify a minimum height for the banner on the desktop;Mobile banner min height – the setting allows you to specify a minimum height for the banner on the mobile;Media type – selector for selecting the type of media content to be displayed. Available types are:
Image – a normal image will be displayed;HTML5 video – HTML5 video will be displayed;Youtube/Vimeo – a video from the Youtube or Vimeo platform will be displayed;Label – field for Label;Heading – field for Heading;Text – field for Text;Button label – a field for the label content of the button;Button link – the URL field for the button;Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;Make link clickable on the entire media – enable the full media to be clickable;Overlay opacity – adjustment of the degree of transparency of the overlay;Image desktop – picker picture displayed on Desktop;Image mobile – picker picture displayed on Mobile;Enable lazy load – enable/disable the lazy load function.
Year – years until the end of the countdown;Month – months until the end of the countdown;Day – days until the end of the countdown;Hour – hours until the end of the countdown;Timezone – Timezone;Timer cell background color – setting the background color for the time cell;Timer cell color – setting the text color for the cells of the countdown.
HTML5 Desktop Video Url – a field to add an HTML5 Video displayed on the Desktop;HTML5 Mobile Video Url – a field to add an HTML5 Video displayed on Mobile;Youtube/Vimeo Desktop Video Url – a field for adding a link to Youtube or Vimeo video displayed on the Desktop;Youtube/Vimeo Mobile Video Url – field to add a link to Youtube or Vimeo video displayed on Mobile.
Content alignment – content position selector within the block. Text can have 4 positions:
Left – content positioning on the left edge;Center – positioning content in the center;Right – positioning content on the right edge;Justify – content positioning on the left edge with stretching in width.Content alignment mobile – content position selector within the block on mobile. Text can have 4 positions:
Left – content positioning on the left edge;Center – positioning content in the center;Right – positioning content on the right edge;Justify – content positioning on the left edge with stretching in width.Block alignment – block position selector. A block can have 3 positions.
Left – block positioning on the left side of the container;Center – block positioning in the center of the container;Right – block positioning on the right side of the container.
Go to ‘Collections’
Single line text, suggested key: banner.heading);
Single line text, suggested key: banner.label);
Rich text, suggested key: banner.text);
File, suggested key: banner.background_image_desktop);
File, suggested key: banner.background_image_mobile).
Note: You can make unique content by creating metafields and using it as custom data to customize whatever you want. You are not limited to the fields shown in the manual.
banner-image.liquid – this snippet renders the banner image.
image_desktop – the image to be rendered on the Desktop;image_mobile – an image that will be rendered on Mobile;enable_lazy_load – the condition under which Lazy load will be enabled for images;is_full_width – the condition under which the image will be displayed on the entire width of the page or on the width of the container.banner:loaded is dropped.settings → files, then copy the link and add it to the required field. You can also add a link to a video of this type from a third-party resource or CDN;
Video guide: How to set up the Banner with Text.
In order to add a section, you need to go to Customizer → Add Section → Banner with text.
Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the title;Text – setting allows you to set text content;Image desktop – setting allows you to select an image for the Desktop;Mobile desktop – setting allows you to select an image for Mobile;Image border width – the setting allows you to set the size of the border on image;Image border indent – the setting allows you to set the indent of the border on image;Enable lazy load – the setting enables lazy load for the image;Overlay opacity – setting allows you to select the % transparency of the overlay;Overlay color – setting allows you to select the color of the overlay.
Background – setting allows you to select a background for the section;Text – setting allows you to select a color for the text.
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.
Video guide: How to set up the Image with text section.
In order to add a section, you need to go to Customizer → Add Section → Image with text.
Image position – setting allows you to select the position for the image;
Text alignment – setting allows you to select text alignment;
First image desktop – setting allows you to select the first image for the desktop;First image mobile – setting allows you to select the first image for mobile;Second image desktop – setting allows you to select a second image for the desktop; If the second image is selected, the block with the image is divided into two equal parts with a small indent in the middle;
Second image mobile – setting allows you to select a second image for mobile;Heading – setting allows you to set the text for the title;Subheading – setting allows you to set the text for the subtitle;Text – setting allows you to set text content;Button label – setting allows you to set the label for the button;Button aria-label – setting allows you to set the aria-label for the button. This attribute allows screen readers to better convey information to people with disabilities;Button link – setting allows you to set a link for the button;Button style – setting allows you to set the style of the button;Show border-top – the setting is responsible for displaying the border on top. Works only for the Desktop;Show border-bottom – the setting is responsible for displaying the border at the bottom. Works only for the Desktop;Border color – the setting is responsible for border color.
Make full width – if disabled – container width will be set 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.
Video guide: How to set up the Gallery Carousel section.
In order to add a section, you need to go to Customizer → Add Section → Gallery Carousel.
Heading – heading of the section.
Show arrows – setting allows you to control the display of arrows for the slider;Autoplay – the setting is responsible for setting the automatic switching of slides;Autoplay speed – the setting is responsible for the speed of automatic switching of slides.
Make full width – If disabled, container width will be set 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.
Image – setting allows you to set the image;Link – setting allows you to set a link for the image.
Video guide: How to set up the Store Location.
In order to add a section, you need to go to Customizer → Add Section → Store location.
Reverse content – change media content position on desktop;Heading – heading of the section;Subheading – subheading of the section;Address heading – heading of address;Address text – text of address;Schedule heading – heading of schedule;Schedule text – text of schedule;Phone heading – heading of the phone;Phone text – text of the phone;First button label – first button text;First button link – first button link;First button style – first button style. You can select the “Primary” or “Secondary” style;Second button label – second button text;Second button link – second button link;Second button style – second button style. You can select the “Primary” or “Secondary” style;Image – an image of the section;Google maps API key – setting allows you to add a Google maps API key. Learn more about how to create an API key;Map query – the setting allows you to add a query parameter that is responsible for adding a point on the map. In our case, only the place mode has been added. You can add one point to the map in many ways. Learn more about how to add a query parameter;
Make full width – if disabled – container width will be set 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.
Video guide: How to set up the Grid Images section.
In order to add a section, you need to go to Customizer → Add Section → Grid images.
Big image position – the setting is responsible for positioning the larger image.
Make full width – if disabled – container width will be set 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.
Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the title;Image desktop – setting allows you to set the image for the desktop;Image mobile – setting allows you to set the image for mobile;Link – setting allows you to set a link for the image;Overlay color – setting allows you to set the color for the overlay;Text color – setting allows you to set the color for the text;Overlay opacity – settings allow you to set the overlay opacity.
Video guide: How to set up the Images Row.
The section is static on a product page template, it was added initially and cannot be removed.
Enable lazy load – enables lazy loading of images.
Make full width – if disabled – container width will be set 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 limit – 2
Image – image picker.
Video guide: How to set up the Image Gallery.
In order to add a section, you need to go to Customizer → Add Section → Image gallery.
Overlay opacity – setting changes overlay transparency on hover;Overlay color – setting changes overlay color on hover.
Make full width – if disabled – container width will be set 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.
Image – setting allows you to select an image for the block;Video – setting allows you to select video instead of image. The video will start on hover (only on the desktop). Has priority over the image. The video preview image will be used on mobile resolution;Icon hover – setting allows you to specify the icon that will be displayed on hover when the block has a link;Link – setting allows you to specify a link for the block;Open link in new tab – if enabled, the link will open in a new tab.
Video guide: How to set up the Image Compare section.
In order to add a section, you need to go to Customizer → Add Section → Image compare.
Heading – section heading;Text – section richtext;First image – the image that will be displayed as a “before image”;Second image – the image that will be displayed as an “after image”. Use an image with the same dimensions as the first image for the best view of the section;Desktop image height – the height of the images in the section. The select has options from 200px to 800px in increments of 50px. There is also an option for full size – the image occupies 100% of the width and height of the section;Mobile image height – mobile image height. Select has the same options as the desktop.
Make full width – If disabled – container width will be set 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.
Drag cursor background – the color of the separating line and the icon background;Drag cursor color – icon color.The image-comparison-slider library was used for the section.
Video guide: How to set up the Pricing Table section.
In order to add a section, you need to go to Customizer → Add Section → Pricing table.
Heading – setting allows you to set the text for the title;List icon – setting allows you to set the icon for the list items.
Card background – setting allows you to set the background color of the card;Card border – setting allows you to set the color of the card border;Text – setting allows you to set the color for the text of the content;Button label – setting allows you to set the color for the button label;Button background – setting allows you to set the background color for the button;Button border – setting allows you to set the border color for the button;Button label (hover) – setting allows you to set the color for the button label on hover;Button background (hover) – setting allows you to set the background color for the button on hover;Button border (hover) – setting allows you to set the border color for the button.
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.
Product – setting allows you to set the product for the card;Label – setting allows you to set the label for the card;Heading – setting allows you to set the heading for the card (default: title of the product);Text – setting allows you to set the text for the card;Image – setting allows you to set the image for the card (default: featured image of the product);Button label – setting allows you to set the button label for the card;Label background – setting allows you to set the color for the label background;Label color – setting allows you to set the color for label text.
Video guide: How to set up the Swipe section.
In order to add a section, you need to go to Customizer → Add Section → Swipe.
Enable lazy load – the setting is responsible for enabling/disabling lazy load for images. We recommend using this setting if the section is not visible when the page loads. Otherwise, it’s best to leave it disabled;Heading – the setting is responsible for heading of the section. The text in this field is truncated to 4 lines. Make sure that the text is displayed correctly on all resolutions. Required field.
Background – the setting is responsible for background color;Heading – the setting is responsible for heading color;Text – the setting is responsible for text color (refers to the “Content” block).
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.
Image – the setting is responsible for the heading of the block. Image aspect ratio: 1:1;Heading – the setting is responsible for the heading of the block. The text in this field is truncated to 4 lines. Make sure that the text is displayed correctly on all resolutions;Text – the setting is responsible for the heading of the block. The text in this field is truncated to 6 lines. Make sure that the text is displayed correctly on all resolutions.
Video guide: How to set up the Our Team section.
In order to add a section, you need to go to Customizer → Add Section → Our team.
Heading – setting allows you to set the text for the title;Cards alignment – the setting allows you to select the type of card alignment;
Show borders – the setting is responsible for showing/hiding borders for cards;Border color – setting sets the border color of the cards.
Make full width – if unchecked – container width will be set 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.
Image – setting allows you to set an image for the card;Name – setting allows you to specify text for the name field;Role – setting allows you to specify text for the role field.
Video guide: How to add video.
In order to add a section, you need to go to Customizer → Add Section → Video.
Heading – setting allows you to set the text for the title;Text – setting allows you to set text content;Layout – setting allows you to select the layout of the section (Full Width, Container);
Aspect ratio – the setting allows you to select the aspect ratio for the video (16/9, 4/3);
Image – setting allows you to select an image for the placeholder.
Video type – the setting allows you to select the type of video (HTML5, Youtube/Vimeo);HTML5 desktop video url – the setting allows you to specify a link to a desktop video for the HTML5 type;HTML5 mobile video url – the setting allows you to specify a link to a mobile video for the HTML5 type;Youtube/Vimeo desktop video url – the setting allows you to specify a link to a desktop video for the Youtube/Vimeo type;Youtube/Vimeo mobile video url – the setting allows you to specify a link to a mobile video for the Youtube/Vimeo type.
Make full width – if disabled – container width will be set 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.
Video guide: How to set up the Blog Posts section.
In order to add a section, you need to go to Customizer → Add Section → Blog posts.
Blog – the setting allows you to select a block, the last 3 articles of which will be displayed;Label – setting allows you to set the text for the label;Heading – setting allows you to set the text for the heading;Link label – setting allows you to set the label for the link;Link aria label – setting allows you to set the text for the aria-label attribute. This attribute allows screen readers to better convey information to people with disabilities;Button style – setting allows you to select the style of the button.
Make full width – if disabled – container width will be set 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.article-card.liquid – the snippet displays the article card.
article – article object.layout – variable to set the size of the image.
Video guide: How to set up the Newsletter section.
In order to add a section, you need to go to Customizer → Add Section → Newsletter.
Layout – setting allows you to set the section template;
Heading – setting allows you to set the text for the title;Subheading – setting allows you to set the text for the subtitle;Success message – setting allows you to set the text of successful sending;Text – setting allows you to set text content;Image desktop – setting allows you to set the image for the desktop;Image mobile – setting allows you to set the image for mobile;Image position – setting allows you to set the positioning of the image;
Email placeholder – the setting allows you to set the text for the placeholder;Button aria-label – the setting allows you to set the text for the aria-label attribute of the button. This attribute allows screen readers to better convey information to people with disabilities.
Section background – setting allows you to set the background color of the section;Heading, text – setting allows you to set the color for the title text;Subheading – setting allows you to set the color for the text;Input – setting allows you to set the text color for input;Input border color – setting allows you to set the border color for the input.
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.
Video guide: How to set up the Benefits section.
In order to add a section, you need to go to Customizer → Add Section → Benefits.
Section background – section background color setting;Heading – heading color setting;Text – text color setting;Border – setting the border color between blocks.
Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;Show borders – the setting is responsible for showing/hiding the borders for the section;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 limit – 3
Heading – text field for Heading;Text – text field for Text;Image – image picker;Link – link field;Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button.
Video guide: How to set up the Events Calendar.
In order to add a section, you need to go to Customizer → Add Section → Events calendar.
Heading – title of the section;Link label – text of the “View all” link that appears at the right side of the title;Link url – a url for the link;Load more button label – text for the load more button. Leave empty – to show all events;Counts of events to show – select how many events will be shown on the page load;Show border bottom – enable if you want to show a border for each block;
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.
Image – image of the event;Heading – title of event;Text– text of the event;Link label – link text;Link url – link url;Link location label – location link text;Link location url– location link url;Start date– start day of the event;Start month – start month of the event;Start time – start time of the event;With this section you can add a list of events for the your store or bussines.
To each event you can add an image, title, description, event start date and start time, and two links.
You can add a “Load more” button to show max 10 events (from 3 to 10) on page load and other events will be available for the customers after click on the “Load more” button.
Video guide: How to set up the Ticker section.
In order to add a section, you need to go to Customizer → Add Section → Ticker.
Text – setting allows you to fill in the text content for the section. Use Enter to split the text into sentences;Movement speed (desktop) – setting allows you to set the speed of the ticker for the Desktop;Movement speed (mobile) – setting allows you to set the speed of the ticker for Mobile.
Background – setting allows you to set the background color of the section;Text – setting allows you to set the color of the text.
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.
setContentWidth() function allows you to change the styles of the container depending on the content of the text. The function fires on initialization and on window resize.
Video guide: How to add Reviews.
In order to add a section, you need to go to Customizer → Add Section → Reviews.
Heading – heading of the section;Autoplay – the setting is responsible for setting the automatic switching of slides;Autoplay speed – the setting is responsible for the speed of automatic switching of slides.
Layout – setting allows you to select the type of layout. If you choose Text with product, a picture of the product with its price will be displayed next to the text review with the ability to go to it. Otherwise, it will just be a text review. The setting affects the entire section at once;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.
Product info text color – setting allows you to specify text color for product info;Product info background color – setting allows you to specify background color for product info.
Text – setting allows you to set the review text;Author name – setting allows you to set the name of the author of the review;Author additional info – setting allows you to set additional information about the author of the review;Product – setting allows you to select a product that will be displayed next to the text review;Author image – setting allows you to set a photo of the author of the review;
Video guide: How to set up the Rich Text section.
In order to add a section, you need to go to Customizer → Add Section → Rich text.
Heading – setting allows you to set the text for the title;Subheading – setting allows you to set the text for the subtitle;Text – setting allows you to set text content;Text alignment – alignment of the text in the section. Can be “Left”, “Center”, “Right”;Section alignment -alignment of the section. Can be “Left”, “Center”, “Right”;Enable read more button – enable the “Read more” button to hide most of the text and show the “Read more” button that can show the full text;Read more button label – a button text to show more content;Show less button label – a button text to show less when the full content is visible.
Make full width – make a section full width;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.
Video guide: How to set up the Simple Description section.
In order to add a section, you need to go to Customizer → Add Section → Simple description.
Heading – section title. Can be passed from product metafields;Text – section content. Can be passed from product metafields;Content alignment – text alignment;Block alignment – section alignment;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.
Video guide: How to set up the FAQs Page.
In order to add a section, you need to go to Customizer → Add Section → FAQ.
Heading – setting allows you to set the text for the title.
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.The block is responsible for displaying the question-answer pair. When rendering, it is displayed as an accordion.
Heading – accordion title, question;Text – response, accordion content;Icon – icon in the accordion header.The block is designed to group question-answer pairs by category. Rendered as a header separating a group of accordions.
Heading – title, category name.Heading and Text fields are not specified;Heading the field is not specified.
Video guide: How to set up the Story Telling section.
In order to add a section, you need to go to Customizer → Add Section → Story telling.
Overlay opacity – adjusts the transparency of the image overlay (only mobile);
Make full width – If disabled – container width will be set 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.
Tab heading – setting allows you to set the text for the tab;Image desktop – setting allows you to select an image for the desktop;Image mobile – setting allows you to select an image for mobile;Image position – setting allows you to select the position for the image;Text alignment – setting allows you to select text alignment;Heading – setting allows you to set the text for the titleSubheading – setting allows you to set the text for the subtitle;Text – setting allows you to set text content;Button label – setting allows you to set the label for the button;Button aria-label – setting allows you to set the aria-label for the button. This attribute allows screen readers to better convey information to people with disabilities;Button link – setting allows you to set a link for the button.
Background – setting allows you to set the background color of the content;Text – setting allows you to set the color for the text of the content;Button label – setting allows you to set the color for the button label;Button background – setting allows you to set the background color for the button;Button border – setting allows you to set the border color for the button;Button label (hover) – setting allows you to set the color for the button label on hover;Button background (hover) – setting allows you to set the background color for the button on hover;Button border (hover) – setting allows you to set the border color for the button.
In order to add a section, you need to go to Customizer → Add Section → Custom liquid.
Custom liquid – setting allows you to add your liquid code.
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.
The section is static on a Login page template, it was added initially and cannot be removed.
Image desktop – setting allows you to select an image for the Desktop;Image mobile – setting allows you to select an image for Mobile.
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.breadcrumbs.liquid – snippet outputs breadcrumbs.
The section is static on a Register page template, it was added initially and cannot be removed.
Image desktop – setting allows you to select an image for the Desktop;Image mobile – setting allows you to select an image for Mobile.
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.breadcrumbs.liquid – snippet outputs breadcrumbs.
The section is static on an Activate account page template, it was added initially and cannot be removed.
The page template has no settings. You can customize text content in translations.
breadcrumbs.liquid – snippet outputs breadcrumbs.
The section is static on a Reset page template, it was added initially and cannot be removed.
The page template has no settings. You can customize text content in translations.
breadcrumbs.liquid – snippet outputs breadcrumbs.
The section is static on an Order page template, it was added initially and cannot be removed.
The page template has no settings. You can customize text content in translations.
breadcrumbs.liquid – snippet outputs breadcrumbs.
The section is static on an Account page template, it was added initially and cannot be removed.
The page template has no settings. You can customize text content in translations.
breadcrumbs.liquid – snippet outputs breadcrumbs.
The section is static on an Addresses page template, it was added initially and cannot be removed.
The page template has no settings. You can customize text content in translations.
breadcrumbs.liquid – snippet outputs breadcrumbs.A custom client implementation has been added to use the Shopify Cart API. The implementation is in the src/scripts/core/helpers/cart-api.js file.
To access the API, a global variable is used that is available throughout the project after full loading – window.themeCore.CartApi. The variable provides access to the makeRequest function. With the help of which requests are made to the basket. The function declaration looks like this:
function makeRequest(action, ...params);
The function takes the following parameters:
action – the name of the request to be performed to the basket;params – a set of parameters are passed to the target function to execute the request. Each request type has its own set of parameters.Also, the global window.themeCore.CartApi the object provides access to the actions field – an object with constants (aliases) of all available request types. Each constant corresponds to a specific request type:
GET_CART (”getCart”) – GET request to /{locale}/cart.js to get the cart in JSON format;ADD_TO_CART (”addItem”) – POST request to /{locale}/cart/add.js to add one product to the cart;ADD_TO_CART_MANY (”addItems”) – POST request to /{locale}/cart/add.js to add one or more products to the cart;UPDATE_CART (”update”) – POST request to /{locale}/cart/update.js to update the cart quantity, cart notes, or attributes;CHANGE_CART_ITEM (”changeItem”) – POST request to /{locale}/cart/change.js to change the quantity, properties, and selling_plan of the product in the cart;CHANGE_CART_ITEM_QUANTITY (”changeQuantity”) – POST request to /{locale}/cart/change.js to change the number of items in the cart;REMOVE_CART_ITEM (”removeItem”) – POST request to /{locale}/cart/change.js to remove a product from the cart;CLEAR_CART (”clear”) – POST request to /{locale}/cart/clear.js to empty the cart.window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.ADD_TO_CART, {
'id': variant_id,
'quantity': quantity
}).then(res => {
// Some code...
})
.catch(e => {
// Errors handling
});
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.ADD_TO_CART_MANY, [
{
'id': variant_id,
'quantity': quantity
},
{
'id': variant_id,
'quantity': quantity
}
]).then(res => {
// Some code...
})
.catch(e => {
// Errors handling
});
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.REMOVE_CART_ITEM,
key // Line item key
).then(res => {
// Some code...
})
.catch(e => {
// Errors handling
});
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.CLEAR_CART)
.then(res => {
// Some code...
})
.catch(e => {
// Errors handling
});
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.CHANGE_CART_ITEM_QUANTITY,
key, // Line item key
quantity // New quantity
).then(res => {
// Some code...
})
.catch(e => {
// Errors handling
});
If the request is successful, the makeRequest function fires an event in the EventBus – cart:updated. The event contains information about the result of the request (data), the type of the request (action), as well as the parameters (params) that were passed to the makeRequest function.
If you notice that something in your theme isn’t working as expected, please follow these steps before contacting our support team:
Disable all third-party apps (one by one, if possible). Some apps modify the theme’s code or add scripts that can interfere with its functionality.
Check the theme again after disabling the apps.
If everything starts working correctly, the issue is likely caused by an app. In this case, we recommend contacting the app’s support team — they’ll be able to assist you with compatibility or integration issues.
If the problem remains, proceed to the next step.
Add a fresh, unedited version of the theme from the Shopify Theme Store and check if the same issue appears there.
If the issue does not appear in the fresh version, it confirms that the problem is related to an app or custom modification in your store.
If the issue does appear in the fresh version, please contact our support team and provide details — we’ll be happy to investigate further.
If you notice that everything works correctly once the app is disabled, please reach out to the app’s support team, as they’ll be best equipped to assist with their integration.
Alternatively, you can reach out to our support team and provide a collaborator access code so that we can send a store access request to review the issue directly and do our best to help.
We have a special YouTube playlist with Video Guides on the Gain Theme. Feel free to review videos on all our pages and sections.
We also have a special playlist with Video Guides on the Shopify Admin Panel, do not hesitate to check this out as well.
How to check your theme’s version.
There are 2 ways to check your theme’s version.
– To check the current version of the Gain Theme in the customizer, click on … to view the theme actions as well as the theme version.
– To check the current version of the Gain Theme in the admin panel, go to Online Store → Themes and there see the version of your theme.
How to share the preview link to the unpublished theme (draft) and the store password.
Share a preview link:
– Go to the Theme Customizer → click on … → click on Preview. Once the preview window open in the new tab, click on the green share preview button and the bottom. After that copy the preview link and feel free to send it.
– How to share password for store access?
To let visitors access your store, you can share the password by going to Online Store → Themes → click on See Store Password.
Adding new sections is crucial to customize your store.
To add a new section, go to your Theme Customizer → Open the page to which you’d like to add new sections → Scroll to the bottom of the Page Template → Click on Add section and choose the section you’d like to add. Please note that when adding a section to the Default template, the section, as well as the content you add to it, reflects on all other templates.
Keep in mind, that newly added sections are always placed at the bottom of the page template. However, you can change the section’s position, read more about it here.
If you want to customize your sections and make them unique for each product, feel free to watch this Video Guide.
To change the position of the section, scroll to the chosen section, hover over it, click on the handle icon, and move the section to the preferred place.
If you want to hide the section from view, without deleting it, scroll to the chosen section, and click on the toggle icon (eye).
Please note that some sections have blocks inside of them and each of the blocks can be hidden separately. To hide a specific block from the view, unfold the section, and click on the toggle (eye) icon.
To set up the Filters & Sort, you need to install the Search & Discovery APP, it’s a free Shopify APP.
In the APP you need to go to the Filters.
From there, you can add new filters, or remove the ones you do not need.
If you want to set up a Pre-Order feature for your store, you can surely set it up with the Gain Theme.
To do so, you need to go to your stores’ Admin Panel → Products and choose the product for pre-order. On the product’s page scroll down to the “Theme template“ and choose the “pre-order“ template. See here:
If you have more products intended to be sold on a pre-order basis, then repeat this step with other products as well.
Once you’re done, you can go to the Theme Customizer → Products → pre-order, see here:
Here, you can customize the Pre-order Template. Please keep in mind, that the changes you make to the Pre-order template, will not affect the Default Product template.
In the Pre-order template, the “Add to Cart “ button changes to the “Pre-Order“ button, your clients will be able to add the product to the Cart with this button.
By default, a block “Sale Point“ is added to the template with the text “Write some text here to inform your client that this is a Pre-order product“. You can change the text and inform your clients that this is a pre-order product.
When a customer purchases a product, then in the admin panel on the “Order status page” you can see an additional property “Pre-order”:
If you need help integrating the App with the Theme, then keep in mind that integration with the app should be done by the app developers. Please note that app developers are expected to have their Apps compatible with Shopify Themes.
If you encounter problems with the app, certain elements of the theme may be invisible because of third-party apps. Verify whether you have any external apps installed, as some may obstruct theme content. If you are indeed utilizing third-party apps, kindly contact their support team directly. All Shopify App Developers offer their own support, feel free to reach out to them.
Setting up Color Swatches is crucial to customize your store. Here’s an easy guide on how to properly add the swatches.
First of all, make sure you have enabled the color swatches for your store. For this, you need to go to the Theme Customizer → Theme settings → Product. In there, scroll to the Swatches and click on Enable.
The next step is to add the files of the swatches to your Admin Panel → Content → Files.
The files must be named in the following format: swatch-black, swatch-light-blue. In the name of the file, all words must be in lowercase, any blank space should be replaced with “-”, and the file must start with the word swatch. We also recommend having the images in .png and 40x40px or 50x50px.
Adding a hover image (or video) for your product cards elevates the look of your store. Here is a Video Guide on how to set up Hover Image
To add a hover image feature, you need to create proper metafields.
The hover image metafield should be created for Products and for Variants.
When creating a Hover Image metafield, make sure you enter the namespace and key as product_card.hover_image
How to add the Hover image metafield for a product:
How to add the Hover image metafield for a variant:
Note: if your product has more than 1 color variant, and you add a hover image to the whole product, then this hover image will be the same for each color variant. However, if you add a different hover image for each color variant, then the hover image will change for each color variant.
Important: If color swatches are enabled and other options are present, for example, size, material, etc., then you need to add a hover image only to the first variant of each color.
When developing the Gain theme, we optimized its speed.
To increase or keep the speed up of your store, we always recommend compressing all your images and only after that, can you upload them to your Shopify Admin Panel. We also recommend not to use a lot of sections per page, as this will slow down the website. If you use the Video section, we recommend choosing HTML5 videos, these are the videos that you add to your Shopify Admin Panel content, instead of the YouTube or Vimeo videos.
If you use any 3rd-party Apps, please keep in mind that they might slow down your site speed. The more Apps you use, the more they affect the speed.
To display the Size guide on the Product page, you need to do the following:
size_guide.page.Page;
In the Size Guide pop up you can also display additional product model information, like a picture and a text. To do this, follow these steps:
You can display the Size Guide either underneath the options or on the right side of the options:
If the field Size guide option name is empty or the option name does not exist the size guide button will appear under the options.
Gain Theme supports B2B selling of a specific minimum quantity of items.
The number of items by which the variant can be purchased, if the variant only sells in multiples of a set quantity. This field restrict customers from buying a quantity that’s not in multiples of the quantity increment.
To set quantity rules, you need to set a value of 1 or greater for both Quantity Increment and Minimum Order Quantity. The Maximum Order Quantity field is optional, and can be left blank.
If the values for Quantity Increment, Minimum Order Quantity, and Maximum Order Quantity are all blank for the same row, then the quantity rules for that product variant are removed.
The fewest number of items of the variant that a customer can purchase at the same time.
To set quantity rules, you need to set a value of 1 or greater for both Quantity Increment and Minimum Order Quantity.
To learn more about the quantity rule for B2B, check out this article from Shopify.
If you need any help with your Gain Theme, feel free to reach out to us by email. Please note that we can help you with your theme, provided that it is updated to the latest version.
We typically reply during business hours 8 am – 5 pm (Brussels, GMT +02:00), Monday-Friday (excluding holidays).
Reach out via the contact form below, or send us a direct email at support@utdweb.team.
If you need help with a 3-rd party app, or have questions regarding it, please contact App Support directly. Keep in mind, that app developers are expected to have their apps compatible with Shopify Themes.
Please note that we can only support you with the Gain Theme Code, developed by us.
All Shopify App Developers offer support assistance, feel free to reach out to them.
If you need help with the Admin Panel or Shopify platform in general, the Shopify Support team is available 24/7.
If you need help with the checkout page, always contact the Shopify Support team directly, as this page is not part of the theme code, it is a Shopify page.
Feel free to contact Shopify support here: https://help.shopify.com/questions
If you need anything custom-developed for your store, then please note that this is now part of the theme support. If you need anything custom-added to your store, please note that we have a team of developers who can implement new features at an additional cost.
Feel free to learn more about our services by clicking the button below or contact us directly via support@utdweb.team and let us know the details of your request.
