{ "componentChunkName": "component---src-templates-manual-jsx", "path": "/shopify-themes/gain/manual/", "result": {"pageContext":{"manual":{"page_header":{"background":null,"backgroundOpacity":100,"color":"#000000","fieldGroupName":"page_header","title":"Gain theme manual","opacity":1,"position":"on","size":{"desktop":64,"tablet":null,"mobile":null},"spaces":{"top":null,"bottom":null,"leftright":null,"units":"em"}},"slug":"gain","title":"Gain","id":"cG9zdDoyMTg3","modifiedGmt":"2026-10-21T12:31:25","acfManual":{"postType":{"title":"Gain Theme","uri":"/shopify-themes/gain/"},"metaData":{"title":"Gain Shopify Theme Manual","description":"Learn how to set up, customize, and manage the Gain Shopify theme with step-by-step guides, section settings, and troubleshooting tips"},"sections":[{"fieldGroupName":"manual_Acfmanual_Sections_Manual","manualCategory":[{"fieldGroupName":"manual_category","manualCategoryTitle":"General ","manualCategoryBlocks":[{"blockContent":"

This settings block is intended for general Typography settings on the site.

\n

In order to get to the Typography settings block, you need to go to Customizer → Theme Settings → Typography.

\n

\"Typography

\n

Settings

\n

Base and heading fonts

\n

\"Typography

\n
    \n
  1. Base font – font picker for plain text throughout the store;
    2. \n
  2. Heading font – font picker for headings throughout the store;
    3. \n
  3. Base font size – plain text size;
    4. \n
  4. Heading font size – heading text size.
    5. \n
\n","blockTitle":"Typography","fieldGroupName":"manual_category_blocks","hash":"general-typography"},{"blockContent":"

This settings block is intended for general Colors settings on the site.

\n

In order to get to the Colors settings block, you need to go to Customizer → Theme Settings → Colors.

\n

\"Colors

\n

Settings

\n

Text colors

\n

\"Colors

\n
    \n
  1. Primary – base text;
    2. \n
  2. Secondary – additional text color;
    3. \n
  3. Headings – color for headings;
    4. \n
  4. Link – color for links in RTE content.
    5. \n
\n

Background

\n

\"Colors

\n
    \n
  1. Page – page background color;
    2. \n
\n

Border colors

\n

\"Colors

\n
    \n
  1. Primary – color for primary borders;
    2. \n
  2. Secondary – color for secondary borders;
    3. \n
  3. Thirdly – color for third borders.
    4. \n
\n

Support color

\n

\"Colors

\n
    \n
  1. Attention – auxiliary color: attention, error, etc.;
    2. \n
  2. Success – auxiliary color – success.
    3. \n
\n

Overlay

\n

\"Colors

\n
    \n
  1. Background – overlay background color.
    2. \n
\n

Button primary

\n

\"Colors

\n
    \n
  1. Text – main button text color;
    2. \n
  2. Background – main button background color;
    3. \n
  3. Border – main button border color;
    4. \n
  4. Text (hover) – button text color on hover;
    5. \n
  5. Background (hover) – background color of the main button on hover;
    6. \n
  6. Border (hover) – main button border color on hover.
    7. \n
\n

Button secondary

\n

\"Colors

\n
    \n
  1. Text – secondary button text color;
    2. \n
  2. Background – secondary button background color;
    3. \n
  3. Border – secondary button border color;
    4. \n
  4. Text (hover) – secondary button text color on hover;
    5. \n
  5. Background (hover) – secondary button background color on hover;
    6. \n
  6. Border (hover) – secondary button border color on hover.
    7. \n
\n

Button play

\n

\"Banner

\n
    \n
  1. Text – play button text color;
    2. \n
  2. Background – play button background color;
    3. \n
  3. Text (hover) – play button text color on hover;
    4. \n
  4. Background (hover) – play button background color on hover.
    5. \n
\n

Social buttons

\n

\"Colors

\n
    \n
  1. Icon – media button icon color;
    2. \n
  2. Background – media button background color;
    3. \n
  3. Border – media button border color;
    4. \n
  4. Icon (hover) – media button icon color on hover;
    5. \n
  5. Background (hover) – media button background color on hover;
    6. \n
  6. Border (hover) – media button border color on hover.
    7. \n
\n

Preloader

\n

\"Colors

\n
    \n
  1. Circle – color circle loader;
    2. \n
  2. Item – the color of the animated loader element;
    3. \n
  3. Overlay – overlay color when adding loader.
    4. \n
\n

Scrollbar

\n

\"Colors

\n
    \n
  1. Thumb – scrollbar thumb color;
    2. \n
  2. Track – scrollbar track color;
    3. \n
  3. Thumb opacity – transparency of the scrollbar thumb as a percentage of black;
    4. \n
  4. Track opacity – transparency of the scrollbar track as a percentage of black.
    5. \n
\n

Slider arrows

\n

\"Colors

\n
    \n
  1. Background – background color of slider arrow;
    2. \n
  2. Icon – icon color of slider arrow;
    3. \n
  3. Background (hover) – background color of slider arrow on hover;
    4. \n
  4. Icon (hover) – background color of slider arrow on hover.
    5. \n
\n","blockTitle":"Colors","fieldGroupName":"manual_category_blocks","hash":"general-colors"},{"blockContent":"

This settings block is intended for general Favicon settings on the site.

\n

In order to get to the Favicon settings block, you need to go to Customizer → Theme Settings → Favicon.

\n

\"Favicon

\n

Settings

\n

\"Favicon

\n
    \n
  1. Favicon image – the setting is responsible for the store icon that is displayed in the browser tab.
    2. \n
\n","blockTitle":"Favicon","fieldGroupName":"manual_category_blocks","hash":"general-favicon"},{"blockContent":"

This settings block is intended for general Layout settings on the site.

\n

In order to get to the Layout settings block, you need to go to Customizer → Theme Settings → Layout.

\n

\"Layout

\n

Settings

\n

\"Layout

\n
    \n
  1. Container width – the setting allows you to select the width of the container for the sections, where you can make the section full size.
    2. \n
\n","blockTitle":"Layout","fieldGroupName":"manual_category_blocks","hash":"general-layout"},{"blockContent":"

Video guide: How to set up Cart Page and Cart Drawer.
\nThis settings block is intended for general Cart settings on the site.

\n

In order to get to the Cart settings block, you need to go to Customizer → Theme Settings → Cart.

\n

\"Cart

\n

Settings

\n

General

\n

\"Cart\"

\n
    \n
  1. Cart type – the setting is responsible for the type of cart. It has several values: drawer, page;
    2. \n
  2. Show product vendor – the setting is responsible for showing/hiding the product vendor;
    3. \n
  3. Show cart discounts – the setting is responsible for showing/hiding cart discount form;
    4. \n
  4. Show cart notes – the setting is responsible for showing/hiding cart notes;
    5. \n
  5. Show tax and shipping message – the setting is responsible for showing/hiding the tax and shipping message;
    6. \n
  6. Show dynamic checkout buttons – the setting is responsible for showing/hiding dynamic checkout buttons;
    7. \n
  7. Show payment types – the setting is responsible for showing/hiding payment types;
    8. \n
  8. 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;
    \n\"Shipping
    9. \n
  9. Show compare-at-price in Cart – the option allows you to display compare-at-price in Cart.
    10. \n
  10. Checkout button label – label for the Checkout button;
    11. \n
  11. Terms and conditions text – the setting allows you to specify the Terms and Conditions text.
    12. \n
\n

Cart notification

\n

\"Cart

\n
    \n
  1. Show cart notification – the setting is responsible for showing/hiding the popup when adding to the cart.
    2. \n
\n

\n

Empty cart

\n

\n

\"Empty

\n
    \n
  1. Empty cart heading – message displayed when the cart is empty;
    2. \n
  2. Show continue shopping link – the setting is responsible for showing/hiding the link;
    3. \n
  3. Empty cart link text – link text displayed when the page is empty;
    4. \n
  4. Empty cart link URL – URL of the link displayed when the page is empty (/collections/all – default).
    5. \n
\n

\n

Minimum order amount

\n

\n

\"Minimum

\n
    \n
  1. Enable – enable minimum order amount block;
    2. \n
  2. Goal amount – subtotal that allows the client to go to checkout;
    3. \n
  3. Goal message – message to show the client if he is not eligible to go to checkout;
    4. \n
  4. Goal is reached message – message to show client if he is eligible to go to checkout;
    5. \n
  5. Text color – message to show client if he is not eligible to go to checkout color;
    6. \n
  6. Reached goal text color – message to show client if he is eligible to go to checkout color.
    7. \n
\n

\n

Disclaimer: This feature only makes the checkout button disabled, the user still can go to checkout with a direct link.

\n

\n

\"Minimum

\n

\n","blockTitle":"Cart","fieldGroupName":"manual_category_blocks","hash":"general-cart"},{"blockContent":"

This settings block is intended for general Product settings on the site.

\n

In order to get to the Product settings block, you need to go to Customizer → Theme Settings → Product.

\n

\"Product

\n

Settings

\n

\"unit-price\"

\n
    \n
  1. Default product image – this image will be used when the product has no image;
    2. \n
  2. 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.
    3. \n
\n

Labels

\n

\"labels\"

\n
    \n
  1. 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;
    2. \n
  2. For each type of label, there are color settings. This way you can change the color of the label text: primary, secondary, base, soldout;
    3. \n
  3. The background is specified for each label;
    4. \n
  4. Background transparency is specified for each label using a range step range of 10%. The minimum value is 10% and the maximum is 100%.
    5. \n
\n

Swatches

\n

\"Swatches

\n
    \n
  1. 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;
    \nVideo guide: Color swatches setting.
    2. \n
  2. 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.
    3. \n
\n","blockTitle":"Product","fieldGroupName":"manual_category_blocks","hash":"general-product"},{"blockContent":"

This block of settings is intended for general Product card settings on the site.

\n

In order to get to the Product card settings block, you need to go to Customizer→Theme Settings→Product card.

\n

\"Product

\n

Settings

\n

General

\n

\"product

\n
    \n
  1. Show vendor – the setting is responsible for whether the vendor of the product will be shown;
    2. \n
  2. 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;
    \nVideo guide: How to set up the Quick view.
    3. \n
  3. Buttons type – a type of quick view / add to cart button (icon or text);
    4. \n
  4. Show currency code – the setting is responsible for whether the currency code will be shown;
    5. \n
  5. Show borders – the setting is responsible for whether borders will be added to the card;
    6. \n
  6. Border color – card border-color;
    7. \n
  7. Border color (hover) – card border color on hover;
    8. \n
  8. 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;
    9. \n
  9. 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;
    10. \n
  10. Quick view background – adds a background for the Quick view button on the Desktop. Works if Image width is set to – full width;
    11. \n
  11. Text color – product card text color.
    12. \n
\n

Image

\n

\"product-card\"

\n
    \n
  1. 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.
    \nVideo guide: How to set up hover image.

    \n\n
    2. \n
\n

Text button colors

\n

\"Product

\n
    \n
  1. Label – setting allows you to set the color of the button label;
    2. \n
  2. Background – setting allows you to set the color of the button background color;
    3. \n
  3. Border – setting allows you to set the color of the button border color;
    4. \n
  4. Label (hover) – setting allows you to set the color of the button label on hover;
    5. \n
  5. Background (hover) – setting allows you to set the color of the button background color on hover;
    6. \n
  6. Border (hover) – setting allows you to set the color of the button border color on hover.
    7. \n
\n","blockTitle":"Product card","fieldGroupName":"manual_category_blocks","hash":"general-product-card"},{"blockContent":"

Video guide: How to set up the Compare Products feature.
\nThis block of settings is intended for Compare products settings on the site.

\n

In order to get to the Compare products settings block, you need to go to Customizer → Theme Settings → Compare products.

\n

\"Compare

\n

Settings

\n

\"Compare

\n
    \n
  1. Enable – the setting allows you to display or not display product compare buttons;
    2. \n
  2. Popup heading – heading of compare buttons popup
    3. \n
\n

Compare products feature

\n

Compare products feature allows users to compare up to 6 products.

\n

\"Compare

\n","blockTitle":"Compare products","fieldGroupName":"manual_category_blocks","hash":"general-compare-products"},{"blockContent":"

This block of settings is intended for general settings of the Article card on the site.

\n

In order to get to the Article card settings block, you need to go to Customizer → Theme Settings → Article card.

\n

\"Article

\n

Settings

\n

\"Article

\n
    \n
  1. Default article image – the setting is used to add a default image if the article does not have one;
    2. \n
  2. Show borders – the setting is responsible for showing/hidden borders;
    3. \n
  3. Show blog post date – the setting is responsible for showing/hiding the publication dates of the article;
    4. \n
  4. Show blog post author – the setting is responsible for showing/hiding the author of the article;
    5. \n
  5. Show blog post tag – the setting is responsible for showing/hiding article tags;
    6. \n
  6. Strip title to 3 line – the setting is responsible for trimming the title of the article to 3 lines;
    7. \n
  7. Strip content to 3 line – the setting is responsible for trimming the content of the article to 3 lines;
    8. \n
  8. Show comments count – the setting is responsible for showing/hiding the number of comments;
    9. \n
  9. Border color – border color.
    10. \n
\n","blockTitle":"Article card","fieldGroupName":"manual_category_blocks","hash":"general-article-card"},{"blockContent":"

\"Quick

\n

For customers

\n

\"Quick

\n

Quick view settings

\n

\"Quick
\nVideo guide: How to set up the Quick view.

\n
    \n
  1. Show additional payment buttons – the setting allows you to display or not display dynamic checkout buttons;
    2. \n
  2. Variant picker – the setting allows you to select the type of variant selection, two options are presented: buttons or dropdown;
    3. \n
  3. Object fit image – setting allows you to set the value for the object-fit property of the image.
    4. \n
\n

Countdown timer

\n

\"Quick

\n
    \n
  1. Show – if checked – the countdown timer will be shown;
    2. \n
  2. Text – Text before countdown timer;
    3. \n
  3. Icon – Image before countdown timer. (Recommended size 48×48);
    4. \n
  4. Text color – Text before countdown timer color;
    5. \n
  5. Timer text color – Timer cells text color;
    6. \n
  6. Timer background color – Timer cells background color.
    7. \n
\n

\"Quick

\n

To show the countdown timer:

\n\n

\"Quick

\n\n

Product Settings

\n

\"quick-view\"

\n
    \n
  1. Default product image – this image will be used when the product has no image;
    2. \n
  2. 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.
    3. \n
\n

Labels

\n

\"Product

\n
    \n
  1. 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;
    2. \n
  2. For each type of label, there are color settings. This way you can change the color of the label text: primary, secondary, base, soldout;
    3. \n
  3. The background is specified for each label;
    4. \n
  4. Background transparency is specified for each label using the range step range of 10%. The minimum value is 10% and the maximum is 100%.
    5. \n
\n

Swatches

\n

\"Product

\n
    \n
  1. 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;
    \nVideo guide: Color swatches setting.
    2. \n
  2. 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.
    3. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. 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.\"Snippet:\n
      \n
    1. product – the product object from which all information about the price is pulled;
      2. \n
    2. price_class – a string in which you can specify a custom class;
      3. \n
    3. 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;
      4. \n
    4. currency_code_enabled – setting responsible for whether a currency code will be displayed near the price, for example, USD for dollars;
      5. \n
    5. show_unit_price – setting responsible for whether unit_price will be shown. Used for German shops.
      6. \n
    \n
    2. \n
  2. quick-view-image.liquid – a snippet that displays the image.\"quick-view-image.liquid\"\n
      \n
    1. image – image link.
      2. \n
    \n
    3. \n
  3. quick-view-form.liquid – a snippet that displays the form for the submitted product.\"Snippet:\n
      \n
    1. product – the product object from which all information is pulled.
      2. \n
    \n
    4. \n
\n

JS Event

\n

Quick View opens when an Event with the name – product-card:quick-view:clicked is generated. In this event,  handle the product is passed.

\n

Additional information

\n

The remaining settings (texts) are taken from the translations. Quick view:

\n

\"Quick

\n
    \n
  1. Add to cart – setting allows you to set the text inside the “Add to cart” button;
    2. \n
  2. Visit product page – the setting allows you to set the text inside the “Visit product page” button;
    3. \n
  3. Close popup – setting allows you to set the text inside the “Close popup” button.
    4. \n
\n","blockTitle":"Quick view","fieldGroupName":"manual_category_blocks","hash":"general-quick-view"},{"blockContent":"

This block of settings is intended for general Predictive search settings on the site.

\n

In order to get to the Predictive search settings block, you need to go to Customizer → Theme Settings → Predictive search.

\n

\"Predictive

\n

Settings

\n

\"Predictive

\n
    \n
  1. Enable search by articles – setting allows to include of articles in the search;
    2. \n
  2. Enable search by pages – setting allows to include of pages in the search.
    3. \n
\n","blockTitle":"Predictive search","fieldGroupName":"manual_category_blocks","hash":"general-predictive-search"},{"blockContent":"

This block of settings is intended for general settings of Social media on the site.

\n

In order to get to the Social media settings block, you need to go to Customizer → Theme Settings → Social media.

\n

\"Social

\n

Settings

\n

Social accounts

\n

\"Social

\n
    \n
  1. Twitter – link to the store’s Twitter account;
    2. \n
  2. Facebook – link to the store’s Facebook account;
    3. \n
  3. Pinterest -link to the store’s Pinterest account;
    4. \n
  4. Instagram – link to the store’s Instagram account;
    5. \n
  5. Tumblr – link to the store’s Tumblr account;
    6. \n
  6. YouTube – link to the store’s YouTube account;
    7. \n
  7. TikTok – link to the store’s TikTok account.
    8. \n
\n","blockTitle":"Social media","fieldGroupName":"manual_category_blocks","hash":"general-social-media"},{"blockContent":"

\"Cookie

\n

For Customers

\n

\"Cookie

\n

General

\n

\"Cookie

\n

Video guide: How to set up the Cookie Bar Popup.

\n
    \n
  1. Enable – the setting is responsible for enabling popup;
    2. \n
  2. Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;
    3. \n
  3. Heading – setting allows you to set title text;
    4. \n
  4. Description – setting allows you to set description text;
    5. \n
  5. Button labels – setting allows you to set button text.
    6. \n
\n

Colors

\n

\"Cookie

\n
    \n
  1. Background – the setting is responsible for widget background color;
    2. \n
  2. Text – the setting is responsible for widget text color;
    3. \n
  3. Button background – the setting is responsible for the button background color;
    4. \n
  4. Button label – the setting is responsible for button text color;
    5. \n
  5. Button border – the setting is responsible for button border color;
    6. \n
  6. Button background (hover) – the setting is responsible for the button background color on hover;
    7. \n
  7. Button label (hover)– the setting is responsible for button text color on hover;
    8. \n
  8. Button border(hover) – the setting is responsible for the button border color on hover.
    9. \n
\n

For Developers

\n

The cookie-bar.liquid a snippet is included in the theme.liquid file.

\n","blockTitle":"Cookie bar popup","fieldGroupName":"manual_category_blocks","hash":"general-cookie-bar"},{"blockContent":"

Video guide: How to set up the Cart Reminder Popup.

\n

This block of settings is intended for the general settings of the Cart reminder on the site.

\n

In order to get to the Cart reminder settings block, you need to go to Customizer → Theme Settings → Cart reminder.

\n

\"Cart

\n

Settings

\n

\"Cart

\n
    \n
  1. Enable – the setting is responsible for enabling/disabling the popup;
    2. \n
  2. 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;
    3. \n
  3. 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;
    4. \n
  4. Text – the setting is responsible for the text inside the popup;
    5. \n
  5. Color text – the setting is responsible for the text color;
    6. \n
  6. Color background – the setting is responsible for the popup background.
    7. \n
\n","blockTitle":"Cart reminder popup","fieldGroupName":"manual_category_blocks","hash":"general-cart-reminder"},{"blockContent":"

Video guide: How to set up the Newsletter Popup.

\n

This block of settings is intended for the general settings of the Newsletter popup on the site.

\n

In order to get to the Newsletter popup settings block, you need to go to Customizer → Theme Settings → Newsletter popup.

\n

\"Newsletter

\n

Settings

\n

\"Newsletter

\n
    \n
  1. Enable – the setting is responsible for enabling/disabling the popup;
    2. \n
  2. 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;
    3. \n
  3. Heading – popup title text field;
    4. \n
  4. Text – text field for text content;
    5. \n
  5. Input placeholder – placeholder for the input;
    6. \n
  6. Button submit label – label for the submit button;
    7. \n
  7. Button close label – label for the close button;
    8. \n
  8. Image desktop – image picker for Desktop;
    9. \n
  9. Image mobile – image picker for Mobile (Desktop – default);
    10. \n
  10. Hide image on mobile – the setting is responsible for showing/hiding the image on mobile;
    11. \n
  11. Show socials – enable to show social links.
    12. \n
\n","blockTitle":"Newsletter popup","fieldGroupName":"manual_category_blocks","hash":"general-newsletter-popup"},{"blockContent":"

Video guide: How to set up the Age Check Popup.

\n

This block of settings is intended for general settings of the Age check popup on the site.

\n

If the customer closes the popup – the redirect will work.

\n

If the customer clicks on the main button – the popup will close and the customer can use a site.

\n

\"Age

\n

In order to get to the Age check popup settings block, you need to go to Customizer → Theme Settings → Age check popup.

\n

\"Age

\n

Settings

\n

\"Age

\n
    \n
  1. Enable – the setting is responsible for enabling/disabling the popup;
    2. \n
  2. 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;
    3. \n
  3. Heading – popup title text field;
    4. \n
  4. Text – text field for text content;
    5. \n
  5. Button label – label for the main button;
    6. \n
  6. Button close label – label for the close button;
    7. \n
  7. Redirect link – link for redirect if the customer closes the popup. The “www.google.com” link is used by default ;
    8. \n
  8. Image desktop – image picker for Desktop;
    9. \n
  9. Image mobile – image picker for Mobile (Desktop – default);
    10. \n
  10. Hide image on mobile – the setting is responsible for showing/hiding the image on mobile.
    11. \n
\n","blockTitle":"Age check popup","fieldGroupName":"manual_category_blocks","hash":"general-age-check-popup"},{"blockContent":"

\"Product

\n

For Customers

\n

\"Product

\n

General

\n

\"Product

\n

Video guide: How to set up the Product Promo Popup.

\n
    \n
  1. Enable – the setting is responsible for enabling popup;
    2. \n
  2. Layout – the setting is responsible for choosing the layout. There are two settings to choose from: Text, Product;\"Products\"Products
    3. \n
  3. Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;
    4. \n
  4. Heading – setting allows you to set title text;
    5. \n
  5. Product description – setting allows you to set product description quick view which opens on click;
    6. \n
  6. Product – setting allows you to set the product to open quick view on click.
    7. \n
\n

Colors

\n

\"Products

\n
    \n
  1. Background – setting allows you to set the background color;
    2. \n
  2. Border – setting allows you to set border color;
    3. \n
  3. Text – setting allows you to set text color;
    4. \n
  4. Button background – setting allows you to set button background color;
    5. \n
  5. Button label – setting allows you to set button label color;
    6. \n
  6. Button border – setting allows you to set button border color;
    7. \n
  7. Button background (hover) – setting allows you to set button background color on hover;
    8. \n
  8. Button label (hover) – setting allows you to set button label color on hover;
    9. \n
  9. Button border (hover) – setting allows you to set button border color on hover.
    10. \n
\n

For Developers

\n

The product-promo.liquid a snippet is included in the theme.liquid file.

\n

Additional information

\n

\"Product

\n

The remaining settings (texts) are taken from the translations. Product promo:

\n
    \n
  1. Button aria – message for button aria-label.
    2. \n
\n","blockTitle":"Product promo popup","fieldGroupName":"manual_category_blocks","hash":"general-product-promo"},{"blockContent":"

Video guide: How to set up the Promotion Banner Popup.

\n

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.

\n

\"Promotion

\n

\"Promotion

\n

For Customers

\n

\"Promotion

\n

General

\n

\"Promotion

\n
    \n
  1. Enable – enable popup;
    2. \n
  2. Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;
    3. \n
  3. Heading – a title of the banner;
    4. \n
  4. Subheading – a subtitle of the banner;
    5. \n
  5. Button label – a text of the button;
    6. \n
  6. Button link – a link to the button;
    7. \n
  7. Image – an image of the banner;
    8. \n
  8. Products – products that will appear in the popup, after clicking on the banner;
    9. \n
  9. Background color – setting allows you to set the background color;
    10. \n
  10. Text color – setting allows you to set text color;
    11. \n
  11. Product – setting allows you to set the product to open quick view on click;
    12. \n
  12. Product description – setting allows you to set product description quick view which opens on click.
    13. \n
\n

Colors

\n

\"Promotion

\n
    \n
  1. Background– background color of the banner;
    2. \n
  2. Text – a color text of the banner;
    3. \n
  3. Button background – a button background color;
    4. \n
  4. Button text – a button text color;
    5. \n
  5. Button border – a button border color;
    6. \n
  6. Button background (hover) – a button background color on hover;
    7. \n
  7. Button text (hover) – a button text color on hover;
    8. \n
  8. Button border (hover) – a button border color on hover.
    9. \n
\n

Additional information

\n

If the setting “Products” is empty and the setting “Button link” is filled, clicking on the banner will open a link.

\n

If the setting “Products” is not empty, clicking on the banner will open a popup with products.

\n","blockTitle":"Promotion banner popup","fieldGroupName":"manual_category_blocks","hash":"general-promotion-banner"},{"blockContent":"

Video guide: How to add the Gift box button.
\nWith this feature, you can show Add gift box button on the Product template, Featured product, Cart drawer, and Cart sections.

\n

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.

\n

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.

\n

The gift button will appear if the selected Product is available.

\n

\"Gift

\n

In order to get to the Gift wrap product settings block, you need to go to Customizer → Theme Settings → Gift wrap product.

\n

\"Gift

\n

Settings

\n

\"Gift

\n
    \n
  1. Product – select a product to be added to your cart after clicking on the “Add gift box” button;
    2. \n
  2. Button label – text of the button;
    3. \n
  3. Button icon – the icon of the button. If not set – icon from theme files will be used.
    4. \n
\n","blockTitle":"Gift wrap product","fieldGroupName":"manual_category_blocks","hash":"general-gift-wrap-product"},{"blockContent":"

This settings block is intended for general Breadcrumbs settings on the site.

\n

In order to get to the Breadcrumbs settings block, you need to go to Customizer → Theme Settings → Breadcrumbs.

\n

\"Breadcrumbs

\n

Settings

\n

\"Breadcrumbs

\n
    \n
  1. Show breadcrumbs – the setting is responsible for showing/hiding breadcrumbs.
    2. \n
\n","blockTitle":"Breadcrumbs","fieldGroupName":"manual_category_blocks","hash":"general-breadcrumbs"},{"blockContent":"

This settings block is intended for general Seo settings on the site.

\n

In order to get to the Seo settings block, you need to go to Customizer → Theme Settings → Seo.

\n

\"Seo

\n

Settings

\n

\"Seo

\n
    \n
  1. Hide site from search engine – the setting is responsible for hiding pages from indexing by search robots.
    2. \n
\n","blockTitle":"Seo ","fieldGroupName":"manual_category_blocks","hash":"general-seo"},{"blockContent":"

This block of settings is intended for general Checkout settings on the site.

\n

In order to get to the Checkout settings block, you need to go to Customizer → Theme Settings → Checkout.

\n

\"Checkout

\n

Settings

\n

Banner

\n

\"Checkout

\n
    \n
  1. Background image – background image for the banner.
    2. \n
\n

Logo

\n

\"Checkout

\n
    \n
  1. Custom image – picker image that will be displayed as a logo;
    2. \n
  2. Position – logo positioning. Has several values: left, center, and right;
    3. \n
  3. Logo size – choice of logo size. It has several meanings: small, medium, and large.
    4. \n
\n

Main content area

\n

\"Checkout

\n
    \n
  1. Background image – background image for the main part;
    2. \n
  2. Background color – background color for the main part;
    3. \n
  3. Form fields – input color. It has several meanings: white, transparent.
    4. \n
\n

Order summary

\n

\"Checkout

\n
    \n
  1. Background image – background image for the block with goods;
    2. \n
  2. Background color – background color for the block with goods.
    3. \n
\n

Typography

\n

\"Checkout

\n
    \n
  1. Headings – font selection select for headings;
    2. \n
  2. Body – font selection select for plain text.
    3. \n
\n

Colors

\n

\"Checkout

\n
    \n
  1. Accents – accent color;
    2. \n
  2. Buttons – buttons color;
    3. \n
  3. Errors – errors color.
    4. \n
\n

Checkout settings

\n

\"Checkout

\n
    \n
  1. Learn more link about the additional settings in the admin panel.
    2. \n
\n","blockTitle":"Checkout","fieldGroupName":"manual_category_blocks","hash":"general-checkout"},{"blockContent":"

This block of settings is intended for general Custom CSS settings on the site.

\n

In order to get to the Custom CSS settings block, you need to go to Customizer → Theme Settings → Custom CSS.

\n

\"Custom

\n

Settings

\n

\"Custom

\n
    \n
  1. Textarea – a text area where you can add your CSS code for customization.
    2. \n
\n

Additional information

\n
    \n
  1. In this block, your CSS will be added at the end of the page, and the same custom CSS block that is in the section settings will be added to the end of the section.
    2. \n
\n","blockTitle":"Custom CSS","fieldGroupName":"manual_category_blocks","hash":"general-custom-css"},{"blockContent":"

Gain Theme supports B2B selling of a specific minimum quantity of items.

\n

Quantity Increment

\n

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.

\n

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.

\n

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.

\n

Minimum Order Quantity

\n

The fewest number of items of the variant that a customer can purchase at the same time.

\n

To set quantity rules, you need to set a value of 1 or greater for both Quantity Increment and Minimum Order Quantity.

\n

To learn more about the quantity rule for B2B, check out this article from Shopify.

\n","blockTitle":"B2B Quantity Rule","fieldGroupName":"manual_category_blocks","hash":"b2b-quantity-rule"}]},{"fieldGroupName":"manual_category","manualCategoryTitle":"Pages","manualCategoryBlocks":[{"blockContent":"

This is a homepage with a default template index.json 

\n

\"Pages.

\n

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.

\n

\"Pages.

\n

The only thing that limits you is the section limit – 25.

\n","blockTitle":"Homepage","fieldGroupName":"manual_category_blocks","hash":"pages-homepage"},{"blockContent":"

This is a collection page with a default template collection.json

\n

\"Pages.

\n

This template is used by default for the collection page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Collection template” to configure the appearance and additional settings of the page.
\nVideo guide: How to set up the Collection Page.

\n

\n","blockTitle":"Collection","fieldGroupName":"manual_category_blocks","hash":"pages-collection"},{"blockContent":"

This is a product page with a default template product.json

\n

\"Pages.

\n

This template is used by default for the product page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Product template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Product","fieldGroupName":"manual_category_blocks","hash":"pages-product"},{"blockContent":"

This is a product page with default template product.pre-order.json

\n

\n

\"preorder\"

\n

This template can be used to show customers that the product is available for Pre-order purchase.

\n

\n

\"webpage

\n

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”:

\n

\n

\"preorder

\n

You can use the section “Product template” to configure the appearance and additional settings of the page.

\n

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.

\n

\"view\"

\n

\n","blockTitle":"Product (Pre-order)","fieldGroupName":"manual_category_blocks","hash":"pages-product-preorder"},{"blockContent":"

This is a page with a default template cart.json

\n

\"Pages.

\n

This template is used by default for the cart page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Cart template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Cart","fieldGroupName":"manual_category_blocks","hash":"pages-cart"},{"blockContent":"

Video guide: How to set up the Collection List section and page.

\n

This is a page with a default template list-collections.json

\n

\"Pages.

\n

This template is used by default for the collection list page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “List collections” to configure the appearance and additional settings of the page.

\n","blockTitle":"Collections list","fieldGroupName":"manual_category_blocks","hash":"pages-collections-list"},{"blockContent":"

Video guide: How to set up the Search Page.

\n

This is a page with a default template search.json

\n

\"Pages.

\n

This template is used by default for the search page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Search template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Search","fieldGroupName":"manual_category_blocks","hash":"pages-search"},{"blockContent":"

Video guide: How to create the Blog and the Blog Post in your Shopify Admin Panel.

\n

This is a blog page with a default template blog.json

\n

\"Pages.

\n

This template is used by default for the blog page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Blog template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Blog","fieldGroupName":"manual_category_blocks","hash":"pages-blog"},{"blockContent":"

This is a blog post page with a default template article.json

\n

\"Pages.

\n

This template is used by default for the single blog page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Article template” to configure the appearance and additional settings.

\n","blockTitle":"Article","fieldGroupName":"manual_category_blocks","hash":"pages-article"},{"blockContent":"

Video guide: How to create and set up the Our Story Page.

\n

This is a page with a unique template page.our-story.json

\n

\"Pages.

\n

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.

\n

\"Pages.

\n

You can use the section “Our team” to add information about your team.

\n","blockTitle":"Our story","fieldGroupName":"manual_category_blocks","hash":"pages-our-story"},{"blockContent":"

Video guide: How to set up the Store Locator Page.

\n

This is a page with a unique template page.store-locator.json

\n

\"Pages.

\n

This template can be used to show customers short information about your stores, with image or Google map.

\n

\"Pages.

\n

You can use the section “Store location” to add information about the stores.

\n","blockTitle":"Store locator","fieldGroupName":"manual_category_blocks","hash":"pages-store-locator"},{"blockContent":"

Video guide: How to set up the FAQs Page.

\n

This is a page with a unique template page.faq.json

\n

\"Pages.

\n

This template can be used to show customers the answers to the frequently asked questions.

\n

\"Pages.

\n

You can use the FAQ template section to add answers to frequently asked questions.

\n","blockTitle":"FAQ","fieldGroupName":"manual_category_blocks","hash":"pages-faq"},{"blockContent":"

Video guide: How to create and set up the Shipping Page.

\n

This is a page with a unique template page.shipping.json

\n

\"Pages.

\n

This template can be used to show customers full information about your policies of shipping.

\n

\"Pages.

\n

You can use the section “Shipping template” to customize section offsets.

\n","blockTitle":"Shipping & Returns","fieldGroupName":"manual_category_blocks","hash":"pages-shipping-and-returns"},{"blockContent":"

Video guide: How to create and add the Contact Page.

\n

This is a page with a unique template page.contact.json

\n

\"Pages.

\n

This template is used for the Contact page to show contact information for your customers.

\n

\"Pages.

\n

You can use the “Contact template” section to configure the appearance and additional settings of the page.

\n","blockTitle":"Contact us","fieldGroupName":"manual_category_blocks","hash":"pages-contact-us"},{"blockContent":"

Video guide: How to set up the 404 (Not Found) Page.

\n

This is a page with a unique template 404.json

\n

\"Pages.

\n

This template can be used to display information for the user when they open a hidden or non-existent page.

\n

\"Pages.

\n

You can use the section “404 template” to add additional information for the user.

\n","blockTitle":"404 page","fieldGroupName":"manual_category_blocks","hash":"pages-404"},{"blockContent":"

Video guide: How to set up the Password Page.

\n

This is a page with a unique template password.json

\n

\"Pages.

\n

This template is used by default for the password page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use “Password header”, “Password content”, “Password footer” sections to configure the appearance and additional settings of the page.

\n","blockTitle":"Password page","fieldGroupName":"manual_category_blocks","hash":"pages-password"},{"blockContent":"

Video guide: How to create and set up the Gift Card.

\n

This is a page with a unique template gift_card.liquid

\n

\"Pages.

\n

This template is used by default for the Gift card. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use “Gift card” section to configure the appearance and additional settings of the page.

\n","blockTitle":"Gift card","fieldGroupName":"manual_category_blocks","hash":"pages-gift-card"},{"blockContent":"

This is a page with a unique template login.json

\n

\"Pages.

\n

This template is used by default for the Login page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Login template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Login","fieldGroupName":"manual_category_blocks","hash":"pages-login"},{"blockContent":"

This is a page with a unique template register.json

\n

\"Pages.

\n

This template is used by default for the Register page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Register template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Register","fieldGroupName":"manual_category_blocks","hash":"pages-register"},{"blockContent":"

This is a page with a unique template activate.json

\n

\"Pages.

\n

This template is used by default for the Activate account page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Activate template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Activate","fieldGroupName":"manual_category_blocks","hash":"pages-activate"},{"blockContent":"

This is a page with a unique template reset.json

\n

\"Pages.

\n

This template is used by default for the Reset account page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Reset template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Reset","fieldGroupName":"manual_category_blocks","hash":"pages-reset"},{"blockContent":"

This is a page with a unique template order.json

\n

\"Pages.

\n

This template is used by default for the Order page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Order template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Order","fieldGroupName":"manual_category_blocks","hash":"pages-order"},{"blockContent":"

This is a page with a unique template account.json

\n

\"Pages.

\n

This template is used by default for the Account page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Account template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Account","fieldGroupName":"manual_category_blocks","hash":"pages-account"},{"blockContent":"

This is a page with a unique template addresses.json

\n

\"Pages.

\n

This template is used by default for the Addresses page. You don’t need to add anything for this template to be displayed.

\n

\"Pages.

\n

You can use the section “Addresses template” to configure the appearance and additional settings of the page.

\n","blockTitle":"Addresses","fieldGroupName":"manual_category_blocks","hash":"pages-addresses"}]},{"fieldGroupName":"manual_category","manualCategoryTitle":"Sections & Snippets","manualCategoryBlocks":[{"blockContent":"

\n

\"Announcement

\n

\"Announcement

\n

\"Announcement

\n

For Customer

\n

Adding a section

\n

\"Announcement

\n

Video guide: How to set up the Announcement Bar.

\n

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.

\n

You can show static content or enable a slideshow if you add “Text slide” blocks to the section.

\n

Section settings

\n

Slideshow

\n

\"Announcement

\n
    \n
  1. Enable autoplay – enable autoplay in the slideshow, if blocks added to the section;
    2. \n
  2. Autoplay speed – select an autoplay speed in the slideshow, if blocks added to the section.
    3. \n
\n

General

\n

\"Announcement

\n
    \n
  1. Show – the setting is responsible for displaying the Announcement bar;
    2. \n
  2. Layout – the setting is responsible for choosing the type of display. There are two options to choose from:\n\n
    3. \n
  3. Background image – adding a background image;
    4. \n
  4. Background image type – Selecting the type of background image display:\n\n
    5. \n
  5. Show bottom border – the setting is responsible for adding a border below the Announcement bar;
    6. \n
  6. Show socials – the setting is responsible for displaying social icons;
    7. \n
  7. Additional menu – the setting is responsible for displaying links.
    8. \n
\n

Simple text

\n

\"Announcement

\n
    \n
  1. Text desktop – text content for Desktop;
    2. \n
  2. Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.
    3. \n
\n

Countdown timer

\n

\"Announcement

\n

Video guide: How to set up Countdown Timer.

\n
    \n
  1. Text desktop – text content for Desktop;
    2. \n
  2. Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.
    3. \n
  3. Year – years until the end of the countdown;
    4. \n
  4. Month – months until the end of the countdown;
    5. \n
  5. Day – days until the end of the countdown;
    6. \n
  6. Hour – hours until the end of the countdown;
    7. \n
  7. Timezone – Timezone of the countdown;
    8. \n
  8. Button label – button label;
    9. \n
  9. Button link – button link.
    10. \n
\n

Colors

\n

\"Announcement

\n
    \n
  1. Background – section background color;
    2. \n
  2. Border bottom color – the color of the bottom border section;
    3. \n
  3. Text – text color;
    4. \n
  4. Link – link color;
    5. \n
  5. Button label– button label color;
    6. \n
  6. Button background – button background color;
    7. \n
  7. Button border – button border color;
    8. \n
  8. Button cross – close button color;
    9. \n
  9. Button label (hover) – button label color on hover;
    10. \n
  10. Button background (hover) – button background color on hover;
    11. \n
  11. Button border (hover) – button border color on hover;
    12. \n
  12. Button cross (hover) – the color of the close button on hover;
    13. \n
  13. Social icon – the color of the social icons;
    14. \n
  14. Social icon (hover) – the color of the social icons on hover.
    15. \n
\n

Section has blocks “Text slide”.

\n

Block settings

\n
    \n
  1. Layout – the setting is responsible for choosing the type of display. There are two options to choose from:\n\n
    2. \n
\n

Simple text

\n

\"Announcement

\n
    \n
  1. Text desktop – text content for Desktop;
    2. \n
  2. Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.
    3. \n
\n

Countdown timer

\n

\"Announcement

\n
    \n
  1. Text desktop – text content for Desktop;
    2. \n
  2. Text mobile – text content for Mobile. If the content is empty, the content will be taken from the Desktop version.
    3. \n
  3. Year – years until the end of the countdown;
    4. \n
  4. Month – months until the end of the countdown;
    5. \n
  5. Day – days until the end of the countdown;
    6. \n
  6. Hour – hours until the end of the countdown;
    7. \n
  7. Timezone – Timezone of the countdown;
    8. \n
  8. Button label – button label;
    9. \n
  9. Button link – button link.
    10. \n
\n

For Developers

\n

JS Events

\n
    \n
  1. When the section is init, the event is dropped – announcement-bar:loaded.
    2. \n
  2. Any timer change drops event – announcement-bar:changed.
    3. \n
\n

Additional Information

\n
    \n
  1. When closing the Announcement bar, it is hidden and will be shown only if you close the tabs and open the store again.
    2. \n
  2. The closing data is added to the Session Storage with the name – showAnnouncementBar.
    3. \n
  3. In noscript mode, the Announcement bar is not displayed.
    4. \n
  4. If you set an incorrect date, the timer will not start and will remain with zero values.
    5. \n
  5. When the timer expires, zero values remain.
    6. \n
\n","blockTitle":"Announcement bar","fieldGroupName":"manual_category_blocks","hash":"section-announcement-bar"},{"blockContent":"

\"Header

\n

For Customer

\n

Adding a Section

\n

\"Header

\n

Video guide: How to set up the Header section.

\n

The section is static, it is added initially and cannot be removed.

\n

Section settings

\n

General

\n

\"Header

\n
    \n
  1. Type – header type, 3 options are presented:\n\n
    2. \n
  2. 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;\"Header
    3. \n
  3. Show bottom border – when enabled, a border appears under the header;
    4. \n
  4. Show borders in mega menu – the setting is responsible for showing/hiding borders between mega menu elements;
    5. \n
  5. Show box shadow – when enabled, a box-shadow appears under the header;
    6. \n
  6. Show language selector – when enabled in the main and mobile menus, a language selector is added;
    7. \n
  7. Show country/region selector – the checkbox is responsible for enabling/disabling change of the country (currency). To manage, go to settings → payments.
    8. \n
\n

Logo

\n

\"header-logo\"

\n

\"gain

\n
    \n
  1. Image – logo image picker, if not specified, the text name of the store will be displayed;
    2. \n
  2. 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;
    3. \n
  3. 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;
    4. \n
  4. Desktop position – the setting is responsible for the position of the logo on the Desktop, either top, left (by default) or centered.
    \n\"Header
    \n\"Header
    \n\"Header
    5. \n
\n

Menu

\n

\"menu\"

\n

Video guide: How to set up the Dropdown Menu and Mega Menu.

\n
    \n
  1. Main menu – a menu picker that will be used for both Desktop and Mobile;
    2. \n
  2. Type – nested menu type selector for Desktop:\n\n
    3. \n
  3. Open by – submenu opening selection selector on Desktop: By hover, By click.
    4. \n
  4. 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.
    5. \n
\n

Colors

\n

\"Header

\n
    \n
  1. Background – picker for header background and dropdown menus;
    2. \n
  2. Background mobile menu – background for mobile menu;
    3. \n
  3. Text – text color picker;
    4. \n
  4. Text (transparent header) – text color picker for the transparent header;
    5. \n
  5. Icon – picker color icons;
    6. \n
  6. Icon (transparent header) – picker color icons for the transparent header;
    7. \n
  7. Count text – color picker for the text of the number of items in the cart;
    8. \n
  8. Count text (transparent header) – color picker for the text of the number of items in the cart for the transparent header;
    9. \n
  9. Count background – color picker for the background of the number of items in the cart;
    10. \n
  10. Count background (transparent header) – color picker for the background of the number of items in the cart for the transparent header;
    11. \n
  11. Border – the color of the bottom border in the header and the border in the mega menu;
    12. \n
  12. Megamenu image text – color for the image text in the mega menu;
    13. \n
  13. Megamenu image overlay – overlay color picker for the first image in the mega menu.
    14. \n
\n

Blocks settings

\n

Video Guide: How to set up every Mega Menu block.

\n

Block Mega menu

\n

\"Header

\n

General

\n

\"Header

\n
    \n
  1. 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;
    2. \n
  2. Menu type – setting allows you to select the type of menu display. There are 2 types:\n\n
    3. \n
  3. Badge text – this setting allows you to add a badge above the menu;\"Header
    4. \n
  4. Badge text color – this setting allows you to set the text color of the badge;
    5. \n
  5. Badge background color – this setting allows you to set the color background color of the badge.
    6. \n
\n

Media item 1 / Media item 2

\n

\"Header

\n
    \n
  1. Image – the first image in the mega menu;
    2. \n
  2. Label – the label of the first image in the mega menu;
    3. \n
  3. Heading – heading the first image in the mega menu;
    4. \n
  4. Link – link the first image in the mega menu.
    5. \n
  5. Product – this setting allows you to display a product card. The product has a higher priority than the picture.\"Header
    6. \n
\n

Block Mega menu half to half

\n

\"Header

\n

General

\n

\"Header

\n
    \n
  1. 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;
    2. \n
  2. Badge text – this setting allows you to add a badge above the menu;\"Header
    3. \n
  3. Badge text color – this setting allows you to set the text color of the badge;
    4. \n
  4. Badge background color – this setting allows you to set the background color of the badge.
    5. \n
\n

Text side

\n

\"Header

\n
    \n
  1. Heading – the setting allows you to specify a heading;
    2. \n
  2. Subheading – the setting allows you to specify a subheading;
    3. \n
  3. Short text – the setting allows you to specify a text;
    4. \n
  4. Button label 1 – the setting allows you to specify a label for button 1;
    5. \n
  5. Button link 1 – the setting allows you to specify a link for button 1;
    6. \n
  6. Button style 1 – the setting allows you to select a style for button 1;
    7. \n
  7. Button label 2 – the setting allows you to specify a label for button 2;
    8. \n
  8. Button link 2 – the setting allows you to specify a link for button 2;
    9. \n
  9. Button style 2 – the setting allows you to select a style for button 2.
    10. \n
\n

Image side

\n

\"Header

\n
    \n
  1. Image – the setting allows you to specify the image;
    2. \n
  2. Show shadow – this setting is responsible for whether the shadow will be shown over the picture;
    3. \n
  3. Shadow color – the setting allows you to specify shadow color on the Desktop;
    4. \n
  4. Shadow color mobile – the setting allows you to specify the image on Mobile;
    5. \n
\n

Block Mega menu images

\n

\"Header

\n

General

\n

\"Header

\n
    \n
  1. 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;
    2. \n
  2. Badge text – this setting allows you to add a badge above the menu;\"Header
    3. \n
  3. Badge text color – this setting allows you to set the text color of the badge;
    4. \n
  4. Badge background color – this setting allows you to set the background color of the badge.
    5. \n
\n

Media item (1-4)

\n

\"Header

\n
    \n
  1. Image – the setting allows you to specify an image;
    2. \n
  2. Label – the setting allows you to specify a label;
    3. \n
  3. Heading – the setting allows you to specify a heading;
    4. \n
  4. Link – the setting allows you to specify a link;
    5. \n
  5. Link label – the setting allows you to specify a link label;
    6. \n
  6. Product – the setting allows you to specify a product. The product has a higher priority than the picture.\"Header
    7. \n
\n

Block Mega menu row menus

\n

\"Header

\n

General

\n

\"Header

\n
    \n
  1. 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;
    2. \n
  2. Badge text – this setting allows you to add a badge above the menu;\"Header
    3. \n
  3. Badge text color – this setting allows you to set the text color of the badge;
    4. \n
  4. Badge background color – this setting allows you to set the background color of the badge.
    5. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. header-menu.liquid – this snippet renders the menu on the Desktop.\"Snippet:\n
      \n
    1. menu – menu object;
      2. \n
    2. menu_type_desktop – the type of submenu to display. There are two options – dropdown and mega menu;
      3. \n
    3. blocks – the blocks object is passed further nested in the header-mega-menu.liquid snippet.
      4. \n
    \n
    2. \n
  2. header-mobile-menu.liquid – this snippet renders the menu on Mobile.\"Snippet:\n
      \n
    1. menu – menu object;
      2. \n
    2. is_show_language_selector – the condition by which the language selector is rendered.
      3. \n
    \n
    3. \n
  3. header-mega-menu.liquid – the mega menu is rendered in this snippet.\"Snippet:\n
      \n
    1. menu – menu object. The first menu level is passed, from which the rest of the nested items are displayed;
      2. \n
    2. blocks – the blocks object is used to display media content for a specific mega menu.
      3. \n
    \n
    4. \n
  4. language-localization-form.liquid – the snippet is used to render the language selector.\"Snippet:\n
      \n
    1. class – used to add a custom class.
      2. \n
    \n
    5. \n
\n","blockTitle":"Header","fieldGroupName":"manual_category_blocks","hash":"section-header"},{"blockContent":"

\"Cart

\n

For Customers

\n

Adding a Section

\n

\"Cart

\n

Video guide: How to set up Cart Page and Cart Drawer.

\n

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

\n

Section settings

\n

Cart settings

\n

\"Cart

\n
    \n
  1. Heading – section title. The default is taken from translations;
    2. \n
  2. 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.
    \nVideo guide: How to add the Gift box button.
    \n\"Cart
    3. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

Block Shipping bar

\n

\"Cart

\n

\"Cart

\n
    \n
  1. Free shipping amount – the desired goal to be achieved by the user;
    2. \n
  2. Shipping message – a message that will be displayed near the progress bar. ${amout} will be replaced with the missing amount;
    3. \n
  3. Shipping congratulatory message – message to be displayed instead of the progress bar;
    4. \n
  4. Congratulatory icon – the icon that will be displayed to the left of the Shipping congratulatory message.
    5. \n
\n

Block Custom liquid

\n

\"Cart

\n
    \n
  1. Custom liquid – setting allows you to add your own liquid code.
    2. \n
\n

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

\n

Block @app

\n

Only one block type is available for a section – @app. This block is for apps that need to be integrated into the shopping cart.

\n

For Developers

\n

Used snippets

\n
    \n
  1. cart-empty.liquid – a snippet of an empty cart;\"Snippet:
    2. \n
  2. cart-items.liquid – the snippet contains a list of products in the cart;\"Snippet:\n
      \n
    1. lazy_load – the parameter is responsible for enabling/disabling lazy load for product images.
      2. \n
    \n
    3. \n
  3. breadcrumbs.liquid – snippet outputs breadcrumbs;\"Snippet:
    4. \n
  4. preloader.liquid – snippet renders preloader.\"Snippet:
    5. \n
\n","blockTitle":"Cart template","fieldGroupName":"manual_category_blocks","hash":"section-cart-template"},{"blockContent":"

\"Cart

\n

For Customers

\n

Adding a Section

\n

\"Cart

\n

Video guide: How to set up Cart Drawer.
\nThe 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.

\n

Section settings

\n

\"Cart

\n
    \n
  1. Heading – setting allows you to set the text for the section title. By default, it is taken from translations;
    2. \n
  2. Show items count in the cart – the setting is responsible for displaying the number of products in the cart;
    3. \n
  3. 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.
    \nVideo guide: How to add the Gift box button.
    4. \n
\n

Blocks settings

\n

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.

\n

Block Items

\n

Block limit – 1

\n

The block is responsible for displaying the products in the cart. The block has no settings.

\n

Block Upsell

\n

Block limit – 1

\n

\"Cart

\n

The block is responsible for displaying upsell products in the cart.

\n
    \n
  1. Heading – setting allows you to set the text for the block title;
    2. \n
  2. Products – setting allows you to select products that act as upsells. Limit – 12 products.
    3. \n
\n

Block shipping bar

\n

Block limit – 1

\n

\"Cart

\n

Block is responsible for displaying the Shipping bar.

\n
    \n
  1. Free shipping amount – the setting allows you to set the amount of US money that the user must spend to fill the bar;
    2. \n
  2. Shipping message – setting allows you to set the text of the message that the user sees when the bar is not filled;
    3. \n
  3. Shipping congratulatory message – setting allows you to customize the text of the message that the user sees when the bar is full;
    4. \n
  4. Icon – setting allows you to set the image in the congratulatory message.
    5. \n
\n

Richtext

\n

Block limit – 1

\n

General

\n

\"Cart

\n
    \n
  1. Text – RTE field for adding text content.
    2. \n
\n

Colors

\n

\"Cart

\n
    \n
  1. Text – color for text;
    2. \n
  2. Background – setting the background color for the block.
    3. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. cart-empty.liquid – a snippet of an empty cart;\"Snippet:
    2. \n
  2. cart-items.liquid – the snippet contains a list of products in the cart;\"Snippet:\n
      \n
    1. lazy_load – the setting is responsible for enabling/disabling lazy load for images.
      2. \n
    \n
    3. \n
  3. cart-footer.liquid – snippet contains buttons for payment methods, cart notes, and icons for payment methods;\"Snippet:
    4. \n
  4. payments.liquid – snippet contains icons of payment methods;\"Snippet:
    5. \n
  5. preloader.liquid – snippet renders preloader.\"Snippet:
    6. \n
  6. cart-upsell.liquid – upsell block in mini cart.\"Snippet:\n
      \n
    1. products – list of products to display;
      2. \n
    2. heading – block heading;
      3. \n
    3. lazy_load – the setting is responsible for enabling/disabling lazy load for images.
      4. \n
    \n
    7. \n
\n

Additional information

\n
    \n
  1. Block upsell. On the desktop, the section is presented as a slider (if there are more than 3 products). At a resolution of less than 992 – the standard scroll is used;
    2. \n
  2. Block upsell. Products are not displayed if they are already added to the cart;
    3. \n
  3. Block Upsell. When you click on the add to cart button, Quick View is called;
    4. \n
  4. Block shipping bar. Since Subtotal is displayed in this block by design, fallback logic is provided if this block is missing or hidden.
    5. \n
\n","blockTitle":"Cart drawer","fieldGroupName":"manual_category_blocks","hash":"section-cart-drawer"},{"blockContent":"

\"Footer

\n

For customers

\n

Adding a section

\n

\"Footer

\n

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.

\n

Video guide: How to set up the Footer Section.

\n

Section settings

\n

General

\n

\"Footer

\n
    \n
  1. Logo image – image picker for logo;
    2. \n
  2. Logo width – logo width;
    3. \n
  3. Show top border – the setting is responsible for showing/hiding the top border;
    4. \n
  4. Copyright text – copyright text, where %date% is a shortcut that will be replaced with the current year;
    5. \n
  5. Show back to top button – the setting is responsible for showing the scroll to the top button.
    6. \n
\n

Country/Region selector

\n

\"Footer

\n
    \n
  1. Show country/region selector – The checkbox is responsible for enabling/disabling the change of the country (currency). To manage, go to settings → payments.
    2. \n
\n

Language selector

\n

\"Footer

\n
    \n
  1. Show language selector – The checkbox is responsible for enabling/disabling language changes. To manage, go settings → languages.
    2. \n
\n

Payment methods

\n

\"Footer

\n
    \n
  1. Show payment icons – the checkbox is responsible for displaying icons of payment providers. To manage, go to settings → payments.
    2. \n
\n

Follow on Shop CTA

\n

\"Footer

\n
    \n
  1. 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.
    2. \n
\n

Colors

\n

\"Footer

\n
    \n
  1. Section background – background color setting;
    2. \n
  2. Border top color – color setting for a top border;
    3. \n
  3. Heading – setting text color for headings;
    4. \n
  4. Text – setting text color for text;
    5. \n
  5. Copyright text – color setting for text inside Copyright;
    6. \n
  6. Link – color setting for links;
    7. \n
  7. Link (hover) – color setting for links on hover;
    8. \n
  8. Socials icon – color setting for social links icon;
    9. \n
  9. Socials background – color setting for social links background;
    10. \n
  10. Socials border – color setting for social links border;
    11. \n
  11. Socials icon (hover) – color setting for social links icon on hover;
    12. \n
  12. Socials background (hover) – color setting for social links background on hover;
    13. \n
  13. Socials border (hover) – color setting for social links border on hover.
    14. \n
\n

Blocks settings

\n

Total block limit – 4

\n

Block Text

\n

Block limit – 1

\n

\"Footer

\n
    \n
  1. Heading – text field for adding a block title;
    2. \n
  2. Text – RTE field for adding text content;
    3. \n
  3. Show media links – setting allows you to show/hide links to social networks.
    4. \n
\n

Block Menu

\n

Block limit – 3

\n

\"Footer

\n
    \n
  1. Heading – text field to add;
    2. \n
  2. Menu – picker menu. Only the first level of links will be displayed.
    3. \n
\n

For developers

\n

Used snippets

\n
    \n
  1. language-localization-form.liquid – the snippet is used to render the language selector.\"Snippet:\n
      \n
    1. class – used to add a custom class.
      2. \n
    \n
    2. \n
  2. country-localization-form.liquid – The snippet is used to render the country selector.\"Snippet:\n
      \n
    1. class – used to add a custom class.
      2. \n
    \n
    3. \n
\n","blockTitle":"Footer ","fieldGroupName":"manual_category_blocks","hash":"section-footer"},{"blockContent":"

\"Predictive

\n

For Customers

\n

\"Predictive

\n

\"Predictive

\n
    \n
  1. Enable search by articles – setting allows you to include articles in the search;
    2. \n
  2. Enable search by pages – setting allows you to include pages in the search.
    3. \n
\n

Additional information

\n
    \n
  1. If the 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
    2. \n
  2. If the search does not return any results, then the search button becomes disabled and a corresponding message is displayed.\"Predictive
    3. \n
\n

For Developers

\n
    \n
  1. The predictive-search.liquid snippet is included in the code, in the theme.liquid file.
    2. \n
\n","blockTitle":"Predictive search","fieldGroupName":"manual_category_blocks","hash":"snippet-predictive-search"},{"blockContent":"

\"Product

\n

For Customers

\n

Product rating color settings

\n

\"Product

\n

\"Product

\n
    \n
  1. Icon– color picker which is responsible for the color of the stars;
    2. \n
  2. Text– color picker which is responsible for the color of the text.
    3. \n
\n

Product card settings

\n

\"Product

\n

General

\n

\"Product

\n
    \n
  1. Show vendor – the setting is responsible for whether the vendor of the product will be shown;
    2. \n
  2. 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;
    \nVideo guide: How to set up the Quick view.
    3. \n
  3. Buttons type – a type of quick view / add to card button (icon or text);
    4. \n
  4. 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;
    5. \n
  5. Show currency code – the setting is responsible for whether the currency code will be shown;
    6. \n
  6. Show borders – the setting is responsible for whether borders will be added to the card;
    7. \n
  7. Border color – card border color;
    8. \n
  8. Border color (hover) – card border color on hover;
    9. \n
  9. 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;
    10. \n
  10. 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;
    11. \n
  11. Quick view background – adds a background for the Quick view button on the Desktop. Works if Image width is set to – full width;
    12. \n
  12. Rating background – background is added for Product rating on the Desktop. Works if the Image width setting is set to – full width;
    13. \n
  13. Text color – product card text color.
    14. \n
\n

Image

\n

\"Product

\n
    \n
  1. 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.
    \nVideo guide: How to set up hover image.

    \n\n
    2. \n
\n

Text button colors

\n

\"Product

\n
    \n
  1. Text – setting allows you to set the color of the button text;
    2. \n
  2. Background – setting allows you to set the color of the button background color;
    3. \n
  3. Border – setting allows you to set the color of the button border color;
    4. \n
  4. Text (hover) – setting allows you to set the color of the button text on hover;
    5. \n
  5. Background (hover) – setting allows you to set the color of the button background color on hover;
    6. \n
  6. Border (hover) – setting allows you to set the color of the button border color on hover.
    7. \n
\n

For Developers

\n

\"Product

\n
    \n
  1. product – the product object is passed to the card;
    2. \n
  2. 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;
    3. \n
  3. 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;
    4. \n
  4. 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;
    5. \n
  5. 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.
    6. \n
\n

Used snipped

\n
    \n
  1. product-card-image.liquid – this snippet renders images for the product card.\"Snippet:\n
      \n
    1. product – used to pull the title if the image does not have alt;
      2. \n
    2. image – the picture itself is transmitted. It can be either a regular picture or a hover picture;
      3. \n
    3. size – image size defined in the main snippet. Used for Desktop;
      4. \n
    4. tablet_size – image size defined in the main snippet. Used for Tablet;
      5. \n
    5. mobile_size – image size defined in the main snippet. Used for Mobile;
      6. \n
    6. 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.
      7. \n
    7. 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.
      8. \n
    \n
    2. \n
  2. product-card-swatches.liquid – this snippet displays color swatches.\"Snippet:\n
      \n
    1. Swatches – an object with an array of swatches.
      2. \n
    \n
    3. \n
  3. product-rating-short.liquid – the snippet displays the rating of the product. One star (svg) with product rating below.\"product-rating-short.liquid\"\n
      \n
    1. product – is used to pull meta fields that contain product rating data.
      2. \n
    \n
    4. \n
  4. 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.\"Snippet:\n
      \n
    1. product – is used to pull meta fields that contain product rating data.
      2. \n
    \n
    5. \n
  5. 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.\"Snippet:\n
      \n
    1. product – the product object from which all information about the price is drawn;
      2. \n
    2. price_class – a string in which you can specify a custom class;
      3. \n
    3. 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;
      4. \n
    4. currency_code_enabled – a setting that determines whether code currencies will be displayed near the price, for example, USD for dollars;
      5. \n
    5. show_unit_price – setting responsible for whether unit_price will be shown. Used for German shops.
      6. \n
    \n
    6. \n
\n

JS Event

\n
    \n
  1. When you click on the Quick View button, an Event with the name – product-card:quick-view:clicked is generated. In this event,  handle the product is passed.
    2. \n
\n

Additional information

\n
    \n
  1. Color swatch settings. 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 1*1 px size in .png format with swatch- prefixes. For example, the image name  banana-yellow would be swatch-banana-yellow.png.
    \nVideo guide: Color swatches setting.
    2. \n
  2. Color swatch settings. For example, a user has a purely German store, whose color option is called – Farbe, thus the user will need to specify the name in the swatch option setting. The default value is Color.
    3. \n
  3. Labels settings. 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.
    4. \n
  4. The second image is on hover settings. To add an image, you need to add the 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.\n\n
    5. \n
\n","blockTitle":"Product Card","fieldGroupName":"manual_category_blocks","hash":"snippet-product-card"},{"blockContent":"

\"Newsletter

\n

For Customers

\n

\"Newsletter

\n

\"Newsletter

\n
    \n
  1. Enable – the setting is responsible for enabling popup;
    2. \n
  2. Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;
    3. \n
  3. Heading – setting allows you to set title text;
    4. \n
  4. Text – setting allows you to set text content;
    5. \n
  5. Input placeholder – the setting allows you to set the text for the input placeholder;
    6. \n
  6. Button submit label – setting allows you to set the label for the submit button;
    7. \n
  7. Button close label – setting allows you to set the label for the close button;
    8. \n
  8. Image desktop – setting allows you to set the image for the desktop;
    9. \n
  9. Image mobile – setting allows you to set the image for mobile;
    10. \n
  10. Hide image on mobile – the setting allows you to hide the image for mobile.
    11. \n
\n

For Developers

\n

The newsletter-popup.liquid a snippet is included in the theme.liquid file.

\n

Additional information

\n
    \n
  1. The remaining settings (texts) are taken from the translations. Newsletter popup:
    2. \n
\n

\"Newsletter

\n
    \n
  1. Label;
    2. \n
  2. Success – message on successful subscription;
    3. \n
  3. Button label.
    4. \n
\n","blockTitle":"Newsletter popup","fieldGroupName":"manual_category_blocks","hash":"snippet-newsletter-popup"},{"blockContent":"

\"Collection

\n

For customers

\n

Adding a section

\n

\"Collection

\n

Video guide: How to set up the Collection List section and page.

\n

In order to add a section, you need to go to Customizer → Add Section → Collection list.

\n

Section settings

\n

General

\n

\"Collection

\n
    \n
  1. Heading – heading of the section;
    2. \n
  2. Button link – link for the button below the section;
    3. \n
  3. Button label – label for the button below the section;
    4. \n
  4. Link aria-label – aria-label for the button below the section. This attribute allows screen readers to better convey information to people with disabilities;
    5. \n
  5. Text alignment – text alignment of the title and product count;
    6. \n
  6. Button style – style for the button below the section;
    7. \n
  7. Image aspect ratio – aspect ratio of the images. Can be square, portrait, or landscape;
    8. \n
  8. Show products count – show the product count of the collection under the title.
    9. \n
\n

Layout

\n

\"Collection

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Blocks settings

\n

\"Collection

\n
    \n
  1. Collection – collection;
    2. \n
  2. 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.
    3. \n
\n

Additional information

\n
    \n
  1. On the desktop is a grid of collection cards. On the mobile, it is a slideshow.
    2. \n
\n","blockTitle":"Collection list","fieldGroupName":"manual_category_blocks","hash":"section-collection-list"},{"blockContent":"

\"Cards

\n

For customers

\n

Adding a section

\n

\"Cards

\n

Video guide: How to set up the Cards Grid section.

\n

In order to add a section, you need to go to Customizer → Add Section → Cards grid

\n

Section settings

\n

General

\n

\"Cards

\n
    \n
  1. Heading – heading of the section;
    2. \n
  2. Text – text description of the section;
    3. \n
  3. 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;\"Cards\"Cards\"Cards
    4. \n
  4. Center blocks on desktop – if checked, cards will be centered in the row on the desktop.\"Cards
    5. \n
\n

Layout

\n

\"Cards

\n
    \n
  1. Make full width – If disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings.;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Blocks settings

\n

\"Cards

\n
    \n
  1. Image– image for the block;
    2. \n
  2. Heading– the title of the block;
    3. \n
  3. Text – text of the block;
    4. \n
  4. Link – you can set a link for the block. If a link is set, then the image and heading will be a link.
    5. \n
\n","blockTitle":"Cards grid","fieldGroupName":"manual_category_blocks","hash":"section-cards-grid"},{"blockContent":"

\"Collection

\n

For Customers

\n

Adding a Section

\n

\"Collection

\n

Video guide: How to set up the Collection Page.

\n

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

\n

Section settings

\n

General

\n

\"Collection

\n
    \n
  1. Show collection image – the setting is responsible for displaying the image of the collection;
    2. \n
  2. Show collection description – the setting is responsible for displaying the description of the collection;
    3. \n
  3. Enable product cards indent – the setting is responsible for adding indents between product cards. On mobile, indents for the wrapper also will be added;
    4. \n
  4. 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;\"Collection
    5. \n
  5. 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)\"Collection
    6. \n
  6. 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;\"Collection
    7. \n
  7. 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;
    8. \n
  8. 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;
    9. \n
  9. Pagination type – the setting is responsible for the type of loading product cards.
    10. \n
\n

Layout

\n

\"Collection

\n
    \n
  1. 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;\"Collection
    2. \n
  2. 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;
    3. \n
  3. Desktop offset top – the top indent of the section on the desktop;
    4. \n
  4. Desktop offset bottom – the bottom indent of the section on the desktop;
    5. \n
  5. Mobile offset top – the top indent of the section on the mobile;
    6. \n
  6. Mobile offset bottom – the bottom indent of the section on the mobile.
    7. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
  2. product-filters-and-sort.liquid – this snippet displays filtering and sorting.\"Snippet:\n
      \n
    1. product_list – expected to pass a collection or search object.
      2. \n
    \n
    3. \n
  3. product-card.liquid – in this snippet, a product card is displayed.\"Snippet:\n
      \n
    1. product – passing the product object to the card;
      2. \n
    2. 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;
      3. \n
    3. 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;
      4. \n
    4. 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;
      5. \n
    5. 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.
      6. \n
    \n
    4. \n
\n

Additional information

\n
    \n
  1. By default, 20 cards are displayed and the type of loading is Pagination;
    2. \n
  2. Shopify Filtering Tutorial: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters
    3. \n
\n","blockTitle":"Collection template","fieldGroupName":"manual_category_blocks","hash":"section-collection-template"},{"blockContent":"

\"Product

\n

For Customers

\n

Adding a section

\n

\"Product

\n

Video guide: How to set up the Product Page.

\n

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

\n

Section settings

\n

Media

\n

\"product-template-settings\"

\n

Video guide: How to set up: Product Page Media Layout.

\n\n

General

\n

\"Featured

\n
    \n
  1. 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;
    2. \n
  2. 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;
    3. \n
  3. Show share buttons – shows “Share” buttons;
    4. \n
  4. Enable sticky add to cart – shows a sticky add to cart when the main add to cart is not visible.\"Featured
    5. \n
\n

Colors

\n

\"Featured

\n
    \n
  1. Border colors – the setting allows you to set the section border color;
    2. \n
  2. UI button color – the setting allows you to set the UI button’s color. Цill also be used for shadow color;
    3. \n
  3. UI button background color – the setting allows you to set the UI button’s background color.
    4. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

Block Badges

\n

\"Featured

\n

Video guide: How to add Badges.

\n

The block has no settings, it displays product tags that are added in the product admin panel.

\n
    \n
  1. The block displays tags added to the product according to the template – label__%tag%:modifer:\n\n
    2. \n
  2. The modifier can have 2 values: primary and secondary or completely absent;
    3. \n
  3. Colors for modifiers are configured in the theme settings Customizer → Theme settings → Product → Labels.
    4. \n
  4. If the product (all variants) is sold out, it automatically receives a badge that says “SOLD OUT”.
    \n\"Featured
    5. \n
\n

Block Vendor

\n

\"Featured

\n

The block has no settings, it displays the vendor of the product, which is added to the product admin panel.

\n

Block Title

\n

\"Product

\n

The block has no settings, it displays the title of the product, which is added to the product admin panel.

\n

Block Description

\n

\"Description\"

\n

The block has no settings, it displays the description of the product, which is added to the product admin panel.

\n

 

\n

\n

\n

Block Countdown timer

\n

\"Featured

\n

 

\n

General

\n

\"Featured

\n

Video guide: How to set up Countdown Timer.

\n
    \n
  1. Text – text before the countdown timer;
    2. \n
  2. Icon – image before the countdown timer. (Recommended size 48×48).
    3. \n
\n

Colors

\n

\"Featured

\n
    \n
  1. Text – text before the countdown timer color.
    2. \n
  2. Timer text – timer cells text color;
    3. \n
  3. Timer background – Timer cells background color.
    4. \n
\n

To show the countdown timer:

\n\n

\"Featured

\n\n

\"Featured

\n

Block SKU

\n

\"SKU\"

\n

SKU

\n

\"Featured

\n
    \n
  1. Show SKU – display the SKU of a product or variant;
    2. \n
  2. 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.
    3. \n
\n

Block Product combination

\n

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.

\n

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.

\n

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.

\n

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.

\n

\"color

\n

To add product combination, please follow the instructions below:

\n
    \n
  1. Create one product for each variation in your Shopify admin. If you want to create one product page per color, create one product for every color variation.
    2. \n
  2. You will now need to create two product metafields: one for the actual value for the option (for instance, “Red,” “Blue,”…). And one metafield for the list of products to show.
    3. \n
  3. Open “Metafields” settings (Admin/Settings/Custom data)) and click “Products”\"metafield\"
    4. \n
  4. Click “Add definition”\"add
    5. \n
  5. In the name field, write something Variation value*.* Select the Single-line-text **metafield type, and make sure that “One value” is checked:\"one
    6. \n
  6. Click “Add definition” again to create a second product metafield. In the name field, write Variation products, select “Product reference” as metafield type, and select “List of products“. It should look like this:
    7. \n
  7. \"List
    8. \n
  8. Once the meta fields are created, you need to add the “Product combination” block to the “Product template” section.\"section\"\"ProductOption name – text label for the product variations. If you create different products grouped by colors, you can set “Color” value;\n

    \"color\"

    \n

    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;

    \n

    \"value\"

    \n

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

    9. \n
  9. You need filling in the information for all your products to create the link between them. To do that, in your Shopify admin, open the first product you want to link and scroll down to the “Metafields” section:\"Metafields\"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).
    10. \n
\n

\n

\n

Block Options

\n

\"Featured

\n

\"pdpd-option\"

\n
    \n
  1. Show labels – the setting is responsible for showing/hiding labels for options;
    2. \n
  2. Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;
    \nVideo guide: How to set up the Size Guide.\"Product
    3. \n
  3. 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.
    \nYou can select Buttons
    \n\"Featured
    \nor Dropdown
    \n\"Featured
    \n
    4. \n
  4. 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;\"Featured
    5. \n
  5. Size guide general tab label – label for size guide general tab;\"Featured
    6. \n
  6. Size guide model tab label – label for size guide model tab;\"Featured
    7. \n
  7. Size guide drawer title – the title for the popup, which is called by the Size guide button;
    8. \n
  8. Size guide button icon – button icon;
    9. \n
  9. Size guide button label – button label;
    10. \n
\n

To show the size guide:

\n\n

\"Featured

\n\n

\"Featured

\n\n

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

\n

\"Featured

\n

Follow the steps:

\n
    \n
  1. Create product metafield with Name: “Size guide model image”, Namespace and key: custom.size_guide_model_image. Content type must be file (images only).\"Featured
    2. \n
  2. Create product metafield with Name: “Size guide model info”, Namespace and key: custom.size_guide_model_info. Content type must be Multi-line text.\"Featured
    3. \n
  3. Go to the product in the admin and add values to these metafields. You can set both or one of these fields to see tabs in the size guide popup.\"Featured
    4. \n
  4. Now when you open the Size guide popup on the product you will see tabs with the default size guide and size guide for the product model.
    5. \n
\n

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:

\n
    \n
  1. Will try to find an image in the store that matches the name swatch-%value%.png. For example, swatch-sky-blue.png;
    2. \n
  2. If there is no picture, it will try to use the right side of the value. For example the color Sky Blue will be converted to just Blue from the CSS palette;
    3. \n
  3. Recommended swatch image size 30*30px.
    4. \n
\n

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.\"Featured

\n

Block Quantity

\n

\"Featured

\n

\"Featured

\n
    \n
  1. Show label – will display the label for the quantity change widget.
    2. \n
\n

Block Price

\n

\"Featured

\n

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.

\n
    \n
  1. In this block, a message will be displayed stating that taxes are included in the price;
    2. \n
  2. In this block, the installment purchase form will be displayed.
    3. \n
\n

Block Add to cart

\n

\"Featured

\n

\"Featured

\n
    \n
  1. Button type – add to cart button style;
    2. \n
  2. Show additional payment buttons – adds “Buy it now” buttons;
    3. \n
  3. Show enabled payment types – adds a list with icons of supported payment types;
    4. \n
  4. 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).\"Featured
    5. \n
\n

Block Pickup availability

\n

\"Featured

\n

Video guide: How to set up the Pickup Availability for your Shopify Store.

\n

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

\n

Block Drawers

\n

\"drawers\"

\n

\"Featured

\n

Displays up to 3 additional buttons with a popup:

\n\n

Product description

\n

\"Featured

\n
    \n
  1. Show description – shows the product description button;
    2. \n
  2. Button label – setting allows you to set button label for drawer toggler;
    3. \n
  3. Drawer heading – setting allows you to set the heading for the drawer.
    4. \n
\n

Shipping and returns

\n

\"Featured

\n
    \n
  1. Drawer content – selection of the page with the rules of delivery and return;
    2. \n
  2. Button label – setting allows you to set a button label for the drawer toggler.
    3. \n
\n

Custom drawer

\n

\"custom

\n
    \n
  1. Drawer heading – setting allows you to set the heading for the drawer.
    2. \n
  2. Drawer content – setting allows you to set the content for the drawer.
    3. \n
\n

\n

Block Complementary products

\n

\"Featured

\n

Video guide: How to set up the Complementary Products and Recommendations.

\n
    \n
  1. Heading – setting allows you to set the heading for the block.
    2. \n
\n

Block Sales point

\n

\"\"

\n

\"Featured

\n

You can add a simple text block with an icon.

\n
    \n
  1. Icon image – setting allows you to set an icon for the message;
    2. \n
  2. Text – text of the block.
    3. \n
\n

Block Inventory status

\n

\"Featured

\n

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

\n

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

\n

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

\n

\"Featured

\n
    \n
  1. Low stock text – text that appears when variant inventory quantity is less or equal ”Low stock threshold” value;
    2. \n
  2. High stock text – text that appears when variant inventory quantity is more than the “Low stock threshold” value;
    3. \n
  3. Low stock threshold – a setting that allows you to select the minimum number of variant inventory quantities to show a “Low stock text” message. If the variant inventory quantity is more than the value of the setting, then “High stock text” will appear;
    4. \n
\n

Block Gift wrap product

\n

\"Product

\n

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.
\nVideo guide: How to add the Gift box button.

\n

Block Notify me

\n

\"Featured

\n

\"Featured

\n

Button settings

\n

\"Featured

\n
    \n
  1. Button label – text for the button. Required field;
    2. \n
  2. Button icon – icon for the button.
    3. \n
\n

Form settings

\n

\"Featured

\n
    \n
  1. Heading – popup title text field. Required field;
    2. \n
  2. Email placeholder – placeholder for the input. Required field;
    3. \n
  3. Button label – label for the submit button. Required field;
    4. \n
  4. Success message – a message that the form was sent successfully. Required field.
    5. \n
\n

Translations settings:

\n

\"Featured

\n
    \n
  1. 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.
    2. \n
\n

Notify me logic:

\n\n

Block Ask a question

\n

\"Featured

\n

\"Featured

\n

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).

\n

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.

\n

Button settings

\n

\"Featured

\n
    \n
  1. Button label – text for the button. Required field;
    2. \n
  2. Button icon – icon for the button.
    3. \n
\n

Form settings

\n

\"Featured

\n
    \n
  1. Heading – heading for popup form;
    2. \n
  2. Email placeholder – placeholder for the email field. Required field;
    3. \n
  3. Name placeholder – placeholder for the name field. Required field;
    4. \n
  4. Phone placeholder – placeholder for the phone field. Leave blank to hide;
    5. \n
  5. Product URL placeholder – placeholder for the product URL field. Required field;
    6. \n
  6. Success message – text of the success message after the form submit;
    7. \n
  7. Submit button label – text for the submit button.
    8. \n
\n

Block Custom field

\n

\"Featured

\n

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.

\n

Settings

\n

\"Featured

\n
    \n
  1. Field label – the setting is responsible for the label text for the input;
    2. \n
  2. Required text – the setting is responsible for the label text for the checkbox.
    3. \n
\n

Custom field logic:

\n

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.

\n

\"Featured

\n

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.

\n

\"Featured

\n

Block @app

\n

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

\n

Block Custom liquid

\n

\"Featured

\n
    \n
  1. Custom liquid – setting allows you to add your liquid code.
    2. \n
\n

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

\n

Additional information

\n
    \n
  1. To select complementary products, add the Search & Discovery app (Shopify app). Learn more
    2. \n
\n","blockTitle":"Product template","fieldGroupName":"manual_category_blocks","hash":"section-product-template"},{"blockContent":"

\"Products

\n

For customers

\n

Adding a section

\n

\"Products

\n

Video guide: How to set up the Products Bundle.

\n

In order to add a section, you need to go to Customizer → Add Section → Products bundle.

\n

Section settings

\n

General

\n

\"Products

\n
    \n
  1. Heading – section heading;
    2. \n
  2. Subheading – section subheading;
    3. \n
  3. Products – the setting is responsible for products to show in the section;
    4. \n
  4. Button label – the setting is responsible for the button label;
    5. \n
  5. Disabled button label – the setting is responsible for button label when not all products are set;
    6. \n
  6. Button type – the setting is responsible for button style type.
    7. \n
  7. Show total price – the setting is responsible for showing total price above add to card button.
    8. \n
\n

Colors

\n

\"Products

\n
    \n
  1. Product card border – the setting is responsible for border color;
    2. \n
  2. Checkbox – the setting is responsible for checkbox color.
    3. \n
\n

Layout

\n

\"Products

\n
    \n
  1. Make full width – the setting is responsible for container width;
    2. \n
  2. Desktop offset top – top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – bottom indent of the section on the mobile.
    6. \n
\n

Video guide: How to set up a Products Bundle Discount.

\n","blockTitle":"Products Bundle","fieldGroupName":"manual_category_blocks","hash":"section-products-bundle"},{"blockContent":"

\"Search

\n

For Customers

\n

Adding a Section

\n

\"Search

\n

Video guide: How to set up the Search Page.

\n

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

\n

Section settings

\n

General

\n

\"Search

\n
    \n
  1. Enable search by articles – setting allows to include articles in the search;
    2. \n
  2. Enable search by pages – setting allows to include pages in the search;
    3. \n
  3. 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;\"Search
    4. \n
  4. Enable cards indent – the setting is responsible for adding indents between product cards. On mobile, indents for the wrapper also will be added;
    5. \n
  5. 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;\"Search
    6. \n
  6. Paginate by – setting allows specifying the number of results in the search sidebar;
    7. \n
  7. Pagination type – setting allows to selection the type of pagination. Has several meanings:\n\n
    8. \n
\n

Grid

\n

\"Search

\n
    \n
  1. Show borders – the setting is responsible for showing/hiding borders;
    2. \n
  2. Border color – the setting is responsible for the color of the borders.
    3. \n
\n

Layout

\n

\"Search

\n
    \n
  1. Make grid full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
  2. product-filters-and-sort.liquid – This snippet displays filtering and sorting.\"Snippet:\n
      \n
    1. product_list – expected to pass a collection or search object.
      2. \n
    \n
    3. \n
  3. product-card.liquid – in this snippet, a product card is displayed.\"Snippet:\n
      \n
    1. product – passing the product object to the card;
      2. \n
    2. 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;
      3. \n
    3. 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;
      4. \n
    4. 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;
      5. \n
    5. 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.
      6. \n
    \n
    4. \n
  4. article-card.liquid – the snippet displays the article card.\"Snippet:\n
      \n
    1. article – article object;
      2. \n
    2. layout – variable to set the size of the image.
      3. \n
    \n
    5. \n
  5. page-card.liqiud – the snippet displays the page card.\"Snippet:\n
      \n
    1. page – page object.
      2. \n
    \n
    6. \n
\n

Additional information

\n
    \n
  1. Learn more about Shopify Filtering: https://help.shopify.com/en/manual/online-store/themes/customizing-themes/storefront-filters
    2. \n
\n","blockTitle":"Search template","fieldGroupName":"manual_category_blocks","hash":"section-search-template"},{"blockContent":"

\"Blog

\n

For Customers

\n

Adding a Section

\n

\"Blog

\n

Video guide: How to set up the Blog page and the Blog Post page.

\n

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

\n

Section settings

\n

General

\n

\"Blog

\n
    \n
  1. Paginate by – setting allows you to select the number of articles per page. The minimum number is 6, the maximum number is 24;
    2. \n
  2. Pagination type – setting allows you to select the type of pagination;
    3. \n
  3. Load more button type – the setting is responsible for the style of the load more button;
    4. \n
  4. Show filter by tag – the setting is responsible for displaying the filter by tag.
    5. \n
\n

Featured blog post

\n

\"Blog

\n
    \n
  1. Blog post – setting allows you to select an additional post. It is always displayed, even if the blog is empty;
    2. \n
  2. Background color – the setting allows you to set the background color for the “Featured blog post”;
    3. \n
  3. Border color – setting sets border color for “Featured blog post”;
    4. \n
  4. Text color – setting sets the text color for “Featured blog post”;
    5. \n
  5. Date color – setting sets Date color for “Featured blog post”;
    6. \n
  6. Show borders – setting enables/disables border for “Featured blog post”;
    7. \n
  7. Enable image lazy loading – the setting is responsible for the lazy loading of the image for the additional post;
    8. \n
  8. Button type – the setting is responsible for the style of the featured blog button;
    9. \n
  9. 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.
    10. \n
\n

Layout

\n

\"Blog

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. pagination.liquid – snippet displays pagination.\"Snippet:\n
      \n
    1. paginate – pagination object.
      2. \n
    \n
    2. \n
  2. article-card.liquid – the snippet displays the article card.\"Snippet:\n
      \n
    1. article – article object;
      2. \n
    2. layout – variable to set the size of the image.
      3. \n
    \n
    3. \n
\n","blockTitle":"Blog template","fieldGroupName":"manual_category_blocks","hash":"section-blog-template"},{"blockContent":"

\"Article

\n

For Customers

\n

Adding a Section

\n

\"Article

\n

Video guide: How to set up the Blog page and the Blog Post page.

\n

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

\n

Section settings

\n

General

\n

\"Article

\n
    \n
  1. 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;\"Article
    2. \n
  2. 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;
    3. \n
  3. Overlay opacity – the setting changes the transparency of the overlay with black color on the image from 0% to 100%;
    4. \n
  4. Show author – the setting is responsible for whether the author of the article will be displayed;
    5. \n
  5. Show tag – the setting is responsible for whether article tags will be shown;
    6. \n
  6. Show socials – the setting is responsible for showing share social buttons.
    7. \n
\n

Related articles

\n

\"Article

\n
    \n
  1. Show – the setting is responsible for showing/hiding the Related articles section;
    2. \n
  2. Label – text field for adding a label to the section;
    3. \n
  3. Heading – text field for adding a heading to the section;
    4. \n
  4. Show blog button – the setting is responsible for showing a button that leads to the blog page;
    5. \n
  5. Button style – a setting that is responsible for changing the style of the button between primary and secondary.
    6. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Colors

\n

\"Article

\n
    \n
  1. Comment background – background color of the comment section.
    2. \n
\n

For Developers

\n

Used snippet

\n
    \n
  1. related-articles.liquid – the snippet is responsible for displaying the last 3 articles from the blog.\"Snippet:\n
      \n
    1. current_article_id – article id to exclude this article from suggested articles;
      2. \n
    2. blog – the blog object from which the proposed articles are displayed;
      3. \n
    3. label – block label;
      4. \n
    4. heading – block heading;
      5. \n
    5. show_back_to_blog_btn – condition for displaying the button leading to the blog page;
      6. \n
    6. button_style – select the style of the button leading to the blog page.
      7. \n
    \n
    2. \n
  2. article-card.liquid – the snippet is responsible for rendering the article card.\"Snippet:\n
      \n
    1. article – article object;
      2. \n
    2. layout – layout of the article card output.
      3. \n
    \n
    3. \n
  3. comment-form.liquid – the snippet is responsible for displaying the form for adding comments, as well as for existing comments.\"Snippet:
    4. \n
  4. socials-share.liquid – the snippet is responsible for displaying buttons for sharing.\"Snippet:
    5. \n
\n

Additional Information

\n
    \n
  1. Comment form – displayed if the blog has comments enabled in its settings;
    2. \n
  2. Comments – displayed if the blog has comments enabled in its settings Blog posts → Manage blogs → choose blog → Comments radio button;
    3. \n
  3. When navigating through pagination, when loading the anchor link, we will link back to the comments.
    4. \n
\n","blockTitle":"Article template (Default blog post)","fieldGroupName":"manual_category_blocks","hash":"section-article-template"},{"blockContent":"

For Customers

\n

Adding a Section

\n

\"Default

\n

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

\n

Section settings

\n

This section does not have any settings in the customizer. It serves to display content that is taken from the page settings.

\n

\"Default

\n","blockTitle":"Default page template","fieldGroupName":"manual_category_blocks","hash":"section-default-page-template"},{"blockContent":"

\"Contact

\n

For Customers

\n

Adding a Section

\n

\"Contact

\n

Video guide: How to create and add the Contact Page.

\n

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

\n

Section settings

\n

Contact information

\n

\"Contact\"contact-2\"

\n
    \n
  1. Information heading – setting allows you to set the text for the information block;
    2. \n
  2. Adress heading – setting allows you to set the text for the title of the block with the address;
    3. \n
  3. Adress text – setting allows you to set the text of the address;
    4. \n
  4. Phone heading – setting allows you to set the text for the title of the block with the phone;
    5. \n
  5. Phone text – setting allows you to set the text of the phone;
    6. \n
  6. Email heading – setting allows you to set the text for the header of the block with mail;
    7. \n
  7. Email text – setting allows you to set the text of the mail;
    8. \n
  8. Social heading – setting allows you to set the text for the title of the block with social networks;
    9. \n
  9. Show social – the setting is responsible for displaying the block with social networks;
    10. \n
  10. Google maps API key – setting allows you to add a Google maps API key. Learn more about how to create an API key;
    11. \n
  11. 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;
    12. \n
  12. Map url – setting allows you to set a link to the map;
    13. \n
  13. Map image desktop – setting allows you to set the map image for the desktop;
    14. \n
  14. Map image mobile – setting allows you to set the image for mobile.
    15. \n
\n

Contact form

\n

\"Contact

\n
    \n
  1. Form heading – setting allows you to set the title for the form;
    2. \n
  2. Name placeholder – the setting allows you to set the placeholder for the Name field;
    3. \n
  3. Email placeholder – the setting allows you to set the placeholder for the Email field;
    4. \n
  4. Message placeholder – the setting allows you to set the placeholder for the Message field;
    5. \n
  5. Button label – setting allows you to set the text for the button.
    6. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
  2. social-links.liquid – snippet displays a list of social networks.\"Snippet:
    3. \n
\n

Additional information

\n
    \n
  1. The social media link settings are located in the general theme settings;
    2. \n
  2. If the Map url or Map image fields are not specified in the section settings, the map will not be displayed;
    3. \n
  3. The map link opens in a new window.
    4. \n
\n","blockTitle":"Сontact template","fieldGroupName":"manual_category_blocks","hash":"section-contact-template"},{"blockContent":"

\"FAQ

\n

For Customers

\n

Adding a Section

\n

\"FAQ

\n

Video guide: How to set up the FAQs Page.

\n

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

\n

Section settings

\n

General

\n

\"FAQ

\n
    \n
  1. 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.
    2. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

Block Question and answer

\n

The block is responsible for displaying the question-answer pair. When rendering, it is displayed as an accordion.

\n

\"FAQ

\n
    \n
  1. Heading – accordion title, question;
    2. \n
  2. Text – response, accordion content;
    3. \n
  3. Icon – icon in the accordion header.
    4. \n
\n

Block Category

\n

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.

\n

\"FAQ

\n
    \n
  1. Heading – title, category name.
    2. \n
\n

Additional information

\n
    \n
  1. The Question and answer block is not displayed if the settings for the Heading and Text fields are not specified;
    2. \n
  2. The Category block is not displayed if the settings for the Heading the field is not specified.
    3. \n
\n","blockTitle":"FAQ template","fieldGroupName":"manual_category_blocks","hash":"section-faq-template"},{"blockContent":"

\"Shipping

\n

For customer

\n

Adding section

\n

\"Shipping

\n

Video guide: How to create and set up the Shipping Page.

\n

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

\n

Section settings

\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n","blockTitle":"Shipping template","fieldGroupName":"manual_category_blocks","hash":"section-shipping-template"},{"blockContent":"

\"404

\n

For Customer

\n

Adding a Section

\n

\"404

\n

Video guide: How to set up the 404 (Not Found) Page.

\n

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

\n

Section settings

\n

\"404

\n
    \n
  1. Heading – setting allows you to set the text for the title;
    2. \n
  2. Subheading – setting allows you to set the text for the subtitle;
    3. \n
  3. Text – setting allows you to set text content;
    4. \n
  4. Button link – setting allows you to set a link for the button;
    5. \n
  5. Button label – setting allows you to set the label for the button;
    6. \n
  6. Navigation – setting allows you to select a menu from Navigation.
    7. \n
\n","blockTitle":"404 template","fieldGroupName":"manual_category_blocks","hash":"section-404-template"},{"blockContent":"

\"Gift

\n

For Customers

\n

Adding a Section

\n

\"Gift

\n

Video guide: How to create and set up the Gift Card.

\n

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.

\n

Section settings

\n

General

\n

\"Gift

\n
    \n
  1. Logo – the setting allows you to specify a logo, otherwise, the name of the store will be displayed;
    2. \n
  2. Width – setting allows you to specify the size of the logo;
    3. \n
  3. Start shopping button type – sets the style of the “Start shipping” button;
    4. \n
  4. Print button type – sets the style of the “Print” button.
    5. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n","blockTitle":"Gift card","fieldGroupName":"manual_category_blocks","hash":"section-gift-card"},{"blockContent":"

\"Password

\n

For Customers

\n

Adding a Section

\n

\"Password

\n

Video guide: How to set up the Password Page.

\n

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

\n

Section settings

\n

General

\n

\"Password

\n
    \n
  1. Button label – the setting allows you to set the label of the popup opening button (If not set, it is taken from translations).
    2. \n
\n

Logo

\n

\"Password

\n
    \n
  1. Logo – the setting allows you to set the logo image (If not set, shop.name is displayed);
    2. \n
  2. Logo width – setting allows you to set the width of the logo (min 20px, max 250px, step 5px, default 50px).
    3. \n
\n

Popup

\n

\"Password

\n
    \n
  1. Heading – setting allows you to set the title text of the popup;
    2. \n
  2. Input placeholder – the setting allows you to set the placeholder text of the popup input (if not set, it is taken from translations);
    3. \n
  3. Button label – setting allows you to set the label of the popup button (If not set, it is taken from translations);
    4. \n
  4. Bottom text – setting allows you to set the text below the form.
    5. \n
\n

Colors

\n

\"Password

\n
    \n
  1. Section background – setting allows you to set the background color of the section;
    2. \n
  2. Section text – setting allows you to set the color of the section text;
    3. \n
  3. Popup text – setting allows you to set the color of the popup text;
    4. \n
  4. Popup background – setting allows you to set the popup background;
    5. \n
  5. Input text – setting allows you to set the input text color;
    6. \n
  6. Input border– setting allows you to set the border color of the popup form input;
    7. \n
  7. Popup button label – setting allows you to set the label color of the popup form button;
    8. \n
  8. Popup button background – setting allows you to set the background color of the popup form button.
    9. \n
\n

Additional information

\n
    \n
  1. The “Enter using password” button opens a popup. The popup contains a login form on the page.
    2. \n
\n","blockTitle":"Password header","fieldGroupName":"manual_category_blocks","hash":"section-password-header"},{"blockContent":"

\"Password

\n

For Customers

\n

Adding a Section

\n

\"Password

\n

Video guide: How to set up the Password Page.

\n

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

\n

Section settings

\n

\"Password

\n

General

\n
    \n
  1. Heading – setting allows you to set the text of the section title;
    2. \n
  2. Text – setting allows you to set the text of the section text;
    3. \n
  3. Success message – the setting allows you to set the text when the form is successfully submitted (If not set, it is taken from translations);
    4. \n
  4. Show form – the setting allows you to show/hide the form;
    5. \n
  5. Input placeholder – the setting allows you to specify the placeholder text of the forms input. (If not set – taken from translations);
    6. \n
  6. 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;
    7. \n
  7. Background image – setting allows you to set a background image;
    8. \n
  8. Background image mobile – the setting allows you to set the background image on the mobile (if not set, the Background image is taken).
    9. \n
\n

Colors

\n

\"Password

\n
    \n
  1. Overlay – setting allows you to specify an overlay;
    2. \n
  2. Background – setting allows you to specify the section background color;
    3. \n
  3. Heading – setting allows you to specify the text color for the heading;
    4. \n
  4. Description – setting allows you to specify the text color for the description;
    5. \n
  5. Input text – setting allows you to specify the text color for input;
    6. \n
  6. Input Border – setting allows you to set the border color for the text input.
    7. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Additional information

\n
    \n
  1. For a section, it is possible to add application blocks.
    2. \n
\n","blockTitle":"Password content","fieldGroupName":"manual_category_blocks","hash":"section-password-content"},{"blockContent":"

\"Password

\n

For Customers

\n

Adding a Section

\n

\"Password

\n

Video guide: How to set up the Password Page.

\n

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

\n

Section settings

\n

General

\n

\"Password

\n
    \n
  1. Text – setting allows you to set the text of the section (If not set, it is taken from translations).
    2. \n
\n

Colors

\n

\"Password

\n
    \n
  1. Text – setting allows you to set the color of the section text;
    2. \n
  2. Background – setting allows you to set the background color of the section;
    3. \n
  3. Top border – setting allows you to set the color of the section border.
    4. \n
\n","blockTitle":"Password footer","fieldGroupName":"manual_category_blocks","hash":"section-password-footer"},{"blockContent":"

\"List

\n

For Customers

\n

Adding a Section

\n

\"List

\n

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

\n

Section settings

\n

General

\n

\"List

\n
    \n
  1. Heading – setting allows you to set the text for the title;
    2. \n
  2. Text – setting allows you to set text content;
    3. \n
  3. 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.
    4. \n
\n

Layout

\n

\"List

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. collection-card.liquid – the snippet displays the collection card.\"snippet:\n
      \n
    1. сollection – collection object.
      2. \n
    \n
    2. \n
  2. pagination.liquid – snippet displays pagination.\"Snippet:\n
      \n
    1. paginate – pagination object.
      2. \n
    \n
    3. \n
\n","blockTitle":"List collections","fieldGroupName":"manual_category_blocks","hash":"section-list-collections"},{"blockContent":"

\"Featured

\n

For Customers

\n

Adding a section

\n

\"Featured

\n

Video guide: How to set up the Featured collection (PLP example).

\n

In order to add a section, you need to go to Customizer → Add Section → Featured collection.

\n

Section settings

\n

\"Featured

\n
    \n
  1. Collection – setting allows you to select a collection;
    2. \n
  2. Label – setting allows you to set the text for the label;
    3. \n
  3. Heading – setting allows you to set the text for the title;
    4. \n
  4. Link url – setting allows you to set a custom link for the button. By default selected collection url will be used;
    5. \n
  5. Link label – setting allows you to set the label for the view all link;
    6. \n
  6. 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;
    7. \n
  7. Button style – setting allows you to choose the style for the view all button;
    8. \n
  8. Layout – setting allows you to select the number of products that will be displayed: 5 products, 10 products;
    9. \n
  9. Enable product cards indent – enable if you want to add space between product cards.\"Featured
    10. \n
\n

Layout

\n

\"Featured

\n
    \n
  1. Make full width – if the setting is disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. product-card.liquid – in this snippet, a product card is displayed.\"Snippet:\n
      \n
    1. product – passing the product object to the card;
      2. \n
    2. 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;
      3. \n
    3. 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;
      4. \n
    4. 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;
      5. \n
    5. 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.
      6. \n
    \n

    Additional information

    \n
      \n
    1. If more products are selected in the Layout setting than there are in the selected collection, then all the products that are will be displayed. For example, if there are 7 products in the collection, and Layout is set to 10, the result will be a grid of 7 products.
      2. \n
    \n
    2. \n
\n","blockTitle":"Featured collection","fieldGroupName":"manual_category_blocks","hash":"section-featured-collection"},{"blockContent":"

\"Featured

\n

For Customers

\n

Adding a section

\n

\"Featured

\n

Video guide: How to set up the Featured Products section.

\n

In order to add a section, you need to go to Customizer → Add Section → Featured products.

\n

Section settings

\n

General

\n

\"Featured

\n
    \n
  1. Heading – setting allows you to add a section title;
    2. \n
  2. 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;
    3. \n
  3. 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;
    4. \n
  4. 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;
    5. \n
  5. Enable product cards indent – enable if you want to add space between product cards.\"Featured
    6. \n
  6. Link url – setting allows you to set a custom link for the button;
    7. \n
  7. Link label – setting allows you to set a text for the button;
    8. \n
  8. Link aria-label – setting allows you to set the aria-label for the button;
    9. \n
  9. Button style – setting allows you to choose the style for the view all button.
    10. \n
\n

Layout

\n

\"Featured

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Additional information

\n
    \n
  1. When creating a section, 3 placeholders are displayed.
    2. \n
\n","blockTitle":"Featured products","fieldGroupName":"manual_category_blocks","hash":"section-featured-products"},{"blockContent":"

\"Product

\n

For customers

\n

Adding a section

\n

\"Product

\n

Video guide: How to set up the Product Tabs section.

\n

In order to add a section, you need to go to Customizer → Add Section → Product tabs.

\n

Section settings

\n

General

\n

\"Product

\n
    \n
  1. Heading – section heading;
    2. \n
  2. Enable product cards indent – enable if you want to add space between product cards.\"Product
    3. \n
\n

Layout

\n

\"Product

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – bottom indent of the section on the mobile.
    6. \n
\n

Block settings

\n

Block Tab

\n

\"Product

\n
    \n
  1. Heading – the setting is responsible for tab button text;
    2. \n
  2. Products – the setting is responsible for products in the tab. Limit: 4 products.
    3. \n
\n

Additional information

\n

\"Product

\n

The remaining settings (texts) are taken from the translations. Product promo:

\n
    \n
  1. Button aria – message for button aria-label.
    2. \n
\n","blockTitle":"Product tabs","fieldGroupName":"manual_category_blocks","hash":"section-product-tabs"},{"blockContent":"

\n
\n

\n

For customers

\n

Adding a section

\n

\n

Video guide: How to set up the Best Sellers section.

\n

In order to add a section, you need to go to Customizer → Add Section → Best sellers.

\n

Section settings

\n

General

\n

\"Best

\n
    \n
  1. Label – setting allows you to set the text for the label;
    2. \n
  2. Heading – setting allows you to set the text for the title.
    3. \n
\n

Product

\n

\"Best

\n
    \n
  1. Show product type – setting responsible for whether the product type will be shown.
    2. \n
\n

Color

\n

\"colors\"

\n
    \n
  1. Info text color – setting allows you to change the color for the text.
    2. \n
  2. Info backgrount color – setting allows you to change the background color.
    3. \n
  3. Info opacity – setting allows you to change the transparency of the background.
    4. \n
\n

\n

Layout

\n

\"layout\"

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Block settings

\n

\"Best

\n
    \n
  1. Collection – setting allows you to set the collection for block(setting mustn’t be empty);
    2. \n
  2. Product – setting allows you to set the product for block(setting mustn’t be empty);
    3. \n
  3. Image – setting allows you to set the custom image for the block (default: featured image of the product).
    4. \n
\n

Additional information

\n
    \n
  1. Labels settings. For the label to be displayed, a tag must be added to the product, for example, 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.
    2. \n
\n","blockTitle":"Best sellers","fieldGroupName":"manual_category_blocks","hash":"section-best-sellers"},{"blockContent":"

\"Featured

\n

For Customers

\n

Adding a section

\n

\"Featured

\n

Video guide: How to set up the Featured Product (PDP example).

\n

In order to add a section, you need to go to Customizer → Add Section → Featured product.

\n

Section settings

\n

Product

\n

\"Featured

\n
    \n
  1. Product – product picker.
    2. \n
\n

Media

\n

\"featured-product-settings\"
\nVideo guide: How to set up: Product Page Media Layout.

\n
    \n
  1. Enable lazy load – setting allows you to set lazy loading for product images;
    2. \n
  2. Enable zoom – the setting allows you to enable the Zoom function that appears when you click on the image;
    3. \n
  3. Show borders – the setting adds Borders inside and around the perimeter of the section;
    4. \n
  4. Show arrows on mobile – the setting is responsible for whether the slider arrows will be shown in the mobile version;
    5. \n
  5. Media layout – setting allows you to choose the appearance for the product image gallery:\"Featured\n\n
    6. \n
  6. 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;\"Featured
    7. \n
  7. Media height – the setting allows you to select the size of the image. Has several options: full size, fit to screen;
    8. \n
  8. 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.
    9. \n
  9. Enable media scroll for stacked layout – enables scroll to variant image when changing product options for stacked layout.
    10. \n
\n

General

\n

\"Featured

\n
    \n
  1. 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;
    2. \n
  2. 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;
    3. \n
  3. Show share buttons – Shows “Share” buttons.
    4. \n
\n

Colors

\n

\"Featured

\n
    \n
  1. Border colors – the setting allows you to set the section border color;
    2. \n
  2. UI button color – the setting allows you to set the UI button’s color. Цill also be used for shadow color;
    3. \n
  3. UI button background color – the setting allows you to set the UI button’s background color.
    4. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

Block Badges

\n

\"Featured

\n

Video guide: How to add Badges.

\n

The block has no settings, it displays product tags that are added in the product admin panel.

\n
    \n
  1. The block displays tags added to the product according to the template – label__%tag%:modifer:\n\n
    2. \n
  2. The modifier can have 2 values: primary and secondary or completely absent;
    3. \n
  3. Colors for modifiers are configured in the theme settings Customizer → Theme settings → Product → Labels.
    4. \n
  4. If the product (all variants) is sold out, it automatically receives a badge that says “SOLD OUT”.
    \n\"Featured
    5. \n
\n

Block Vendor

\n

\"Featured

\n

The block has no settings, it displays the vendor of the product, which is added to the product admin panel.

\n

Block Title

\n

\"Featured

\n

The block has no settings, it displays the title of the product, which is added to the product admin panel.

\n

Block Description

\n

\"Description\"

\n

The block has no settings, it displays the description of the product, which is added to the product admin panel.

\n

\n

 

\n

\n

Block Countdown timer

\n

\"Featured

\n

General

\n

\"Featured
\nVideo guide: How to set up Countdown Timer.

\n
    \n
  1. Text – text before the countdown timer;
    2. \n
  2. Icon – image before the countdown timer. (Recommended size 48×48).
    3. \n
\n

Colors

\n

\"Featured

\n
    \n
  1. Text – text before the countdown timer color.
    2. \n
  2. Timer text – timer cells text color;
    3. \n
  3. Timer background – Timer cells background color.
    4. \n
\n

To show the countdown timer:

\n\n

\"Featured

\n\n

\"Featured

\n

Block SKU

\n

\"SKU\"

\n

SKU

\n

\"Featured

\n
    \n
  1. Show SKU – display the SKU of a product or variant;
    2. \n
  2. 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.
    3. \n
\n

Block Options

\n

\"Featured

\n

\"pdpd-option\"

\n
    \n
  1. Show labels – the setting is responsible for showing/hiding labels for options;
    2. \n
  2. Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;
    \nVideo guide: How to set up the Size Guide.\"Featured
    3. \n
  3. 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.
    \nYou can select Buttons
    \n\"Featured
    \nor Dropdown \"Featured
    4. \n
  4. 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;\"Featured
    5. \n
  5. Size guide general tab label – label for size guide general tab;\"Featured
    6. \n
  6. Size guide model tab label – label for size guide model tab;\"Featured
    7. \n
  7. Size guide drawer title – the title for the popup, which is called by the Size guide button;
    8. \n
  8. Size guide button icon – button icon;
    9. \n
  9. Size guide button label – button label.
    10. \n
\n

To show the size guide:

\n\n

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

\n

\"Featured

\n

Follow the steps:

\n
    \n
  1. Create product metafield with Name: “Size guide model image”, Namespace and key: custom.size_guide_model_image. Content type must be file (images only).\"Featured
    2. \n
  2. Create product metafield with Name: “Size guide model info”, Namespace and key: custom.size_guide_model_info. Content type must be Multi-line text.\"Featured
    3. \n
  3. Go to the product in the admin and add values to these metafields. You can set both or one of these fields to see tabs in the size guide popup.\"Featured
    4. \n
  4. Now when you open the Size guide popup on the product you will see tabs with the default size guide and size guide for the product model.
    5. \n
\n

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:

\n
    \n
  1. Will try to find an image in the store that matches the name swatch-%value%.png. For example, swatch-sky-blue.png;
    2. \n
  2. If there is no picture, it will try to use the right side of the value. For example, the color Sky Blue will be converted to just Blue from the CSS palette;
    3. \n
  3. Recommended swatch image size 30*30px.
    4. \n
\n

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.\"Featured

\n

Block Quantity

\n

\"Featured

\n

\"Featured

\n
    \n
  1. Show label – will display the label for the quantity change widget.
    2. \n
\n

Block Price

\n

\"Featured

\n

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.

\n
    \n
  1. In this block, a message will be displayed stating that taxes are included in the price;
    2. \n
  2. In this block, the installment purchase form will be displayed.
    3. \n
\n

Block Add to cart

\n

\"Featured

\n

\"Featured

\n
    \n
  1. Button type – add to cart button style;
    2. \n
  2. Show additional payment buttons – add “Buy it now” buttons;
    3. \n
  3. Show enabled payment types – adds a list with icons of supported payment types;
    4. \n
  4. 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).\"Featured
    5. \n
\n

Block Pickup availability

\n

\"Featured

\n

Video guide: How to set up the Pickup Availability for your Shopify Store.

\n

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

\n

Block Drawers

\n

\"Block

\n

\"Featured

\n

Displays up to 3 additional buttons with a popup:

\n\n

Product description

\n

\"Featured

\n
    \n
  1. Show description – shows the product description button;
    2. \n
  2. Button label – setting allows you to set button label for drawer toggler;
    3. \n
  3. Drawer heading – setting allows you to set the heading for the drawer.
    4. \n
\n

Shipping and returns

\n

\"Featured

\n
    \n
  1. Drawer content – selection of the page with the rules of delivery and return;
    2. \n
  2. Button label – setting allows you to set a button label for the drawer toggler.
    3. \n
\n

Custom drawer

\n

\"custom

\n
    \n
  1. Drawer heading – setting allows you to set the heading for the drawer.
    2. \n
  2. Drawer content – setting allows you to set the content for the drawer.
    3. \n
\n

\n

Block Complementary products

\n

\"Featured

\n

Video guide: How to set up the Complementary Products and Recommendations.

\n
    \n
  1. Heading – setting allows you to set the heading for the block.
    2. \n
\n

Block Sales point

\n

\"Featured

\n

\"Featured

\n

You can add a simple text block with an icon.

\n
    \n
  1. Icon image – setting allows you to set an icon for the message;
    2. \n
  2. Text – text of the block.
    3. \n
\n

Block Inventory status

\n

\"Featured

\n

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

\n

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

\n

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

\n

\"Featured

\n
    \n
  1. Low stock text – text that appears when variant inventory quantity is less or equal ”Low stock threshold” value;
    2. \n
  2. High stock text – text that appears when variant inventory quantity is more than the “Low stock threshold” value;
    3. \n
  3. Low stock threshold – a setting that allows you to select the minimum number of variant inventory quantities to show a “Low stock text” message. If the variant inventory quantity is more than the value of the setting, then “High stock text” will appear.
    4. \n
\n

Block Gift wrap product

\n

\"Featured

\n

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.
\nVideo guide: How to add the Gift box button.

\n

Block Notify me

\n

\"Featured

\n

\"Featured

\n

Button settings

\n

\"Featured

\n
    \n
  1. Button label– text for the button. Required field;
    2. \n
  2. Button icon – icon for the button.
    3. \n
\n

Form settings

\n

\"Featured

\n
    \n
  1. Heading – popup title text field. Required field;
    2. \n
  2. Email placeholder – placeholder for the input. Required field;
    3. \n
  3. Button label – label for the submit button. Required field;
    4. \n
  4. Success message – a message that the form was sent successfully. Required field.
    5. \n
\n

Translations settings:

\n

\"Featured

\n
    \n
  1. 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.
    2. \n
\n

Notify me logic:

\n\n

Block Ask a question

\n

\"Featured

\n

\"Featured

\n

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).

\n

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.

\n

Button settings

\n

\"Featured

\n
    \n
  1. Button label – text for the button. Required field;
    2. \n
  2. Button icon – icon for the button.
    3. \n
\n

Form settings

\n

\"Featured

\n
    \n
  1. Heading – heading for popup form;
    2. \n
  2. Email placeholder – placeholder for the email field. Required field;
    3. \n
  3. Name placeholder – placeholder for the name field. Required field;
    4. \n
  4. Phone placeholder – placeholder for the phone field. Leave blank to hide;
    5. \n
  5. Product URL placeholder – placeholder for the product URL field. Required field;
    6. \n
  6. Success message – text of the success message after the form submit;
    7. \n
  7. Submit button label – text for the submit button.
    8. \n
\n

Block Custom field

\n

\"Featured

\n

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.

\n

Settings

\n

\"Featured

\n
    \n
  1. Field label – the setting is responsible for the label text for the input;
    2. \n
  2. Required text – the setting is responsible for the label text for the checkbox.
    3. \n
\n

Custom field logic:

\n

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.

\n

\"Featured

\n

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.

\n

\"Featured

\n

Block @app

\n

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

\n

Block Custom liquid

\n

\"Featured

\n
    \n
  1. Custom liquid – setting allows you to add your liquid code.
    2. \n
\n

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

\n

Additional information

\n
    \n
  1. The section has the same parameters as Product template;
    2. \n
  2. For the section to work, you must select a product;
    3. \n
  3. In the product heading there is a link to the main product page;
    4. \n
  4. To select complementary products, add the Search & Discovery app (Shopify app). Learn more
    5. \n
\n","blockTitle":"Featured product","fieldGroupName":"manual_category_blocks","hash":"section-featured-product"},{"blockContent":"

\"Product

\n

For Customers

\n

Adding a Section

\n

\"Product

\n

Video guide: How to set up the Complementary Products and Recommendations.

\n

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

\n

Section settings

\n

General

\n

\"Product

\n
    \n
  1. Heading – section title;
    2. \n
  2. Subheading – section subtitle.
    3. \n
\n

Recommendations

\n

\"Product

\n
    \n
  1. Use Shopify recommendations – use the list of products that Shopify provides for recommendations. Read more here: https://shopify.dev/themes/product-merchandising/recommendations;
    2. \n
  2. Resource collection – use your collection as a recommendation list. Works if Shopify recommendations are disabled;
    3. \n
  3. Products to show – how many products to show.
    4. \n
\n

Recently viewed

\n

\"Product

\n
    \n
  1. Show – if a checked tab with the recently viewed products will be added;
    2. \n
  2. Tab label – the label of a recently viewed tab;
    3. \n
  3. Products to show – how many products to show.
    4. \n
\n

View with recently viewed tab:

\n

\"Product

\n

Layout

\n

\"Product

\n
    \n
  1. Layout – number of visible products without scrolling;\"Product
    2. \n
  2. Enable product cards indent – enable if you want to add space between product cards;\"Product
    3. \n
  3. Make full width – display on the entire width of the page without indents on the left and right;
    4. \n
  4. Desktop offset top – the top indent of the section on the desktop;
    5. \n
  5. Desktop offset bottom – the bottom indent of the section on the desktop;
    6. \n
  6. Mobile offset top – the top indent of the section on the mobile;
    7. \n
  7. Mobile offset bottom – the bottom indent of the section on the mobile.
    8. \n
\n","blockTitle":"Product recommendations","fieldGroupName":"manual_category_blocks","hash":"section-product-recommendations"},{"blockContent":"

\"Shop

\n

For customers

\n

Adding a section

\n

\"Shop
\nVideo guide: How to set up Shop the look section.
\nIn order to add a section, you need to go to Customizer → Add Section → Shop the look.

\n

Section settings

\n

\"Shop

\n
    \n
  1. Heading – a title of the section;
    2. \n
  2. Image – the picture for the section is set. If the image is not set, the placeholder will be used;
    3. \n
  3. 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;
    4. \n
  4. 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;
    5. \n
  5. Enable point button animation – the setting is responsible for whether the animation will be enabled for the point button;
    6. \n
  6. 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.
    7. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Block settings

\n

\"Shop

\n

Block limit – 5

\n
    \n
  1. Product – the setting is responsible for the output of the product to which the point button will refer;
    2. \n
  2. Point position top – the setting is responsible for positioning the point button vertically;
    3. \n
  3. Point position left – the setting is responsible for positioning the point button horizontally.
    4. \n
\n

For Developers

\n

Used snipped

\n
    \n
  1. shop-the-look-image.liquid – this snippet renders a picture for the section.
    2. \n
\n

\"Snippet:

\n
    \n
  1. image – the picture is transmitted;
    2. \n
  2. 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.
    3. \n
\n

JS Event

\n
    \n
  1. When the section is inited, event – shop-the-look:loaded is dropped.
    2. \n
\n

Additional Information

\n
    \n
  1. Due to the fact that the direction of the section can be changed dynamically in the customizer, and according to accessibility, the markup must go in the same order as it is written, it is not recommended to change the arrangement of elements with styles, since the screen reader will follow the DOM tree and will not read correctly. It was decided not to add extra logic to follow the design, therefore, when the image is located on the right, then on a mobile device it will go from the bottom since it is located below the markup;
    2. \n
  2. Due to the fact that, depending on the position of the image on the desktop, the order also changes on the mobile phone, it was decided to move away from the design and replace the navigation points from below with arrows to simplify;
    3. \n
  3. The point button in the active state has been changed since it was not particularly visible. The button has been changed to an inactive button;
    4. \n
  4. A switchable pulsating animation on the point button has been added to attract more attention and improve the UI;
    5. \n
  5. For cases when the user has disabled js, the user will lose point buttons, and also, the slider will be replaced with a scroll with a similar work of turning. The scroll will be the same if for some reason the slider cannot be initialized, it also minimizes the jump when the slider is initialized.
    6. \n
\n","blockTitle":"Shop the look","fieldGroupName":"manual_category_blocks","hash":"section-shop-the-look"},{"blockContent":"

\"Product

\n

For customers

\n

Adding a section

\n

\n

Video guide: How to set up the Product Banner section.

\n

In order to add a section, you need to go to Customizer → Add Section → Product banner.

\n

Section settings

\n

\"Product

\n
    \n
  1. Label – the setting is responsible for adding the label;
    2. \n
  2. Heading – the setting is responsible for adding the heading;
    3. \n
  3. Text – the setting is responsible for adding the text;
    4. \n
  4. 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;
    5. \n
  5. Overlay opacity – the setting is responsible for changing the transparency of the rear image overlay.
    6. \n
\n

Colors

\n

\"Product

\n
    \n
  1. Arrows background – the setting is responsible for changing the color of the arrow’s background;
    2. \n
  2. Arrows color – the setting is responsible for changing the color of the arrows;
    3. \n
  3. Label color – the setting is responsible for changing the color of the label;
    4. \n
  4. Heading color – the setting is responsible for changing the color of the heading;
    5. \n
  5. Text color – the setting is responsible for changing the color of the text;
    6. \n
  6. Overlay -the setting is responsible for changing the color of the overlay;
    7. \n
  7. Section background – the setting is responsible for changing the color of the section background.
    8. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Block settings

\n

\"Product

\n
    \n
  1. Product – the setting is responsible for selecting the product in the product card;
    2. \n
  2. 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;
    3. \n
  3. 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;
    4. \n
  4. Banner image desktop – the setting is responsible for selecting an image for the back slider on the desktop;
    5. \n
  5. 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.
    6. \n
\n","blockTitle":"Product banner","fieldGroupName":"manual_category_blocks","hash":"section-product-banner"},{"blockContent":"

Video guide: How to set up the Trend Products section.

\n

In this section, you can add max 3 blocks with images and add hot spots that help customers buy specific products.

\n

\"Trend

\n

For customers

\n

Adding a section

\n

\"Trend

\n

In order to add a section, you need to go to Customizer → Add Section → Trend products.

\n

Section settings

\n

General

\n

\"trend

\n
    \n
  1. Heading – heading of the section;
    2. \n
  2. Make the first hotspot opened – checkbox to have the first hotspot opened;
    3. \n
\n

Layout

\n

\"Trend

\n
    \n
  1. Make full width – If disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Blocks settings

\n

General

\n

 

\n

\"Trend

\n
    \n
  1. Image – an image of the block.
    2. \n
\n

Product 1 (Product 2, Product 3)

\n

\"Trend

\n
    \n
  1. Product – product, that will show in the popup after clicking on hotspot;
    2. \n
  2. Product image – the setting allows you to select a custom image instead of a product image;
    3. \n
  3. Spot horizontal position – horizontal position of the hotspot;
    4. \n
  4. Spot vertical position – vertical position of the hotspot.
    5. \n
\n","blockTitle":"Trend products","fieldGroupName":"manual_category_blocks","hash":"section-trend-products"},{"blockContent":"

\"Shop

\n

For customers

\n

Adding a section

\n

\"Shop

\n

Video guide: How to set up the Shop by brand section.

\n

In order to add a section, you need to go to Customizer → Add Section → Shop by brand.

\n

Section settings

\n

General

\n

\"Shop

\n
    \n
  1. Heading – setting allows you to set the text for the title;
    2. \n
  2. Card background – setting allows you to set the background color for the cards.
    3. \n
\n

Layout

\n

\"Shop

\n
    \n
  1. Make full width – If disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Block settings

\n

\"Shop

\n
    \n
  1. Image – setting allows you to set the image for the card;
    2. \n
  2. Image link – setting allows you to set the link for the card.
    3. \n
\n","blockTitle":"Shop by brand","fieldGroupName":"manual_category_blocks","hash":"section-shop-by-brand"},{"blockContent":"

\"Slideshow

\n

For Customers

\n

Adding a section

\n

\"Slideshow

\n

Video guide: How to set up the Slideshow section.

\n

In order to add a section, you need to go to Customizer → Add Section → Slideshow.

\n

Section settings

\n

Layout

\n

\"slides-view\"

\n
    \n
  1. Slides view – the setting is responsible for the appearance of the slides;\"Slideshow
    2. \n
  2. Desktop section height – the setting is responsible for the height of the section for the desktop;
    3. \n
  3. Mobile section height – the setting is responsible for the height of the section for mobile;
    4. \n
  4. 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;
    \n\"Slideshow
    5. \n
  5. Desktop offset top – top indent of the section on the desktop;
    6. \n
  6. Desktop offset bottom – bottom indent of the section on the desktop;
    7. \n
  7. Mobile offset top – top indent of the section on the mobile;
    8. \n
  8. Mobile offset bottom – bottom indent of the section on the mobile.
    9. \n
\n

Slideshow settings

\n

\"Slideshow

\n
    \n
  1. Show arrows – the setting is responsible for displaying the arrows for switching between slides;
    2. \n
  2. Show pagination – the setting is responsible for displaying pagination;
    3. \n
  3. Show progress bar – the setting is responsible for displaying the progress bar;
    4. \n
  4. Enable loop – the setting is responsible for setting the infinite scrolling of the slider;
    5. \n
  5. Enable autoplay – the setting is responsible for setting the automatic switching of slides;
    6. \n
  6. Autoplay speed – the setting is responsible for the speed of automatic switching of slides;
    7. \n
  7. Animation speed – setting allows you to set the animation speed of switching slides;
    8. \n
  8. Animation type – setting allows you to set the type of animation for switching slides:\n\n
    9. \n
  9. Enable lazy load – the setting is responsible for the slow loading of slides.
    10. \n
\n

Colors

\n

\"Slideshow

\n
    \n
  1. Background – setting allows you to set the background color of the section;
    2. \n
  2. Probress bar – setting allows you to set the color of the progress bar;
    3. \n
  3. Arrows – setting allows you to set the color for the arrows for switching between slides;
    4. \n
  4. Pagination – setting allows you to set colors for pagination.
    5. \n
\n

Accessibility

\n

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:

\n

\"Slideshow

\n

General → Accessibility

\n

\"Slideshow

\n

General → Accessibility slider

\n

\"Slideshow

\n

Blocks settings

\n

Block Image

\n

Content

\n

\"block

\n

\"Slideshow

\n
    \n
  1. Image (desktop) – setting allows you to set the image for the desktop;
    2. \n
  2. Image (mobile) – setting allows you to set the image for mobile;
    3. \n
  3. Label – setting allows you to set the text for the label;
    4. \n
  4. Heading – setting allows you to set the text for the title;
    5. \n
  5. Text – setting allows you to set the text for the text;
    6. \n
  6. Button label – setting allows you to set the label for the button;
    7. \n
  7. 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;
    8. \n
  8. Button link – setting allows you to set a link for the button;
    9. \n
  9. Open link in a new tab – setting allows you to choose how the link will open, in the current tab or the new;
    10. \n
  10. Make link clickable on the entire slide – enable the full slide to be clickable;
    11. \n
  11. Second button label – setting allows you to set the label for the second label;
    12. \n
  12. Second button aria-label – setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;
    13. \n
  13. Second button link – setting allows you to set a link for the second button;
    14. \n
  14. 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.
    15. \n
\n

Alignment

\n

\"Slideshow

\n
    \n
  1. Text alignment inside block – setting allows you to set the alignment for the text;
    2. \n
  2. Content alignment – setting allows you to set the alignment for the content.
    3. \n
\n

Colors

\n

\"Slideshow

\n
    \n
  1. Background – setting allows you to set the background color of the slide;
    2. \n
  2. Label – setting allows you to set the color for the label;
    3. \n
  3. Heading – setting allows you to set the color for the header;
    4. \n
  4. Text – setting allows you to set the color for the text;
    5. \n
  5. Button label – setting allows you to set the color for the button label;
    6. \n
  6. Button background – setting allows you to set the background color for the button;
    7. \n
  7. Button border – setting allows you to set the border color for the button;
    8. \n
  8. Button label (hover) – setting allows you to set the color for the button label on hover;
    9. \n
  9. Button background (hover) – setting allows you to set the background color for the button on hover;
    10. \n
  10. Button border (hover) – setting allows you to set the border color for the button;
    11. \n
  11. Second button label – setting allows you to set the color for the second button label;
    12. \n
  12. Second button background – setting allows you to set the background color for the second button;
    13. \n
  13. Second button border – setting allows you to set the border color for the second button;
    14. \n
  14. Second button label (hover) – setting allows you to set the color for the second button label on hover;
    15. \n
  15. Second button background (рover) – setting allows you to set the background color for the second button on hover;
    16. \n
  16. Second button border (hover) – setting allows you to set the border color for the second button;
    17. \n
  17. Overlay – setting allows you to set the color for the overlay.
    18. \n
\n

Block HTML Video

\n

General

\n

\"slide-htmlvid\"

\n

\"block

\n
    \n
  1. Video (desktop) – setting allows you to select a video from the picker for the desktop;
    2. \n
  2. Video (mobile) – setting allows you to select a video from the picker for mobile;
    3. \n
  3. Preview image (desktop) – setting allows you to set the image for the desktop;
    4. \n
  4. Preview image (mobile) – setting allows you to set the image for mobile;
    5. \n
  5. Label – setting allows you to set the text for the label;
    6. \n
  6. Heading – setting allows you to set the text for the title;
    7. \n
  7. Text – setting allows you to set the text for the text;
    8. \n
  8. Button label – setting allows you to set the text for the label;
    9. \n
  9. 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;
    10. \n
  10. Button link – setting allows you to set a link for the button;
    11. \n
  11. Open link in a new tab – setting allows you to choose how the link will open, in the current tab or the new;
    12. \n
  12. Make link clickable on the entire slide – enable the full slide to be clickable;
    13. \n
  13. Second button label – setting allows you to set the label for the second label;
    14. \n
  14. Second button aria-label – setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;
    15. \n
  15. Second button link – setting allows you to set a link for the second button;
    16. \n
  16. 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.
    17. \n
\n

Video settings

\n

\"Slideshow

\n
    \n
  1. Play type – setting allows you to set the playback type for the video.
    2. \n
\n

Alignment

\n

\"Slideshow

\n
    \n
  1. Text alignment inside block – setting allows you to set the alignment for the text;
    2. \n
  2. Content alignment – setting allows you to set the alignment for the content.
    3. \n
\n

Colors

\n

\"Slideshow

\n
    \n
  1. Background – setting allows you to set the background color of the slide;
    2. \n
  2. Label – setting allows you to set the color for the label;
    3. \n
  3. Heading – setting allows you to set the color for the header;
    4. \n
  4. Text – setting allows you to set the color for the text;
    5. \n
  5. Button label – setting allows you to set the color for the button label;
    6. \n
  6. Button background – setting allows you to set the background color for the button;
    7. \n
  7. Button border – setting allows you to set the border color for the button;
    8. \n
  8. Button label (hover) – setting allows you to set the color for the button label on hover;
    9. \n
  9. Button background (hover) – setting allows you to set the background color for the button on hover;
    10. \n
  10. Button border (hover)– setting allows you to set the border color for the button on hover;
    11. \n
  11. Second button label – setting allows you to set the color for the second button label;
    12. \n
  12. Second button background – setting allows you to set the background color for the second button;
    13. \n
  13. Second button border – setting allows you to set the border color for the second button;
    14. \n
  14. Second button label (hover) – setting allows you to set the color for the second button label on hover;
    15. \n
  15. Second button background (hover) – setting allows you to set the background color for the second button on hover;
    16. \n
  16. Second button border (hover) – setting allows you to set the border color for the second button;
    17. \n
  17. Overlay – setting allows you to set the color for the overlay.
    18. \n
\n

Block Vimeo/Youtube Video

\n

General

\n

\"screen-YTvid\"

\n

 

\n

\"vimeo/youtube

\n
    \n
  1. Video url (desktop) – setting allows you to set a link to the video for desktop;
    2. \n
  2. Video url (mobile) – setting allows you to set a link to a video for mobile;
    3. \n
  3. Preview image (desktop) – setting allows you to set the image for the desktop;
    4. \n
  4. Preview image (mobile) – setting allows you to set the image for mobile;
    5. \n
  5. Label – setting allows you to set the text for the label;
    6. \n
  6. Heading – setting allows you to set the text for the title;
    7. \n
  7. Text– setting allows you to set the text for the text;
    8. \n
  8. Button label – setting allows you to set the label for the button;
    9. \n
  9. Button aria-label – setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;
    10. \n
  10. Button link – setting allows you to set a link for the button;
    11. \n
  11. Open link in a new tab – setting allows you to indicate how the link will open, in the current tab or the new;
    12. \n
  12. Make link clickable on the entire slide – enable the full slide to be clickable;
    13. \n
  13. Second button label – setting allows you to set the label for the second label;
    14. \n
  14. Second button aria-label – setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;
    15. \n
  15. Second button link – setting allows you to set a link for the second button;
    16. \n
  16. 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.
    17. \n
\n

Video settings

\n

\"Slideshow

\n
    \n
  1. Play type – setting allows you to set the playback type for the video.
    2. \n
\n

Alignment

\n

\"Slideshow

\n
    \n
  1. Text alignment inside block – setting allows you to set the alignment for the text;
    2. \n
  2. Content alignment – setting allows you to set the alignment for the content.
    3. \n
\n

Colors

\n

\"Slideshow

\n
    \n
  1. Background – setting allows you to set the background color of the slide;
    2. \n
  2. Label – setting allows you to set the color for the label;
    3. \n
  3. Heading – setting allows you to set the color for the header;
    4. \n
  4. Text – setting allows you to set the color for the text;
    5. \n
  5. Button label – setting allows you to set the color for the button label;
    6. \n
  6. Button background – setting allows you to set the background color for the button;
    7. \n
  7. Button border – setting allows you to set the border color for the button;
    8. \n
  8. Button label (hover) – setting allows you to set the color for the button label on hover;
    9. \n
  9. Button background (hover) – setting allows you to set the background color for the button on hover;
    10. \n
  10. Button border (hover)– setting allows you to set the border color for the button on hover;
    11. \n
  11. Second button label – setting allows you to set the color for the second button label;
    12. \n
  12. Second button background – setting allows you to set the background color for the second button;
    13. \n
  13. Second button border – setting allows you to set the border color for the second button;
    14. \n
  14. Second button label (hover) – setting allows you to set the color for the second button label on hover;
    15. \n
  15. Second button background (hover) – setting allows you to set the background color for the second button on hover;
    16. \n
  16. Second button border (hover) – setting allows you to set the border color for the second button;
    17. \n
  17. Overlay – setting allows you to set the color for the overlay.
    18. \n
\n

Block Three columns

\n

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.

\n

\"Slideshow

\n

\"Slideshow

\n

General

\n

\"Slideshow

\n
    \n
  1. Video play type – setting allows you to set the playback type for the video.
    2. \n
\n

First column

\n

\"slide-3columns\"

\n

\"slide-3columns2\"

\n
    \n
  1. Media type – the setting allow you select a media content type do you want to show (Image, HTML 5 video, YouTube/Vimeo);
    2. \n
  2. Image desktop – desktop image;
    3. \n
  3. Image mobile – mobile image. If not set – desktop image will be used;
    4. \n
  4. Video (desktop) – HTML5 desktop video;
    5. \n
  5. Video (mobile) – HTML5 mobile video. If not set – desktop video will be used;
    6. \n
  6. YouTube/Vimeo url (desktop) -YouTube/Vimeo desktop video url;
    7. \n
  7. YouTube/Vimeo url (mobile) – YouTube/Vimeo mobile video url. f not set – desktop video will be used.
    8. \n
\n

Second column

\n

\"second

\n
    \n
  1. Label – setting allows you to set the text for the label;
    2. \n
  2. Heading – setting allows you to set the label for the button;
    3. \n
  3. Button label – setting allows you to set the label for the button;
    4. \n
  4. Button aria-label – setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;
    5. \n
  5. Button link – setting allows you to set a link for the button;
    6. \n
  6. 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.
    7. \n
  7. Make link clickable on the entire slide – enable the full slide to be clickable;
    8. \n
\n

Third column

\n

\"slide-3columns\"

\n

\"slide-3columns2\"

\n
    \n
  1. Media type – the setting allows you to select a media content type that you want to show (Image, HTML 5 video, YouTube/Vimeo);
    2. \n
  2. Image desktop – desktop image;
    3. \n
  3. Image mobile – mobile image. If not set – desktop image will be used;
    4. \n
  4. Video (desktop) – HTML5 desktop video;
    5. \n
  5. Video (mobile) – HTML5 mobile video. If not set – desktop video will be used;
    6. \n
  6. YouTube/Vimeo url (desktop) -YouTube/Vimeo desktop video url;
    7. \n
  7. YouTube/Vimeo url (mobile) – YouTube/Vimeo mobile video url. f not set – desktop video will be used.
    8. \n
\n

Block Two columns

\n

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).

\n

\"Slideshow

\n

General

\n

\"Slideshow

\n
    \n
  1. Media position – select a position of media column. Can be left or right.
    2. \n
\n

Content column

\n

\"content

\n
    \n
  1. Label – setting allows you to set the text for the label;
    2. \n
  2. Heading – setting allows you to set the label for the button;
    3. \n
  3. Text – setting allows you to set a text for the slide;
    4. \n
  4. Button label – setting allows you to set the label for the button;
    5. \n
  5. Button aria-label – setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;
    6. \n
  6. Button link – setting allows you to set a link for the button;
    7. \n
  7. 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.
    8. \n
  8. Make link clickable on the entire slide – enable the full slide to be clickable;
    9. \n
\n

Media column

\n

\"slide-2columns\"

\n

\"slide-2columns2\"

\n
    \n
  1. Media type – the setting allows you to select a media content type that you want to show (Image, HTML 5 video, YouTube/Vimeo);
    2. \n
  2. Video play type – setting allows you to set the playback type for the video;
    3. \n
  3. Image desktop – desktop image;
    4. \n
  4. Image mobile – mobile image. If not set – desktop image will be used;
    5. \n
  5. Video (desktop) – HTML5 desktop video;
    6. \n
  6. Video (mobile) – HTML5 mobile video. If not set – desktop video will be used;
    7. \n
  7. YouTube/Vimeo url (desktop) -YouTube/Vimeo desktop video url;
    8. \n
  8. YouTube/Vimeo url (mobile) – YouTube/Vimeo mobile video url. f not set – desktop video will be used.
    9. \n
\n

Colors

\n

\"Slideshow

\n
    \n
  1. Background – setting allows you to set the background color of the slide;
    2. \n
  2. Label – setting allows you to set the color for the label;
    3. \n
  3. Heading – setting allows you to set the color for the header;
    4. \n
  4. Text– setting allows you to set the color for the description;
    5. \n
  5. Button label– setting allows you to set the color for the button label;
    6. \n
  6. Button background – setting allows you to set the background color for the button;
    7. \n
  7. Button border – setting allows you to set the border color for the button;
    8. \n
  8. Button label (hover) – setting allows you to set the color for the button label on hover;
    9. \n
  9. Button background (hover) – setting allows you to set the background color for the button on hover;
    10. \n
  10. Button border (hover) – setting allows you to set the border color for the button;
    11. \n
  11. Overlay – setting allows you to set the color for the overlay.
    12. \n
\n

For Developers

\n

Used snippets

\n

slideshow-slide.liquid – this snippet renders a carousel slide.

\n

\"Snippet:

\n
    \n
  1. image_mobile – link to an image for mobile;
    2. \n
  2. image_desktop – link to an image for desktop;
    3. \n
  3. height_mobile – height for mobile, used to calculate the height of images;
    4. \n
  4. height_desktop – height for desktop, used to calculate the height of images;
    5. \n
  5. enable_lazy_load – a variable responsible for using lazy load;
    6. \n
  6. small_width – image width for devices with screen widths from 768px to 991px;
    7. \n
  7. small_width_retina – image width for devices with screen width from 768px to 991px, for retina screens;
    8. \n
  8. medium_width – image width for devices with screen widths from 992px to 1199px;
    9. \n
  9. medium_width_retina – image width for devices with screen width from 768px to 1199px, for retina screens;
    10. \n
  10. large_width – image width for devices with screen width from 1200px to 1500px;
    11. \n
  11. large_width_retina – image width for devices with screen width from 1200px to 1500px, for retina screens;
    12. \n
  12. extra_large_width – image width for devices with screen widths from 1501px to 1680px;
    13. \n
  13. extra_large_width_retina – image width for devices with screen width from 1501px to 1680px, for retina screens;
    14. \n
  14. full_hd_width – image width for devices with a screen width of 1681px and above;
    15. \n
  15. full_hd_width_retina – image width for devices with a screen width of 1681px and above, for retina screens.
    16. \n
\n","blockTitle":"Slideshow","fieldGroupName":"manual_category_blocks","hash":"section-slideshow"},{"blockContent":"

\"Banner

\n

For Customer

\n

Adding a Section

\n

\"Banner

\n

Video guide: How to set up the Banner section.

\n

In order to add a section, you need to go to Customizer → Add Section → Banner.

\n

Section settings

\n

Colors

\n

\"Banner

\n
    \n
  1. Section background – background color setting;
    2. \n
  2. Text – text color setting;
    3. \n
  3. Link – setting link text color;
    4. \n
  4. Button background – setting the background color of the button;
    5. \n
  5. Button label – setting button label color;
    6. \n
  6. Button border – setting the color of the button border;
    7. \n
  7. Button background (hover) – setting the background color of the button on hover;
    8. \n
  8. Button label (hover) – setting button label color on hover;
    9. \n
  9. Button border (hover) – setting the button border color on hover.
    10. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

Block limit – 1

\n

The section contains three different types of blocks (banner option): Full width , Countdown timer, and Two columns.

\n

Block Full width

\n

General

\n

\"banner

\n

\"banner-fullwidth\"

\n
    \n
  1. Desktop banner min height – the setting allows you to specify a minimum height for the banner on the desktop;
    2. \n
  2. Mobile banner min height – the setting allows you to specify a minimum height for the banner on the mobile;
    3. \n
  3. Media type – selector for selecting the type of media content to be displayed. Available types are:\n\n
    4. \n
  4. Label – field for Label;
    5. \n
  5. Heading – field for Heading;
    6. \n
  6. Text – field for Text;
    7. \n
  7. Button label – a field for the label content of the button;
    8. \n
  8. Button link – the URL field for the button;
    9. \n
  9. 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;
    10. \n
  10. Make link clickable on the entire media – enable the full media to be clickable;
    11. \n
  11. Overlay opacity – overlay transparency adjustment;
    12. \n
  12. Overlay color – setting allows you to select the color of the overlay;
    13. \n
  13. Image desktop – picker picture displayed on Desktop;
    14. \n
  14. Image mobile – picker picture displayed on Mobile;
    15. \n
  15. Image border width – the setting allows you to set the size of the border;
    16. \n
  16. Image border indent – The setting allows you to set the indent of the border;
    17. \n
  17. Enable lazy load – enable/disable the lazy load function.
    18. \n
\n

Video

\n

\"bannew-full-vid\"

\n
    \n
  1. HTML5 Desktop Video – a field to add an HTML5 Video displayed on the Desktop;
    2. \n
  2. HTML5 Mobile Video – a field to add an HTML5 Video displayed on Mobile;
    3. \n
  3. Youtube/Vimeo Desktop Video Url – a field for adding a link to Youtube or Vimeo video displayed on the Desktop;
    4. \n
  4. Youtube/Vimeo Mobile Video Url – field to add a link to Youtube or Vimeo video displayed on Mobile.
    5. \n
\n

Alignment

\n

\"Banner

\n
    \n
  1. Content alignment – content position selector within the block. Text can have 4 positions:\n\n
    2. \n
  2. Content alignment mobile – content position selector within the block on mobile. Text can have 4 positions:\n\n
    3. \n
  3. Block alignment – block position selector. A block can have 3 positions.\n\n
    4. \n
\n

Block Two columns

\n

\"block

\n

\"banner-2columns2\"

\n

General

\n
    \n
  1. Desktop banner min height – the setting allows you to specify a minimum height for the banner on the desktop;
    2. \n
  2. Mobile banner min height – the setting allows you to specify a minimum height for the banner on the mobile;
    3. \n
  3. Media type – selector for selecting the type of media content to be displayed. Available types are:\n\n
    4. \n
  4. Media content position – image position selector. There are two options:\n\n
    5. \n
  5. Label – field for Label;
    6. \n
  6. Heading – field for Heading;
    7. \n
  7. Text – field for Text;
    8. \n
  8. Button label – a field for the label content of the button;
    9. \n
  9. Button link – the URL field for the button;
    10. \n
  10. 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;
    11. \n
  11. Make link clickable on the entire media – enable the full media to be clickable;
    12. \n
  12. Overlay opacity – adjustment of the degree of transparency of the overlay;
    13. \n
  13. Image desktop – picker picture displayed on Desktop;
    14. \n
  14. Image mobile – picker picture displayed on Mobile.
    15. \n
  15. Image border width – the setting allows you to set the size of the border on image;
    16. \n
  16. Image border indent – the setting allows you to set the indent of the border on image;
    17. \n
  17. Background image desktop – picker of the background image of the content of the image displayed on the Desktop;
    18. \n
  18. Background image mobile – picker of the background image of the content of the image displayed on the Mobile;
    19. \n
  19. Background image border width – the setting allows you to set the size of the border on background image;
    20. \n
  20. Background image border indent – the setting allows you to set the indent of the border on background image;
    21. \n
  21. Background image border color – border color picker on background image;
    22. \n
  22. Background overlay – overlay color picker;
    23. \n
  23. Enable lazy load – enable/disable the lazy load function.
    24. \n
\n

Video

\n

\"banner-2columns-vid\"

\n
    \n
  1. HTML5 Desktop Video – a field to add an HTML5 Video displayed on the Desktop;
    2. \n
  2. HTML5 Mobile Video – a field to add an HTML5 Video displayed on Mobile;
    3. \n
  3. Youtube/Vimeo Desktop Video Url – a field for adding a link to Youtube or Vimeo video displayed on the Desktop;
    4. \n
  4. Youtube/Vimeo Mobile Video Url – field to add a link to Youtube or Vimeo video displayed on Mobile.
    5. \n
\n

Alignment

\n

\"Banner

\n
    \n
  1. Content alignment – content position selector within the block. Text can have 4 positions:\n\n
    2. \n
  2. Content alignment mobile – content position selector within the block on mobile. Text can have 4 positions:\n\n
    3. \n
\n

Block Countdown timer

\n

General

\n

\"Block

\n

\"banner-timer-img\"
\nVideo guide: How to set up Countdown Timer.

\n
    \n
  1. Desktop banner min height – the setting allows you to specify a minimum height for the banner on the desktop;
    2. \n
  2. Mobile banner min height – the setting allows you to specify a minimum height for the banner on the mobile;
    3. \n
  3. Media type – selector for selecting the type of media content to be displayed. Available types are:\n\n
    4. \n
  4. Label – field for Label;
    5. \n
  5. Heading – field for Heading;
    6. \n
  6. Text – field for Text;
    7. \n
  7. Button label – a field for the label content of the button;
    8. \n
  8. Button link – the URL field for the button;
    9. \n
  9. 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;
    10. \n
  10. Make link clickable on the entire media – enable the full media to be clickable;
    11. \n
  11. Overlay opacity – adjustment of the degree of transparency of the overlay;
    12. \n
  12. Image desktop – picker picture displayed on Desktop;
    13. \n
  13. Image mobile – picker picture displayed on Mobile;
    14. \n
  14. Enable lazy load – enable/disable the lazy load function.
    15. \n
\n

Timer

\n

\"Banner

\n
    \n
  1. Year – years until the end of the countdown;
    2. \n
  2. Month – months until the end of the countdown;
    3. \n
  3. Day – days until the end of the countdown;
    4. \n
  4. Hour – hours until the end of the countdown;
    5. \n
  5. Timezone – Timezone;
    6. \n
  6. Timer cell background color – setting the background color for the time cell;
    7. \n
  7. Timer cell color – setting the text color for the cells of the countdown.
    8. \n
\n

Video

\n

\"banner-timer-vid\"

\n
    \n
  1. HTML5 Desktop Video Url – a field to add an HTML5 Video displayed on the Desktop;
    2. \n
  2. HTML5 Mobile Video Url – a field to add an HTML5 Video displayed on Mobile;
    3. \n
  3. Youtube/Vimeo Desktop Video Url – a field for adding a link to Youtube or Vimeo video displayed on the Desktop;
    4. \n
  4. Youtube/Vimeo Mobile Video Url – field to add a link to Youtube or Vimeo video displayed on Mobile.
    5. \n
\n

Alignment

\n

\"Banner

\n
    \n
  1. Content alignment – content position selector within the block. Text can have 4 positions:\n\n
    2. \n
  2. Content alignment mobile – content position selector within the block on mobile. Text can have 4 positions:\n\n
    3. \n
  3. Block alignment – block position selector. A block can have 3 positions.\n\n
    4. \n
\n

Trick (Unique Collection Banner)

\n

Create collection metafields

\n
    \n
  1. Go to Settings → Custom Data
    2. \n
  2. \"Banner\"BannerGo to ‘Collections’\"Banner
    3. \n
  3. You can add a new custom field with ‘Add definition’\"Banner
    4. \n
  4. Add these custom fields if you need them to be unique for each collection
    5. \n
\n\n\n\n\n\n

Fill collection metafields

\n
    \n
  1. Go to products → collections
    \n    \"Banner
    2. \n
  2. Select Collection\"Banner
    3. \n
  3. Fill metafields\"Banner
    4. \n
\n

Use metafields in the customizer

\n
    \n
  1. Go to Customize → Collection → Default collection\"Banner
    2. \n
  2. Add the ‘Banner’ section\"Banner
    3. \n
  3. Click on ‘Insert dynamic source’ near the field you want to be unique for each collection\"Banner
    4. \n
  4. Select the correct metafield for each field\"Banner\"Banner
    5. \n
\n

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.

\n

For Developers

\n

Used snippets

\n
    \n
  1. banner-image.liquid – this snippet renders the banner image.\"Snippet:\n
      \n
    1. image_desktop – the image to be rendered on the Desktop;
      2. \n
    2. image_mobile – an image that will be rendered on Mobile;
      3. \n
    3. enable_lazy_load – the condition under which Lazy load will be enabled for images;
      4. \n
    4. 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.
      5. \n
    \n
    2. \n
\n

JS Event

\n
    \n
  1. When the section is initiated, the event – banner:loaded is dropped.
    2. \n
\n

Additional Information

\n
    \n
  1. In the section presets, the Full width block type is selected with the Media type setting – Youtube / Vimeo and text content from the design;
    2. \n
  2. When choosing a media type, you must fill in the appropriate setting, for example, if you have selected the Image type, then below you will find the setting for uploading images;
    3. \n
  3. To add an HTML5 video, you must first add it to 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;
    4. \n
  4. If you select one type of media in the Full width selector, but fill in another, then as a result, the section will simply have a color background with text content;
    5. \n
  5. In cases where there are settings for different devices (Desktop and Mobile), you can fill in only one of the fields. The filled field will replace the empty one. For example, you can only fill in Desktop, which will be displayed in the same way for Mobile and vice versa;
    6. \n
  6. The video starts in a looped mode when the user has scrolled into it;
    7. \n
  7. When enabling Lazy load, make sure the section is not in scope on load. If Lazy load is enabled when the section is visible on load, this can slow down page loading by delaying loading content when it should be loaded immediately;
    8. \n
  8. If you set an incorrect date for the timer, the timer will not start and zero values will be displayed;
    9. \n
  9. When the timer expires, zero values will be shown.
    10. \n
\n","blockTitle":"Banner","fieldGroupName":"manual_category_blocks","hash":"section-banner"},{"blockContent":"

\"Banner

\n

For Customers

\n

Adding a section

\n

\"Banner

\n

Video guide: How to set up the Banner with Text.

\n

In order to add a section, you need to go to Customizer → Add Section → Banner with text.

\n

Section settings

\n

General

\n

\"Banner

\n
    \n
  1. Label – setting allows you to set the text for the label;
    2. \n
  2. Heading – setting allows you to set the text for the title;
    3. \n
  3. Text – setting allows you to set text content;
    4. \n
  4. Image desktop – setting allows you to select an image for the Desktop;
    5. \n
  5. Mobile desktop – setting allows you to select an image for Mobile;
    6. \n
  6. Image border width – the setting allows you to set the size of the border on image;
    7. \n
  7. Image border indent – the setting allows you to set the indent of the border on image;
    8. \n
  8. Enable lazy load – the setting enables lazy load for the image;
    9. \n
  9. Overlay opacity – setting allows you to select the % transparency of the overlay;
    10. \n
  10. Overlay color – setting allows you to select the color of the overlay.
    11. \n
\n

Colors

\n

\"Banner

\n
    \n
  1. Background – setting allows you to select a background for the section;
    2. \n
  2. Text – setting allows you to select a color for the text.
    3. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n","blockTitle":"Banner with text","fieldGroupName":"manual_category_blocks","hash":"section-banner-with-text"},{"blockContent":"

\"Image

\n

For Customers

\n

Adding a section

\n

\"Image

\n

Video guide: How to set up the Image with text section.

\n

In order to add a section, you need to go to Customizer → Add Section → Image with text.

\n

Section settings

\n

\"Image\"Image

\n
    \n
  1. Image position – setting allows you to select the position for the image;\"Image
    2. \n
  2. Text alignment – setting allows you to select text alignment;\"Image
    3. \n
  3. First image desktop – setting allows you to select the first image for the desktop;
    4. \n
  4. First image mobile – setting allows you to select the first image for mobile;
    5. \n
  5. 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;\"Image
    6. \n
  6. Second image mobile – setting allows you to select a second image for mobile;
    7. \n
  7. Heading – setting allows you to set the text for the title;
    8. \n
  8. Subheading – setting allows you to set the text for the subtitle;
    9. \n
  9. Text – setting allows you to set text content;
    10. \n
  10. Button label – setting allows you to set the label for the button;
    11. \n
  11. 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;
    12. \n
  12. Button link – setting allows you to set a link for the button;
    13. \n
  13. Button style – setting allows you to set the style of the button;
    14. \n
  14. Show border-top – the setting is responsible for displaying the border on top. Works only for the Desktop;
    15. \n
  15. Show border-bottom – the setting is responsible for displaying the border at the bottom. Works only for the Desktop;
    16. \n
  16. Border color – the setting is responsible for border color.
    17. \n
\n

Layout

\n

\"Image

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n","blockTitle":"Image with text","fieldGroupName":"manual_category_blocks","hash":"section-image-with-text"},{"blockContent":"

\"Gallery

\n

For customers

\n

Adding a section

\n

\"Gallery

\n

Video guide: How to set up the Gallery Carousel section.

\n

In order to add a section, you need to go to Customizer → Add Section → Gallery Carousel.

\n

Section settings

\n

General

\n

\"Gallery

\n
    \n
  1. Heading – heading of the section.
    2. \n
\n

Slideshow settings

\n

\"gallery\"

\n
    \n
  1. Show arrows – setting allows you to control the display of arrows for the slider;
    2. \n
  2. Autoplay – the setting is responsible for setting the automatic switching of slides;
    3. \n
  3. Autoplay speed – the setting is responsible for the speed of automatic switching of slides.
    4. \n
\n

Layout

\n

\"Gallery

\n
    \n
  1. Make full width – If disabled, container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Block settings

\n

\"Gallery

\n
    \n
  1. Image – setting allows you to set the image;
    2. \n
  2. Link – setting allows you to set a link for the image.
    3. \n
\n

Additional Information

\n
    \n
  1. The hover effect only applies to images that have links.
    2. \n
\n","blockTitle":"Gallery carousel","fieldGroupName":"manual_category_blocks","hash":"section-gallery-carousel"},{"blockContent":"

\"Store

\n

For Customers

\n

Adding a section

\n

\"Store

\n

Video guide: How to set up the Store Location.

\n

In order to add a section, you need to go to Customizer → Add Section → Store location.

\n

Section settings

\n

\"Store

\n

\"Store

\n
    \n
  1. Reverse content – change media content position on desktop;
    2. \n
  2. Heading – heading of the section;
    3. \n
  3. Subheading – subheading of the section;
    4. \n
  4. Address heading – heading of address;
    5. \n
  5. Address text – text of address;
    6. \n
  6. Schedule heading – heading of schedule;
    7. \n
  7. Schedule text – text of schedule;
    8. \n
  8. Phone heading – heading of the phone;
    9. \n
  9. Phone text – text of the phone;
    10. \n
  10. First button label – first button text;
    11. \n
  11. First button link – first button link;
    12. \n
  12. First button style – first button style. You can select the “Primary” or “Secondary” style;
    13. \n
  13. Second button label – second button text;
    14. \n
  14. Second button link – second button link;
    15. \n
  15. Second button style – second button style. You can select the “Primary” or “Secondary” style;
    16. \n
  16. Image – an image of the section;
    17. \n
  17. Google maps API key – setting allows you to add a Google maps API key. Learn more about how to create an API key;
    18. \n
  18. 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;
    19. \n
\n

Layout

\n

\"Store

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n","blockTitle":"Store location","fieldGroupName":"manual_category_blocks","hash":"section-store-location"},{"blockContent":"

\"Grid

\n

For Customers

\n

Adding a section

\n

\"Grid

\n

Video guide: How to set up the Grid Images section.

\n

In order to add a section, you need to go to Customizer → Add Section → Grid images.

\n

Section settings

\n

General

\n

\"Grid

\n
    \n
  1. Big image position – the setting is responsible for positioning the larger image.\"Grid
    2. \n
\n

Layout

\n

\"Grid

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Blocks settings

\n

Grid image

\n

\"Grid

\n
    \n
  1. Label – setting allows you to set the text for the label;
    2. \n
  2. Heading – setting allows you to set the text for the title;
    3. \n
  3. Image desktop – setting allows you to set the image for the desktop;
    4. \n
  4. Image mobile – setting allows you to set the image for mobile;
    5. \n
  5. Link – setting allows you to set a link for the image;
    6. \n
  6. Overlay color – setting allows you to set the color for the overlay;
    7. \n
  7. Text color – setting allows you to set the color for the text;
    8. \n
  8. Overlay opacity – settings allow you to set the overlay opacity.
    9. \n
\n

Additional Information

\n
    \n
  1. A section can have a maximum of 2 blocks.
    2. \n
  2. If a section uses one block, then the block image is automatically stretched to the full width of the screen.
    3. \n
\n","blockTitle":"Grid images","fieldGroupName":"manual_category_blocks","hash":"section-grid-images"},{"blockContent":"

\"Images

\n

For Customers

\n

Adding a Section

\n

\"Images

\n

Video guide: How to set up the Images Row.

\n

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

\n

Section settings

\n

Images row

\n

\"Images

\n
    \n
  1. Enable lazy load – enables lazy loading of images.
    2. \n
\n

Layout

\n

\"Images

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Blocks settings

\n

Blocks limit – 2

\n

Block Row image

\n

\"Images

\n
    \n
  1. Image – image picker.
    2. \n
\n","blockTitle":"Images row","fieldGroupName":"manual_category_blocks","hash":"section-images-row"},{"blockContent":"

\"Image

\n

For customers

\n

Adding a section

\n

\"Image

\n

Video guide: How to set up the Image Gallery.

\n

In order to add a section, you need to go to Customizer → Add Section → Image gallery.

\n

Section settings

\n

General

\n

\"Image

\n
    \n
  1. Overlay opacity – setting changes overlay transparency on hover;
    2. \n
  2. Overlay color – setting changes overlay color on hover.
    3. \n
\n

Layout

\n

\"Image

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Blocks settings

\n

\"Image

\n
    \n
  1. Image – setting allows you to select an image for the block;
    2. \n
  2. 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;
    3. \n
  3. Icon hover – setting allows you to specify the icon that will be displayed on hover when the block has a link;
    4. \n
  4. Link – setting allows you to specify a link for the block;
    5. \n
  5. Open link in new tab – if enabled, the link will open in a new tab.
    6. \n
\n

Additional information

\n
    \n
  1. A section can have a maximum of 6 blocks;
    2. \n
  2. If no link is set in the block settings, the block will have no hover effect.
    3. \n
\n","blockTitle":"Image gallery","fieldGroupName":"manual_category_blocks","hash":"section-image-gallery"},{"blockContent":"

\"Image

\n

For customers

\n

Adding a section

\n

\"Image

\n

Video guide: How to set up the Image Compare section.

\n

In order to add a section, you need to go to Customizer → Add Section → Image compare.

\n

Section settings

\n

General

\n

\"Image

\n
    \n
  1. Heading – section heading;
    2. \n
  2. Text – section richtext;
    3. \n
  3. First image – the image that will be displayed as a “before image”;
    4. \n
  4. 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;
    5. \n
  5. 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;
    6. \n
  6. Mobile image height – mobile image height. Select has the same options as the desktop.
    7. \n
\n

Layout

\n

\"Image

\n
    \n
  1. Make full width – If disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Colors

\n

\"Image

\n
    \n
  1. Drag cursor background – the color of the separating line and the icon background;
    2. \n
  2. Drag cursor color – icon color.
    3. \n
\n

For Developers

\n

The image-comparison-slider library was used for the section.

\n","blockTitle":"Image compare","fieldGroupName":"manual_category_blocks","hash":"section-image-compare"},{"blockContent":"

\"Pricing

\n

For customers

\n

Adding a section

\n

\n

Video guide: How to set up the Pricing Table section.

\n

In order to add a section, you need to go to Customizer → Add Section → Pricing table.

\n

Section settings

\n

General

\n

\"Pricing

\n
    \n
  1. Heading – setting allows you to set the text for the title;
    2. \n
  2. List icon – setting allows you to set the icon for the list items.
    3. \n
\n

Colors

\n

\"Pricing

\n
    \n
  1. Card background – setting allows you to set the background color of the card;
    2. \n
  2. Card border – setting allows you to set the color of the card border;
    3. \n
  3. Text – setting allows you to set the color for the text of the content;
    4. \n
  4. Button label – setting allows you to set the color for the button label;
    5. \n
  5. Button background – setting allows you to set the background color for the button;
    6. \n
  6. Button border – setting allows you to set the border color for the button;
    7. \n
  7. Button label (hover) – setting allows you to set the color for the button label on hover;
    8. \n
  8. Button background (hover) – setting allows you to set the background color for the button on hover;
    9. \n
  9. Button border (hover) – setting allows you to set the border color for the button.
    10. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Block settings

\n

\"Pricing

\n
    \n
  1. Product – setting allows you to set the product for the card;
    2. \n
  2. Label – setting allows you to set the label for the card;
    3. \n
  3. Heading – setting allows you to set the heading for the card (default: title of the product);
    4. \n
  4. Text – setting allows you to set the text for the card;
    5. \n
  5. Image – setting allows you to set the image for the card (default: featured image of the product);
    6. \n
  6. Button label – setting allows you to set the button label for the card;
    7. \n
  7. Label background – setting allows you to set the color for the label background;
    8. \n
  8. Label color – setting allows you to set the color for label text.
    9. \n
\n","blockTitle":"Pricing table","fieldGroupName":"manual_category_blocks","hash":"section-pricing-table"},{"blockContent":"

\n

For customers

\n

Adding a section

\n

\"Swipe

\n

Video guide: How to set up the Swipe section.

\n

In order to add a section, you need to go to Customizer → Add Section → Swipe.

\n

Section settings

\n

General

\n

\"Swipe

\n
    \n
  1. 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;
    2. \n
  2. 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.
    3. \n
\n

Colors

\n

\"Swipe

\n
    \n
  1. Background – the setting is responsible for background color;
    2. \n
  2. Heading – the setting is responsible for heading color;
    3. \n
  3. Text – the setting is responsible for text color (refers to the “Content” block).
    4. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

\"Swipe

\n
    \n
  1. Image – the setting is responsible for the heading of the block. Image aspect ratio: 1:1;
    2. \n
  2. 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;
    3. \n
  3. 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.
    4. \n
\n

Additional information

\n
    \n
  1. The “Heading” field must be filled for the section to be displayed;
    2. \n
  2. The number of “Content” blocks should be more than one for the section to be displayed;
    3. \n
  3. The maximum number of “Content” blocks is 6;
    4. \n
  4. Need to fill in the “Heading” or “Text” setting for the “Content” block to be displayed;
    5. \n
  5. The text displayed in the section is truncated to a few lines. Make sure that the text displays correctly on all screen resolutions.
    6. \n
\n","blockTitle":"Swipe","fieldGroupName":"manual_category_blocks","hash":"section-swipe"},{"blockContent":"

\"Our

\n

For Customers

\n

Adding a section

\n

\"Our

\n

Video guide: How to set up the Our Team section.

\n

In order to add a section, you need to go to Customizer → Add Section → Our team.

\n

Section settings

\n

General

\n

\"Our

\n
    \n
  1. Heading – setting allows you to set the text for the title;
    2. \n
  2. Cards alignment – the setting allows you to select the type of card alignment;\"Our
    3. \n
  3. Show borders – the setting is responsible for showing/hiding borders for cards;
    4. \n
  4. Border color – setting sets the border color of the cards.
    5. \n
\n

Layout

\n

\"Our

\n
    \n
  1. Make full width – if unchecked – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Blocks settings

\n

\"Our

\n
    \n
  1. Image – setting allows you to set an image for the card;
    2. \n
  2. Name – setting allows you to specify text for the name field;
    3. \n
  3. Role – setting allows you to specify text for the role field.
    4. \n
\n","blockTitle":"Our Team","fieldGroupName":"manual_category_blocks","hash":"section-our-team"},{"blockContent":"

\"Video

\n

For Customers

\n

Adding a section

\n

\"Video

\n

Video guide: How to add video.

\n

In order to add a section, you need to go to Customizer → Add Section → Video.

\n

Section settings

\n

General

\n

\"Video

\n
    \n
  1. Heading – setting allows you to set the text for the title;
    2. \n
  2. Text – setting allows you to set text content;
    3. \n
  3. Layout – setting allows you to select the layout of the section (Full Width, Container);\"Video
    4. \n
  4. Aspect ratio – the setting allows you to select the aspect ratio for the video (16/9, 4/3);\"Video
    5. \n
  5. Image – setting allows you to select an image for the placeholder.
    6. \n
\n

Video

\n

\"video\"

\n
    \n
  1. Video type – the setting allows you to select the type of video (HTML5, Youtube/Vimeo);
    2. \n
  2. HTML5 desktop video url – the setting allows you to specify a link to a desktop video for the HTML5 type;
    3. \n
  3. HTML5 mobile video url – the setting allows you to specify a link to a mobile video for the HTML5 type;
    4. \n
  4. Youtube/Vimeo desktop video url – the setting allows you to specify a link to a desktop video for the Youtube/Vimeo type;
    5. \n
  5. Youtube/Vimeo mobile video url – the setting allows you to specify a link to a mobile video for the Youtube/Vimeo type.
    6. \n
\n

Layout

\n

\"Video

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n","blockTitle":"Video","fieldGroupName":"manual_category_blocks","hash":"section-video"},{"blockContent":"

\"Blog

\n

For Customers

\n

Adding a section

\n

\"Blog

\n

Video guide: How to set up the Blog Posts section.

\n

In order to add a section, you need to go to Customizer → Add Section → Blog posts.

\n

Section settings

\n

General

\n

\"Blog

\n
    \n
  1. Blog – the setting allows you to select a block, the last 3 articles of which will be displayed;
    2. \n
  2. Label – setting allows you to set the text for the label;
    3. \n
  3. Heading – setting allows you to set the text for the heading;
    4. \n
  4. Link label – setting allows you to set the label for the link;
    5. \n
  5. 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;
    6. \n
  6. Button style – setting allows you to select the style of the button.
    7. \n
\n

Layout

\n

\"Blog

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. article-card.liquid – the snippet displays the article card.\"Snippet:\n
      \n
    1. article – article object.
      2. \n
    2. layout – variable to set the size of the image.
      3. \n
    \n
    2. \n
\n","blockTitle":"Blog posts","fieldGroupName":"manual_category_blocks","hash":"section-blog-posts"},{"blockContent":"

\"Newsletter

\n

For Customers

\n

Adding a section

\n

\"Newsletter

\n

Video guide: How to set up the Newsletter section.

\n

In order to add a section, you need to go to Customizer → Add Section → Newsletter.

\n

Section settings

\n

General

\n

\"Newsletter \"newsletter\"

\n
    \n
  1. Layout – setting allows you to set the section template;\"Newsletter
    2. \n
  2. Heading – setting allows you to set the text for the title;
    3. \n
  3. Subheading – setting allows you to set the text for the subtitle;
    4. \n
  4. Success message – setting allows you to set the text of successful sending;
    5. \n
  5. Text – setting allows you to set text content;
    6. \n
  6. Image desktop – setting allows you to set the image for the desktop;
    7. \n
  7. Image mobile – setting allows you to set the image for mobile;
    8. \n
  8. Image position – setting allows you to set the positioning of the image;\"Newsletter
    9. \n
\n

Form\"Newsletter

\n
    \n
  1. Email placeholder – the setting allows you to set the text for the placeholder;
    2. \n
  2. 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.
    3. \n
\n

Colors

\n

\"Newsletter

\n
    \n
  1. Section background – setting allows you to set the background color of the section;
    2. \n
  2. Heading, text – setting allows you to set the color for the title text;
    3. \n
  3. Subheading – setting allows you to set the color for the text;
    4. \n
  4. Input – setting allows you to set the text color for input;
    5. \n
  5. Input border color – setting allows you to set the border color for the input.
    6. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Additional information

\n
    \n
  1. For a section, it is possible to add application blocks.
    2. \n
\n","blockTitle":"Newsletter","fieldGroupName":"manual_category_blocks","hash":"section-newsletter"},{"blockContent":"

\"Benefits

\n

For customers

\n

Adding a section

\n

\"Benefits

\n

Video guide: How to set up the Benefits section.

\n

In order to add a section, you need to go to Customizer → Add Section → Benefits.

\n

Section settings

\n

\"Benefits

\n
    \n
  1. Section background – section background color setting;
    2. \n
  2. Heading – heading color setting;
    3. \n
  3. Text – text color setting;
    4. \n
  4. Border – setting the border color between blocks.
    5. \n
\n

Layout

\n

\"Benefits

\n
    \n
  1. Make full width – if disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Show borders – the setting is responsible for showing/hiding the borders for the section;
    3. \n
  3. Desktop offset top – the top indent of the section on the desktop;
    4. \n
  4. Desktop offset bottom – the bottom indent of the section on the desktop;
    5. \n
  5. Mobile offset top – the top indent of the section on the mobile;
    6. \n
  6. Mobile offset bottom – the bottom indent of the section on the mobile.
    7. \n
\n

Blocks settings

\n

\"Benefits

\n

Block limit – 3

\n
    \n
  1. Heading – text field for Heading;
    2. \n
  2. Text – text field for Text;
    3. \n
  3. Image – image picker;
    4. \n
  4. Link – link field;
    5. \n
  5. 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.
    6. \n
\n","blockTitle":"Benefits","fieldGroupName":"manual_category_blocks","hash":"section-benefits"},{"blockContent":"

\"Events

\n

\"Events

\n

For customers

\n

Adding a section

\n

\"Events

\n

Video guide: How to set up the Events Calendar.

\n

In order to add a section, you need to go to Customizer → Add Section → Events calendar.

\n

Section settings

\n

\"Events

\n
    \n
  1. Heading – title of the section;
    2. \n
  2. Link label – text of the “View all” link that appears at the right side of the title;
    3. \n
  3. Link url – a url for the link;
    4. \n
  4. Load more button label – text for the load more button. Leave empty – to show all events;
    5. \n
  5. Counts of events to show – select how many events will be shown on the page load;
    6. \n
  6. Show border bottom – enable if you want to show a border for each block;
    7. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

\"\"

\n
    \n
  1. Image – image of the event;
    2. \n
  2. Heading – title of event;
    3. \n
  3. Text– text of the event;
    4. \n
  4. Link label – link text;
    5. \n
  5. Link url – link url;
    6. \n
  6. Link location label – location link text;
    7. \n
  7. Link location url– location link url;
    8. \n
  8. Start date– start day of the event;
    9. \n
  9. Start month – start month of the event;
    10. \n
  10. Start time – start time of the event;
    11. \n
\n

Additional information

\n

With this section you can add a list of events for the your store or bussines.

\n

To each event you can add an image, title, description, event start date and start time, and two links.

\n

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.

\n","blockTitle":"Events calendar","fieldGroupName":"manual_category_blocks","hash":"section-events-calendar"},{"blockContent":"

\"Ticker

\n

For Customers

\n

Adding a section

\n

\"Ticker

\n

Video guide: How to set up the Ticker section.

\n

In order to add a section, you need to go to Customizer → Add Section → Ticker.

\n

Section settings

\n

General

\n

\"Ticker

\n
    \n
  1. Text – setting allows you to fill in the text content for the section. Use Enter to split the text into sentences;
    2. \n
  2. Movement speed (desktop) – setting allows you to set the speed of the ticker for the Desktop;
    3. \n
  3. Movement speed (mobile) – setting allows you to set the speed of the ticker for Mobile.
    4. \n
\n

Colors

\n

\"Ticker

\n
    \n
  1. Background – setting allows you to set the background color of the section;
    2. \n
  2. Text – setting allows you to set the color of the text.
    3. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

For Developers

\n

\"Ticker

\n
    \n
  1. The 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.
    2. \n
\n","blockTitle":"Ticker","fieldGroupName":"manual_category_blocks","hash":"section-ticker"},{"blockContent":"

\"Reviews

\n

For customers

\n

Adding a section

\n

\"Reviews

\n

Video guide: How to add Reviews.

\n

In order to add a section, you need to go to Customizer → Add Section → Reviews.

\n

Section settings

\n

General

\n

\"Reviews

\n
    \n
  1. Heading – heading of the section;
    2. \n
  2. Autoplay – the setting is responsible for setting the automatic switching of slides;
    3. \n
  3. Autoplay speed – the setting is responsible for the speed of automatic switching of slides.
    4. \n
\n

Layout

\n

\"Reviews

\n
    \n
  1. 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;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Colors

\n

\"Reviews

\n
    \n
  1. Product info text color – setting allows you to specify text color for product info;
    2. \n
  2. Product info background color – setting allows you to specify background color for product info.
    3. \n
\n

Block settings

\n

\"Reviews

\n
    \n
  1. Text – setting allows you to set the review text;
    2. \n
  2. Author name – setting allows you to set the name of the author of the review;
    3. \n
  3. Author additional info – setting allows you to set additional information about the author of the review;
    4. \n
  4. Product – setting allows you to select a product that will be displayed next to the text review;
    5. \n
  5. Author image – setting allows you to set a photo of the author of the review;
    6. \n
  6. Custom product image – setting allows you to select an image that will replace the product image.
    7. \n
\n","blockTitle":"Reviews","fieldGroupName":"manual_category_blocks","hash":"section-reviews"},{"blockContent":"

\"Rich

\n

For Customers

\n

Adding a section

\n

\"Rich

\n

Video guide: How to set up the Rich Text section.

\n

In order to add a section, you need to go to Customizer → Add Section → Rich text.

\n

Section settings

\n

General

\n

\"Rich

\n

\"alignment\"

\n
    \n
  1. Heading – setting allows you to set the text for the title;
    2. \n
  2. Subheading – setting allows you to set the text for the subtitle;
    3. \n
  3. Text – setting allows you to set text content;
    4. \n
  4. Text alignment – alignment of the text in the section. Can be “Left”, “Center”, “Right”;
    5. \n
  5. Section alignment -alignment of the section. Can be “Left”, “Center”, “Right”;
    6. \n
  6. 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;
    7. \n
  7. Read more button label – a button text to show more content;
    8. \n
  8. Show less button label – a button text to show less when the full content is visible.
    9. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Make full width – make a section full width;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n","blockTitle":"Rich text","fieldGroupName":"manual_category_blocks","hash":"section-rich-text"},{"blockContent":"

\"Simple

\n

For Customers

\n

Adding a Section

\n

\"Simple

\n

Video guide: How to set up the Simple Description section.

\n

In order to add a section, you need to go to Customizer → Add Section → Simple description.

\n

Section settings

\n

\"Simple

\n
    \n
  1. Heading – section title. Can be passed from product metafields;
    2. \n
  2. Text – section content. Can be passed from product metafields;
    3. \n
  3. Content alignment – text alignment;
    4. \n
  4. Block alignment – section alignment;
    5. \n
  5. Desktop offset top – the top indent of the section on the desktop;
    6. \n
  6. Desktop offset bottom – the bottom indent of the section on the desktop;
    7. \n
  7. Mobile offset top – the top indent of the section on the mobile;
    8. \n
  8. Mobile offset bottom – the bottom indent of the section on the mobile.
    9. \n
\n","blockTitle":"Simple description","fieldGroupName":"manual_category_blocks","hash":"section-simple-description"},{"blockContent":"

\"FAQ

\n

For Customers

\n

Adding a Section

\n

\"FAQ

\n

Video guide: How to set up the FAQs Page.

\n

In order to add a section, you need to go to Customizer → Add Section → FAQ.

\n

Section settings

\n

General

\n

\"FAQ

\n
    \n
  1. Heading – setting allows you to set the text for the title.
    2. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Blocks settings

\n

Block Question and answer

\n

The block is responsible for displaying the question-answer pair. When rendering, it is displayed as an accordion.

\n

\"FAQ

\n
    \n
  1. Heading – accordion title, question;
    2. \n
  2. Text – response, accordion content;
    3. \n
  3. Icon – icon in the accordion header.
    4. \n
\n

Block Category

\n

The block is designed to group question-answer pairs by category. Rendered as a header separating a group of accordions.

\n

\"FAQ

\n
    \n
  1. Heading – title, category name.
    2. \n
\n

Additional information

\n
    \n
  1. The Question and answer block is not displayed if the settings for the Heading and Text fields are not specified;
    2. \n
  2. The Category block is not displayed if the settings for the Heading the field is not specified.
    3. \n
\n","blockTitle":"FAQ section","fieldGroupName":"manual_category_blocks","hash":"section-faq"},{"blockContent":"

\"Story

\n

For customers

\n

Adding a section

\n

\"Story

\n

Video guide: How to set up the Story Telling section.

\n

In order to add a section, you need to go to Customizer → Add Section → Story telling.

\n

Section settings

\n

\"Story

\n
    \n
  1. Overlay opacity – adjusts the transparency of the image overlay (only mobile);
    2. \n
\n

Layout

\n

\"Story

\n
    \n
  1. Make full width – If disabled – container width will be set based on the group ‘Layout’ settings in the Theme settings;
    2. \n
  2. Desktop offset top – the top indent of the section on the desktop;
    3. \n
  3. Desktop offset bottom – the bottom indent of the section on the desktop;
    4. \n
  4. Mobile offset top – the top indent of the section on the mobile;
    5. \n
  5. Mobile offset bottom – the bottom indent of the section on the mobile.
    6. \n
\n

Block settings

\n

General

\n

\"Story

\n

\"Story

\n
    \n
  1. Tab heading – setting allows you to set the text for the tab;
    2. \n
  2. Image desktop – setting allows you to select an image for the desktop;
    3. \n
  3. Image mobile – setting allows you to select an image for mobile;
    4. \n
  4. Image position – setting allows you to select the position for the image;
    5. \n
  5. Text alignment – setting allows you to select text alignment;
    6. \n
  6. Heading – setting allows you to set the text for the title
    7. \n
  7. Subheading – setting allows you to set the text for the subtitle;
    8. \n
  8. Text – setting allows you to set text content;
    9. \n
  9. Button label – setting allows you to set the label for the button;
    10. \n
  10. 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;
    11. \n
  11. Button link – setting allows you to set a link for the button.
    12. \n
\n

Colors

\n

\"Story

\n
    \n
  1. Background – setting allows you to set the background color of the content;
    2. \n
  2. Text – setting allows you to set the color for the text of the content;
    3. \n
  3. Button label – setting allows you to set the color for the button label;
    4. \n
  4. Button background – setting allows you to set the background color for the button;
    5. \n
  5. Button border – setting allows you to set the border color for the button;
    6. \n
  6. Button label (hover) – setting allows you to set the color for the button label on hover;
    7. \n
  7. Button background (hover) – setting allows you to set the background color for the button on hover;
    8. \n
  8. Button border (hover) – setting allows you to set the border color for the button.
    9. \n
\n","blockTitle":"Story telling","fieldGroupName":"manual_category_blocks","hash":"section-story-telling"},{"blockContent":"

For Customers

\n

Adding a section

\n

\"Custom

\n

In order to add a section, you need to go to Customizer → Add Section → Custom liquid.

\n

Section settings

\n

\"Custom

\n
    \n
  1. Custom liquid – setting allows you to add your liquid code.
    2. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

Additional information

\n
    \n
  1. You can learn more about liquid here – https://shopify.dev/api/liquid.
    2. \n
\n","blockTitle":"Custom liquid","fieldGroupName":"manual_category_blocks","hash":"section-custom-liquid"},{"blockContent":"

\"Login

\n

\"Login

\n

For Customers

\n

Adding a Section

\n

\"Login

\n

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

\n

Section settings

\n

General

\n

\"Login

\n
    \n
  1. Image desktop – setting allows you to select an image for the Desktop;
    2. \n
  2. Image mobile – setting allows you to select an image for Mobile.
    3. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
\n","blockTitle":"Login template","fieldGroupName":"manual_category_blocks","hash":"section-login-template"},{"blockContent":"

\"Register

\n

\"Register

\n

For Customers

\n

Adding a Section

\n

\"Register

\n

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

\n

Section settings

\n

General

\n

\"Register

\n
    \n
  1. Image desktop – setting allows you to select an image for the Desktop;
    2. \n
  2. Image mobile – setting allows you to select an image for Mobile.
    3. \n
\n

Layout

\n

\"General.

\n
    \n
  1. Desktop offset top – the top indent of the section on the desktop;
    2. \n
  2. Desktop offset bottom – the bottom indent of the section on the desktop;
    3. \n
  3. Mobile offset top – the top indent of the section on the mobile;
    4. \n
  4. Mobile offset bottom – the bottom indent of the section on the mobile.
    5. \n
\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
\n","blockTitle":"Register template","fieldGroupName":"manual_category_blocks","hash":"section-register-template"},{"blockContent":"

\"Activate

\n

For Customers

\n

Adding a Section

\n

\"Activate

\n

The section is static on an Activate account page template, it was added initially and cannot be removed.

\n

Section settings

\n

The page template has no settings. You can customize text content in translations.

\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
\n","blockTitle":"Activate template","fieldGroupName":"manual_category_blocks","hash":"section-activate-template"},{"blockContent":"

\"Reset

\n

For Customers

\n

Adding a Section

\n

\"Reset

\n

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

\n

Section settings

\n

The page template has no settings. You can customize text content in translations.

\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
\n","blockTitle":"Reset template","fieldGroupName":"manual_category_blocks","hash":"section-reset-template"},{"blockContent":"

\"Order

\n

For Customers

\n

Adding a Section

\n

\"Order

\n

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

\n

Section settings

\n

The page template has no settings. You can customize text content in translations.

\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
\n","blockTitle":"Order template","fieldGroupName":"manual_category_blocks","hash":"section-order-template"},{"blockContent":"

\"Account

\n

For Customers

\n

Adding a Section

\n

\"Account

\n

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

\n

Section settings

\n

The page template has no settings. You can customize text content in translations.

\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
\n","blockTitle":"Account template","fieldGroupName":"manual_category_blocks","hash":"section-account-template"},{"blockContent":"

\"Addresses

\n

For Customers

\n

Adding a Section

\n

\"Addresses

\n

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

\n

Section settings

\n

The page template has no settings. You can customize text content in translations.

\n

For Developers

\n

Used snippets

\n
    \n
  1. breadcrumbs.liquid – snippet outputs breadcrumbs.\"Snippet:
    2. \n
\n","blockTitle":"Addresses template","fieldGroupName":"manual_category_blocks","hash":"section-addresses-template"},{"blockContent":"

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.

\n

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:

\n
function makeRequest(action, ...params);\r\n
\n

The function takes the following parameters:

\n\n

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:

\n\n

Examples of using

\n

Add product to cart

\n
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.ADD_TO_CART, {\r\n   'id': variant_id,\r\n\t 'quantity': quantity\r\n}).then(res => {\r\n\t// Some code...\r\n})\r\n.catch(e => {\r\n\t// Errors handling\r\n});\r\n
\n

Add multiple products to the cart

\n
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.ADD_TO_CART_MANY, [\r\n\t{\r\n    'id': variant_id,\r\n\t\t'quantity': quantity\r\n\t},\r\n\t{\r\n    'id': variant_id,\r\n\t\t'quantity': quantity\r\n\t}\t\r\n]).then(res => {\r\n\t// Some code...\r\n})\r\n.catch(e => {\r\n\t// Errors handling\r\n});\r\n
\n

Remove the product from the cart

\n
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.REMOVE_CART_ITEM, \r\n\tkey // Line item key\r\n).then(res => {\r\n\t// Some code...\r\n})\r\n.catch(e => {\r\n\t// Errors handling\r\n});\r\n
\n

Empty cart

\n
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.CLEAR_CART)\r\n.then(res => {\r\n\t// Some code...\r\n})\r\n.catch(e => {\r\n\t// Errors handling\r\n});\r\n
\n

Change the quantity of a product in the cart

\n
window.themeCore.CartApi.makeRequest(themeCore.CartApi.actions.CHANGE_CART_ITEM_QUANTITY,\r\n\tkey, // Line item key\r\n\tquantity // New quantity\r\n).then(res => {\r\n\t// Some code...\r\n})\r\n.catch(e => {\r\n\t// Errors handling\r\n});\r\n
\n

JS Event

\n

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.

\n

Additional information

\n
    \n
  1. You can find out about possible parameters for the request here – https://shopify.dev/api/ajax/reference/cart
    2. \n
  2. For all requests, it is possible to specify the sections parameter. This parameter is a string with section IDs separated by commas. With this, https://shopify.dev/api/ajax/reference/cart#bundled-section-rendering can be used.
    3. \n
\n","blockTitle":"Cart API","fieldGroupName":"manual_category_blocks","hash":"cart-api"}]},{"fieldGroupName":"manual_category","manualCategoryTitle":"Troubleshooting","manualCategoryBlocks":[{"blockContent":"

If you notice that something in your theme isn’t working as expected, please follow these steps before contacting our support team:

\n
    \n
  1. \n

    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.

    \n
    2. \n
  2. \n

    Check the theme again after disabling the apps.

    \n\n
    3. \n
  3. \n

    Add a fresh, unedited version of the theme from the Shopify Theme Store and check if the same issue appears there.

    \n\n
    4. \n
\n

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.

\n

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.

\n","blockTitle":"Troubleshooting","fieldGroupName":"manual_category_blocks","hash":"troubleshooting"}]},{"fieldGroupName":"manual_category","manualCategoryTitle":"FAQ","manualCategoryBlocks":[{"blockContent":"

We have a special YouTube playlist with Video Guides on the Gain Theme. Feel free to review videos on all our pages and sections.

\n

Gain Theme Video Guides

\n

We also have a special playlist with Video Guides on the Shopify Admin Panel, do not hesitate to check this out as well.

\n

Shopify Admin Video Guides

\n","blockTitle":"Gain Theme Video Guides","fieldGroupName":"manual_category_blocks","hash":"gain-theme-video-guides"},{"blockContent":"

How to check your theme’s version.
\nThere are 2 ways to check your theme’s version.

\n

– 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.

\n
\"\"
\n

– 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.

\n

\"\"

\n","blockTitle":"How to check your theme’s version","fieldGroupName":"manual_category_blocks","hash":"how-to-check-your-themes-version"},{"blockContent":"

How to share the preview link to the unpublished theme (draft) and the store password.
\nShare a preview link:
\n– 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.

\n

\n

– How to share password for store access?
\nTo let visitors access your store, you can share the password by going to Online Store → Themes → click on See Store Password.

\n
\n\n
\n","blockTitle":"How to share the preview link and password","fieldGroupName":"manual_category_blocks","hash":"how-to-share-the-preview-link-and-password"},{"blockContent":"

Adding new sections is crucial to customize your store.

\n

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.

\n

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.

\n

 

\n

\n

If you want to customize your sections and make them unique for each product, feel free to watch this Video Guide.

\n

Youtube video guide

\n","blockTitle":"How to add a new section","fieldGroupName":"manual_category_blocks","hash":"how-to-add-a-new-section"},{"blockContent":"

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.
\n

\n

\n","blockTitle":"How to change the position of a section","fieldGroupName":"manual_category_blocks","hash":"how-to-change-the-position-of-a-section"},{"blockContent":"

\n

\n

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.

\n

\n","blockTitle":"How to hide the section from view","fieldGroupName":"manual_category_blocks","hash":"how-to-hide-the-section-from-view"},{"blockContent":"

To set up the Filters & Sort, you need to install the Search & Discovery APP, it’s a free Shopify APP.
\nIn the APP you need to go to the Filters.
\nFrom there, you can add new filters, or remove the ones you do not need.
\n

\n

\n","blockTitle":"How to set up Filters & Sort","fieldGroupName":"manual_category_blocks","hash":"how-to-set-up-filters-and-sort"},{"blockContent":"

If you want to set up a Pre-Order feature for your store, you can surely set it up with the Gain Theme.

\n

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:

\n

\"chose

\n

If you have more products intended to be sold on a pre-order basis, then repeat this step with other products as well.

\n

Once you’re done, you can go to the Theme Customizer → Products → pre-order, see here:

\n
\n
\n
\"how
\n
\n

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.

\n

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.

\n

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.

\n

When a customer purchases a product, then in the admin panel on the “Order status page” you can see an additional property “Pre-order”:

\n

\"order\"

\n
\n
\n
\n","blockTitle":"How to set up the Pre-order feature","fieldGroupName":"manual_category_blocks","hash":"how-to-set-up-the-pre-order-feature"},{"blockContent":"
If you want to remove the “Powered by Shopify” please follow these steps:
\n\"\"
\n
    \n
  1. Go to Online Store > Themes.
    2. \n
  2. Click … > Edit default theme content.
    \n\"\"
    \n
    3. \n
  3. In the search box, enter powered.
    \n\"\"
    4. \n
  4. In the Powered by Shopify box, enter a space.
    \n\"\"
    5. \n
  5. Click Save.
    6. \n
\n
As you can see after these steps there’s no “Powered by Shopify” in the footer anymore.You can also check this article from the Shopify Help Center and watch Shopify’s video.
\n
\"\"
\n","blockTitle":"How to remove the \"Powered by Shopify\"","fieldGroupName":"manual_category_blocks","hash":"how-to-remove-the-powered-by-shopify"},{"blockContent":"

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.

\n

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.

\n","blockTitle":"App integration","fieldGroupName":"manual_category_blocks","hash":"app-integration"},{"blockContent":"

Setting up Color Swatches is crucial to customize your store. Here’s an easy guide on how to properly add the swatches.

\n

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.

\n
\n

The next step is to add the files of the swatches to your Admin Panel → Content → Files.
\nThe 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.

\n","blockTitle":"How to set up Color Swatches","fieldGroupName":"manual_category_blocks","hash":"how-to-set-up-color-swatches"},{"blockContent":"

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

\n

How to set up Hover Image

\n

To add a hover image feature, you need to create proper metafields.
\nThe hover image metafield should be created for Products and for Variants.
\nWhen creating a Hover Image metafield, make sure you enter the namespace and key as product_card.hover_image
\nHow to add the Hover image metafield for a product:
\n

\n

\n

How to add the Hover image metafield for a variant:

\n

\n

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.
\nImportant: 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.

\n","blockTitle":"How to set up Hover Image","fieldGroupName":"manual_category_blocks","hash":"how-to-set-up-hover-image"},{"blockContent":"

When developing the Gain theme, we optimized its speed.
\nTo 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.

\n

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.

\n","blockTitle":"Theme Speed","fieldGroupName":"manual_category_blocks","hash":"theme-speed"},{"blockContent":"

To display the Size guide on the Product page, you need to do the following:

\n\n

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:

\n\n

You can display the Size Guide either underneath the options or on the right side of the options:
\nIf the field Size guide option name is empty or the option name does not exist the size guide button will appear under the options.

\n

Video guide: How to set up the Size guide.

\n","blockTitle":"How to set up the Size Guide","fieldGroupName":"manual_category_blocks","hash":"how-to-set-up-the-size-guide"},{"blockContent":"

Gain Theme supports B2B selling of a specific minimum quantity of items.

\n

Quantity Increment

\n

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.

\n

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.

\n

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.

\n

Minimum Order Quantity

\n

The fewest number of items of the variant that a customer can purchase at the same time.

\n

To set quantity rules, you need to set a value of 1 or greater for both Quantity Increment and Minimum Order Quantity.

\n

To learn more about the quantity rule for B2B, check out this article from Shopify.

\n","blockTitle":"B2B Quantity Rule","fieldGroupName":"manual_category_blocks","hash":"b2b-quantity-rule-faq"}]},{"fieldGroupName":"manual_category","manualCategoryTitle":"Support","manualCategoryBlocks":[{"blockContent":"

Gain Theme Support.

\n

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.

\n

We typically reply during business hours 8 am – 5 pm (Brussels, GMT +02:00), Monday-Friday (excluding holidays). 

\n

Reach out via the contact form below, or send us a direct email at support@utdweb.team.

\n

Contact us

\n

App support.

\n

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.
\nPlease note that we can only support you with the Gain Theme Code, developed by us. 

\n

All Shopify App Developers offer support assistance, feel free to reach out to them.
\n

\n

Shopify support.

\n

If you need help with the Admin Panel or Shopify platform in general, the Shopify Support team is available 24/7. 

\n

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. 

\n

Feel free to contact Shopify support here: https://help.shopify.com/questions

\n

Custom changes.

\n

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.
\nFeel 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.

\n

Paid Services

\n","blockTitle":"Contact us","fieldGroupName":"manual_category_blocks","hash":"contact-us"}]}]}],"topLinks":{"latestUpdates":{"linkText":"Latest Updates","releaseNotesArticle":null},"paidServices":{"linkText":"Paid Services","linkUrl":{"uri":"/paid-services/gain/"}}}}},"lastmod":"2026-10-21"}}, "staticQueryHashes": ["1083880928","1850027792","2115852241","2249625599","2590265254","3117944600","3394409019","3777654359","842661457"]}