{ "componentChunkName": "component---src-templates-manual-jsx", "path": "/shopify-themes/impression/manual/", "result": {"pageContext":{"manual":{"page_header":{"background":null,"backgroundOpacity":100,"color":"#0a0a0a","fieldGroupName":"page_header","title":"Impression theme manual","opacity":100,"position":"on","size":{"desktop":64,"tablet":48,"mobile":32},"spaces":{"top":null,"bottom":null,"leftright":null,"units":"em"}},"slug":"impression","title":"Impression theme","id":"cG9zdDoxOTY0Mg==","acfManual":{"postType":{"uri":"/shopify-themes/impression/"},"metaData":{"title":null,"description":null},"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

\n

\"Typography\"

\n

Settings

\n

Base and heading fonts

\n

\n

\"Typography

\n
    \n
  1. Base font – font picker for plain text throughout the store;
    2. \n
  2. Heading font – font picker for the headings throughout the store;
    3. \n
  3. Uppercase – setting allows you to set text for headings in uppercase;
    4. \n
  4. Base font size – plain text size;
    5. \n
  5. Heading font size – heading text size.
    6. \n
\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.\"Colors\"

\n

Text colors

\n

\"Text

\n
    \n
  1. \n

    Primary – primary text color;

    \n
    2. \n
  2. \n

    Secondary – secondary text color;

    \n
    3. \n
  3. \n

    Thirdly – thirdly text color;

    \n
    4. \n
  4. \n

    Headings – text color for headings;

    \n
    5. \n
  5. \n

    Accent – accent text color;

    \n
    6. \n
  6. \n

    Link – color for links in RTE content;

    \n
    7. \n
\n
\n

Background

\n

\"Background

\n
    \n
  1. \n

    Page – page background color;

    \n
    2. \n
  2. \n

    Secondary – secondary page background color;

    \n
    3. \n
  3. \n

    Popup (drawer) – popups and drawers background color;

    \n
    4. \n
\n

Border colors

\n

\"Border

\n
    \n
  1. \n

    Primary – color for primary borders;

    \n
    2. \n
  2. \n

    Secondary – color for secondary borders;

    \n
    3. \n
  3. \n

    Thirdly – color for third borders;

    \n
    4. \n
\n

Support colors

\n

\"Support

\n
    \n
  1. \n

    Attention – auxiliary color: attention, error, etc.;

    \n
    2. \n
  2. \n

    Success – auxiliary color – success;

    \n
    3. \n
  3. \n

    Sale price badge background – background color of a sale badge;

    \n
    4. \n
  4. \n

    Sale price color – color of the on-sale price;

    \n
    5. \n
  5. \n

    Paid badge background – background color of the badge Paid;

    \n
    6. \n
  6. \n

    Paid badge circle background – background color of the Paid badge circle;

    \n
    7. \n
  7. \n

    Unfulfilled badge background – background color of the Unfulfilled badge;

    \n
    8. \n
  8. \n

    Unfulfilled badge circle background – background color of the Unfulfilled badge circle;

    \n
    9. \n
\n

Social buttons

\n

\"Social

\n
    \n
  1. \n

    Icon – social media button icon color;

    \n
    2. \n
  2. \n

    Icon (hover) – social media button icon color on hover;

    \n
    3. \n
\n

Slider arrows

\n

\"Slider

\n
    \n
  1. \n

    Label – color of the slider label;

    \n
    2. \n
  2. \n

    Label (hover) – color of the slider label on hover;

    \n
    3. \n
\n

Slider pagination

\n

\"Slider

\n
    \n
  1. \n

    Bullet – color of the pagination bullet;

    \n
    2. \n
  2. \n

    Bullet (active) – color of the pagination bullet on hover;

    \n
    3. \n
\n

Overlay

\n

\"Overlay

\n
    \n
  1. \n

    Background – overlay background color;

    \n
    2. \n
\n

Preloader

\n

\"Preloader

\n
    \n
  1. \n

    Circle – color of the loader circle;

    \n
    2. \n
  2. \n

    Item – the color of the animated loader element;

    \n
    3. \n
  3. \n

    Overlay – overlay color when adding loader;

    \n
    4. \n
\n

Scrollbar

\n

\"Scrollbar

\n
    \n
  1. \n

    Thumb – scrollbar thumb color;

    \n
    2. \n
  2. \n

    Track – scrollbar track color;

    \n
    3. \n
  3. \n

    Thumb opacity – transparency of the scrollbar thumb as a percentage of black;

    \n
    4. \n
  4. \n

    Track opacity – transparency of the scrollbar track as a percentage of black;

    \n
    5. \n
\n

Overlay exit cursor

\n

\"Overlay

\n
    \n
  1. \n

    Close icon – color of the close icon in the overlay exit cursor;

    \n
    2. \n
  2. \n

    Background – background color of the overlay exit cursor;

    \n
    3. \n
\n
\n

\n","blockTitle":"Colors","fieldGroupName":"manual_category_blocks","hash":"general-colors"},{"blockContent":"

This settings block is intended for general Decor image settings on the site.

\n

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

\n

\"Decor

\n

Settings

\n

\n

\"Decor

\n
    \n
  1. \n

    Image – this setting is responsible for adding a decor image;

    \n
    2. \n
\n

\n","blockTitle":"Decor image","fieldGroupName":"manual_category_blocks","hash":"general-decor-image"},{"blockContent":"

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

\n

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

\n

\"Buttons\"

\n

Settings

\n

\n

Button font settings

\n

\"Button

\n
    \n
  1. Font – font family for all buttons, default: Inter;
    2. \n
  2. Font size – font size for all buttons, default: 16px;
    3. \n
  3. Uppercase – button text transform to uppercase.
    4. \n
\n

\n

Button primary

\n

\n

\"Button

\n
    \n
  1. Text – main button text color;
    2. \n
  2. Background – main button background color;
    3. \n
  3. Border – 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
\n

Button secondary

\n

\n

\"Button

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

Button thirdly

\n

\"Button

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

\n

\n

\n

\n

\n

\n

\n","blockTitle":"Buttons","fieldGroupName":"manual_category_blocks","hash":"general-buttons"},{"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

\n

Settings

\n

\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

\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

\n

\"layout\"

\n

Settings

\n

\n

\"Layout

\n
    \n
  1. Container width – by default, most sections use this setting to determine their width.
    2. \n
\n

\n","blockTitle":"Layout","fieldGroupName":"manual_category_blocks","hash":"general-layout"},{"blockContent":"

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

Settings

\n

General

\n

\"Cart\"

\n
    \n
  1. Cart type – the setting is responsible for the type of cart. It has two values: drawer, page;
    2. \n
  2. Show product vendor – the setting is responsible for showing/hiding the product vendor;
    3. \n
  3. Show discounts – the setting is responsible for showing/hiding cart discount form;
    \n\"Cart
    4. \n
  4. Show cart notes – the setting is responsible for showing/hiding cart notes;
    \n\"Cart
    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 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
    8. \n
  8. Checkout button label – label for the Checkout button;
    9. \n
  9. Terms and Conditions text – the setting is responsible for adding text for the terms and conditions text flag, if the text is not set then the checkbox will not be displayed;
    10. \n
\n

Empty cart

\n

\"Empty

\n
    \n
  1. Empty cart heading – the setting allows you to add a header when the shopping cart is empty;
    2. \n
  2. Empty cart text – the setting allows you to add a text when the shopping cart is empty;
    3. \n
\n

\n

Cart notification

\n

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

\n

\n

 

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

\"Color

\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;
    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

\n","blockTitle":"Color swatches","fieldGroupName":"manual_category_blocks","hash":"general-color-swatches"},{"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

\n

\"Product\"

\n

Settings

\n

General

\n

\n

\"Product

\n
    \n
  1. Default product image – this image will be used when the product has no image;
    2. \n
  2. Show first media image instead of the variant image – this setting allows you to display the first product image by default instead of the image from the first active variant. Displayed in product cards, on the product page, and in quick view;
    3. \n
  3. 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.
    4. \n
\n

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

\"Product

\n

\"Product

\n

\"Product

\n
    \n
  1. Enable labels – the 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 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
  2. Enable Sale % label – the setting allows enabling or disabling the display of a label indicating the discount percentage;
    3. \n
  3. For each type of label, there are color settings. This way you can change the color for the label text: sale, primary, secondary, base, soldout;
    4. \n
  4. The background is specified for each label;
    5. \n
  5. The border color is specified for each label;
    6. \n
\n

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

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

\n

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

\n

\"Custom

\n

Settings

\n

\"Cursor

\n
    \n
  1. Animation speed – the setting is responsible for choosing the animation speed of a custom cursor;
    2. \n
\n

\n","blockTitle":"Custom cursor","fieldGroupName":"manual_category_blocks","hash":"general-custom-cursor"},{"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

\n

\"Product

\n

Settings

\n

\n

\"Product

\n
    \n
  1. Show vendor – the setting is responsible for showing/hiding the product vendor;
    2. \n
  2. Show currency code – setting responsible for whether the currency code will be shown;
    3. \n
  3. Enable image change on hover – the setting is responsible for whether the second image (video) will be shown on hover. By default the second product image will be used for the hover. To add an image (video), you need to add the product_card.hover_imagemetafield, where product_cardis the namespace and hover_image is the field name.
    4. \n
  4. Image aspect ratio – aspect ratio of the image. Can be “Square” or “Portrait”;
    5. \n
  5. 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;
    6. \n
\n

Colors

\n

\n

\"Product

\n
    \n
  1. Quick buttons background – setting allows you to specify the background color of quick buttons;
    2. \n
  2. Quick buttons icon color – setting allows you to specify the icon color of quick buttons;
    3. \n
  3. Text button background – setting allows you to set the color of the button background color;
    4. \n
  4. Text button color – setting allows you to set the color of the button text;
    5. \n
  5. Text button border – setting allows you to set the color of the button border color;
    6. \n
\n

\n

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

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

\n

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

\n

\"compare-products\"

\n

Seattings

\n

\"compare-products-settings\"

\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

Colors

\n

\"compare-products-colors\"

\n
    \n
  1. Button sticky background – background color of sticky compare product button;
    2. \n
  2. Button sticky color – text color of sticky compare product button;
    3. \n
  3. Counter background color – settings allow you to change the color background of the counter;
    4. \n
  4. Counter color – Settings allow you to change the color text of the counter;
    5. \n
\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-card-add\"

\n

Settings

\n

\"article-card-settings\"

\n
    \n
  1. \n

    Default article image – the setting is used to add a default image if the article does not have one;

    \n
    2. \n
  2. \n

    Read more label – link text for the read more link in the article card;

    \n
    3. \n
  3. \n

    Show blog post date – the setting is responsible for showing/hiding the publication dates of the article;

    \n
    4. \n
  4. \n

    Show blog post author – the setting is responsible for showing/hiding the author of the article;

    \n
    5. \n
  5. \n

    Show content – the setting is responsible for article content output;

    \n
    6. \n
  6. \n

    Strip title to 2 line – the setting is responsible for trimming the title of the article to 3 lines;

    \n
    7. \n
  7. \n

    Strip content to 2 line – the setting is responsible for trimming the content of the article to 3 lines.

    \n
    8. \n
\n","blockTitle":"Article card","fieldGroupName":"manual_category_blocks","hash":"general-article-card"},{"blockContent":"

\"quick-view\"

\n

This block of settings is intended for the general settings of the Quick view window on the site.

\n

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

\n

\"quick-view-add\"

\n

Settings

\n

\"quick-view-settings\"

\n
    \n
  1. \n

    Enable quick view – The setting responsible for enabling the quick view feature.

    \n
    2. \n
  2. \n

    Show additional payment buttons – The setting responsible for showing/hiding additional payment buttons.

    \n
    3. \n
  3. \n

    Show product vendor and SKU – The setting responsible for showing/hiding product vendor and SKU.

    \n
    4. \n
  4. \n

    Show product description – The setting responsible for showing/hiding product description.

    \n
    5. \n
  5. \n

    Show product labels – The setting responsible for showing/hiding product labels.

    \n
    6. \n
  6. \n

    Button style – The setting responsible for choosing the style of the Add to cart button: Primary or Secondary.

    \n
    7. \n
  7. \n

    Button 'Buy it now' style – The setting responsible for choosing the style of the Buy it now button: Primary or Secondary.

    \n
    8. \n
  8. \n

    Variant picker – The setting responsible for choosing variant picker style: buttons or dropdown.

    \n
    9. \n
  9. \n

    Media layout – The setting responsible for choosing the product images’ layout: Carousel or Stacked.

    \n
    10. \n
  10. \n

    Object fit image – The setting responsible for the display:
    \nCover – fill the entire area.
    \nContain – scales proportionately.
    \nNative size – original images’ size.

    \n
    11. \n
  11. \n

    Media background color – Background color of the images slider.

    \n
    12. \n
  12. \n

    Media decor image – Decorative background image of the images slider.

    \n
    13. \n
\n","blockTitle":"Quick view","fieldGroupName":"manual_category_blocks","hash":"general-quick-view"},{"blockContent":"

\"predictive-search\"

\n

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-search-add\"

\n

\n

Settings

\n

\"predictive-search-settings\"

\n
    \n
  1. \n

    Enable search by articles – setting allows to include articles in the search;

    \n
    2. \n
  2. \n

    Enable search by pages – setting allows to include pages in the search;

    \n
    3. \n
  3. \n

    No results text – setting allows to set no result text;

    \n
    4. \n
  4. \n

    Trending search terms – settings allow you to add trending search terms;

    \n
    5. \n
  5. \n

    Show recently viewed products – settings allow you to add the display of recently viewed products;

    \n
    6. \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-media\"

\n

Settings

\n

\"social-media-setting\"

\n
    \n
  1. \n

    X (Twitter) – link to the store’s X (Twitter) account;

    \n
    2. \n
  2. \n

    Facebook – link to the store’s Facebook account;

    \n
    3. \n
  3. \n

    Pinterest -link to the store’s Pinterest account;

    \n
    4. \n
  4. \n

    Instagram – link to the store’s Instagram account;

    \n
    5. \n
  5. \n

    Tumblr – link to the store’s Tumblr account;

    \n
    6. \n
  6. \n

    YouTube – link to the store’s YouTube account;

    \n
    7. \n
  7. \n

    TikTok – link to the store’s TikTok account.

    \n
    8. \n
  8. \n

    Linkedin – link to the store’s Linkedin account.

    \n
    9. \n
\n","blockTitle":" Social media","fieldGroupName":"manual_category_blocks","hash":"general-social-media"},{"blockContent":"

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-reminder\"

\n

Settings

\n

\"cart-reminder-setting\"

\n
    \n
  1. \n

    Enable – the setting is responsible for enabling/disabling the pop-up.

    \n
    2. \n
  2. \n

    Cookie time – the setting is responsible for the period after which the cart reminder pop-up will be shown. It has several values: 10 minutes, 30 minutes, 1 hour, 8 hours, 1 day.

    \n
    3. \n
  3. \n

    Display frequency – the setting is responsible for the behavior of the pop-up.
    \nIf one time is selected, in this case, when interacting with the pop-up, it will be closed for 24 hours.
    \nIf the Cookie interval is selected, the value from the Cookie time setting will be taken.

    \n
    4. \n
  4. \n

    Text – the setting is responsible for the text inside the pop-up.

    \n
    5. \n
\n

\n

Colors

\n

\"cart-reminder-color\"

\n
    \n
  1. \n

    Text – the setting is responsible for the text color.

    \n
    2. \n
  2. \n

    Background – the setting is responsible for the pop-up background.

    \n
    3. \n
  3. \n

    Icon – the setting is responsible for the icon color.

    \n
    4. \n
  4. \n

    Button close – the setting is responsible for the close button color.

    \n
    5. \n
\n","blockTitle":"Cart reminder","fieldGroupName":"manual_category_blocks","hash":"general-cart-reminder"},{"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

General

\n

\"breadcrumbs-general\"

\n
    \n
  1. \n

    Show– the setting is responsible for showing/hiding breadcrumbs.

    \n
    2. \n
  2. \n

    Show collection on PDP – showing the first available collection of the target product.

    \n
    3. \n
\n

\n

Layout

\n

\"layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \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-general\"

\n

Settings

\n

\"seo-setting\"

\n
    \n
  1. \n

    Hide site from search engine – the setting is responsible for hiding pages from indexing by search robots.

    \n
    2. \n
\n","blockTitle":"SEO","fieldGroupName":"manual_category_blocks","hash":"general-seo"},{"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-css\"

\n

Settings

\n

\"custom-css-settings\"

\n
    \n
  1. \n

    Textarea – a text area where you can add your CSS code for customization.

    \n
    2. \n
\n

\n

Additional information

\n

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.

\n","blockTitle":"Custom CSS","fieldGroupName":"manual_category_blocks","hash":"general-custom-css"}]},{"fieldGroupName":"manual_category","manualCategoryTitle":"Pages","manualCategoryBlocks":[{"blockContent":"

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

\n

\"blog-page\"

\n

\"manage-blogs\"

\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 page with a unique template 404.json

\n

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

\n

\"page-404-desktop\"

\n

\"page-404-mobile\"

\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-page"},{"blockContent":"

This is a page with a unique template page.json

\n

This template can be used to display page layouts (banner image, content).

\n

\"page\"

\n

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

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

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

\n

\"page-faq\"

\n

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

\n

\"faq-page\"

\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":"

This is a page with a default template search.json

\n

\"search-page\"

\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

\"search-page-desktop\"

\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":"

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

\n

\"collection-page\"

\n

\"default-collection-page\"

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

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

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

This is a homepage with the default template index.json.

\n

\"homepage-page\"

\n

Homepage is the main store page that your customers see first. On this page, you can display any dynamic sections and build your own unique store.

\n

\"template\"

\n

As per Shopify’s limits, you can only add up to 25 sections per page.

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

Setting up and managing new customer accounts

\n

New customer accounts let your customers log in using a one-time 6-digit verification code sent by email. A password isn’t required to log in. Both classic and new customer accounts are available to you and can be used by your customers. This customer account type is developed and managed by Shopify.

\n

Click the link for more: Shopify manual.

\n","blockTitle":"New customer account","fieldGroupName":"manual_category_blocks","hash":"pages-new-customer-account"},{"blockContent":"

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

\n

\"contact\"

\n

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

\n

\"contact-us-desktop\"

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

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

\n

\"product-page\"

\n

\"pruduct-admin-page\"

\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

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

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

This is a product page with default template product.pre-order.json. You do not need to create it. The theme has it by default.

\n

\"pre-order-set\"

\n

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

\n

\n

Additional info

\n

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, then in the admin panel on the “Order status page,” you can see an additional property “Pre-order”:

\n

\"pre-order-true\"

\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 Pre-order or any other purpose.

\n","blockTitle":"Pre-order product","fieldGroupName":"manual_category_blocks","hash":"pages-pre-order-product"},{"blockContent":"

This is a page with a default template cart.json

\n

\"cart-page\"

\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

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

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

This is a page with a default template list-collections.json used to display list of colelctions on the “All collections” page.

\n

\"collection-list\"

\n

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

\n

\"collection-list-section\"

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

This is a blog post page with a default template article.json. The template is added initially and cannot be removed.

\n

\"default-blog-page\"

\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. You can use the section “Article main” to configure the appearance and additional settings.

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

This is a page with a unique template password.json. This page is added by default and will be displayed to customers if your store is password-protected.

\n

\"password-template\"

\n

This template is used by default for the password page. You can use the “Password header”, “Password content”, and “Password footer” sections to configure the appearance and additional settings of the page.

\n

\"password-desktop\"

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

\"ticker-background-desktop\"

\n

\"ticker-desktop\"

\n

\"ticker-background-mobile\"

\n

\"ticker-mobile\"

\n

The Ticker section in your Shopify theme allows you to create a scrolling ticker with customizable text, images, and layout settings. Below is a detailed guide to all settings.

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"ticker-settings\"

\n
    \n
  1. \n

    Font – the setting allows you to set the font for the text;

    \n
    2. \n
  2. \n

    Font size (desktop) – the setting allows you to set the font size of the ticker for the desktop;

    \n
    3. \n
  3. \n

    Font size (mobile) – the setting allows you to set the font size of the ticker for the mobile;

    \n
    4. \n
  4. \n

    Show divider – the setting allows you to set the dividers between text;

    \n
    5. \n
  5. \n

    Direction – the setting allows you to set the direction of ticker movement;

    \n
    6. \n
  6. \n

    Movement speed (desktop) – the setting allows you to set the speed of the ticker for the desktop;

    \n
    7. \n
  7. \n

    Movement speed (mobile) – the setting allows you to set the speed of the ticker for the mobile;

    \n
    8. \n
  8. \n

    Background image (desktop) – the setting allows you to set the background image of the ticker for the desktop (3840 x 1100px recommended);

    \n
    9. \n
  9. \n

    Background image (mobile) – the setting allows you to set the background image of the ticker for the mobile (1534 x 1100px recommended).

    \n
    10. \n
\n

Colors

\n

\"ticker-color-settings\"

\n
    \n
  1. \n

    Background – the setting allows you to set the background color of the section;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the color of the text;

    \n
    3. \n
  3. \n

    Overlay – the setting allows you to set the overlay color of the section background image.

    \n
    4. \n
\n

Layout Settings

\n

\"ticker-layout-settings\"

\n
    \n
  1. \n

    Desktop section height– the setting allows you to set the height of the section on desktop;

    \n
    2. \n
  2. \n

    Mobile section height– the setting allows you to set the height of the section on mobile;

    \n
    3. \n
  3. \n

    Desktop inner indent – the setting allows you to set the inner indent of the section on desktop;

    \n
    4. \n
  4. \n

    Mobile inner indent – the setting allows you to set the inner indent of the section on mobile;

    \n
    5. \n
  5. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    6. \n
  6. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    7. \n
  7. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    8. \n
  8. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    9. \n
\n

Blocks settings

\n

Content:

\n

\"ticker-content-settings\"

\n
    \n
  1. \n

    Text – the setting allows you to fill in the text content for the section;

    \n
    2. \n
  2. \n

    Image – the setting allows you to specify the image (444 x 444px recommended).

    \n
    3. \n
\n","blockTitle":"Ticker","fieldGroupName":"manual_category_blocks","hash":"section-ticker"},{"blockContent":"

\"richtext\"

\n

Adding a section

\n

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

\n

\"add-richtext\"

\n

Section settings

\n

General

\n

\"richtext-settings\"

\n
    \n
  1. \n

    Label – this setting allows you to set text of the label;

    \n
    2. \n
  2. \n

    Heading – this setting allows you to set text of the heading;

    \n
    3. \n
  3. \n

    Text – this setting allows you to set the main text of section;

    \n
    4. \n
  4. \n

    Enable read more button – this setting enables the feature to truncate text and display a button to expand the full text. Limits the display to 5 lines. Anything after the fifth line is truncated;

    \n
    5. \n
  5. \n

    Read more button label – this setting allows you to set the text of the “Read more” button;

    \n
    6. \n
  6. \n

    Show less button label – this setting allows you to set the text of the “Show less” button.

    \n
    7. \n
\n

Enter & Exit banner Settings.

\n

\"richtext-enter-exit-banner\"

\n
    \n
  1. \n

    Enable Enter banner – the setting allows you to show the enter banner image;

    \n
    2. \n
  2. \n

    Enter banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    3. \n
  3. \n

    Enter banner image – the setting allows you to select the enter banner image;

    \n
    4. \n
  4. \n

    Enter banner color – the setting allows you to select the enter banner color;

    \n
    5. \n
  5. \n

    Enable exit banner – the setting allows you to show the exit banner image;

    \n
    6. \n
  6. \n

    Exit banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    7. \n
  7. \n

    Exit banner image – the setting allows you to select the exit banner image;

    \n
    8. \n
  8. \n

    Exit banner color – the setting allows you to select the exit banner color.

    \n
    9. \n
\n
\n

Layout Settings

\n

\"layout-rich-text\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Richtext","fieldGroupName":"manual_category_blocks","hash":"section-richtext"},{"blockContent":"

\"cart-drawer\"

\n

Adding a Section

\n

The section is static, it is added initially and cannot be deleted. The section will be added if the Drawer type is selected in the Cart global settings (Settings – Cart – Cart type).

\n

You can enable/disable “Disount”, “Calculate shipping rates”, “Note order” in the Cart global settings (Settings – Cart – Cart type).

\n

Cart drawer settings

\n

\"cart-drawer-setting\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the text for the section title. By default, it is taken from translations;

    \n
    2. \n
  2. \n

    Show items count in the cart – the setting is responsible for displaying the number of products in the cart;

    \n
    3. \n
  3. \n

    View cart button label – the setting is responsible for the “View cart” link text;

    \n
    4. \n
\n

Upsell settings

\n

\"cart-upsell\"

\n
    \n
  1. \n

    Upsell heading – the setting allows you to set a title for a popup with upsell products;

    \n
    2. \n
  2. \n

    Products – he setting allows you to select products that act as upsells;

    \n
    3. \n
\n

Blocks settings

\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 “Shipping bar”

\n

Block limit – 1.

\n

Block is responsible for displaying the Shipping bar.

\n

\"shipping-bar-setting\"

\n
    \n
  1. \n

    Free shipping amount – the setting allows you to set the desired goal to be achieved by the user;

    \n
    2. \n
  2. \n

    Shipping message – the setting allows you to set a message displayed near the progress bar;

    \n
    3. \n
  3. \n

    Shipping congratulatory message – the setting allows you to set a message to be displayed instead of the progress bar;

    \n
    4. \n
  4. \n

    Shipping icon – the setting allows you to set an icon to the shipping bar;

    \n
    5. \n
\n

Colors

\n
    \n
  1. \n

    Progress bar background color – the setting allows you to set the background color for the progress bar;

    \n
    2. \n
  2. \n

    Progress bar fill color – the setting allows you to set the fill color for the progress bar;

    \n
    3. \n
  3. \n

    Progress bar text color – the setting allows you to set the text color for the progress bar;

    \n
    4. \n
\n","blockTitle":"Cart drawer","fieldGroupName":"manual_category_blocks","hash":"section-cart-drawer"},{"blockContent":"

\"collection-list-desktop\"

\n

\"collection-list-desktop-2\"

\n

\"collection-list-mobile\"

\n

\"collection-list-mobile-2\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"collection-list-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading of the section;

    \n
    2. \n
  2. \n

    Layout – the setting allows you to set the layout of the section. Can be “Simple” or “Classic”;

    \n
    3. \n
  3. \n

    Image aspect ratio – the setting allows you to set the aspect ratio of the images. Can be “Square”, “Portrait” or “Landscape”;

    \n
    4. \n
  4. \n

    Center blocks on desktop – the setting allows you to center blocks on the desktop;

    \n
    5. \n
  5. \n

    Show products count – the setting allows you to show the product count of the collection near the title.

    \n
    6. \n
\n

Layout

\n

\"collection-list-layout-settings\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Blocks settings

\n

Collection:

\n

\"collection-list-block-settings\"

\n
    \n
  1. \n

    Collection – the setting allows you to set the collection;

    \n
    2. \n
  2. \n

    Image – the setting allows you to set the image of the block 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. Image will not shown with the ‘Simple’ layout. 530 x 530px for square, 530 x 662px for portrait, 530 x 380px for landscape recommended.

    \n
    3. \n
\n","blockTitle":"Collection list","fieldGroupName":"manual_category_blocks","hash":"section-collection-list"},{"blockContent":"

\"cart-template\"

\n

Adding a section

\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 settings

\n
    \n
  1. \n

    Heading – a heading for the section;

    \n
    2. \n
  2. \n

    Order summary heading – a heading for the order summary information;

    \n
    3. \n
\n

Layout

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

\n

In the section you can add a “Shipping bar” block.

\n

Block Shipping bar
\n\"shipping-bar-setting\"
\n

\n

Block settings:

\n
    \n
  1. \n

    Free shipping amount – the setting allows you to set the desired goal to be achieved by the user;

    \n
    2. \n
  2. \n

    Shipping message – the setting allows you to set a message displayed near the progress bar;

    \n
    3. \n
  3. \n

    Shipping congratulatory message – the setting allows you to set a message to be displayed instead of the progress bar;

    \n
    4. \n
  4. \n

    Shipping icon – the setting allows you to set an icon to the shipping bar;

    \n
    5. \n
\n

Colors

\n
    \n
  1. \n

    Progress bar background color – the setting allows you to set the background color for the progress bar;

    \n
    2. \n
  2. \n

    Progress bar fill color – the setting allows you to set the fill color for the progress bar;

    \n
    3. \n
  3. \n

    Progress bar text color – the setting allows you to set the text color for the progress bar;

    \n
    4. \n
\n","blockTitle":"Cart template","fieldGroupName":"manual_category_blocks","hash":"section-cart-template"},{"blockContent":"

\"image-with-text\"

\n

\"image-with-text-mobile\"

\n

Adding a section

\n

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

\n

\"adding-image-with\"

\n

Section settings

\n

\"image-with-text-section-settings\"

\n

General

\n
    \n
  1. \n

    Image desktop – the setting allows you to select the image for desktop resolutions;

    \n
    2. \n
  2. \n

    Image mobile – the setting allows you to select the image for mobile resolutions;

    \n
    3. \n
  3. \n

    Image position – the setting allows you to select image position in the section;

    \n
    4. \n
  4. \n

    Text alignment – the setting allows you to select the alignment of the text;

    \n
    5. \n
  5. \n

    Heading – the setting allows you to set the text of the heading;

    \n
    6. \n
  6. \n

    Subheading – the setting allows you to set the text of the subheading;

    \n
    7. \n
  7. \n

    Text – the setting allows you to set text content;

    \n
    8. \n
  8. \n

    Button label – the setting allows you to set the label for the button;

    \n
    9. \n
  9. \n

    Button aria-label – the setting allows you to set the aria-label for the button. This attribute allows screen readers to better convey information to people with disabilities;

    \n
    10. \n
  10. \n

    Button link – the setting allows you to select a button style;

    \n
    11. \n
  11. \n

    Button style – the setting allows you to set the type of the button;

    \n
    12. \n
  12. \n

    Enable background decor image – the setting allows you to set the background decoration image.

    \n
    13. \n
\n

Layout Settings

\n

\"image-with-text-section-layout\"

\n
    \n
  1. \n

    Container width – section container settings.

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile;

    \n
    6. \n
  6. \n

    Inner desktop offset top – the top indent of the inner container on the desktop;

    \n
    7. \n
  7. \n

    Inner desktop offset bottom – the bottom indent of the inner container on the desktop;

    \n
    8. \n
  8. \n

    Inner mobile offset top – the top indent of the inner container on the mobile;

    \n
    9. \n
  9. \n

    Inner mobile offset bottom – the bottom indent of the inner container on the mobile.

    \n
    10. \n
\n","blockTitle":"Image with text","fieldGroupName":"manual_category_blocks","hash":"section-image-with-text"},{"blockContent":"

\"social-gallery-desktop\"

\n

\"social-gallery-mobile\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"social-gallery-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading of the section;

    \n
    2. \n
  2. \n

    Link label – the setting allows you to set the label of the section link;

    \n
    3. \n
  3. \n

    Link URL – the setting allows you to set the URL of the section link;

    \n
    4. \n
  4. \n

    Background image (desktop) – the setting allows you to set the background image of the section for the desktop (3840 x 2160px recommended);

    \n
    5. \n
  5. \n

    Background image (mobile) – the setting allows you to set the background image of the section for the mobile (1534 x 1130px recommended).

    \n
    6. \n
\n

Colors

\n

\"social-gallery-color-settings\"

\n
    \n
  1. \n

    Background – the setting allows you to set the background color of the section;

    \n
    2. \n
  2. \n

    Overlay – the setting allows you to set the overlay color of the section background image;

    \n
    3. \n
  3. \n

    Text – the setting allows you to set the color of the text;

    \n
    4. \n
  4. \n

    Link – the setting allows you to set the color of the link;

    \n
    5. \n
  5. \n

    Item background – the setting allows you to set the background color of the gallery item;

    \n
    6. \n
  6. \n

    Item text – the setting allows you to set the text color of the gallery item.

    \n
    7. \n
\n

Layout

\n

\"social-gallery-layout-settings\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Blocks settings

\n

Gallery item:

\n

\"social-gallery-item-settings\"

\n
    \n
  1. \n

    Image – the setting allows you to set the image of the gallery item. 848 x 848px recommended;

    \n
    2. \n
  2. \n

    Heading – the setting allows you to set the heading of the gallery item;

    \n
    3. \n
  3. \n

    Logo – the setting allows you to set the logo of the gallery item. 40 x 40px recommended;

    \n
    4. \n
  4. \n

    Icon – the setting allows you to set the logo of the gallery item. 24 x 24px recommended;

    \n
    5. \n
  5. \n

    Link URL – the setting allows you to set the link URL of the gallery item;

    \n
    6. \n
  6. \n

    Link aria label – the setting allows you to set the link aria label of the gallery item. Need for good accessibility, e.g. ‘Learn more about…’;

    \n
    7. \n
  7. \n

    Open link in new tab – the setting allows you to set the image of the gallery item. 848 x 848px recommended.

    \n
    8. \n
\n","blockTitle":"Social gallery","fieldGroupName":"manual_category_blocks","hash":"section-social-gallery"},{"blockContent":"

\"blogpost\"

\n

\"blogpost-mobile\"

\n

Adding a section

\n

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

\n

\"adding-blogpost-section\"

\n

Section settings

\n

\"blogpost-setting\"

\n

General

\n
    \n
  1. \n

    Blog – select the blog whose posts you want to display;

    \n
    2. \n
  2. \n

    Big blog post position – setting that allows you to select the position for a big blog post;

    \n
    3. \n
  3. \n

    Heading – this setting allows you to set text of the heading;

    \n
    4. \n
  4. \n

    Subheading – this setting allows you to set text of the subheading;

    \n
    5. \n
  5. \n

    Link label – setting allows you to set the label for the link;

    \n
    6. \n
  6. \n

    Link aria-label – setting allows you to set the aria-label for the link. This attribute allows screen readers to better convey information to people with disabilities.

    \n
    7. \n
\n

Layout Settings

\n

\"blogpost-layout\"

\n
    \n
  1. \n

    Container width – section container settings.

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Blog posts","fieldGroupName":"manual_category_blocks","hash":"section-blog-posts"},{"blockContent":"

\"best-sellers-desktop\"

\n

\"best-sellers-mobile\"

\n

Adding a 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-sellers-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading of the section.

    \n
    2. \n
\n

Enter & Exit banner Settings.

\n

\"enter-exit-banner-settings\"

\n
    \n
  1. \n

    Enable Enter banner – the setting allows you to show the enter banner image;

    \n
    2. \n
  2. \n

    Enter banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    3. \n
  3. \n

    Enter banner image – the setting allows you to select the enter banner image;

    \n
    4. \n
  4. \n

    Enter banner color – the setting allows you to select the enter banner color;

    \n
    5. \n
  5. \n

    Enable exit banner – the setting allows you to show the exit banner image;

    \n
    6. \n
  6. \n

    Exit banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    7. \n
  7. \n

    Exit banner image – the setting allows you to select the exit banner image;

    \n
    8. \n
  8. \n

    Exit banner color – the setting allows you to select the exit banner color.

    \n
    9. \n
\n
\n

Layout

\n

\"layout-settings\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Blocks settings

\n

Collection

\n
    \n
  1. \n

    Collection – the setting allows you to set the collection;

    \n
    2. \n
  2. \n

    Heading – the setting allows you to set the heading. Use instead of collection heading;

    \n
    3. \n
  3. \n

    Link label – the setting allows you to set the link label;

    \n
    4. \n
  4. \n

    Thumbnail first – the setting allows you to set the first thumbnail;

    \n
    5. \n
  5. \n

    Thumbnail second– the setting allows you to set the second thumbnail;

    \n
    6. \n
  6. \n

    Thumbnail third– the setting allows you to set the third thumbnail.

    \n
    7. \n
\n","blockTitle":"Best sellers","fieldGroupName":"manual_category_blocks","hash":"section-best-sellers"},{"blockContent":"

\"newsletter-desktop\"

\n

\"newsletter-mobile\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"newsletter-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set text content;

    \n
    3. \n
  3. \n

    Input placeholder – the setting allows you to set the text for the input placeholder;

    \n
    4. \n
  4. \n

    Button aria-label – the setting allows you to set the aria-label for the input button;

    \n
    5. \n
  5. \n

    Success message – the setting allows you to set the text of successful sending;

    \n
    6. \n
  6. \n

    Background image (desktop) – the setting allows you to set the background image of the section for the desktop (3840 x 960px recommended);

    \n
    7. \n
  7. \n

    Background image (mobile) – the setting allows you to set the background image of the section for the mobile (1534 x 1308px recommended).

    \n
    8. \n
\n

Colors

\n

\"newsletter-color-settings\"

\n
    \n
  1. \n

    Background – the setting allows you to set the background color of the section;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the color of the text;

    \n
    3. \n
  3. \n

    Overlay – the setting allows you to set the overlay color of the section background image.

    \n
    4. \n
\n

Layout

\n

\"newsletter-layout-settings\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Newsletter","fieldGroupName":"manual_category_blocks","hash":"section-newsletter"},{"blockContent":"

\"grid-images\"

\n

\"grid-images\"

\n

Adding a section\"add-grid-images\"

\n

Section settings

\n

\"grid-images-settings1\"

\n

General

\n
    \n
  1. \n

    Background image desktop – the setting allows you to select the background image for desktop resolutions;

    \n
    2. \n
  2. \n

    Background image mobile – the setting allows you to select the background image for mobile resolutions.

    \n
    3. \n
\n

\"grid-images-color-setting\"

\n

Colors

\n
    \n
  1. \n

    Text – the setting allows you to select a color for the title and text;

    \n
    2. \n
  2. \n

    Background image overlay – the setting allows you to select a color background image overlay;

    \n
    3. \n
  3. \n

    Item hover overlay – the setting allows you to select a color for hover on block;

    \n
    4. \n
  4. \n

    Border – the setting allows you to select a color for the border between blocks;

    \n
    5. \n
  5. \n

    Button text – the setting allows you to select a color for button text;

    \n
    6. \n
  6. \n

    Button background – the setting allows you to select a color for button background;

    \n
    7. \n
  7. \n

    Button border – the setting allows you to select a color for button border;

    \n
    8. \n
  8. \n

    Button text (hover) – the setting allows you to select a color for button text on hover;

    \n
    9. \n
  9. \n

    Button background (hover) – the setting allows you to select a color for button background on hover;

    \n
    10. \n
  10. \n

    Slider pagination – the setting allows you to select a color for slider pagination.

    \n
    11. \n
\n

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

\n

Layout

\n

\"grid-images-layout\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Block settings

\n

The section has a limit on the amount of blocks. The maximum number of blocks is 4.

\n

\"grid-images-block-setting\"

\n

General

\n
    \n
  1. \n

    Heading – this setting allows you to set text of the heading;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the text of the section;

    \n
    3. \n
  3. \n

    Link label – the setting allows you to set the text for the link;

    \n
    4. \n
  4. \n

    Link aria-label – the setting allows you to set the aria-label for the link;

    \n
    5. \n
  5. \n

    Link – the setting allows you to set the link for the link;

    \n
    6. \n
  6. \n

    Image – the setting allows you to select the image.

    \n
    7. \n
\n","blockTitle":"Grid images","fieldGroupName":"manual_category_blocks","hash":"section-grid-images"},{"blockContent":"

\"store-location-desktop\"

\n

\"store-location-mobile\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"store-location-settings-general\"

\n

\"store-location-settings-general2\"

\n
    \n
  1. \n

    Label – the setting allows you to specify the label of the section;

    \n
    2. \n
  2. \n

    Heading – the setting allows you to specify the heading of the section;

    \n
    3. \n
  3. \n

    Text – the setting allows you to specify the text of the section;

    \n
    4. \n
  4. \n

    Button label – the setting allows you to set the button label of the section;

    \n
    5. \n
  5. \n

    Button aria-label – the setting allows you to set the button aria label of the section. Need for good accessibility, e.g. ‘Learn more about…’;

    \n
    6. \n
  6. \n

    Button link – the setting allows you to set the button link of the section;

    \n
    7. \n
  7. \n

    Button style– the setting allows you to set the button style (primary / secondary) of the section;

    \n
    8. \n
  8. \n

    Enable background decor image – the setting allows you to show the background decoration image. The background color of the section will be changed to background secondary;

    \n
    9. \n
  9. \n

    Image – the setting allows you to set the background decoration image.

    \n
    10. \n
\n

Enter & Exit banner Settings

\n

\"enter-exit-banner-settings\"

\n
    \n
  1. \n

    Enable Enter banner – the setting allows you to show the enter banner image;

    \n
    2. \n
  2. \n

    Enter banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    3. \n
  3. \n

    Enter banner image – the setting allows you to select the enter banner image;

    \n
    4. \n
  4. \n

    Enter banner color – the setting allows you to select the enter banner color;

    \n
    5. \n
  5. \n

    Enable exit banner – the setting allows you to show the exit banner image;

    \n
    6. \n
  6. \n

    Exit banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    7. \n
  7. \n

    Exit banner image – the setting allows you to select the exit banner image;

    \n
    8. \n
  8. \n

    Exit banner color – the setting allows you to select the exit banner color.

    \n
    9. \n
\n
\n

Layout Settings

\n

\"store-location-layout-settings\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
  6. \n

    Inner desktop offset top – the top indent of the inner container on the desktop;

    \n
    7. \n
  7. \n

    Inner desktop offset bottom – the bottom indent of the inner container on the desktop;

    \n
    8. \n
  8. \n

    Inner mobile offset top – the top indent of the inner container on the mobile;

    \n
    9. \n
  9. \n

    Inner mobile offset bottom – the bottom indent of the inner container on the mobile.

    \n
    10. \n
\n

Blocks settings

\n

Store information:

\n

\"store-location-block-settings\"

\n
    \n
  1. \n

    Icon – the setting allows you to specify the icon of the item. 24 x 24px recommended;

    \n
    2. \n
  2. \n

    Heading – the setting allows you to set the title of the item;

    \n
    3. \n
  3. \n

    Text – the setting allows you to set the text of the item.

    \n
    4. \n
\n

Store socials:

\n

The block displays icons of social media specified in the store.

\n

\"store-location-block-2-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the title of the item.

    \n
    2. \n
\n","blockTitle":"Store location","fieldGroupName":"manual_category_blocks","hash":"section-store-location"},{"blockContent":"

\"benefits\"

\n

\"benefits-mobile\"

\n

Adding a section

\n

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

\n

\"adding-benefits\"

\n

Section settings

\n

\"benefits-setting\"

\n

General

\n
    \n
  1. \n

    Heading – this setting allows you to set text of the heading;

    \n
    2. \n
  2. \n

    Text– the setting allows you to set the text of the section;

    \n
    3. \n
  3. \n

    Main image – the setting allows you to select the main image of the section;

    \n
    4. \n
  4. \n

    Main image size – the setting allows you to select the main image layout: big or small;

    \n
    5. \n
  5. \n

    Background image desktop – the setting allows you to select the background image for desktop resolutions;

    \n
    6. \n
  6. \n

    Background image mobile – the setting allows you to select the background image for mobile resolutions;

    \n
    7. \n
  7. \n

    Mobile layout – the setting allows you to select the layout of cards position on mobile resolutions: grid or carousel.

    \n
    8. \n
\n

\"benefits-colors\"

\n

Colors

\n
    \n
  1. \n

    Section background – the setting allows you to select a color for section background;

    \n
    2. \n
  2. \n

    Text – the setting allows you to select a color for the title and text;

    \n
    3. \n
  3. \n

    Border image color – the setting allows you to select a color of border for main image, only for main image with big size;

    \n
    4. \n
  4. \n

    Overlay – the setting allows you to select a color for overlay of section;

    \n
    5. \n
  5. \n

    Item background – the setting allows you to select a color for block background;

    \n
    6. \n
  6. \n

    Item text – the setting allows you to select a color for block text.

    \n
    7. \n
\n

Layout

\n

\"layout-benefits\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Block settings

\n

The section has a limit on the amount of blocks. The maximum number of blocks is 4.

\n

\"benefits-block-setting\"

\n

General

\n
    \n
  1. \n

    Icon – the setting allows you to select the icon;

    \n
    2. \n
  2. \n

    Heading – this setting allows you to set text of the heading;

    \n
    3. \n
  3. \n

    Text – the setting allows you to set the text of the section.

    \n
    4. \n
\n","blockTitle":"Benefits","fieldGroupName":"manual_category_blocks","hash":"section-benefits"},{"blockContent":"

\"stores-locator-desktop\"

\n

\"stores-locator-mobile\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"stores-locator-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to specify the heading of the section;

    \n
    2. \n
  2. \n

    Enable background decor image – the setting allows you to set the background decoration image. The background color of the section will be changed to background secondary.

    \n
    3. \n
\n

Layout Settings

\n

\"stores-locator-layout-settings\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Blocks settings

\n

\"stores-locator-block-settings\"

\n

Store information:

\n

\"stores-locator-block-settings-2\"

\n
    \n
  1. \n

    Tag – the setting allows you to specify the tag of the block. You can add tags to enable filters.

    \n
    2. \n
  2. \n

    Heading – the setting allows you to specify the heading of the block;

    \n
    3. \n
  3. \n

    Text – the setting allows you to specify the text of the block;

    \n
    4. \n
  4. \n

    Button label– the setting allows you to specify the button label of the block;

    \n
    5. \n
  5. \n

    Button aria-label– the setting allows you to specify the button aria label of the block. Need for good accessibility, e.g. ‘Learn more about…’;

    \n
    6. \n
  6. \n

    Button link– the setting allows you to specify the button link of the block;

    \n
    7. \n
  7. \n

    Additional heading – the setting allows you to specify the additional heading of the block. Shown above the image or below the map.

    \n
    8. \n
  8. \n

    Additional text – the setting allows you to specify the additional text of the block. Shown above the image or below the map.

    \n
    9. \n
  9. \n

    Google maps API key – the setting allows you to add a Google Maps API key. Learn more about how to create an API key;

    \n
    10. \n
  10. \n

    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.

    \n
    11. \n
  11. \n

    Map image – the setting allows you to specify the image that will be played instead of the map if the map is not added;

    \n
    12. \n
  12. \n

    Map link – the setting allows you to specify a link for the image of the map;

    \n
    13. \n
  13. \n

    Map link aria-label– the setting allows you to specify a link for the image of the map;

    \n
    14. \n
\n","blockTitle":"Stores locator","fieldGroupName":"manual_category_blocks","hash":"section-stores-locator"},{"blockContent":"

\"specifications-desktop\"

\n

\"specifications-mobile\"

\n

Adding a section

\n

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

\n

\"specifications-add\"

\n

Section settings

\n

\"specification-section-settings\"

\n

General

\n
    \n
  1. \n

    Heading – this setting allows you to set text of the heading;

    \n
    2. \n
  2. \n

    Main image – the setting allows you to select the main image of the section;

    \n
    3. \n
  3. \n

    Background image desktop – the setting allows you to select the background image for desktop resolutions;

    \n
    4. \n
  4. \n

    Background image mobile – the setting allows you to select the background image for mobile resolutions.

    \n
    5. \n
\n

\"specification-section-color\"

\n

Colors

\n
    \n
  1. \n

    Section background – the setting allows you to select a color for section background;

    \n
    2. \n
  2. \n

    Text – the setting allows you to select a color for the title and text;

    \n
    3. \n
  3. \n

    Main image border – the setting allows you to select a color of border for main image;

    \n
    4. \n
  4. \n

    Hotspot background – the setting allows you to select a color of border for main image;

    \n
    5. \n
  5. \n

    Hotspot color – the setting allows you to select a color of hotspot text or icon;

    \n
    6. \n
  6. \n

    Hotspot border – the setting allows you to select a color of hotspot border;

    \n
    7. \n
  7. \n

    Hotspot line – the setting allows you to select a color of hotspot line;

    \n
    8. \n
  8. \n

    Overlay – the setting allows you to select a color for overlay of section.

    \n
    9. \n
\n

Layout

\n

\"specification-section-layout\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Block settings

\n

The section has a limit on the amount of blocks. The maximum number of blocks is 10.

\n

\"specification-section-blockinfo\"

\n

General

\n
    \n
  1. \n

    Heading – this setting allows you to set text of the block heading;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the text of the block which will be shown in popup;

    \n
    3. \n
  3. \n

    Popup image – the setting allows you to select the image of the block which will be shown in popup;

    \n
    4. \n
  4. \n

    Hotspot horizontal position (desktop) – the setting allows you to set the hotspot horizontal position on desktop resolutions;

    \n
    5. \n
  5. \n

    Hotspot vertical position (desktop) – the setting allows you to set the hotspot vertical position on desktop resolutions;

    \n
    6. \n
  6. \n

    Hotspot horizontal position (mobile) – the setting allows you to set the hotspot horizontal position on mobile resolutions;

    \n
    7. \n
  7. \n

    Hotspot vertical position (mobile) – the setting allows you to set the hotspot vertical position on mobile resolutions.

    \n
    8. \n
\n","blockTitle":"Specifications","fieldGroupName":"manual_category_blocks","hash":"section-specifications"},{"blockContent":"

\"collections-grid-desktop\"

\n

\"collections-grid-mobile\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"collections-grid-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading of the section;

    \n
    2. \n
  2. \n

    Enable background decor image – the setting allows you to set the background decoration image. The background color of the section will be changed to background secondary.

    \n
    3. \n
  3. \n

    Show products count – the setting allows you to show the product count of the collection near the title.

    \n
    4. \n
\n

Layout

\n

\"collections-grid-layout-settings\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile;

    \n
    6. \n
  6. \n

    Inner desktop offset top – the top indent of the inner container on the desktop;

    \n
    7. \n
  7. \n

    Inner desktop offset bottom – the bottom indent of the inner container on the desktop;

    \n
    8. \n
  8. \n

    Inner mobile offset top – the top indent of the inner container on the mobile;

    \n
    9. \n
  9. \n

    Inner mobile offset bottom – the bottom indent of the inner container on the mobile.

    \n
    10. \n
\n

Blocks settings

\n

Collection

\n

\"collections-grid-settings\"

\n
    \n
  1. \n

    Collection – the setting allows you to set the collection;

    \n
    2. \n
  2. \n

    Image – the setting allows you to set the image of the block 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.
    \nRecommended sizes:

    \n
      \n
    1. \n

      860 x 1204px recommended for the first block image;

      \n
      2. \n
    2. \n

      860 x 1090px recommended for the second block image;

      \n
      3. \n
    3. \n

      1800 x 1350px recommended for the third block image;

      \n
      4. \n
    4. \n

      1800 x 900px recommended for the fourth block image;

      \n
      5. \n
    5. \n

      860 x 918px recommended for the fifth block image;

      \n
      6. \n
    6. \n

      860 x 566px recommended for the sixth block image;

      \n
      7. \n
    \n
    3. \n
\n","blockTitle":"Collections Grid","fieldGroupName":"manual_category_blocks","hash":"section-collections-grid"},{"blockContent":"

\"banner-desktop\"

\n

\"banner-mobile\"

\n

Adding a section

\n

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

\n

\"banner-add\"

\n

Section settings

\n

General

\n

\"banner-general\"

\n
    \n
  1. \n

    Desktop banner min height – the minimum height of the banner on desktop screens;

    \n
    2. \n
  2. \n

    Mobile banner min height – the minimum height of the banner on mobile screens;

    \n
    3. \n
  3. \n

    Media type – defines the type of media used in the banner (Image/HTML5 video/Youtube/Vimeo);

    \n
    4. \n
\n

Media content

\n

\"banner-media\"

\n
    \n
  1. \n

    Additional image – an optional additional image that can be displayed in the banner;

    \n
    2. \n
  2. \n

    Image desktop/HTML5 desktop video/Youtube/Vimeo desktop video url – the media source for desktop, based on the selected media type (image, HTML5 video, YouTube/Vimeo);

    \n
    3. \n
  3. \n

    Image mobile/HTML5 mobile video/Youtube/Vimeo mobile video url – the media source for mobile, based on the selected media type (image, HTML5 video, YouTube/Vimeo).

    \n
    4. \n
\n

Text content

\n

\"banner-text-content\"

\n

\"banner-text-content2\"

\n
    \n
  1. \n

    Heading – the main heading text displayed on the banner;

    \n
    2. \n
  2. \n

    Text – the description shown under the heading;

    \n
    3. \n
  3. \n

    First button label – the text displayed on the primary button;

    \n
    4. \n
  4. \n

    First button aria-label – accessibility label for the first button, used by screen readers;

    \n
    5. \n
  5. \n

    First button link – the URL the first button will navigate to when clicked;

    \n
    6. \n
  6. \n

    Make first button clickable on whole banner – allows the entire banner area to act as a clickable link using the first button’s link;

    \n
    7. \n
  7. \n

    Second button label – the text displayed on the secondary button;

    \n
    8. \n
  8. \n

    Second button aria-label – accessibility label for the second button, used by screen readers;

    \n
    9. \n
  9. \n

    Second button link – the URL the second button will navigate to when clicked.

    \n
    10. \n
\n

Countdown timer

\n

\"banner-text-timer\"

\n
    \n
  1. \n

    Enable – the setting allows you to show or hide the countdown timer;

    \n
    2. \n
  2. \n

    Year – years of the end of the countdown timer;

    \n
    3. \n
  3. \n

    Month – month of the end of the countdown timer;

    \n
    4. \n
  4. \n

    Day – day of the end of the countdown timer;

    \n
    5. \n
  5. \n

    Hour – hour of the end of the countdown timer;

    \n
    6. \n
  6. \n

    Timezone – Timezone;

    \n
    7. \n
  7. \n

    Timer cell background color – setting the background color for the time cell;

    \n
    8. \n
  8. \n

    Timer cell color – setting the text color for the cells of the countdown.

    \n
    9. \n
\n

\"banner-text-timer2\"

\n

Alignment

\n

\"banner-alignment\"

\n
    \n
  1. \n

    Text alignment desktop – sets the horizontal alignment of the text on desktop screens;

    \n
    2. \n
  2. \n

    Text alignment mobile – sets the horizontal alignment of the text on mobile screens;

    \n
    3. \n
  3. \n

    Block alignment horizontal – sets the horizontal alignment of the entire content block within the banner;

    \n
    4. \n
  4. \n

    Block alignment vertical – sets the vertical alignment of the content block within the banner on desktop;

    \n
    5. \n
  5. \n

    Block alignment vertical mobile – sets the vertical alignment of the content block within the banner on mobile.

    \n
    6. \n
\n

Colors

\n

\"banner-colors\"

\n

\"banner-colors2\"

\n
    \n
  1. \n

    Section background – sets the background color of the entire banner section;

    \n
    2. \n
  2. \n

    Overlay – sets the color of the overlay applied above the media, usually with opacity;

    \n
    3. \n
  3. \n

    Text – sets the color of the heading and text content within the banner;

    \n
    4. \n
  4. \n

    Custom cursor icon – sets the icon used for the custom cursor;

    \n
    5. \n
  5. \n

    Custom cursor background – sets the background color of the custom cursor;

    \n
    6. \n
  6. \n

    Button first label – sets the text color of the first button;

    \n
    7. \n
  7. \n

    Button first background – sets the background color of the first button;

    \n
    8. \n
  8. \n

    Button first border outer – sets the outer border color of the first button;

    \n
    9. \n
  9. \n

    Button first border inner – sets the inner border color of the first button;

    \n
    10. \n
  10. \n

    Button first label (hover) – sets the text color of the first button on hover;

    \n
    11. \n
  11. \n

    Button first background (hover) – sets the background color of the first button on hover;

    \n
    12. \n
  12. \n

    Button first border inner (hover) – sets the inner border color of the first button on hover;

    \n
    13. \n
  13. \n

    Button second label – sets the text color of the second button;

    \n
    14. \n
  14. \n

    Button second background – sets the background color of the second button;

    \n
    15. \n
  15. \n

    Button second border – sets the border color of the second button;

    \n
    16. \n
  16. \n

    Button second label (hover) – sets the text color of the second button on hover;

    \n
    17. \n
  17. \n

    Button second background (hover) – sets the background color of the second button on hover.

    \n
    18. \n
\n

Layout Settings

\n

\"banner-layout\"

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
    \n
  1. \n

    Container width – section container settings.

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n","blockTitle":"Banner","fieldGroupName":"manual_category_blocks","hash":"section-banner"},{"blockContent":"

\"scroll-images-desktop\"

\n

\"scroll-images-mobile\"

\n

Adding a section

\n

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

\n

\"scroll-images-add\"

\n

Section settings

\n

\"scroll-images-section-settings\"

\n

General

\n
    \n
  1. \n

    Heading – this setting allows you to set text of the heading;

    \n
    2. \n
  2. \n

    Subheading – this setting allows you to set text of the subheading;

    \n
    3. \n
  3. \n

    Text – this setting allows you to set text of the section;

    \n
    4. \n
  4. \n

    Button label – the setting allows you to set the label for the button;

    \n
    5. \n
  5. \n

    Button aria-label – the setting allows you to set the aria-label for the button. This attribute allows screen readers to better convey information to people with disabilities;

    \n
    6. \n
  6. \n

    Button link – the setting allows you to select a button link;

    \n
    7. \n
  7. \n

    Button style – the setting allows you to set the type of the button;

    \n
    8. \n
  8. \n

    Enable background decor image – the setting allows you to set the background decoration image;

    \n
    9. \n
  9. \n

    Images size – the setting allows you to set the size of the images.

    \n
    10. \n
\n

\"scroll-images-first-column\"

\n

First column images

\n
    \n
  1. \n

    First image – the setting allows you to select the image for first image in first column;

    \n
    2. \n
  2. \n

    Second image – the setting allows you to select the image for second image in first column;

    \n
    3. \n
  3. \n

    Third image – the setting allows you to select the image for third image in first column.

    \n
    4. \n
\n

\"scroll-images-second-column\"

\n

Second column images

\n
    \n
  1. \n

    First image – the setting allows you to select the image for first image in second column;

    \n
    2. \n
  2. \n

    Second image – the setting allows you to select the image for second image in second column;

    \n
    3. \n
  3. \n

    Third image – the setting allows you to select the image for third image in second column.

    \n
    4. \n
\n

\"scroll-images-third-column\"

\n

Third column images

\n
    \n
  1. \n

    First image – the setting allows you to select the image for first image in third column;

    \n
    2. \n
  2. \n

    Second image – the setting allows you to select the image for second image in third column;

    \n
    3. \n
  3. \n

    Third image – the setting allows you to select the image for third image in third column.

    \n
    4. \n
\n

Layout

\n

\"scroll-images-layout\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Scroll images with text","fieldGroupName":"manual_category_blocks","hash":"section- scroll-images-with-text"},{"blockContent":"

\"video-desktop\"

\n

Adding a section

\n

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

\n

\"video-add\"

\n

Section settings:

\n

General:

\n

\"video-setting\"

\n

\"video-setting2\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading;

    \n
    2. \n
  2. \n

    Poster image – the setting allows you to set the poster image;

    \n
    3. \n
  3. \n

    Video type – the setting allows you to choose potential video type(HTML5, Youtube/Vimeo);

    \n
    4. \n
  4. \n

    Youtube/Vimeo desktop video url – the setting allows you to set the Youtube/Vimeo desktop video;

    \n
    5. \n
  5. \n

    Youtube/Vimeo mobile video url – the setting allows you to set the Youtube/Vimeo mobile video;

    \n
    6. \n
  6. \n

    HTML5 desktop video – the setting allows you to set the HTML5 desktop video;

    \n
    7. \n
  7. \n

    HTML5 mobile video – the setting allows you to set the HTML5 mobile video;

    \n
    8. \n
  8. \n

    Product – the setting allows you to set the product.

    \n
    9. \n
  9. Popup overlay image – the setting allows you to set the popup overlay image.
    10. \n
\n

Colors:

\n

\"video-color\"

\n
    \n
  1. \n

    Overlay – the setting allows you to set the overlay color;

    \n
    2. \n
  2. \n

    Heading – the setting allows you to set the heading color;

    \n
    3. \n
  3. \n

    Button icon – the setting allows you to set the button icon color;

    \n
    4. \n
  4. \n

    Button background – the setting allows you to set the button background color.

    \n
    5. \n
  5. Popup overlay – the setting allows you to set the overlay
    6. \n
\n

Layout:

\n

\"video-section-layout\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Video","fieldGroupName":"manual_category_blocks","hash":"section-video"},{"blockContent":"

\"contact-form-desktop\"

\n

Adding a section

\n

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

\n

\"contact-form-add\"

\n

Section settings

\n

General

\n

\"contact-form-setting\"

\n
    \n
  1. \n

    Heading – this setting allows you to set text of the heading;

    \n
    2. \n
  2. \n

    Background image desktop – setting allows you to choose a background picture for the section on the desktop;

    \n
    3. \n
  3. \n

    Background image mobile – setting allows you to choose a background picture for the section on the mobile.

    \n
    4. \n
\n

Additional information

\n

\"contact-form-additional\"

\n

\"contact-form-additional2\"

\n

\"contact-form-additional3\"

\n
    \n
  1. \n

    Show additional information – this setting allows you to display additional information in the section;

    \n
    2. \n
  2. \n

    Label – this setting allows you to set a small label above the heading;

    \n
    3. \n
  3. \n

    Heading – this setting allows you to set text of the heading;

    \n
    4. \n
  4. \n

    Text – this setting allows you to set a description or paragraph under the heading;

    \n
    5. \n
  5. \n

    Show socials – this setting allows you to display social media icons;

    \n
    6. \n
  6. \n

    Location text – this setting allows you to set the address;

    \n
    7. \n
  7. \n

    Location icon – this setting allows you to choose an icon for the location block;

    \n
    8. \n
  8. \n

    Phone text – this setting allows you to set the phone number text;

    \n
    9. \n
  9. \n

    Phone icon – this setting allows you to choose an icon for the phone block;

    \n
    10. \n
  10. \n

    Email text – this setting allows you to set the email address text;

    \n
    11. \n
  11. \n

    Email icon – this setting allows you to choose an icon for the email block;

    \n
    12. \n
  12. \n

    Schedule text – this setting allows you to set the working hours or schedule text;

    \n
    13. \n
  13. \n

    Schedule icon – this setting allows you to choose an icon for the schedule block.

    \n
    14. \n
\n

Contact form

\n

\"contact-form-form\"

\n

\"contact-form-form2\"

\n

\"contact-form-form3\"

\n
    \n
  1. \n

    First name label – this setting allows you to set the label text for the first name field;

    \n
    2. \n
  2. \n

    First name placeholder – this setting allows you to set placeholder text for the first name field;

    \n
    3. \n
  3. \n

    First name required – this setting allows you to make the first name field required;

    \n
    4. \n
  4. \n

    Last name label – this setting allows you to set the label text for the last name field;

    \n
    5. \n
  5. \n

    Last name placeholder – this setting allows you to set placeholder text for the last name field;

    \n
    6. \n
  6. \n

    Last name required – this setting allows you to make the last name field required;

    \n
    7. \n
  7. \n

    Email label – this setting allows you to set the label text for the email field;

    \n
    8. \n
  8. \n

    Email placeholder – this setting allows you to set placeholder text for the email field;

    \n
    9. \n
  9. \n

    Subject label – this setting allows you to set the label text for the subject field;

    \n
    10. \n
  10. \n

    Subject placeholder – this setting allows you to set placeholder text for the subject field;

    \n
    11. \n
  11. \n

    Subject required – this setting allows you to make the subject field required;

    \n
    12. \n
  12. \n

    Message label – this setting allows you to set the label text for the message field;

    \n
    13. \n
  13. \n

    Message placeholder – this setting allows you to set placeholder text for the message field;

    \n
    14. \n
  14. \n

    Message required – this setting allows you to make the message field required;

    \n
    15. \n
  15. \n

    Privacy policy checkbox – this setting allows you to set the text displayed next to the privacy policy checkbox;

    \n
    16. \n
  16. \n

    Submit button label – this setting allows you to set the text of the submit button;

    \n
    17. \n
  17. \n

    Success message – this setting allows you to set the message displayed after successful form submission.

    \n
    18. \n
\n

Map

\n

\"contact-form-map\"

\n
    \n
  1. \n

    Google maps API key – the setting allows you to add a Google maps API key. Learn more about how to create an API key;

    \n
    2. \n
  2. \n

    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;

    \n
    3. \n
  3. \n

    Image map link – the setting allows you to set a link to the map;

    \n
    4. \n
  4. \n

    Image desktop – the setting allows you to set the map image for the desktop;

    \n
    5. \n
  5. \n

    Image mobile – the setting allows you to set the image for mobile.

    \n
    6. \n
\n

Colors

\n

\"contact-form-colors\"

\n
    \n
  1. \n

    Section background – this setting allows you to set the background color of the section;

    \n
    2. \n
  2. \n

    Big heading – this setting allows you to set the color of the big heading text;

    \n
    3. \n
  3. \n

    Overlay – this setting allows you to set the color of the overlay;

    \n
    4. \n
\n

Layout Settings

\n

\"contact-form-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Contact form","fieldGroupName":"manual_category_blocks","hash":"section-contact-form"},{"blockContent":"

\"login-template-desktop\"

\n

\"login-template-mobile\"

\n

Adding a section

\n

\"login-template-add\"

\n

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

\n

Section settings

\n

\"login-template-setting\"

\n

General

\n
    \n
  1. \n

    Text – this setting allows you to set text of the section;

    \n
    2. \n
  2. \n

    Image desktop – the setting allows you to select the image for background image on desktop resolutions;

    \n
    3. \n
  3. \n

    Image mobile – the setting allows you to select the image for background image on mobile resolutions.

    \n
    4. \n
\n

Layout

\n

\"login-template-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Login template","fieldGroupName":"manual_category_blocks","hash":"section-login-template"},{"blockContent":"

\"reset-template-desktop\"

\n

\"reset-template-mobile\"

\n

Adding a section

\n

\"reset-template-add\"

\n

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

\n

Section settings

\n

\"reset-template-setting\"

\n

General

\n
    \n
  1. \n

    Image desktop – the setting allows you to select the image for background image on desktop resolutions;

    \n
    2. \n
  2. \n

    Image mobile – the setting allows you to select the image for background image on mobile resolutions.

    \n
    3. \n
\n

Layout

\n

\"login-template-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

 

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

\"activate-template-desktop\"

\n

\"activate-template-desktop\"

\n

Adding a section

\n

\"activate-template-add\"

\n

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

\n

Section settings

\n

\"activate-template-setting\"

\n

General

\n
    \n
  1. \n

    Image desktop – the setting allows you to select the image for background image on desktop resolutions;

    \n
    2. \n
  2. \n

    Image mobile – the setting allows you to select the image for background image on mobile resolutions.

    \n
    3. \n
\n

Layout

\n

\"activate-template-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Activate template","fieldGroupName":"manual_category_blocks","hash":"section-activate-template"},{"blockContent":"

\"newsletter-popup-desktop\"

\n

\"newsletter-popup-mobile\"

\n

Adding a section

\n

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

\n

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

\n

\"newsletter-popup-add\"

\n

Section settings

\n

\"newsletter-popup-setting\"

\n

General

\n
    \n
  1. \n

    Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;

    \n
    2. \n
  2. \n

    Heading – setting allows you to set title text;

    \n
    3. \n
  3. \n

    Text – setting allows you to set description text;

    \n
    4. \n
  4. \n

    Input label – setting allows you to set input label text;

    \n
    5. \n
  5. \n

    Button submit label – setting allows you to set submit button text;

    \n
    6. \n
  6. \n

    Close button label – setting allows you to set close button text;

    \n
    7. \n
  7. \n

    Show socials – setting allows you to show/hide social links.

    \n
    8. \n
\n

Additional information

\n

\"newsletter-popup-additional\"

\n

The remaining settings (texts) are taken from the translations. Newsletter popup:

\n
    \n
  1. \n

    Label – the setting allows you to set the text for the input label;

    \n
    2. \n
  2. \n

    Success – message on successful subscription;

    \n
    3. \n
  3. \n

    Button label – setting allows you to set the label for the submit button.

    \n
    4. \n
\n","blockTitle":"Newsletter popup","fieldGroupName":"manual_category_blocks","hash":"section-Newsletter popup"},{"blockContent":"

\"register-template-desktop\"

\n

\"register-template-mobile\"

\n

Adding a section

\n

\"register-template-add\"

\n

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

\n

Section settings

\n

\"register-template-setting\"

\n

General

\n
    \n
  1. \n

    Text – this setting allows you to set text of the section;

    \n
    2. \n
  2. \n

    Image desktop – the setting allows you to select the image for background image on desktop resolutions;

    \n
    3. \n
  3. \n

    Image mobile – the setting allows you to select the image for background image on mobile resolutions.

    \n
    4. \n
\n

Layout

\n

\"register-template-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Register template","fieldGroupName":"manual_category_blocks","hash":"section-register-template"},{"blockContent":"

\"age-check-popup-desktop\"

\n

\"age-check-popup-mobile\"

\n

Adding a section

\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

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

\n

\"age-check-popup-add\"

\n

Section settings

\n

\"age-check-popup-setting\"

\n

General

\n
    \n
  1. \n

    Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;

    \n
    2. \n
  2. \n

    Heading – setting allows you to set title text;

    \n
    3. \n
  3. \n

    Text – setting allows you to set description text;

    \n
    4. \n
  4. \n

    Button label – setting allows you to set button text;

    \n
    5. \n
  5. \n

    Button close label – setting allows you to set close button text;

    \n
    6. \n
  6. \n

    Redirect link – link for redirect if the customer closes the popup. The “Google ” link is used by default.

    \n
    7. \n
\n","blockTitle":"Age check popup","fieldGroupName":"manual_category_blocks","hash":"section-age-check-popup"},{"blockContent":"

\"footer-desktop\"

\n

\"footer-mobile\"

\n

Adding a section

\n

\"footer-add\"

\n

The section is present by default in the Footer group.

\n

Section settings

\n

Ticker

\n

\"footer-ticker\"

\n
    \n
  1. \n

    Text – setting that allows you to set up text for ticker;

    \n
    2. \n
  2. \n

    Show divider – enable this setting to show the divider line in the ticker;

    \n
    3. \n
  3. \n

    Font size (desktop) – setting that allows you to set the font size of the ticker on desktop devices;

    \n
    4. \n
  4. \n

    Font size (mobile) – setting that allows you to set the font size of the ticker on mobile devices;

    \n
    5. \n
  5. \n

    Movement speed (desktop) – set the scrolling speed of the ticker on desktop (in seconds);

    \n
    6. \n
  6. \n

    Movement speed (mobile) – set the scrolling speed of the ticker on mobile (in seconds).

    \n
    7. \n
\n

General

\n

\"footer-settings\"

\n
    \n
  1. \n

    Copyright text – customize the copyright text;

    \n
      \n
    1. \n

      Default: “Copyright © %date%.”;

      \n
      2. \n
    2. \n

      “%date%” will be replaced with the current year.

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

    Show back to top button – the setting allows you to enable or disable the back to top button;

    \n
    3. \n
  3. \n

    Quick links – select the menu to display quick links at the bottom of the footer;

    \n
    4. \n
  4. \n

    Show payment icons – enable this setting to show the payment icons;

    \n
    5. \n
  5. \n

    Background decor image (desktop) – the setting allows you to select the background image for desktop resolutions;

    \n
    6. \n
  6. \n

    Background decor image (mobile) – the setting allows you to select the background image for mobile resolutions.

    \n
    7. \n
\n

Localization selectors

\n

\"footer-localization\"

\n

Country/Region Selector

\n
    \n
  1. \n

    Show country/region selector – toggle to enable or disable the selector.

    \n
    2. \n
\n

Language Selector

\n
    \n
  1. \n

    Show language selector – toggle to enable or disable the selector.

    \n
    2. \n
\n

Enter banner Settings

\n

\"footer-enter-banner\"

\n
    \n
  1. \n

    Enable Enter banner – the setting allows you to show the enter banner image;

    \n
    2. \n
  2. \n

    Enter banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    3. \n
  3. \n

    Enter banner image – the setting allows you to select the enter banner image;

    \n
    4. \n
  4. \n

    Enter banner color – the setting allows you to select the enter banner color.

    \n
    5. \n
\n
\n

Colors

\n

\"\"

\n
    \n
  1. \n

    Section background – the setting allows you to select a color for section background;

    \n
    2. \n
  2. \n

    Text – the setting allows you to select a color for the text of section;

    \n
    3. \n
  3. \n

    Text secondary – the setting allows you to select a color for the secondary text of section;

    \n
    4. \n
  4. \n

    Ticker text – the setting allows you to select a color for text of ticker;

    \n
    5. \n
  5. \n

    Social icons – the setting allows you to select a color for the icons;

    \n
    6. \n
  6. \n

    Social icons (hover) – the setting allows you to select a color for the icons on hover state;

    \n
    7. \n
  7. \n

    Dropdown link text – the setting allows you to select a color for dropdown link text;

    \n
    8. \n
  8. \n

    Dropdown link background (hover) – the setting allows you to select a color for dropdown link background on hover;

    \n
    9. \n
  9. \n

    Dropdown background – the setting allows you to select a color for dropdown background;

    \n
    10. \n
  10. \n

    Copyright text – the setting allows you to select a color for text of copyright;

    \n
    11. \n
  11. \n

    Scroll to top button border color – the setting allows you to select a border color for the scroll to top button;

    \n
    12. \n
  12. \n

    Scroll to top button color – the setting allows you to select a color for the scroll to top button icon;

    \n
    13. \n
  13. \n

    Scroll to top button background color – the setting allows you to select a background color for the scroll to top button;

    \n
    14. \n
  14. \n

    Scroll to top button border color (hover) – the setting allows you to select a border color for the scroll to top button on hover;

    \n
    15. \n
  15. \n

    Scroll to top button color (hover) – the setting allows you to select a color for the scroll to top button icon on hover;

    \n
    16. \n
  16. \n

    Scroll to top button background color (hover) – the setting allows you to select a background color for the scroll to top button on hover;

    \n
    17. \n
  17. \n

    Input border – the setting allows you to select a color for input border;

    \n
    18. \n
  18. \n

    Bottom border – the setting allows you to select a color for bottom border.

    \n
    19. \n
\n

Blocks settings

\n

Block type “Contact“

\n

Newsletter

\n

\"footer-newsletter\"

\n
    \n
  1. \n

    Heading – the setting allows you to select text for heading;

    \n
    2. \n
  2. \n

    Input label – the setting allows you to select text for input label;

    \n
    3. \n
  3. \n

    Success message – the setting allows you to select text for success message.

    \n
    4. \n
\n

Contact info

\n

\"footer-contat-info\"

\n
    \n
  1. \n

    Email heading – the setting allows you to select text for heading of email block;

    \n
    2. \n
  2. \n

    Email text – the setting allows you to select text for email block;

    \n
    3. \n
  3. \n

    Phone heading – the setting allows you to select text for heading of phone block;

    \n
    4. \n
  4. \n

    Phone text – the setting allows you to select text for phone block;

    \n
    5. \n
  5. \n

    Location heading – the setting allows you to select text for heading of location block;

    \n
    6. \n
  6. \n

    Location text – the setting allows you to select text for location block.

    \n
    7. \n
\n

Socials

\n

\"footer-social\"

\n
    \n
  1. \n

    Socials text – the setting allows you to select text for email block;

    \n
    2. \n
  2. \n

    Show socials – enable this setting to show socials.

    \n
    3. \n
\n

Follow on shop

\n

\"footer-shopfollow\"

\n
    \n
  1. \n

    Enable Follow on Shop – enable this setting to show follow on shop button.

    \n
    2. \n
\n

Block type “Menu“

\n

\"footer-menu\"

\n
    \n
  1. \n

    Enable Follow on Shop – select the menu to display menu links of the block.

    \n
    2. \n
\n","blockTitle":"Footer","fieldGroupName":"manual_category_blocks","hash":"section-footer"},{"blockContent":"

\"gallery-carousel\"

\n

Adding a section

\n

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

\n

\"gallery-carousel-add\"

\n

Section settings:

\n

General:

\n

\"gallery-carousel\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading;

    \n
    2. \n
  2. \n

    Images layout – the setting allows you to set the media aspect ratio.

    \n
    3. \n
\n

Layout:

\n

\"gallery-carousel-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Gallery carousel","fieldGroupName":"manual_category_blocks","hash":"section-gallery-carousel"},{"blockContent":"

\"faq-desktop\"

\n

Adding a section

\n

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

\n

\"FAQ-add\"

\n

Section settings:

\n

General:

\n

\"faq-setting\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the text;

    \n
    3. \n
  3. \n

    Button label – the setting allows you to set the text for button;

    \n
    4. \n
  4. \n

    Button link – the setting allows you to set the link for button;

    \n
    5. \n
  5. \n

    Button aria-label – the setting allows you to set the aria-label for button;

    \n
    6. \n
  6. \n

    Button style – the setting allows you to set the style for button;

    \n
    7. \n
\n

Enter & Exit banner Settings

\n

\"faq-enter-exit-banner\"

\n
    \n
  1. \n

    Enable Enter banner – the setting allows you to show the enter banner image;

    \n
    2. \n
  2. \n

    Enter banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    3. \n
  3. \n

    Enter banner image – the setting allows you to select the enter banner image;

    \n
    4. \n
  4. \n

    Enter banner color – the setting allows you to select the enter banner color;

    \n
    5. \n
  5. \n

    Enable exit banner – the setting allows you to show the exit banner image;

    \n
    6. \n
  6. \n

    Exit banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    7. \n
  7. \n

    Exit banner image – the setting allows you to select the exit banner image;

    \n
    8. \n
  8. \n

    Exit banner color – the setting allows you to select the exit banner color.

    \n
    9. \n
\n
\n

Layout:

\n

\"faq-layout\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Block settings

\n

\"faq-block-settings\"

\n
    \n
  1. \n

    Category – settings allow you to set a category for the block;

    \n
    2. \n
  2. \n

    Question – settings allow you to set a questions for the block;

    \n
    3. \n
  3. \n

    Answer – settings allow you to set a answer for the block;

    \n
    4. \n
\n","blockTitle":"FAQ","fieldGroupName":"manual_category_blocks","hash":"section-faq"},{"blockContent":"

\"trend-products-desktop\"

\n

\"trend-products-mobile\"

\n

Adding a section

\n

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

\n

\"trend-products-add\"

\n

Section settings

\n

\"trend-products-setting\"

\n

General

\n
    \n
  1. \n

    Heading – add a heading for the section.

    \n
    2. \n
\n

\"trend-products-colors\"

\n

Colors

\n
    \n
  1. \n

    Thumbnail slider background – the setting allows you to select a color for the background of thumbnail slider;

    \n
    2. \n
  2. \n

    Thumbnail active slide border – the setting allows you to select a color for active thumbnail slide border;

    \n
    3. \n
  3. \n

    Hotspot background – the setting allows you to select a color for hotspot background;

    \n
    4. \n
  4. \n

    Hotspot color – the setting allows you to select a color for hotspot icon;

    \n
    5. \n
  5. \n

    Hotspot border – the setting allows you to select a color for hotspot border;

    \n
    6. \n
  6. \n

    Hotspot background active – the setting allows you to select a color for active hotspot background;

    \n
    7. \n
  7. \n

    Hotspot color active – the setting allows you to select a color for active hotspot icon;

    \n
    8. \n
  8. \n

    Hotspot border active – the setting allows you to select a color for active hotspot border.

    \n
    9. \n
\n

\"trend-products-layout\"

\n

Layout

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Block settings

\n

The section has a limit on the amount of blocks. The maximum number of blocks is 4.

\n

\"trend-products-item\"

\n

General

\n
    \n
  1. \n

    Background image desktop – the setting allows you to select the background image for desktop resolutions;

    \n
    2. \n
  2. \n

    Background image mobile – the setting allows you to select the background image for mobile resolutions.

    \n
    3. \n
\n

\"trend-products-popup\"

\n

Product (1..5)

\n
    \n
  1. \n

    Popup heading – add a heading for popup.

    \n
    2. \n
  2. \n

    Product – the setting allows you to select a product for spot;

    \n
    3. \n
  3. \n

    Product image – the setting allows you to select a product image for spot;

    \n
    4. \n
  4. \n

    Spot horizontal position desktop – the setting allows you to set the horizontal position (desktop) of the hotspot;

    \n
    5. \n
  5. \n

    Spot vertical position desktop – the setting allows you to set the vertical position (desktop) of the hotspot;

    \n
    6. \n
  6. \n

    Spot horizontal position mobile – the setting allows you to set the horizontal position (mobile) of the hotspot;

    \n
    7. \n
  7. \n

    Spot vertical position mobile – the setting allows you to set the vertical position (mobile) of the hotspot;

    \n
    8. \n
\n","blockTitle":"Trend products","fieldGroupName":"manual_category_blocks","hash":"section-trend-products"},{"blockContent":"

\"blog-template-desktop\"

\n

Adding a section

\n

\"blog-template-add\"

\n

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

\n

Section settings

\n

Banner

\n

\"blog-template-banner\"

\n
    \n
  1. \n

    Banner image – the setting allows you to select the image for banner on desktop;

    \n
    2. \n
  2. \n

    Banner image mobile – the setting allows you to select the image for for banner on mobile.

    \n
    3. \n
\n

General

\n

\"blog-template-general\"

\n
    \n
  1. \n

    Paginate by – the setting allows you to set the number of visible articles per page;

    \n
    2. \n
  2. \n

    Pagination type – the setting allows you to choose pagination type(pagination/load-more/infinite-scroll);

    \n
    3. \n
  3. \n

    Load more button style – the settings allows you to set load more button style(first you should choose Load more in pagination type setting);

    \n
    4. \n
  4. \n

    Show filter by tag – the settings allows you to show all possible blog-post tags.

    \n
    5. \n
\n

Colors

\n

\"blog-template-color\"

\n
    \n
  1. \n

    Banner overlay – the setting allows you to set the main overlay of the banner;

    \n
    2. \n
  2. \n

    Banner bottom overlay – the setting allows you to set the additional bottom overlay of the banner;

    \n
    3. \n
  3. \n

    Banner text – the setting allows you to set the color of the banner text content.

    \n
    4. \n
\n

Layout

\n

\"blog-template-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Blog template","fieldGroupName":"manual_category_blocks","hash":"section-blog-template"},{"blockContent":"

\"order-template-desktop\"

\n

\"order-template-mobile\"

\n

Section settings

\n

Layout

\n

\"order-template-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile;

    \n
    5. \n
\n
\n
\n","blockTitle":"Order Template","fieldGroupName":"manual_category_blocks","hash":"section-order-template"},{"blockContent":"

\"account-template-desktop\"

\n

\"account-template-desktop1\"

\n

\"account-template-desktop2\"

\n

\"account-template-mobile\"

\n

Adding a section

\n

\"account-template-add\"

\n

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

\n

Section settings

\n

\"account-template-setting\"

\n

General

\n
    \n
  1. \n

    Continue shopping link – the setting that shows link for empty orders state.

    \n
    2. \n
\n

Layout

\n

\"account-template-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Account template","fieldGroupName":"manual_category_blocks","hash":"section-account-template"},{"blockContent":"

\"addresses-template-desktop\"

\n

\"addresses-template-mobile\"

\n

Adding a section

\n

\"addresses-template-add\"

\n

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

\n

Section settings

\n

Layout

\n

\"addresses-template-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Addresses template","fieldGroupName":"manual_category_blocks","hash":"section-addresses-template"},{"blockContent":"

\"products-gallery-desktop\"

\n

\"products-gallery-mobile\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"products-gallery-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to specify the heading of the section;

    \n
    2. \n
  2. \n

    Products – the setting allows you to specify the products of the section. Maximum 6 products.

    \n
    3. \n
\n

Enter & Exit banner Settings

\n

\"enter-exit-banner-settings\"

\n
    \n
  1. \n

    Enable Enter banner – the setting allows you to show the enter banner image;

    \n
    2. \n
  2. \n

    Enter banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    3. \n
  3. \n

    Enter banner image – the setting allows you to select the enter banner image;

    \n
    4. \n
  4. \n

    Enter banner color – the setting allows you to select the enter banner color;

    \n
    5. \n
  5. \n

    Enable exit banner – the setting allows you to show the exit banner image;

    \n
    6. \n
  6. \n

    Exit banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    7. \n
  7. \n

    Exit banner image – the setting allows you to select the exit banner image;

    \n
    8. \n
  8. \n

    Exit banner color – the setting allows you to select the exit banner color.

    \n
    9. \n
\n
\n

Layout Settings

\n

\"products-gallery-settings-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Blocks settings

\n

Background image:

\n

\"products-gallery-settings-block\"

\n

Maximum 6 blocks.

\n
    \n
  1. \n

    Image desktop – the setting allows you to set the background image of the section (2058 x 2058px recommended);

    \n
    2. \n
  2. \n

    Image desktop – the setting allows you to set the background image of the section for the mobile (1534 x 1150px recommended);

    \n
    3. \n
  3. \n

    Border color – the setting allows you to set the border color for the product image in the section.

    \n
    4. \n
\n","blockTitle":"Products gallery","fieldGroupName":"manual_category_blocks","hash":"section-products-gallery"},{"blockContent":"

\"page-404-desktop\"

\n

\"page-404-mobile\"

\n

Adding a section

\n

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

\n

Section settings

\n

General

\n

\"page-404-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the text content;

    \n
    3. \n
  3. \n

    Link label – the setting allows you to set the label for the link;

    \n
    4. \n
  4. \n

    Link URL – the setting allows you to set the URL for the link;

    \n
    5. \n
  5. \n

    Additional links – the setting allows you to set the list of navigation items;

    \n
    6. \n
  6. \n

    Image behind heading – the setting allows you to set the image behind heading (770 x 770px recommended);

    \n
    7. \n
  7. \n

    Background image (desktop) – the setting allows you to set the background image for the desktop (3840 x 2160px recommended);

    \n
    8. \n
  8. \n

    Background image (mobile) – the setting allows you to set the background image for the mobile (1534 x 2048px recommended).

    \n
    9. \n
\n

Colors

\n

\"page-404-settings-colors\"

\n
    \n
  1. \n

    Section background – the setting allows you to set the background color of the section;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the color of the text;

    \n
    3. \n
  3. \n

    Image overlay – the setting allows you to set the overlay color of the section background image.

    \n
    4. \n
\n

Layout Settings

\n

\"page-404-settings-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile;

    \n
    6. \n
  6. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    7. \n
  7. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    8. \n
  8. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    9. \n
  9. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    10. \n
\n","blockTitle":"Page 404","fieldGroupName":"manual_category_blocks","hash":"section-page-404"},{"blockContent":"

\"featured-collection-desktop\"

\n

\"featured-collection-mobile\"

\n

\"featured-collection-mobile2\"

\n

Adding a section

\n

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

\n

\"featured-collection-add\"

\n

Section settings

\n

General

\n

\"featured-collection-setting\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the text for the title;

    \n
    2. \n
  2. \n

    Collection – the setting allows you to select a collection;

    \n
    3. \n
  3. \n

    Products – customization allows you to choose products. Replaces collection when selected.;

    \n
    4. \n
  4. \n

    Products per row desktop – the settings allow you to choose the number of products per row on the desktop.

    \n
    5. \n
  5. \n

    Products per row mobile – the settings allow you to choose the number of products per row on the mobile.

    \n
    6. \n
  6. \n

    Enable carousel on mobile – settings allow you to enable the carousel on a mobile device.

    \n
    7. \n
\n

Enter & Exit banner Settings

\n

\"featured-collection-enter-exit-banner-settings\"

\n
    \n
  1. \n

    Enable Enter banner – the setting allows you to show the enter banner image;

    \n
    2. \n
  2. \n

    Enter banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    3. \n
  3. \n

    Enter banner image – the setting allows you to select the enter banner image;

    \n
    4. \n
  4. \n

    Enter banner color – the setting allows you to select the enter banner color;

    \n
    5. \n
  5. \n

    Enable exit banner – the setting allows you to show the exit banner image;

    \n
    6. \n
  6. \n

    Exit banner type – the setting allows you to select the type of banner. You can choose either an image or a color;

    \n
    7. \n
  7. \n

    Exit banner image – the setting allows you to select the exit banner image;

    \n
    8. \n
  8. \n

    Exit banner color – the setting allows you to select the exit banner color.

    \n
    9. \n
\n
\n

Layout Settings

\n

\"featured-collection-layout\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Featured collection","fieldGroupName":"manual_category_blocks","hash":"section-featured-collection"},{"blockContent":"

\"images-horizontal-scroll\"

\n

\"images-horizontal-scroll-mobile\"

\n

Adding a section

\n

In order to add a section, you need to go to Customizer → Add Section → Images horizontal scroll.

\n

\"images-horizontal-scroll-add\"

\n

Section settings

\n

\"images-horizontal-scroll-setting\"

\n

General

\n
    \n
  1. \n

    Enable background decor image – the setting allows you to set the background decoration image.

    \n
    2. \n
\n

\"images-horizontal-scroll-layout\"

\n

Layout

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n

Block settings

\n

\"images-horizontal-scroll-blocksetting\"

\n

General

\n
    \n
  1. \n

    Label – the setting allows you to set the text of the label;

    \n
    2. \n
  2. \n

    Heading – the setting allows you to set the text of the heading;

    \n
    3. \n
  3. \n

    Text – the setting allows you to set text content;

    \n
    4. \n
  4. \n

    Text alignment – the setting allows you to select the alignment of the text;

    \n
    5. \n
  5. \n

    Image– the setting allows you to select the image.

    \n
    6. \n
\n","blockTitle":"Images horizontal scroll","fieldGroupName":"manual_category_blocks","hash":"section-images-horizontal-scroll"},{"blockContent":"

This section is available on the “Collection list” template. You can see all collections from your store on this template.

\n

\"list-collections-add\"

\n

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

\n

Section settings

\n

Banner

\n

\"list-collections-banner-setting\"

\n
    \n
  1. \n

    Banner image – the setting allows you to select the image for banner on desktop;

    \n
    2. \n
  2. \n

    Banner image mobile – the setting allows you to select the image for for banner on mobile.

    \n
    3. \n
\n

General

\n

\"list-collections-settings\"

\n
    \n
  1. \n

    Custom collections – setting allows you to select a collection list instead of the standard collection list;

    \n
    2. \n
  2. \n

    Sort collections by: – setting allows you to sort the list of collections. You can select: Alphabetically, A-Z / Alphabetically, Z-A / Date, new to old / Date, old to new / Product count, high to low / Product count, low to high. Works only for custom collections;

    \n
    3. \n
  3. \n

    Heading – setting allows you to set the text for the title;

    \n
    4. \n
  4. \n

    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;

    \n
    5. \n
  5. \n

    Show products count – show the product count of the collection under the title.

    \n
    6. \n
\n

\"list-collections-colors\"

\n
    \n
  1. \n

    Banner overlay – the setting allows you to specify the color of the banner overlay;

    \n
    2. \n
  2. \n

    Banner text – the setting allows you to specify the text color of the banner.

    \n
    3. \n
\n

Layout

\n

\"list-collections-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If the “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"List collections","fieldGroupName":"manual_category_blocks","hash":"section-list-collections"},{"blockContent":"

\"collection-banners\"

\n

Adding a section

\n

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

\n

Section settings

\n

General:

\n

\"collection-banners-setting\"

\n
    \n
  1. \n

    Heading – setting allows you to set the text for the heading;

    \n
    2. \n
  2. \n

    Text – setting allows you to set the text for the text;

    \n
    3. \n
  3. \n

    Images size – the setting allows you to set the size of the images.

    \n
    4. \n
  4. \n

    Button label – the setting allows you to set the label for the button;

    \n
    5. \n
  5. \n

    Button link – the setting allows you to select a button link;

    \n
    6. \n
  6. \n

    Button aria-label – the setting allows you to set the aria-label for the button. This attribute allows screen readers to better convey information to people with disabilities.

    \n
    7. \n
\n

Layout

\n

\"list-collections-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If the “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Block images

\n

\"block-images-setting\"

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

In the section you can add a block “Images”. You can add max 4 blocks for 4 columns. In each column you can add your images. Block settings:

\n
    \n
  1. \n

    First image – the setting allows you to set first image in the block;

    \n
    2. \n
  2. \n

    Second image – the setting allows you to set second image in the block;

    \n
    3. \n
  3. \n

    Third image – the setting allows you to set third image in the block;

    \n
    4. \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n","blockTitle":"Collection banners","fieldGroupName":"manual_category_blocks","hash":"section-collection-banners"},{"blockContent":"

\"banner-products-scroll\"

\n

\"banner-products-scroll2\"

\n

\"banner-products-scroll-mobile\"

\n

Adding a section

\n

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

\n

\"banner-products-scroll-add\"

\n

Section settings:

\n

General:

\n

\"banner-products-scroll-settings\"

\n

\"banner-products-scroll-settings2\"

\n

\"banner-products-scroll-settings3\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the text;

    \n
    3. \n
  3. \n

    Image desktop – the setting allows you to set an image for the background;

    \n
    4. \n
  4. \n

    Image mobile – the setting allows you to set an image for the background of mobile devices;

    \n
    5. \n
  5. \n

    Cards scroll direction – the setting allows you to set the direction of card scrolling;

    \n
    6. \n
  6. \n

    Products – the settings allow you to add products;

    \n
    7. \n
  7. \n

    Products additionaly – the settings allow you to add products, these products may be displayed with the ‘Vertical’ scroll direction.

    \n
    8. \n
  8. \n

    Heading additional – the setting allows you to set the heading for additional block;
    \n\"additional-block\"

    \n
    9. \n
  9. \n

    Subheading additional – the setting allows you to set the text for additional block;

    \n
    10. \n
  10. \n

    Link additional label – the setting allows you to insert text for the link for additional block;

    \n
    11. \n
  11. \n

    Link additional – the setting allows you to insert links;

    \n
    12. \n
\n

Colors

\n

\"banner-products-scroll-colors\"

\n
    \n
  1. \n

    Image overlay – the setting allows you to choose a color for the overlay background;

    \n
    2. \n
  2. \n

    Text banner – the settings allow you to choose the color of the text in the banner;

    \n
    3. \n
\n

Layout:

\n

\"banner-products-scroll-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Banner products scroll","fieldGroupName":"manual_category_blocks","hash":"section-banner-products-scroll"},{"blockContent":"

This page is displayed as the default template for other pages

\n

\"page-template\"

\n

Section settings

\n

Banner

\n

\"page-template-settings\"

\n
    \n
  1. Banner image – the setting allows you to specify a banner background image on desktop;
    \n\"page-template-image\"
    2. \n
  2. Banner image mobile – the setting allows you to specify a banner background image on mobile.
    \n\"page-template-image-mobile\"
    3. \n
\n

Colors

\n

\"page-template-image-color\"

\n
    \n
  1. \n

    Banner text – the setting allows you to specify the text color of the banner;

    \n
    2. \n
  2. \n

    Banner overlay – the setting allows you to specify the color of the banner overlay;

    \n
    3. \n
  3. \n

    Banner bottom overlay – the setting allows you to specify the overlay color for the bottom of the background.

    \n
    4. \n
\n

\"page-template-color1\"

\n

Layout

\n

\"page-template-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If the “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Page template","fieldGroupName":"manual_category_blocks","hash":"section-page-template"},{"blockContent":"

\"announcement-bar-timer\"

\n

\"announcement-bar-ticker\"

\n

Adding a section

\n

\"announcement-bar-add\"

\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

Section settings

\n

General

\n

\"announcement-bar-setting\"

\n
    \n
  1. \n

    Layout – the setting is responsible for choosing the type of display. There are three options to choose from:

    \n\n
    2. \n
\n

Slideshow

\n

\"announcement-bar-slideshow\"

\n
    \n
  1. \n

    Enable autoplay – the setting allows you to enable autoplay for the carousel;

    \n
    2. \n
  2. \n

    Autoplay speed – the setting allows you to change the autoplay speed of the carousel;

    \n
    3. \n
\n

Ticker

\n

\"announcement-bar-ticker\"

\n
    \n
  1. \n

    Text – the setting allows you to set the text of the ticker;

    \n
    2. \n
  2. \n

    Divider image – this setting allows you to add an image for the text;

    \n
    3. \n
  3. \n

    Movement speed (desktop) – the setting allows you to set the ticker animation speed on the desktop;

    \n
    4. \n
  4. \n

    Movement speed (mobile) – the setting allows you to set the ticker animation speed on the mobile.

    \n
    5. \n
\n

Colors

\n

\"announcement-bar-colors\"

\n
    \n
  1. \n

    Background – the setting allows you to set the section background color;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the text color;

    \n
    3. \n
  3. \n

    Discount block background – the setting allows you to set the background color of the Discount block;

    \n
    4. \n
  4. \n

    Discount block text – the settings allow you to set the text color of the Discount block;

    \n
    5. \n
  5. \n

    Discount block border – the settings allow you to set the border color of the Discount block;

    \n
    6. \n
\n

Block settings

\n

Slide content

\n

\"announcement-bar-slide-content\"

\n
    \n
  1. \n

    Text – the setting allows you to set the text content;

    \n
    2. \n
  2. \n

    Link label – the settings allow you to add text for the link;

    \n
    3. \n
  3. \n

    Link URL – the setting allows you to add links;

    \n
    4. \n
  4. \n

    Discount code – the setting allows you to add text for the Discount code;

    \n
    5. \n
  5. \n

    Discount label – the setting allows you to add text for the Discount labe;
    \n\"announcement-bar-timer\"

    \n
    6. \n
  6. \n

    Year – the setting allows you to set the years until the end of the countdown;

    \n
    7. \n
  7. \n

    Month – the setting allows you to set the months until the end of the countdown;

    \n
    8. \n
  8. \n

    Day – the setting allows you to set the days until the end of the countdown;

    \n
    9. \n
  9. \n

    Hour – the setting allows you to set the hours until the end of the countdown;

    \n
    10. \n
  10. \n

    Timezone – the setting allows you to set the Timezone of the countdown;

    \n
    11. \n
\n","blockTitle":"Announcement bar","fieldGroupName":"manual_category_blocks","hash":"section-announcement-bar"},{"blockContent":"

\"sticky-images\"

\n

\"sticky-images-mobile\"

\n

Adding a section

\n

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

\n

\"sticky-images-add\"

\n

Section settings

\n

General

\n

\"sticky-images-section\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the heading;

    \n
    2. \n
  2. \n

    Subheading – the setting allows you to set the subheading;

    \n
    3. \n
  3. \n

    Text – the setting allows you to set the text;

    \n
    4. \n
  4. \n

    Button label – the setting allows you to set the text for button;

    \n
    5. \n
  5. \n

    Button link – the setting allows you to set the link for button;

    \n
    6. \n
  6. \n

    Button style – the setting allows you to set the style for button;

    \n
    7. \n
  7. \n

    Enable background decor image – this option allows you to enable decor image;

    \n
    8. \n
\n

Layout

\n

\"banner-products-scroll-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n

Block settings

\n

\"sticky-images-blocksetting\"

\n
    \n
  1. \n

    Image – the settings allow you to add an image for the block;

    \n
    2. \n
  2. \n

    Image position – the setting allows you to choose the position from left or right;

    \n
    3. \n
  3. \n

    Image transparent – the setting allows you to make the image transparent;

    \n
    4. \n
\n","blockTitle":" Sticky images","fieldGroupName":"manual_category_blocks","hash":"section-sticky-images"},{"blockContent":"

\"faq-section\"

\n

With this section, you can add basic FAQ blocks to your store.

\n

Adding a Section

\n

\"faq\"

\n

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

\n

Section settings

\n

General

\n

\"faq-heading\"

\n
    \n
  1. \n

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

    \n
    2. \n
\n

\"banner-products-scroll-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n

Blocks settings

\n

Block Question and answer

\n

\"faq-block\"

\n
    \n
  1. \n

    Heading – accordion title, question;

    \n
    2. \n
  2. \n

    Text – response, accordion content;

    \n
    3. \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-block-heading\"

\n

Heading – title, category name.

\n
\n

Additional information

\n
    \n
  1. \n

    The Question and answer block is not displayed if the settings for the Heading and Text fields are not specified;

    \n
    2. \n
  2. \n

    The Category block is not displayed if the settings for the Heading field are not specified;

    \n
    3. \n
\n","blockTitle":"FAQ template","fieldGroupName":"manual_category_blocks","hash":"section-faq-template"},{"blockContent":"

\"contact-template\"

\n

Adding a section

\n

\"contact-template-settings\"

\n

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

\n
\n

Section settings

\n

Banner

\n

\"contact-template-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the text for the banner;

    \n
    2. \n
  2. \n

    Image – the setting allows you to select the image for banner on desktop;

    \n
    3. \n
  3. \n

    Image mobile – the setting allows you to select the image for for banner on mobile.

    \n
    4. \n
\n

Colors

\n

\"contact-template-colors\"

\n
    \n
  1. \n

    Banner text – the setting allows you to set the color of the banner text content;

    \n
    2. \n
  2. \n

    Banner overlay – the setting allows you to set the main overlay of the banner;

    \n
    3. \n
  3. \n

    Banner bottom overlay – the setting allows you to set the additional bottom overlay of the banner.

    \n
    4. \n
\n

Layout

\n

\"page-template-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Contact template","fieldGroupName":"manual_category_blocks","hash":"section-contact-template"},{"blockContent":"

\"slideshow-desktop\"

\n

\"slideshow-mobile\"

\n

Adding a section

\n

\"slideshow-add\"

\n

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

\n

Section settings

\n

\"slideshow-settings\"

\n
    \n
  1. \n

    Enable loop – the setting is responsible for setting the infinite scrolling of the slider;

    \n
    2. \n
  2. \n

    Enable autoplay – the setting is responsible for setting the automatic switching of slides;

    \n
    3. \n
  3. \n

    Autoplay speed – the setting is responsible for the speed of automatic switching of slides;

    \n
    4. \n
  4. \n

    Animation speed – setting allows you to set the animation speed of switching slides;

    \n
    5. \n
  5. \n

    Animation type – setting allows you to set the type of animation for switching slides:

    \n\n
    6. \n
\n

Colors

\n

\"slideshow-colors\"

\n
    \n
  1. \n

    Progress bar – the setting allows you to set the color of the progress bar;

    \n
    2. \n
  2. \n

    Arrows – the setting allows you to set the color of the arrow buttons;

    \n
    3. \n
  3. \n

    Arrows (hover) – the setting allows you to set the hover color of the arrow buttons;

    \n
    4. \n
  4. \n

    Next slide label – the setting allows you to set the color of the next slide label;

    \n
    5. \n
  5. \n

    Next slide heading – the setting allows you to set the color of the next slide text.

    \n
    6. \n
\n

Layout

\n

\"slideshow-layout\"

\n
    \n
  1. \n

    Desktop section height – the setting is responsible for the height of the section for the desktop. The height of the section also depends on the height of the slider content. If the content height is greater than the specified height in the customization, the section height will be equal to the content height;

    \n
    2. \n
  2. \n

    Mobile section height – the setting is responsible for the height of the section for the mobile. The height of the section also depends on the height of the slider content. If the content height is greater than the specified height in the customization, the section height will be equal to the content height;

    \n
    3. \n
  3. \n

    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 settings, you will fit the announcement bar, header, and slideshow on one screen. The height of the section also depends on the height of the slider content. If the content height is greater than the specified height in the customization, the section height will be equal to the content height;

    \n
    4. \n
  4. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    5. \n
  5. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    6. \n
  6. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    7. \n
  7. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    8. \n
  8. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    9. \n
\n

Blocks settings

\n

Block Image

\n

\"slideshow-block-image\"

\n

General

\n

\"slideshow-image-setting\"

\n
    \n
  1. \n

    Image (desktop) – the setting allows you to set the image for the desktop. Also used for thumbnail. 3776 x 2160px recommended;

    \n
    2. \n
  2. \n

    Image (mobile) – the setting allows you to set the image for the mobile. 1470 x 2048px recommended;

    \n
    3. \n
  3. \n

    Heading – the setting allows you to set the text for the title;

    \n
    4. \n
  4. \n

    Text – the setting allows you to set the text for the text;

    \n
    5. \n
  5. \n

    Button label – the setting allows you to set the label for the label;

    \n
    6. \n
  6. \n

    Button aria-label – the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;

    \n
    7. \n
  7. \n

    Button link – the setting allows you to set a link for the button;

    \n
    8. \n
  8. \n

    Open link in a new tab – the setting allows you to indicate how the link will open, in the current tab or the new;

    \n
    9. \n
  9. \n

    Heading font size (desktop) – the setting allows you to specify the font size on desktop.

    \n
    10. \n
\n

Colors

\n

\"slideshow-image-color\"

\n
    \n
  1. \n

    Background – the setting allows you to set the background color of the slide;

    \n
    2. \n
  2. \n

    Overlay – the setting allows you to set the color for the overlay;

    \n
    3. \n
  3. \n

    Heading – the setting allows you to set the color for the header;

    \n
    4. \n
  4. \n

    Text – the setting allows you to set the color for the description;

    \n
    5. \n
  5. \n

    Button label – the setting allows you to set the color for the button label;

    \n
    6. \n
  6. \n

    Button background – the setting allows you to set the background color for the button;

    \n
    7. \n
  7. \n

    Button border – the setting allows you to set the border color for the button;

    \n
    8. \n
  8. \n

    Button label (hover) – the setting allows you to set the color for the button label on hover;

    \n
    9. \n
  9. \n

    Button background (hover) – the setting allows you to set the background color for the button on hover.

    \n
    10. \n
\n

Block HTML Video

\n

\"blockhtml-video\"

\n

General

\n

\"blockhtml-video-setting\"

\n

\"blockhtml-video-setting2\"

\n
    \n
  1. \n

    Video (desktop) – the setting allows you to select a video from the picker for the desktop;

    \n
    2. \n
  2. \n

    Video (mobile) – the setting allows you to select a video from the picker for the mobile;

    \n
    3. \n
  3. \n

    Preview image (desktop) – the setting allows you to set the image for the desktop;

    \n
    4. \n
  4. \n

    Preview image (mobile) – the setting allows you to set the image for the mobile;

    \n
    5. \n
  5. \n

    Heading – the setting allows you to set the text for the title;

    \n
    6. \n
  6. \n

    Text – the setting allows you to set the text for the text;

    \n
    7. \n
  7. \n

    Button label – the setting allows you to set the label for the label;

    \n
    8. \n
  8. \n

    Button aria-label – the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;

    \n
    9. \n
  9. \n

    Button link – the setting allows you to set a link for the button;

    \n
    10. \n
  10. \n

    Open link in a new tab – the setting allows you to indicate how the link will open, in the current tab or the new;

    \n
    11. \n
  11. \n

    Heading font size (desktop) – the setting allows you to specify the font size on desktop.

    \n
    12. \n
\n

Video settings

\n

\"video-setting\"

\n
    \n
  1. \n

    Play type – the setting allows you to set the playback type for the video.

    \n
    2. \n
\n

Colors

\n

\"video-colors\"

\n
    \n
  1. \n

    Background – the setting allows you to set the background color of the slide;

    \n
    2. \n
  2. \n

    Overlay – the setting allows you to set the color for the overlay;

    \n
    3. \n
  3. \n

    Heading – the setting allows you to set the color for the header;

    \n
    4. \n
  4. \n

    Text – the setting allows you to set the color for the description;

    \n
    5. \n
  5. \n

    Button label – the setting allows you to set the color for the button label;

    \n
    6. \n
  6. \n

    Button background – the setting allows you to set the background color for the button;

    \n
    7. \n
  7. \n

    Button border – the setting allows you to set the border color for the button;

    \n
    8. \n
  8. \n

    Button label (hover) – the setting allows you to set the color for the button label on hover;

    \n
    9. \n
  9. \n

    Button background (hover) – the setting allows you to set the background color for the button on hover.

    \n
    10. \n
\n

Block Vimeo/Youtube Video

\n

\"vimeo-youtube-video\"

\n

General

\n

\"vimeo-youtube-video-setting\"

\n

\"vimeo-youtube-video-setting2\"

\n
    \n
  1. \n

    Video URL (desktop) – the setting allows you to set a link to the video for the desktop;

    \n
    2. \n
  2. \n

    Video URL (mobile) – the setting allows you to set a link to a video for the mobile;

    \n
    3. \n
  3. \n

    Preview image (desktop) – the setting allows you to set the image for the desktop;

    \n
    4. \n
  4. \n

    Preview image (mobile) – the setting allows you to set the image for the mobile;

    \n
    5. \n
  5. \n

    Heading – the setting allows you to set the text for the title;

    \n
    6. \n
  6. \n

    Text – the setting allows you to set the text for the text;

    \n
    7. \n
  7. \n

    Button label – the setting allows you to set the label for the label;

    \n
    8. \n
  8. \n

    Button aria-label – the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;

    \n
    9. \n
  9. \n

    Button link – the setting allows you to set a link for the button;

    \n
    10. \n
  10. \n

    Open link in a new tab – the setting allows you to indicate how the link will open, in the current tab or the new;

    \n
    11. \n
  11. \n

    Heading font size (desktop) – the setting allows you to specify the font size on desktop.

    \n
    12. \n
\n

Video settings

\n

\"video-setting\"

\n
    \n
  1. \n

    Play type – the setting allows you to set the playback type for the video.

    \n
    2. \n
\n

Colors

\n

\"video-colors\"

\n
    \n
  1. \n

    Background – the setting allows you to set the background color of the slide;

    \n
    2. \n
  2. \n

    Overlay – the setting allows you to set the color for the overlay;

    \n
    3. \n
  3. \n

    Heading – the setting allows you to set the color for the header;

    \n
    4. \n
  4. \n

    Text – the setting allows you to set the color for the description;

    \n
    5. \n
  5. \n

    Button label – the setting allows you to set the color for the button label;

    \n
    6. \n
  6. \n

    Button background – the setting allows you to set the background color for the button;

    \n
    7. \n
  7. \n

    Button border – the setting allows you to set the border color for the button;

    \n
    8. \n
  8. \n

    Button label (hover) – the setting allows you to set the color for the button label on hover;

    \n
    9. \n
  9. \n

    Button background (hover) – the setting allows you to set the background color for the button on hover.

    \n
    10. \n
\n","blockTitle":" Slideshow","fieldGroupName":"manual_category_blocks","hash":"section-slideshow"},{"blockContent":"

\"gift-card\"

\n

Adding a section

\n

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

\n
\n

Section settings

\n

\"gift-card-setting\"

\n

General settings

\n
    \n
  1. \n

    Heading – a heading for the section;

    \n
    2. \n
  2. \n

    Logo – the setting allows you to specify a logo, otherwise the name of the store will be displayed;

    \n
    3. \n
  3. \n

    Logo width – setting allows you to specify the size of the logo;

    \n
    4. \n
  4. \n

    Start shopping button style – the setting allows you to set the style of the “Start shipping” button;

    \n
    5. \n
  5. \n

    Print button style – the setting allows you to set the style of the “Print” button;

    \n
    6. \n
  6. \n

    Image block background – the setting allows you to set background color to the image column block;

    \n
    7. \n
  7. \n

    Enable background decor image – the setting allows you to show section decor image;

    \n
    8. \n
\n

Layout

\n

\"layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

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

\"product-recommendations\"

\n

The section allows you to display product recommendations.

\n
\n

Adding a section

\n

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

\n

\"product-recommendations-add\"

\n
\n

Section settings

\n

General

\n

\"also-like-general\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the text for the title;

    \n
    2. \n
  2. \n

    Products to show – the setting allows you to set how many products to show;

    \n
    3. \n
  3. \n

    Use Shopify recommendations – the setting allows you to use the list of products that Shopify provides for recommendations. Read more here: https://shopify.dev/themes/product-merchandising/recommendations;

    \n
    4. \n
  4. \n

    Resourse collection – the setting allows you to use your collection as a recommendation list. Works if Shopify recommendations are disabled;

    \n
    5. \n
\n

Layout Settings

\n

\"product-recommendations-layout\"

\n
    \n
  1. \n

    Products per row desktop – the settings allow you to choose the number of products per row on the desktop.

    \n
    2. \n
  2. \n

    Products per row mobile – the settings allow you to choose the number of products per row on the mobile.

    \n
    3. \n
  3. \n

    Enable carousel on mobile – settings allow you to enable the carousel on a mobile device.

    \n
    4. \n
  4. \n

    Container width – section container settings;

    \n
    5. \n
  5. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    6. \n
  6. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    7. \n
  7. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    8. \n
  8. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    9. \n
\n","blockTitle":"Product recommendations","fieldGroupName":"manual_category_blocks","hash":"section-product-recommendations"},{"blockContent":"

\"recently-viewed\"

\n

The section allows you to display the last-viewed products.

\n

Adding a Section

\n

\"recently-viewed-add\"

\n

The section can only be added on the product page.

\n

Section settings

\n

General

\n

\"recently-viewed-general\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the section title;

    \n
    2. \n
  2. \n

    Products to show – the setting allows you to set how many products to show.

    \n
    3. \n
\n

Layout

\n

\"recently-viewed-layout\"

\n
    \n
  1. \n

    Products per row (desktop) – the setting allows you to select the number of cards displayed in a row on the desktop;

    \n
    2. \n
  2. \n

    Products per row (mobile) – the setting allows you to select the number of cards displayed in a row on the mobile;

    \n
    3. \n
  3. \n

    Enable carousel on mobile – the setting allows you to display cards in a carousel instead of a column;

    \n
    4. \n
  4. \n

    Container width – a container width of the section. If the “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    5. \n
  5. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    6. \n
  6. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    7. \n
  7. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    8. \n
  8. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    9. \n
\n","blockTitle":"Recently Viewed","fieldGroupName":"manual_category_blocks","hash":"section-recently-viewed"},{"blockContent":"

\"product-banner\"

\n

\"product-banner\"

\n

Adding a section

\n

\"product-banner-add\"

\n

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

\n

Section settings

\n

\"product-banner-setting\"

\n
    \n
  1. \n

    Decor image desktop – the setting allows you to set the desktop decor image;

    \n
    2. \n
  2. \n

    Decor image mobile – the setting allows you to set the mobile decor image.

    \n
    3. \n
\n

Colors

\n

\"product-banner-color\"

\n
    \n
  1. \n

    Progress bar background – the setting allows you to set the background color of the progress bar;

    \n
    2. \n
  2. \n

    Progress bar background fill – the setting allows you to set the background color of the progress bar fill.

    \n
    3. \n
\n

Layout

\n

\"product-banner-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

Blocks settings

\n

General

\n

\"product-banner-block-setting\"

\n
    \n
  1. \n

    Label – the setting allows you to set the text for the label;

    \n
    2. \n
  2. \n

    First line heading – the setting allows you to set the first line text for the title;

    \n
    3. \n
  3. \n

    Second line heading – the setting allows you to set the second line text for the title;

    \n
    4. \n
  4. \n

    Media image – the setting allows you to set the media image of the block.

    \n
    5. \n
  5. \n

    Media heading – the setting allows you to set the heading under the image;

    \n
    6. \n
  6. \n

    Media subheading – the setting allows you to set the subheading under the heading;

    \n
    7. \n
  7. \n

    Button label – the setting allows you to set the label for the label;

    \n
    8. \n
  8. \n

    Button link – the setting allows you to set a link for the button.

    \n
    9. \n
\n

Colors

\n

\"product-banner-block-color\"

\n
    \n
  1. \n

    Background – the setting allows you to set the background color of the slide;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set the color for the text;

    \n
    3. \n
  3. \n

    Media subheading – the setting allows you to set the color for the subheading;

    \n
    4. \n
  4. \n

    Button text – the setting allows you to set the color for the button label;

    \n
    5. \n
  5. \n

    Button background – the setting allows you to set the background color for the button;

    \n
    6. \n
  6. \n

    Button border – the setting allows you to set the border color for the button;

    \n
    7. \n
  7. \n

    Button text (hover) – the setting allows you to set the color for the button label on hover;

    \n
    8. \n
  8. \n

    Button background (hover) – the setting allows you to set the background color for the button on hover.

    \n
    9. \n
\n","blockTitle":"Product banner","fieldGroupName":"manual_category_blocks","hash":"section-product-banner"},{"blockContent":"

\"product-template\"

\n

Adding a section

\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-media\"

\n
    \n
  1. \n

    Enable zoom – the setting allows you to enable the Zoom function that appears when you click on the image;

    \n
    2. \n
  2. \n

    Media layout – the setting allows you to choose the appearance of the product image gallery (Carousel, Stacked, Stacked 2 columns)

    \n
    3. \n
  3. \n

    Media height – the setting allows you to select the size of the image. Has several options: Full size, Square, Fit to screen. Note: “Fit to screen” on the mobile will be the same as “Full size”;

    \n
    4. \n
  4. \n

    Image object fit – the setting allows you to select object fit variation for main media slider;

    \n
    5. \n
  5. \n

    Enable masonry layout – this feature eliminates vertical gaps between images of different aspect ratios by packing them into a dense, staggered grid. This setting applies to Desktop only. It requires Media layout to be set to “Stacked 2 columns” and Media height to “Full size” to function correctly;
    \n\"product-template-media-layout\"

    \n
    6. \n
  6. \n

    Enable media scroll for stacked layout – the setting allows you to enable scroll to variant image when changing product options for stacked layout.

    \n
    7. \n
\n

General

\n

\"product-template-general\"

\n
    \n
  1. \n

    Show messsage of taxes included – if taxes are included in the price of the product in the store, then this parameter will control the visibility of the corresponding message;

    \n
    2. \n
  2. \n

    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;

    \n
    3. \n
  3. \n

    Media decor image – the setting allows you to set decor image for the section;

    \n
    4. \n
  4. \n

    Enable sticky add to cart – the setting allows you to show sticky add to cart when the main add to cart is not visible.

    \n
    5. \n
\n

Size guide

\n

\"size-guide-settings\"

\n
    \n
  1. \n

    Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;

    \n
    2. \n
  2. \n

    Button label – the settings allows you to set a size guide button label;

    \n
    3. \n
  3. \n

    Drawer heading – the setting allows you to set the title of the size guide popup;

    \n
    4. \n
  4. \n

    General tab label – the setting allows you to set the text for size guide general tab;
    \n\"size-guide-tab-label\"

    \n
    5. \n
  5. Model tab label – the setting allows you to setthe text for size guide mobel tab;
    \n\"size-guide-model-tab-label\"
    6. \n
\n

To show the size guide:

\n\n

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

\n

Follow the steps:

\n
    \n
  1. \n

    Create product metafield with Name: “Size guide model image”, Namespace and key: custom.size_guide_model_image. The content type must be a file (images only).

    \n
    2. \n
  2. \n

    Create product metafield with Name: “Size guide model info”, Namespace and key:

    \n

    custom.size_guide_model_info. The content type must be Multi-line text.

    \n
    3. \n
  3. \n

    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.

    \n
    4. \n
  4. \n

    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.

    \n
    5. \n
\n

Product complementary

\n

\"product-complementary\"

\n

\"product-complementary-setting\"

\n
    \n
  1. \n

    Enable – enable product complementary block;

    \n
    2. \n
  2. \n

    Heading – the setting allows you to set a title for the block.

    \n
    3. \n
\n

Tabs content

\n

This settings allows you to show additional information under the main product section in the tabs.

\n

\"tab-content\"

\n

\"tab-content-setting\"

\n
    \n
  1. \n

    Tab product description heading – the setting allows you to set title for the description tab panel;

    \n
    2. \n
  2. \n

    Tab 1 heading – the setting allows you to set title for the first tab panel;

    \n
    3. \n
  3. \n

    Tab 1 content – the setting allows you to set text content for the first tab panel;

    \n
    4. \n
  4. \n

    Tab 2 heading – the setting allows you to set title for the first tab panel;

    \n
    5. \n
  5. \n

    Tab 2 content – the setting allows you to set text content for the first tab panel;

    \n
    6. \n
  6. \n

    Tab 3 heading – the setting allows you to set title for the first tab panel;

    \n
    7. \n
  7. \n

    Tab 3 content – the setting allows you to set text content for the first tab panel;

    \n
    8. \n
\n

Colors

\n

\"product-template-ui-colors\"

\n
    \n
  1. \n

    UI button color – the setting allows you to set the UI button’s color. Will also be used for shadow color;

    \n
    2. \n
  2. \n

    UI button background color – the setting allows you to set the UI button’s background color;

    \n
    3. \n
  3. \n

    UI button border color – the setting allows you to set the UI button’s border color;

    \n
    4. \n
  4. \n

    Media background color – the setting allows you to set the media background color;

    \n
    5. \n
\n

Layout

\n

\"tab-content-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n

Block settings

\n

Block “Badges”

\n

\"badges-block\"

\n

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

\n
    \n
  1. \n

    The block displays tags added to the product according to the template – label__%tag%:modifer:

    \n\n
    2. \n
  2. \n

    The modifier can have 2 values: primary and secondary or completely absent;

    \n
    3. \n
  3. \n

    Colors for modifiers are configured in the theme settings Customizer → Theme settings → Product → Labels.

    \n
    4. \n
\n

For example, if you want to add two labels: “Sale” and “Top” with primary and secondary styles you need to add these tags for the product:

\n\n

Layout settings allow you to select offsets of the section.

\n

Block “Title”

\n

\"block-title\"

\n

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

\n

Layout settings allow you to select offsets of the section.

\n

Block “Vendor and SKU“

\n

\"vendor-sku-block\"

\n

\"vendor-sku-block-setting\"

\n
    \n
  1. \n

    Show SKU – the setting allows you to show SKU of the product;

    \n
    2. \n
  2. \n

    SKU text – the setting allows you to set the text of the SKU. You need to use an {SKU} in the text field, which will be replace on the product SKU;

    \n
    3. \n
  3. \n

    Show vendor – the setting allows you to show a product vendor;

    \n
    4. \n
  4. \n

    Make vendor link to collection – the setting allows you to wrap a vendor into to link.

    \n
    5. \n
\n

Layout settings allow you to select offsets of the section.

\n

Block “Description”

\n

\"description-block\"

\n

\"description-block\"

\n
    \n
  1. \n

    Read more label -lLeave empty to show all product description in the block. Add some text, to add additional text section with full product description under the product section. The button will be shown if the product description has more than 20 words.

    \n
    2. \n
\n

Block “Collapsed content”

\n

\"collapsed-content\"

\n

Author content

\n

\"collapsed-content-author\"

\n
    \n
  1. \n

    Heading – the setting allows you to set title for the accordion;

    \n
    2. \n
  2. \n

    Author image – the setting allows you to set the image for the author;

    \n
    3. \n
  3. \n

    Author name label – the setting allows you to set the text for the label (“Author:”);

    \n
    4. \n
  4. \n

    Author name – the setting allows you to set the author name;

    \n
    5. \n
  5. \n

    Text – the setting allows you to set text content about the author;

    \n
    6. \n
  6. \n

    Button label – the setting allows you to set text for the author link;

    \n
    7. \n
  7. \n

    Button link – the setting allows you to set URL for the author link;

    \n
    8. \n
\n

Custom content 1..3

\n
    \n
  1. \n

    Heading – the setting allows you to set title for the accordion;

    \n
    2. \n
  2. \n

    Text – the setting allows you to set text content for the accordion;

    \n
    3. \n
  3. \n

    Button label – the setting allows you to set text for custom link;

    \n
    4. \n
  4. \n

    Button link – the setting allows you to set URL for the custom link;

    \n
    5. \n
\n

Block “Options”

\n

\"block-options\"

\n

Variant picker – the setting allows you to select a view of variant options type. Note: if you have enabled a color swatch option then the option that is related to color swatch will always be a button. You can select “Buttons” or “Dropdown”;

\n

\"variant-buttons\"

\n

\"variant-dropdown\"

\n

Layout settings allow you to select offsets of the section.

\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

\"product-combination\"

\n

To add product combination, please follow the instructions below:

\n
    \n
  1. \n

    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.

    \n
    2. \n
  2. \n

    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.

    \n
    3. \n
  3. \n

    Open “Metafields” settings (Admin/Settings/Custom data)) and click “Products”
    \n\"product-combination-metafields\"

    \n
    4. \n
  4. Click “Add definition”
    \n\"add-definition-metafields\"
    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:
    \n\"variation-value-metafields\"
    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:
    \n\"variation-products-metafields\"
    7. \n
  7. Once the meta fields are created, you need to add the “Product combination” block to the “Product template” section.
    \n\"product-combination-add-block\"
    \n\"product-combination-block-setting\"
    \nOption name – text label for the product variations. If you create different products grouped by colors, you can set “Color” value;
    \n\"option-name\"
    8. \n
\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\"option-value-metafield\"
\nProducts – in this setting you need add a dynamic source from your product metafield “Variation products” that you added in the 6 step;

\n\n

 

\n

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

\n

Block “Price and quantity“

\n

\"price-quantity-block\"

\n

Enable inventory status – with this setting, you can show a message about product variant inventory status.

\n

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

\n

\"price-quantity-block-setting\"

\n
    \n
  1. \n

    Enable inventory status – with this setting, you can show a message about product variant inventory status.

    \n
    2. \n
  2. \n

    Low stock text – the setting allows you to set the text that appears when variant inventory quantity is less or equal “Low stock threshold” value;

    \n
    3. \n
  3. \n

    High stock text – the setting allows you to set the text that appears when variant inventory quantity is more than the “Low stock threshold” value;

    \n
    4. \n
  4. \n

    Low stock icon – the setting allows you to set the icon of the “Low stock text”;

    \n
    5. \n
  5. \n

    High stock icon – the setting allows you to set the icon of the “High stock text”;

    \n
    6. \n
  6. \n

    Low stock threshold – the setting that allows you to select the minimum number of variant inventory quantities to show a “Low stock text” message. If the variant inventory quantity is more than the value of the setting, then “High stock text” will appear.

    \n
    7. \n
  7. \n

    Show inventory count – setting shows the number of products

    \n
    8. \n
\n

Layout settings allow you to select offsets of the section.

\n

\n

Block “Add to cart”

\n

\"add-to-cart\"

\n

\"add-to-cart-setting\"

\n
    \n
  1. \n

    Button style – the setting allows you to add to cart button style;

    \n
    2. \n
  2. \n

    Button ‘Buy it now’ button – the setting allows you to set the ‘Buy it now’ button style;

    \n
    3. \n
  3. \n

    Show additional payment buttons – the setting allows you to add the “Buy it now” buttons;

    \n
    4. \n
  4. \n

    Show recipient information form for gift cards – the setting allows customers to send gift cards on a scheduled date along with a personal message (works only on a gift product).
    \n\"gift-product-recipient-information\"

    \n
    5. \n
\n

Block “Notify me”

\n

\"notify-me-block\"

\n

\"notify-me-popup\"

\n

\"notify-me-setting\"

\n

Button settings

\n
    \n
  1. \n

    Button label – the setting allows you to set the text for the button. Required field;

    \n
    2. \n
\n

Form settings

\n
    \n
  1. \n

    Heading – the setting allows you to set the popup title text field;

    \n
    2. \n
  2. \n

    Email label – the setting allows you to set the label for the input;

    \n
    3. \n
  3. \n

    Email placeholder – the setting allows you to set the placeholder for the input;

    \n
    4. \n
  4. \n

    Button label – the setting allows you to set the label for the submit button;

    \n
    5. \n
  5. \n

    Success message – the setting allows you to set a message that the form was sent successfully.

    \n
    6. \n
\n

Layout settings allow you to select offsets of the section.

\n

Notify me logic:

\n\n

 

\n

Block “Pickup availability”

\n

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

\n

\"pickup-availability\"

\n

\"pickup-availability-popup\"

\n

Layout settings allow you to select offsets of the section.

\n

\n

Block “Custom field”

\n

\"custom-field\"

\n

\"custom-field-setting\"

\n
    \n
  1. \n

    Field label – the setting is responsible for the label text for the input;

    \n
    2. \n
  2. \n

    Required text – the setting is responsible for the label text for the checkbox.

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

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

\n

Block “Custom liquid”

\n

With this block, you can display a text field (input type='text‘), which will represent the line_item

\n

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

    Custom liquid – the setting allows you to add your liquid code.

    \n
    2. \n
\n

Layout settings allow you to select offsets of the section.

\n

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

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

\"search-template\"

\n

Adding a Section

\n

\"search-template-add\"

\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-template-settings\"

\n
    \n
  1. \n

    Heading – the setting allows you to set heading;

    \n
    2. \n
  2. \n

    Show color swatch in filters – setting allows you to show or hide color swatch in filters;

    \n
    3. \n
  3. \n

    Show grid button – the setting allows you to show the user grid selection buttons where they can choose to display 3 or 4 cards in a row;

    \n
    4. \n
  4. \n

    Filters type – the setting allows you to choose the location of filters on the search page, there are two options in the sidebar or in the drawer;

    \n
    5. \n
  5. \n

    Paginate by – setting allows to specify the number of results in the search sidebar;

    \n
    6. \n
  6. \n

    Pagination type – setting allows to select the type of pagination. Has several meanings:

    \n\n
    7. \n
\n

Colors

\n

\"search-template-color\"

\n
    \n
  1. \n

    Grid button color – this parameter is responsible for selecting the color of the button grid;

    \n
    2. \n
  2. \n

    Grid button border – this parameter is responsible for selecting the color of the button grid border;

    \n
    3. \n
  3. \n

    Grid button color active – this parameter is responsible for selecting the active color of the button grid;

    \n
    4. \n
  4. \n

    Grid button background active – this parameter is responsible for selecting the active background color of the button grid;

    \n
    5. \n
\n

Layout

\n

\"search-template-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Search template","fieldGroupName":"manual_category_blocks","hash":"section-search-template"},{"blockContent":"

\"collection-template\"

\n

\"collection-template2\"

\n

\"collection-template3\"

\n

On this section (based on the Collection page) cuctomers can see products from the collection. Customers can use filters to show the products they are looking for.

\n

Adding a Section

\n

\"collection-template-add\"

\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-template-setting\"

\n

\"collection-template-setting\"

\n
    \n
  1. \n

    Show collection image – the setting is responsible for displaying the image of the collection;

    \n
    2. \n
  2. \n

    Show collection description – the setting is responsible for displaying the description of the collection;

    \n
    3. \n
  3. \n

    Custom image – the setting allows you to set custom image for the banner;

    \n
    4. \n
  4. \n

    Heading and description position – the setting is responsible for changing the collection title, and description position. Can be under the image or inside the image;

    \n
    5. \n
  5. \n

    Show grid buttons – the setting is responsible for showing buttons that allow customers to change product grid view (3 or 4 on the desktop, 1 or 2 on the mobile);

    \n
    6. \n
  6. \n

    Show color swatch in filters – the setting allows you to set, if checked, the filter group with name, specified in the Theme settings / Product / Swatch option (“Color” by default) will show a checkbox like color swatch;
    \n\"collection-template-swatches\"

    \n
    7. \n
  7. \n

    Filters type – the setting allows selecting view of filters: “Drawer” or “Sidebar” or “Top bar”. Setting works only for desktop resolution. On the mobile filters will be always in the “Drawer” view;

    \n
    8. \n
  8. \n

    Paginate by – the setting is responsible for displaying a certain number of cards per page. The minimum number is 12, the maximum number is 50;

    \n
    9. \n
  9. \n

    Pagination type – the setting is responsible for the type of loading product cards. Can be “Pagination”, “Load more”, or “Infinity scrolling”;

    \n
    10. \n
  10. \n

    Promo collections – the setting allows you to select the list of the collections.
    \n\"promo-collections\"

    \n
    11. \n
  11. \n

    Layout – the setting allows you to set the layout of the section. Can be “Simple” or “Classic”;

    \n
    12. \n
  12. \n

    Enable animation – the settings allow you to enable card animations.

    \n
    13. \n
\n
\n

Colors

\n

\"collection-template-color\"

\n
    \n
  1. \n

    Banner background – the settings allow you to change the banner background.

    \n
    2. \n
  2. \n

    Banner text – the setting is responsible for selecting a text color when the collection title and description are placed inside the image.

    \n
    3. \n
  3. \n

    Banner overlay – the setting is responsible for selecting an overlay color for the collection image;

    \n
    4. \n
  4. \n

    Grid button color – this parameter is responsible for selecting the color of the button grid;

    \n
    5. \n
  5. \n

    Grid button border – this parameter is responsible for selecting the color of the button grid border;

    \n
    6. \n
  6. \n

    Grid button color active – this parameter is responsible for selecting the active color of the button grid;

    \n
    7. \n
  7. \n

    Grid button background active – this parameter is responsible for selecting the active background color of the button grid;

    \n
    8. \n
\n

Layout

\n

\"collection-template-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If the “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Collection template","fieldGroupName":"manual_category_blocks","hash":"section-collection-template"},{"blockContent":"

\"product-promo\"

\n

\"product-promo-mobile\"

\n

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

\n

In order to get to the Product promo settings block, you need to go to Customizer → Popups group → Product promo.

\n

\"product-promo-add\"

\n

Settings

\n

General

\n

\"product-promo-general-settings\"

\n
    \n
  1. \n

    Layout – the setting lets you choose either to show the popup as text: image, promo text, and a button, or as a product: choose a specific product you want to promote;

    \n
    2. \n
  2. \n

    Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it.

    \n
    3. \n
\n

Text

\n

\"product-promo-general-settings2\"

\n
    \n
  1. \n

    Image desktop – setting allows you to set desktop image;

    \n
    2. \n
  2. \n

    Image mobile – setting allows you to set mobile image;

    \n
    3. \n
  3. \n

    Heading – setting allows you to set title text;

    \n
    4. \n
  4. \n

    Text – setting allows you to set description text;

    \n
    5. \n
  5. \n

    Link label – setting allows you to set accept link label;

    \n
    6. \n
  6. \n

    Link url – setting allows you to set accept link label url.

    \n
    7. \n
\n

Product

\n

\"product-promo-productset\"

\n
    \n
  1. \n

    Product – setting allows you to set the product to open quick view on click.

    \n
    2. \n
\n","blockTitle":"Product promo","fieldGroupName":"manual_category_blocks","hash":"section-product-promo"},{"blockContent":"

\"product-tabs\"

\n

Adding a section

\n

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

\n

\"product-tabs-add\"

\n

Section settings:

\n

General:

\n

\"product-tabs-section-setting\"

\n
    \n
  1. \n

    Heading – the setting allows you to set the text for the title;

    \n
    2. \n
  2. \n

    Products per row desktop – the settings allow you to choose the number of products per row on the desktop.

    \n
    3. \n
  3. \n

    Products per row mobile – the settings allow you to choose the number of products per row on the mobile.

    \n
    4. \n
\n

Layout Settings

\n

\"product-tabs-layout\"

\n
    \n
  1. \n

    Container width – section container settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n","blockTitle":"Product tabs","fieldGroupName":"manual_category_blocks","hash":"section-product-tabs"},{"blockContent":"

\"image-comparison\"

\n

For customers

\n

Adding a section

\n

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

\n

\"image-comparison-add\"

\n

Section settings

\n

\"image-comparison-setting\"

\n

General

\n
    \n
  1. \n

    Heading – section heading;

    \n
    2. \n
  2. \n

    Text – section richtext;

    \n
    3. \n
  3. \n

    First image – the image that will be displayed as a “before image”;

    \n
    4. \n
  4. \n

    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;

    \n
    5. \n
  5. \n

    Desktop image height – the height of the images in the section. The setting 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;

    \n
    6. \n
  6. \n

    Mobile image height – mobile image height. The setting has the same options as the desktop.

    \n
    7. \n
\n

Colors

\n

\"image-comparison-color\"

\n
    \n
  1. \n

    Drag cursor background – the color of the separating line and the icon background;

    \n
    2. \n
  2. \n

    Drag cursor color – icon color;

    \n
    3. \n
  3. \n

    Drag cursor border color – icon border color.

    \n
    4. \n
\n

Layout

\n

\"image-comparison-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If the “Inherit” value is selected then the container width is based on the group ‘Layout’ settings in the Theme settings;

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

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

\"header\"

\n

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

\n

Section settings

\n

Genera

\n

\"general-header\"

\n
    \n
  1. Type – Setting allows you to choose the type of header. It can be Static, Sticky, and Sticky (hide, on scroll down)
    \nStatic:
    \n

    \n

    Sticky:

    \n
    \n

    Sticky (hide on scroll down):

    \n

    2. \n
  2. \n

    Show Transparent Header for Homepage – Setting enables a transparent header for the homepage. The header will be transparent only in the top position; when the mega menu is opened and scrolling the page down, the header will have a background color.

    \n
    3. \n
  3. \n

    Show Transparent Header for Collection page – Setting enables a transparent header for the collection page. The header will be transparent only in the top position; when the mega menu is opened and scrolling the page down, the header will have a background color.

    \n
    4. \n
  4. \n

    Show language selector – Enables the language selector in the header and mobile menu.

    \n
    5. \n
  5. \n

    Show country/region selector – enables the currency selector in the header and mobile menu.

    \n
    6. \n
\n

Logo

\n

\"header-logo\"

\n
    \n
  1. \n

    Image – logo image picker, if not specified, the store name will be displayed; The file in .svg format is recommended.

    \n
    2. \n
  2. \n

    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 for the non-transparent header.

    \n
    3. \n
  3. \n

    Logo width – specifies the logo width. Minimum 20px, maximum 250px on the Desktop.

    \n
    4. \n
\n

Menu

\n

\"header-menu\"

\n
    \n
  1. \n

    Main menu – option to connect the navigation menu to the header;

    \n
    2. \n
  2. \n

    Type – The setting is responsible for how the submenus are displayed:

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

    Open by – The setting controls how the submenu will open: By hover, or By click.

    \n
    4. \n
  4. \n

    Make 1st-level menu clickable – The setting allows you to make the 1st-level menu clickable if it has a submenu. Only works with open on hover for desktop.

    \n
    5. \n
  5. \n

    Make 1st-level menu uppercase – The setting makes the 1st-level menu items in the header uppercase.

    \n
    6. \n
\n

Burger menu

\n

\"header-burger-menu\"

\n
    \n
  1. \n

    Menu – The setting allows you to add the Burger menu to the desktop.

    \n
    2. \n
  2. \n

    Additional menu – The setting allows you to add an additional Burger menu.

    \n
    3. \n
  3. \n

    Additional information – Text content that will be displayed in the burger menu.

    \n
    4. \n
  4. \n

    Show socials – The settings allow you to display the social links.

    \n
    5. \n
  5. \n

    Show collection thumbnails in second lvl menu – The setting allows you to display the collection image on the second-level menu items.

    \n
    6. \n
\n

Colors

\n

\"header-colors1\"

\n

\"header-colors2\"

\n

\"header-colors3\"

\n

\"header-colors4\"

\n
    \n
  1. \n

    Background – Header background color.

    \n
    2. \n
  2. \n

    Background (transparent header) – color gradient for transparent header.

    \n
    3. \n
  3. \n

    Text – Text color of main menu items.

    \n
    4. \n
  4. \n

    Text (header transparent) – Text color of main menu items for transparent header.

    \n
    5. \n
  5. \n

    Menu text color – Burger menu and submenus text color (dropdowns and mega menus)

    \n
    6. \n
  6. \n

    Menu active text color – Burger menu text color on hover.

    \n
    7. \n
  7. \n

    Main mega-menu text background color – Mega menu background color.

    \n
    8. \n
  8. \n

    Main mega-menu devider color – Menu divider text color.

    \n
    9. \n
  9. \n

    Dropdown active item background – Dropdown menus background color on hover.

    \n
    10. \n
  10. \n

    Icon – Icon color (Search, Account).

    \n
    11. \n
  11. \n

    Icon (header transparent) – Icon color for transparent header (Search, Account).

    \n
    12. \n
  12. \n

    Burger button background – Burger menu button background color.

    \n
    13. \n
  13. \n

    Burger button icon – Burger menu button icon color.

    \n
    14. \n
  14. \n

    Burger button border – Burger menu button outer border color.

    \n
    15. \n
  15. \n

    Burger button close outer border – Burger menu close button outer border color.

    \n
    16. \n
  16. \n

    Burger button close inner border – Burger menu close button inner border color.

    \n
    17. \n
  17. \n

    Burger button close icon – Burger menu close button icon color.

    \n
    18. \n
  18. \n

    Cart count text – Cart button text color.

    \n
    19. \n
  19. \n

    Cart count text (header transparent) – Cart button text color for transparent header.

    \n
    20. \n
  20. \n

    Cart count number – Cart items count number text color.

    \n
    21. \n
  21. \n

    Cart count number (header transparent) – Cart items count number text color for transparent header.

    \n
    22. \n
  22. \n

    Cart count number background – Cart items count background color.

    \n
    23. \n
  23. \n

    Cart number background (header transparent) – Cart items count background color for transparent header.

    \n
    24. \n
  24. \n

    Cart count border – Cart button border color.

    \n
    25. \n
  25. \n

    Cart count border (header transparent) – Cart button border color for transparent header.

    \n
    26. \n
\n","blockTitle":"Header","fieldGroupName":"manual_category_blocks","hash":"section-header"},{"blockContent":"

\"banner-with-carousel-desktop\"

\n

\"banner-with-carousel-mobile\"

\n

Adding section

\n

\"banner-with-carousel-add\"

\n

In order to add the section, go to the Customizer → Add Section → Product banner.

\n

Section settings

\n

\"banner-with-carousel-setting\"

\n
    \n
  1. \n

    Heading first line – Texi field for the first line of the heading.

    \n
    2. \n
  2. \n

    Heading second line – Texi field for the second line of the heading.

    \n
    3. \n
  3. \n

    Heading third line – Texi field for the third line of the heading.

    \n
    4. \n
  4. \n

    Button label – The label of the CTA button.

    \n
    5. \n
  5. \n

    Button link – The link of the button.

    \n
    6. \n
  6. \n

    Image desktop – The setting to upload a banner image for the desktop.

    \n
    7. \n
  7. \n

    Image mobile – The setting to upload a banner image for the mobile. If not specified, the desktop image will be displayed.

    \n
    8. \n
  8. \n

    Images layout – The setting allows you to choose the image carousel aspect ratio. Can be Square, Portrait, Mix, or Natural.

    \n
    9. \n
\n

\n

Allignment

\n

\"banner-with-carousel-allignment\"

\n
    \n
  1. \n

    Heading first line – The horizontal alignment of the heading first line (Only on the desktop).

    \n
    2. \n
  2. \n

    Heading second line – The horizontal alignment of the heading second line (Only on the desktop).

    \n
    3. \n
  3. \n

    Heading third line – The horizontal alignment of the heading third line (Only on the desktop).

    \n
    4. \n
\n

\n

Colors

\n

\"banner-with-carousel-colors\"

\n
    \n
  1. \n

    Text – Headings text color.

    \n
    2. \n
  2. \n

    Overlay – Color overlay of the banner image.

    \n
    3. \n
\n

\n

Layout

\n

\"banner-with-carousel-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop.

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop.

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile.

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n

\n

Blocks settings

\n

Limit – 50.

\n

Image block

\n
    \n
  1. \n

    Image – The setting to upload an image.

    \n
    2. \n
\n","blockTitle":"Banner with carousel","fieldGroupName":"manual_category_blocks","hash":"section-banner-with-carousel"},{"blockContent":"

Adding section

\n

\"custom-liquid-add\"

\n

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

\n

\n

Section settings

\n

\"custom-liquid-setting\"

\n
    \n
  1. \n

    Custom liquid – the text field allows you to add your custom code.

    \n
    2. \n
\n

Layout

\n

\"banner-with-carousel-layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop;

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop;

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile;

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n

 

\n

Additional information

\n
    \n
  1. \n

    You can learn more about liquid here – Liquid reference .

    \n
    2. \n
\n","blockTitle":" Custom liquid","fieldGroupName":"manual_category_blocks","hash":"section-custom-liquid"},{"blockContent":"

\"buy-the-look-desktop\"

\n

Adding section

\n

In order to add a section, you need to go to Customizer → Add Section → Buy the look.

\n

\"buy-the-look-add\"

\n

\n

Section settings

\n

\"buy-the-look-setting\"

\n
    \n
  1. \n

    Heading – Section heading. Also appears as a heading in the pop-up window when previewing the product.

    \n
    2. \n
  2. \n

    Buy look button label – The setting to add a button label. Appears in the pop-up window when previewing the product.

    \n
    3. \n
  3. \n

    Media decor image – The setting to add a background decorative image.

    \n
    4. \n
\n

\n

Colors

\n

\"buy-the-look-colors\"

\n
    \n
  1. \n

    Text – Section heading text color.

    \n
    2. \n
  2. \n

    Background – Section background color overlay.

    \n
    3. \n
\n

\n

Layout

\n

\"buy-the-look-layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If the “Inherit” value is selected, then the container width will be set based on the ‘Layout’ settings in the Theme settings.

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop.

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop.

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile.

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
  6. \n

    Inner desktop offset top – the top inner indent of the section on the desktop.

    \n
    7. \n
  7. \n

    Inner desktop offset bottom – the bottom inner indent of the section on the desktop.

    \n
    8. \n
  8. \n

    Inner mobile offset top – the top inner indent of the section on the mobile.

    \n
    9. \n
  9. \n

    Inner mobile offset bottom – the bottom inner indent of the section on the mobile.

    \n
    10. \n
\n

\n

Block setting

\n

Look

\n

Block limit – 2.

\n

\"buy-the-look-card-block\"

\n
    \n
  1. \n

    Card image – The setting allows you to upload a card image.

    \n
    2. \n
  2. \n

    Card heading – The setting allows you to add a card title

    \n
    3. \n
  3. \n

    Look heading – The setting allows you to add a heading to the “Look” button on the card.

    \n
    4. \n
  4. \n

    Product – The setting allows you to add a product to the “Look” card.

    \n
    5. \n
\n

\n

Ticker content

\n

Block limit – 1.

\n

\"buy-the-look-ticker\"

\n
    \n
  1. \n

    Text – Option to add text to the block.

    \n
    2. \n
  2. \n

    Font – Option to set the font family for the text.

    \n
    3. \n
  3. \n

    Font size (Desktop) – Option to set the text font size for the desktop. Min – 20px; Max – 200px.

    \n
    4. \n
  4. \n

    Font size (Mobile) – Option to set the text font size for the mobile. Min – 16px; Max – 100px.

    \n
    5. \n
  5. \n

    Show divider – Option to enable the divider between scrolling text.

    \n
    6. \n
  6. \n

    Direction – Option to set the direction of the ticker. Can be left-to-right or right-to-left.

    \n
    7. \n
  7. \n

    Movement speed (Desktop) – Text scrolling speed for desktop.

    \n
    8. \n
  8. \n

    Movement speed (Mobile) – Text scrolling speed for mobile.

    \n
    9. \n
\n","blockTitle":"Buy the look","fieldGroupName":"manual_category_blocks","hash":"section-buy-the-look"},{"blockContent":"

Each quiz requires a ‘Collection’ and at least one ‘Question’, one ‘Submit’ and ‘Results’ block in order to function correctly. The ‘Start screen’, ‘Personalize’ blocks are optional.

\n

Adding section

\n

\"quiz-add\"

\n

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

\n

\n

Section settings

\n

\"quiz-setting\"

\n
    \n
  1. \n

    Collection – Option to add a specific collection to the section. The quiz results will be restricted to products within this collection.

    \n
    2. \n
  2. \n

    Logic – Option allows you to choose the logic the quiz will follow.

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

    Back button label – Back button label to get back to the previous quiz screen.

    \n
    4. \n
\n

\n

Layout

\n

\"layout\"

\n
    \n
  1. \n

    Container width – a container width of the section. If the “Inherit” value is selected, then the container width will be set based on the ‘Layout’ settings in the Theme settings.

    \n
    2. \n
  2. \n

    Desktop offset top – the top indent of the section on the desktop.

    \n
    3. \n
  3. \n

    Desktop offset bottom – the bottom indent of the section on the desktop.

    \n
    4. \n
  4. \n

    Mobile offset top – the top indent of the section on the mobile.

    \n
    5. \n
  5. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    6. \n
\n

\n

Block settings

\n

Start screen

\n

Block limit – 1.

\n

\"quiz-start-screen\"

\n
    \n
  1. \n

    Label – The setting to add a label above the title.

    \n
    2. \n
  2. \n

    Heading – The setting to add a title of the screen.

    \n
    3. \n
  3. \n

    Text – The setting to add short description.

    \n
    4. \n
  4. \n

    Button label – The setting to add a label for the button to start quiz.

    \n
    5. \n
  5. \n

    Image – The setting to add an image for the start screen. Use a square image.

    \n
    6. \n
\n

\n

Personalize

\n

Block limit – 1.

\n

\"quiz-personalize\"

\n
    \n
  1. \n

    Label – The setting to add a label above the title.

    \n
    2. \n
  2. \n

    Heading – The setting to add a title of the screen.

    \n
    3. \n
  3. \n

    Text – The setting to add a short description.

    \n
    4. \n
  4. \n

    Customer name preview – The preview name that will be displayed until the customer enters their name.

    \n
    5. \n
  5. \n

    Input label – The label of the input field.

    \n
    6. \n
  6. \n

    Input placeholder – The placeholder of the input field

    \n
    7. \n
  7. \n

    Button label – Button label to go to the next step of the quiz.

    \n
    8. \n
\n

\n

Quistion

\n

Block limit – 10.

\n
    \n
  1. \n

    Heading – The setting to add a heading to the question screen.

    \n
    2. \n
  2. \n

    Text – The setting to add text of the current question.

    \n
    3. \n
  3. \n

    Button label – The setting to add a button label to the next screen.

    \n
    4. \n
  4. \n

    Multiple choice – The setting allows you to enable multiple choice among answers.

    \n
    5. \n
\n

 

\n

Anwers

\n

Each answer must include a ‘Text’, ‘Small text’ or ‘Image’ to be displayed. Additionally, Product tags in the ‘Tags’ block of the product are required in order to function correctly.

\n

Answer 1-8

\n

\"quiz-block-answer\"

\n
    \n
  1. \n

    Enable Answer 1...8 – The setting allows you to add an answer variant to the question.

    \n
    2. \n
  2. \n

    Text – The text of the answer variant.

    \n
    3. \n
  3. \n

    Small text – A short subtitle below the answer variant.

    \n
    4. \n
  4. \n

    Image – The image for the answer variant.

    \n
    5. \n
  5. \n

    Image aspect ratio – The setting to choose the image aspect ratio. Can be: Square, Landscape, and Portrait.

    \n
    6. \n
  6. \n

    Image object fit – The setting to choose image object fit. Can be: Cover or Contain.

    \n
    7. \n
  7. \n

    Tags – A text field to specify a tag name of the product related to the specific answer variant.
    \nIf you specify multiple tags and ‘AND’ logic, then the product must contain all tags. Tags are not case sensitive.

    \n
    8. \n
\n

\n

Submit

\n

Block limit – 1.

\n

\"quiz-submit\"

\n
    \n
  1. \n

    Heading – The setting to add a title of the screen.

    \n
    2. \n
  2. \n

    Text – The setting to add a short description of the

    \n
    3. \n
  3. \n

    Button label – The setting to add a label of the button to submit the quiz and go to the next screen.

    \n
    4. \n
\n

\n

Image

\n
    \n
  1. \n

    Image – The setting to add an image of the screen.

    \n
    2. \n
  2. \n

    Maximum image width – The setting to specify the maximum width of the image. Min – 100px; Max – 1000px.

    \n
    3. \n
  3. \n

    Image aspect ratio – The setting to specify the aspect ratio of the image. Can be: Native, Square, Landscape, or Portrait.

    \n
    4. \n
\n

\n

Results

\n

Block limit – 1.

\n

\"quiz-results\"

\n
    \n
  1. \n

    Heading – The setting to add a title of the screen.

    \n
    2. \n
  2. \n

    Text – The setting to add a short description of the screen.

    \n
    3. \n
  3. \n

    Button label – The setting to add a button label to retry the quiz.

    \n
    4. \n
\n

\n

No results

\n
    \n
  1. \n

    Text – The setting to add a description in case the quiz ended up with no results.

    \n
    2. \n
\n","blockTitle":"Quiz","fieldGroupName":"manual_category_blocks","hash":"section-quiz"},{"blockContent":"

\"password-header\"

\n

Adding section

\n

The section is added initially to the template and cannot be hidden or removed. It is added to only the Password page and cannot be used elsewhere in the store.

\n

\n

Section settings

\n

\"password-header-setting\"

\n
    \n
  1. \n

    Button label – Enter with password button label.

    \n
    2. \n
  2. \n

    Logo – Store logo.

    \n
    3. \n
  3. \n

    Logo width – Store logo width settings. Min – 20px; Max – 250px.

    \n
    4. \n
\n

\n

Popup

\n

\"password-popup-setting\"

\n
    \n
  1. \n

    Heading – Enter with password popup heading.

    \n
    2. \n
  2. \n

    Input label – Enter with password input label.

    \n
    3. \n
  3. \n

    Input placeholder – Enter with password input placeholder.

    \n
    4. \n
  4. \n

    Button label – Enter with password submit form button label.

    \n
    5. \n
\n

 

\n

Colors

\n

\"password-header-colors\"

\n

\"password-header-colors2\"

\n
    \n
  1. \n

    Section background – Password header background color.

    \n
    2. \n
  2. \n

    Section text – Enter with password button text color.

    \n
    3. \n
  3. \n

    Popup background – Enter with password popup background color.

    \n
    4. \n
  4. \n

    Popup text – Enter with password popup title color.

    \n
    5. \n
  5. \n

    Popup attention text – Wrong password message text color.

    \n
    6. \n
  6. \n

    Input text – Enter with password popup input text color.

    \n
    7. \n
  7. \n

    Input label – Enter with password popup input label text color.

    \n
    8. \n
  8. \n

    Input placeholder – Enter with password popup input placeholder text color.

    \n
    9. \n
  9. \n

    Input border – Enter with password popup input border color.

    \n
    10. \n
  10. \n

    Input border (active) – Enter with password popup active (focus) input border color.

    \n
    11. \n
  11. \n

    Button text – Enter with password popup submit form button label color.

    \n
    12. \n
  12. \n

    Button background – Enter with password popup submit button background color.

    \n
    13. \n
  13. \n

    Button border – Enter with password popup submit button border color.

    \n
    14. \n
  14. \n

    Button text (hover) – Enter with password popup submit button label color on hover.

    \n
    15. \n
  15. \n

    Button background (hover) – Enter with password popup submit button background color on hover.

    \n
    16. \n
\n","blockTitle":"Password header","fieldGroupName":"manual_category_blocks","hash":"section-password-header"},{"blockContent":"

\"password-content\"

\n

Adding section

\n

The section is added initially to the template and cannot be hidden or removed. It is added to only the Password page and cannot be used elsewhere in the store.

\n

Section settings

\n

\"password-content-setting\"

\n

\"password-content-setting2\"

\n
    \n
  1. \n

    Heading – Section heading.

    \n
    2. \n
  2. \n

    Text – Section subheading.

    \n
    3. \n
  3. \n

    Success message – The message after the form is submitted successfully.

    \n
    4. \n
  4. \n

    Show form – The toggle to display or hide the subscription form.

    \n
    5. \n
  5. \n

    Input label – Email input label.

    \n
    6. \n
  6. \n

    Input placeholder – Email input placeholder.

    \n
    7. \n
  7. \n

    Button label – Email form submit button label.

    \n
    8. \n
  8. \n

    Background image – Section background image.

    \n
    9. \n
  9. \n

    Background image mobile – Section background image for mobile.

    \n
    10. \n
\n

\n

Colors

\n

\"password-content-color\"

\n

\"password-content-color2\"

\n
    \n
  1. \n

    Overlay – Page color overlay. Visible only if the background image is added.

    \n
    2. \n
  2. \n

    Background – Page background color.

    \n
    3. \n
  3. \n

    Heading – Page title color.

    \n
    4. \n
  4. \n

    Text – Page text color.

    \n
    5. \n
  5. \n

    Input text – Input text color

    \n
    6. \n
  6. \n

    Input Label – Input label color.

    \n
    7. \n
  7. \n

    Input Placeholder – Input placeholder color.

    \n
    8. \n
  8. \n

    Input Border – Input border color.

    \n
    9. \n
  9. \n

    Input Border (active) – Active input border color.

    \n
    10. \n
  10. \n

    Attention text – Error message text color.

    \n
    11. \n
  11. \n

    Success text – Success message text color after a form submission.

    \n
    12. \n
  12. \n

    Button text – Submit button label text color.

    \n
    13. \n
  13. \n

    Button background – Submit button background color.

    \n
    14. \n
  14. \n

    Button border – Submit button border color.

    \n
    15. \n
  15. \n

    Button text (hover) – Submit button label text color on hover.

    \n
    16. \n
  16. \n

    Button background (hover) – Submit button background color on hover.

    \n
    17. \n
\n","blockTitle":"Password content","fieldGroupName":"manual_category_blocks","hash":"section-password-content"},{"blockContent":"

\"footer\"

\n

Adding section

\n

The section is added initially to the template and cannot be hidden or removed. It is added to only the Password page and cannot be used elsewhere in the store.

\n

Section settings

\n

\"password-footer-settings\"

\n
    \n
  1. \n

    Text – Footer text.

    \n
    2. \n
  2. \n

    Login link label – Footer login link label

    \n
    3. \n
  3. \n

    Login link url – Footer login link URL. The ‘/admin’ value is set by default.

    \n
    4. \n
\n

 

\n

Colors

\n

\"password-footer-color\"

\n
    \n
  1. \n

    Text – Footer text color.

    \n
    2. \n
  2. \n

    Background – Footer background color.

    \n
    3. \n
  3. \n

    Top border – Footer top border color.

    \n
    4. \n
\n","blockTitle":"Password footer","fieldGroupName":"manual_category_blocks","hash":"password-password-footer"},{"blockContent":"

\"article

\n

Adding section

\n

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

\n

\n

Section settings

\n

\"article-main\"

\n
    \n
  1. \n

    Show author – The setting allows you either to show or hide a blog post author.

    \n
    2. \n
  2. \n

    Show date – The setting allows you either to show or hide a publishing date.

    \n
    3. \n
  3. \n

    Image desktop height – The setting allows you to set the image height on the desktop.

    \n
    4. \n
  4. \n

    Image mobile height – The setting allows you to set the image height on the mobile.

    \n
    5. \n
\n

\n

Layout

\n

\"layout\"

\n
    \n
  1. \n

    Desktop offset top – the top indent of the section on the desktop.

    \n
    2. \n
  2. \n

    Desktop offset bottom – the bottom indent of the section on the desktop.

    \n
    3. \n
  3. \n

    Mobile offset top – the top indent of the section on the mobile.

    \n
    4. \n
  4. \n

    Mobile offset bottom – the bottom indent of the section on the mobile.

    \n
    5. \n
\n","blockTitle":"Article main (blog post page)","fieldGroupName":"manual_category_blocks","hash":"section-article-main-blog-post-page"}]},{"fieldGroupName":"manual_category","manualCategoryTitle":"FAQ","manualCategoryBlocks":[{"blockContent":"

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

\n

Step 1: Create a product metafield

\n

Navigate to the Shopify Admin -> Settings -> Metafields and metaobjects -> Products and click on the “Add definition” button.

\n

\"metafields\"

\n

Create a metafield with the following parameters:

\n

Name: Any preferred name (e.g., Size guide)

\n

Namespace and key: size_guide.page – click the row under the “Name” field and rename it.

\n

Type: One / Page.

\n

Step 2: Create a page with the Size Guide chart

\n

Navigate to the Shopify Admin -> Online store -> Pages and create a page with the necessary content. Make sure you have chosen visibility as Visible.

\n

Note: You can create as many unique pages as you require.

\n

\"create

\n

\n

Step 3: Connect the Size Guide page to the metafield in the Product settings

\n

Navigate to the Product in your Shopify admin, scroll down to the metafields block, find the metafield you created earlier, and select the needed page for the metafield.

\n

Note: Please repeat this step for each of your products where the size chart should be displayed. The size guide button will not be shown for products that have an empty metafield.

\n

\"add-page-on-pdp\"

\n

Step 4: Enable the Size guide button in the Product template

\n

Navigate to the Theme editor -> Product template, and enable the “Show size guide” option.

\n

\"turn-on-size-guide\"

\n

Add model image (Optional)

\n

Step 1: Create a product metafield

\n

Navigate to the Product metafields and create a metafield to store the model image with the following parameters.

\n

Name: Size guide model image

\n

Napespace and key: custom.size_guide_model_image

\n

Type: One / Image (File)

\n

\"add-model-image\"

\n

\n

Step 2: Add an image to the metafield

\n

Navigate to the Product in your Shopify admin, scroll down to the metafields block, find the metafield you created earlier, and add the needed model image for the metafield.

\n

\"add-image-metafield\"

\n

Note: Please repeat this step for each product where the model image should be displayed.

\n

Add model description (optional).

\n

Step 1: Create a product metafield

\n

Navigate to the Product metafields and create a metafield to store the model image with the following parameters.

\n

Name: Size guide model info.

\n

Namespace and key: custom.size_guide_model_info

\n

Type: One / Multi-line text.

\n

\"\"\"model-info\"

\n

Step 2: Add the model description to the metafield

\n

Navigate to the Product in your Shopify admin, scroll down to the metafields block, find the metafield you created earlier, and add the text description.

\n

\"\"\"model-description\"

\n

Note: Please repeat this step for each product where the model description should be displayed.

\n","blockTitle":"How to set up the Size Guide","fieldGroupName":"manual_category_blocks","hash":"faq-how-to-set-up-the-size-guide"}]},{"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":null}}}}}}, "staticQueryHashes": ["1083880928","1850027792","2115852241","2249625599","2590265254","3117944600","3394409019","3777654359","842661457"]}