Ultra theme manual

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

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

 

Settings

Base and heading fonts

1. Base font – font picker for plain text throughout the store;
2. Heading font – font picker for headings throughout the store;
3. Base font size – plain text size;
4. Heading font size – heading text size.

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

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

 

 

Settings

Text colors

1. Primary – regular text;
2. Secondary – additional text color;
3. Thirdly – thirdly text color;
4. Headings – headings and section titles color;
5. Accent – accent color (product recommendations active tab color);
6. Link – color for links in RTE content.

 

Background

Text colors

1. Primary – base text;
2. Secondary – additional text color;
3. Thirdly – thirdly text color;
4. Headings – headings and section titles color;
5. Accent – accent color (active tab in the Product recommendations section);
6. Link – color for links in RTE content.

 

Background

1. Page–  The overall background of the page.

2. Secondary – For secondary content sections.

3. Popup (drawer)  – Background used for popups and drawers.

 

Border colors

1. Primary – color for primary borders. This setting also applies to the active product variant button;
2. Secondary – color for secondary borders. This setting also applies to the quantity buttons;
3. Thirdly – color for third borders. This setting also applies to the inactive product variant button.

 

Support colors

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

 

Overlay

1. Background – overlay background color.

 

Button primary

1. Text – main button text color;
2. Background – main button background color;
3. Text (hover) – button text color on hover;
4. Background (hover) – background color of the main button on hover.

 

Button secondary

1. Text – secondary button text color;
2. Background – secondary button background color;
3. Text (hover) – button text color on hover;
4. Background (hover) – background color of the main button on hover.

 

Button primary with border

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

 

Button secondary with border

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

 

Button play

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

 

Social buttons

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

 

Preloader

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

 

Scrollbar

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

 

Slider arrows

1. Background – background color of slider arrow;
2. Icon – icon color of slider arrow;
3. Border – border color of slider arrow;
4. Background (hover) – background color of slider arrow on hover;
5. Icon (hover) – background color of slider arrow on hover;
6. Border (hover) – border color of slider arrow on hover.

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

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

 

Settings

1. Image – the setting is responsible for the store icon that is displayed in the browser tab.

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

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

 

Settings

1. Container width – the setting allows you to select the width of the container for the sections, where you can make the section full size.

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

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

 

Settings

General

1. Cart type – the setting is responsible for the type of cart. It has two values: drawer, page;
2. Show product vendor – the setting is responsible for showing/hiding the product vendor;
3. Show discounts – the setting is responsible for enabling the discount input field display;
4. Show cart notes – the setting is responsible for showing/hiding cart notes;
5. Show tax and shipping message – the setting is responsible for showing/hiding the tax and shipping message;
6. Show dynamic checkout buttons – the setting is responsible for showing/hiding dynamic checkout buttons;
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;
8. Show compare-at price in Cart – the setting is responsible for displaying discounted price in Cart;
9. Checkout button label – label for the Checkout button.
10. Terms and conditions text – the setting is responsible for adding a terms and conditions checkbox to the cart. Leave it empty to remove the checkbox.

 

Cart notifications

1. Show cart notification – the setting is responsible for showing/hiding the notification popup when adding to the cart;
2. Background color – the setting is responsible for the background color of the popup;
3. Heading color – the setting is resposible for the title color of the popup;
4. Text color – the setting is responsible for the text color of the popup;
5. Close button color – the setting is responsible for the close button color of the popup.

 

Empty cart

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

 

Minimum order amount

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

Disclaimer: This feature only disables the checkout button; the customer can still go to checkout with a direct link or by clicking the “Buy it now” button.

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

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

 

Settings

General

1. Default product image – this image will be used when the product has no image;
2. Show first media image instead of the variant image – If enabled, the first image in the product media will be used as a main image. If disabled, the image of the first variant will be used by default
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

 

Swatches

1. Enable – the setting is responsible for whether color swatches will be displayed on the product card.
2. Swatch option – the setting is intended for stores that have a different option for color swatches than color. The default value is Color.  For example, if your store has a Colour, Farbe, or other variants’ name, then this name should be specified in the field.

 

Labels

1. Enable labels – the setting is responsible for whether labels will be shown on the product card.
2. Enable sale % label – the setting is responsible for the sale label display for discounted products.

For each type of label, there are color settings. This way, you can change the color for the label text: primary, secondary, base, and soldout;

1. Label text color – the setting to specify the label text color;
2. Label color background – the setting to specify the label background color;
3. Label border color – the setting to specify the label border color;
4. Label background opacity – background transparency is specified for each label using a range step of 10%. The minimum value is 10%, and the maximum is 100%

 

HINT: you can also add an icon to the your labels

Here is how to do it:

1. Copy the name of the label from the admin product page without the color identifier (”:primary”, “:secondary”). For example, if your label is “label__top:secondary”, just a copy “label__top” part.
   
2. Prepare an image file of the icon. Name it in the following format: [label name].png . Where [label name] is the name of your label that you copied in the previous step. “PNG” format is required. So your file name must be a “label__top.png”. If you have a product tag with few words, like a “label__Top sale:secondary”, you need replace a white space with a “-” symbol. So a file name for the “label__Top sale:secondary” tag should be be “label__Top-sale.png”.
   The size of the image must be 40×40 pixels.
3. Upload this image to your files in the Admin panel -> Content -> Files.
   

 

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

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

 

Settings

General

1. Show vendor – the setting is responsible for showing/hiding the product vendor;
2. SKU text – the setting is responsible for show a SKU of the product;
3. Enable quick view – the setting is responsible for enabling/disabling quick view. Otherwise, the user will need to go to the product to see other options and add to the cart;
4. Quick view button type – the setting is responsible for the appearance of the quick view button;
5. Show currency code – setting responsible for whether the currency code will be shown;
6. Enable image change on hover – the setting is responsible for whether the second image (video) will be shown on hover. By default, the second image in the product gallery will be used on hover. To add a custom image (video), you need to add the product_card.hover_image metafield to the Admin -> Settings -> Metafields and Metaobjects -> Product, where product_card is the namespace and hover_image is the field name. The Content type must be a file.
   • If color swatches are disabled, then you need to add this matefield only to the product.
   • If color swatches are enabled, you must also add this matefield to the variant.
   • If color swatches are enabled and other options are present, for example, size, material, etc., then you need to add an image only to the first variant of each color.
7. Image aspect ratio – aspect ratio of the image. Can be “Square” or “Portrait”.
8. Object fit image – the setting is responsible for stretching the image. If Cover(default) is selected – the image will take all the space available for it, that is, it will stretch as much as possible, and if Contain, it will retain its proportions.

 

Colors

1. Quick buttons background – setting allows you to specify the background color of quick buttons;
2. Quick buttons border color – setting allows you to specify the border color of quick buttons;
3. Quick buttons color – setting allows you to specify the icon color of quick buttons.

 

Text buttons

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

 

Additional information

Add extra information about the product

To do this, you need to create a product metafield in the Admin panel -> Settings -> Metafields and metaobjects -> Product. Create a metafield with a name “Extra properties”. Ensure that the “Namespace and key” is “custom.extra_properties”. Choose the “List of values” and  “Single line text” as a type.

 

In the product settings of your admin panel, find the metafield and add the additional properties. Wrap the name of the property in the <span>...</span> tag. Example: <span>DIsplay type</span> OLED.

 

Trusted images

You can add image labels, like this:

To do this, you need to create a product metafield in the Admin -> Settings -> Metafields and Metaobjects -> Product. Create a metafield with a name “Badge image”. Ensure that the “Namespace and key” is “custom.badge_image”. Choose the “List of values” and  “Image (file)” as a type.

 

After that, go to the product in the admin panel and upload images to this metafield. You can add a MAXIMUM of 3 logo images. We recommend using square images with 50×50 px dimensions.

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

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

 

Settings

1. Enable – the setting allows you to display or not display product compare buttons;
2. Popup heading – heading of compare buttons popup;
3. Button sticky background – background color of sticky compare product button;
4. Button sticky color – text color of sticky compare product button;
5. Button background – background color of product page compare button;
6. Button color – text color of product page compare button;
7. Button border color – border color of product page compare button;
8. Available icon – color for icon “available”. Background color of the icon is set to 20% transparency;
9. Out of stock icon – color for icon “out of stock”. Background color of the icon is set to 20% transparency.

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

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

 

Settings

1. Default article image – the setting is used to add a default image if the article does not have one;
2. Read more label – link text for the read more link in the article card;
3. Show blog post date – the setting is responsible for showing/hiding the publication dates of the article;
4. Show blog post author – the setting is responsible for showing/hiding the author of the article;
5. Show blog post tag – the setting is responsible for showing/hiding article tags;
6. Strip title to 2 line – the setting is responsible for trimming the title of the article to 3 lines;
7. Strip content to 2 line – the setting is responsible for trimming the content of the article to 3 lines;
8. Show comments count – the setting is responsible for showing/hiding the number of comments.
9. Label backgorund – setting allows you to set the background color of the label background;
10. Label color – setting allows you to set the color for the label text;

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

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

 

 

Quick view settings

General

1. Show badges – the setting allows you to display or not display badges (product labels);
2. Show SKU – the setting allows you to display or not display SKU;
3. SKU Text – text displayed with the SKU;
4. Show vendor – the setting allows you to display or not display vendor;
5. Make vendor link to collection – the setting allows you to make vendor text a link to the collection;
6. Show additional payment buttons – the setting allows you to display or not display dynamic checkout buttons;
7. Show message of taxes included – the setting allows you to display text if taxes are included;
8. Button style – the setting allows you to choose the style of the “Add to cart” button;
9. Button ‘Buy it now’ style – the setting allows you to choose the style of the “Buy it now” button;
10. Variant picker – select a view of variant options type. Note: if you have enabled a color swatch option then the option that is related to color swatch will be like a button. You can select “Buttons” or “Dropdown”
11. Object fit image – setting allows you to set the value for the object-fit property of the image.

 

Countdown timer

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

 

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

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

 

Settings

1. Enable search by articles – setting allows to include articles in the search;
2. Enable search by pages – setting allows to include pages in the search;
3. No results text – setting allows to set no result text.
4. Button label – settings for input placeholder, if it is empty then text from theme translations will be displayed.

 

Most searched

1. Heading – setting allows to set heading when search input is empty;
2. Links – setting allows to set menu when search input is empty;

 

Additional information

If the Enable search by articles or Enable search by pages setting is enabled, then tabs appear in the search popup. If no results are found in any of the categories, then this tab will be disabled. If the search does not return any results, then the search button becomes disabled and a corresponding message is displayed.

 

For developers

The predictive-search.liquid snippet is included in the code, in the theme.liquid file.

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

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

 

Settings

1. X (Twitter) – link to the store’s X (Twitter) account;
2. Facebook – link to the store’s Facebook account;
3. Pinterest -link to the store’s Pinterest account;
4. Instagram – link to the store’s Instagram account;
5. Tumblr – link to the store’s Tumblr account;
6. YouTube – link to the store’s YouTube account;
7. TikTok – link to the store’s TikTok account.

 

This settings block is intended for general Cookie bar settings on the site.

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

 

Settings

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

 

Colors

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

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

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

 

Settings

1. Enable – the setting is responsible for enabling/disabling the popup;
2. Cookie time – the setting is responsible for the period after which the cart reminder popup will be shown. It has several values: 10 minutes, 30 minutes, 1 hour, 8 hours, 1 day;
3. Display frequency – the setting is responsible for the behavior of the popup. If one time is selected, in this case when interacting with the popup, it will be closed for 24 hours. If the Cookie interval is selected, the value from the Cookie time setting will be taken;
4. Text – the setting is responsible for the text inside the popup;

 

Colors

1. Text – the setting is responsible for the text color;
2. Background – the setting is responsible for the popup background;
3. Icon – the setting is responsible for the icon color;
4. Button close – the setting is responsible for the close button color.

 

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

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

 

Settings

1. Enable – the setting is responsible for enabling/disabling the popup;
2. Cookie time – the setting is responsible for the period for which the popup will be hidden when it is closed. Has several values: 1 day, 1 week, 1 month, 3 months, 1 year;
3. Heading – popup title text field;
4. Text – text field for text content;
5. Input label – label for the input;
6. Input placeholder – placeholder for the input;
7. Button submit label – label for the submit button;
8. Button close label – label for the close button;
9. Image desktop – image picker for Desktop. Optional setting; can be skipped;
10. Image mobile – image picker for Mobile. The desktop image will be displayed if a mobile is not specified;
11. Hide image on mobile – the setting is responsible for showing/hiding the image on mobile;
12. Show socials – enable to show social links.

 

Colors

Background color

1. Background – The setting is responsible for specifying popup’s background color.

 

Text colors

1. Heading – specifies a pop-up’s heading text color;
2. Text – specifies a pop-up’s regular text color;

 

Input colors

1. Label – specifies input label text color.
2. Text – specifies input text color.
3. Placeholder – specifies input placeholder text color.
4. Border – specifies input border color.
5. Border (focus) – specifies input border color when it is focused (during email input).

 

Support colors

1. Attention – error message text color within popup.
2. Success – success message text color after the form is successfully submitted.

 

Close button icon colors

1. Icon – close icon color.
2. Border – close icon border color (works for mobile view if image is added and displayed).
3. Background -close icon background color (works for mobile view if image is added and displayed).

 

Close button colors

1. Text – Close button label text color.
2. Text (hover) – Close button label text color on hover.

 

Submit button colors

1. Text – submit button label color.
2. Background – submit button background color.
3. Text (hover) – submit button label color on hover.
4. Background (hover) – submit button background color on hover.

 

Social button colors

1. Icon – social links icon color.
2. Background – social links button background color.
3. Border – social links button border color.
4. Icon (hover) – social links icon color on hover.
5. Background (hover) – social links button background color on hover.
6. Border (hover) – social links button border color on hover.

 

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

If the customer closes the popup – they will be redirected to the browser homepage (by default). If the customer clicks on the main button – the popup will close and the customer can access a site.

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

 

Settings

1. Enable – the setting is responsible for enabling/disabling the popup;
2. Cookie time – the setting is responsible for the period for which the popup will be hidden when it is closed. Has several values: 1 day, 1 week, 1 month, 3 months, 1 year;
3. Heading – popup title text field;
4. Text – text field for text content;
5. Button label – label for the main button;
6. Button close label – label for the close button;
7. Redirect link – link for redirect if the customer closes the popup. The “www.google.com” link is used by default;
8. Image desktop – image picker for Desktop;
9. Image mobile – image picker for Mobile (Desktop – default);
10. Hide image on mobile – the setting is responsible for showing/hiding the image on mobile.

 

 

 

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

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

 

Setting

1. Enable – the setting is responsible for enabling the popup;
2. Layout – the setting is responsible for choosing the layout. There are two settings to choose from: Text, Product;
3. Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;
4. Show shadow – setting allows you to enable/disable shadow below the popup.

 

Text

1. Heading – the setting allows you to set title text;
2. Icon – the setting allows you to set icon;
3. Text – the setting allows you to set text;
4. Button label – the setting allows you to set button label.

 

Product

1. Product – the setting allows you to set the product to open quick view on click;
2. Product additional description – the setting allows you to set product description quick view which opens on click.

 

Colors

1. Background – the setting allows you to set the background color;
2. Text – the setting allows you to set text color;
3. Button close – the setting is responsible for the close button color;
4. Button background – the setting allows you to set button background color;
5. Button label – the setting allows you to set button label color;
6. Button border – the setting allows you to set button border color;
7. Button background (hover) – the setting allows you to set button background color on hover;
8. Button label (hover) – the setting allows you to set button label color on hover;
9. Button border (hover) – the setting allows you to set button border color on hover.

 

Additional information

The remaining settings (texts) such as popup aria label, add to cart, and sold out button labels, are taken from the theme translations. Product promo:

1. Button aria – the text for button aria label;
2. Add to cart – the add to cart button label;
3. Sold out – the for sold out button label.

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

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

 

Settings

1. Enable – enable popup;
2. Cookie time – the setting is responsible for the time until the popup is re-displayed when the user closes it;
3. Heading – a title of the banner;
4. Subheading – a subtitle of the banner;
5. Button label – a text of the button;
6. Button link – link to the specific page (collection) within the store;
7. Button popup style – select a button style for product popup;
8. Image – an image of the banner;
9. Products – the list of products that will appear in the popup, after clicking on the banner;
10. Show shadow – setting allows you to enable/disable shadow below the popup.

 

Colors

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

With this feature, you can show Add gift box button on the Product template, Featured product, Cart drawer, and Cart sections.

To show Add gift box button in the above sections, you need to go settings of these sections. In the current Gift wrap product theme settings, you can select the product, text, and icon of the button.

You can select a product to be added to your cart after clicking on Add gift box button. This feature can be useful when you want to allow the buyer to buy additionally, for example, a gift box, a box, etc.

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

 

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

 

Settings

1. Product – select a product to be added to your cart after clicking on “Add gift box” button;
2. Button label – text of the button;
3. Button icon – an icon of the button. If not set – icon from theme files will be used.

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

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

 

Settings

1. Show – this setting allows you to enable/disable the display of breadcrumbs;
2. Show collection on PDP – this setting allows you to enable/disable the display of the first available product collection.

 

Layout

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

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

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

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

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

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

 

Settings

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

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

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

 

Settings

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

 

Additional information

In this block, your CSS code 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.

This is the default page in the theme that is used to display information for the user when he opens a hidden or non-existent page. It can be accessed via the theme navigation menu.

 

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

This is a default page that is responsible for displaying a collection page. You don’t need to add anything for this template to be displayed. By default, it uses the “Default collection” template.

 

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

 

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

 

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

 

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

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

 

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

 

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

 

 

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

 

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

 

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

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

 

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

 

Contact section:

The section displays the store location and forms to fill out to contact the store;

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

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

 

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

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

 

This is a page with a default template search.json

 

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

 

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

This is a page with a unique template password.json

 

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

 

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

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

 

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

 

INFO: The logic of purchasing a product does not change, the only difference is changing the text of the “Add to cart” button to “Pre-order”. When customer purchase a product, than in the admin panel on the “Order status page” you can see an aditional property “Pre-order”:

 

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

You can use a block “Countdown timer” to set some timer that indicate how long product will be available for the Pre-order or some thing like this.

This is a page with a default template cart.jsonIt can be accessed via a theme navigation menu.

 

This template is used by default for the cart page. You don’t need to add anything for this template to be displayed. You can use the section “Cart template” to configure the appearance and additional settings of the page.

 

 

Adding a section

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.

 

Section settings

General

1. Layout – the setting is responsible for choosing the type of display. There are three options to choose from:
   • Simple text – plain text will be displayed, the settings for it are below in the Simple text block;
   • Countdown timer – a countdown timer will be displayed, the settings for it are below in the Countdown timer block;
   • Ticker – a text will be displayed like a ticker.
2. Show close button – the setting is responsible for displaying a cross to hide the announcement bar;
3. Background image – the setting allows you to add a background image;
4. Background image type – the setting allows you to select the type of background image display:
   • Stretch – this setting will stretch the image across the width of the entire block;
   • Repeat – this setting will make the picture repeat, the number of repetitions depends on the width of the picture.
5. Additional phone – the setting is responsible for displaying social icons;
6. Additional menu – the setting is responsible for displaying links.

 

Slideshow

If you want to display a carousel of the announcements in the announcement bar, please add blocks to the section.

1. Enable autoplay – the setting allows you to enable autoplay for the carousel;
2. Autoplay speed – the setting allows you to change the autoplay speed of the carousel.

 

Simple text

1. Text desktop – the setting allows you to set the text content for Desktop;
2. Text mobile – the setting allows you to set the text content for Mobile. If the content is empty, the content will be taken from the Desktop version.

 

Countdown timer

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

 

Ticker

1. Hide bullets – the setting allows you to hide bullets between sentences;
2. Text – the setting allows you to set the text of the ticker;
3. Movement speed (desktop) – the setting allows you to set the ticker animation speed on the desktop;
4. Movement speed (mobile) – the setting allows you to set the ticker animation speed on the mobile.

 

Colors

1. Background – the setting allows you to set the section background color;
2. Text – the setting allows you to set the text color;
3. Timer text – the setting allows you to set the timer text color;
4. Arrow – the setting allows you to set the arrow color;
5. Link – the setting allows you to set the link color;
6. Button label – the setting allows you to set the button label color;
7. Button background – the setting allows you to set the button background color;
8. Button border – the setting allows you to set the button border color;
9. Button label (hover) – the setting allows you to set the button label color on hover;
10. Button background (hover) – the setting allows you to set the button background color on hover;
11. Button border (hover) – the setting allows you to set the button border color on hover;
12. Button close – the setting allows you to set the color of the close button;
13. Button close (hover) – the setting allows you to set the color of the close button on hover;
14. Social icon – the setting allows you to set the color of the social icons;
15. Social icon (hover) – the setting allows you to set the color of the social icons on hover.

 

Block settings

Block Announcement

You can add a block Announcement, to the section. If blocks are added, then a carousel will be shown.

The content of the carousel slides can be a Simple text or a Countdown timer.

The settings of the Simple text and the Countdown timer are the same as in the general settings.

 

Additional information

1. When closing the Announcement bar, it will be hidden during the current session and will be shown only if you close the browser tab and open the store again.
2. The closing data is added to the Session Storage with the name – showAnnouncementBar.
3. If you set an incorrect date, the timer will not start and will remain with zero values.
4. When the timer expires, zero values remain.

 

Adding a Section

The section is added initially to the template and cannot be removed.

 

Section settings

General

1. Type – the setting allows you to set the header type, 3 options are presented:
   • Static – header placed at the top of the page.
   • Sticky – header is always visible on the page during scroll.
   • Sticky (hide on scroll down) – header hides on scroll down; it displays during scroll up.
2. Enable transparent header on homepage – the setting allows you to enable a transparent header. Transparent header only functions on Desktop view. When the setting is enabled, the header will be transparent only in the top position, when hovering and scrolling the page, the header will have a background;
3. Show Transparent Header for Collection page – the setting allows you to enable a transparent header on the collection page;
4. Enable transparent header on Mobile – the setting allows you to enable a transparent header on mobile view;
5. Keep Transparent Header on Hover – the setting allows you to keep the header transparent when it is hovered. The header will be non-transparent only on scroll;
6. Enable rounded header – the setting allows you to enable a rounded header;
   
7. Show box shadow – the setting allows you to set a box-shadow;
8. Show language selector – the checkbox is responsible for enabling/disabling change a language selector.
9. Show country/region selector – the checkbox is responsible for enabling/disabling change a country/region.
10. Show full country name – the checkbox is responsible to show full/short country name in the “Country” selector.

 

Logo

1. Image – the setting allows you to set the logo image, if not specified, the text name of the store will be displayed;
2. Image (transparent header) – the setting allows you to set the logo image for a transparent header, if not specified, the image will be displayed. We recommend using a logo of the same size as the opaque header;
3. Logo width – range with which you can specify the width of the logo from 20px to 200px on the Desktop. On the mobile, if there is not enough space, the logo will automatically shrink;

 

Menu

1. Main menu – the setting allows you to set a menu that will be used for both Desktop and Mobile;
2. Desktop position – the setting is responsible for the position of the menu on the Desktop
   • Left
     
   • Middle
     
   • Bottom
     
3. Type – the setting allows you to set nested menu type selector for Desktop:
   • Both – megamenu and burger menu will be displayed.
   • Dropdown – only dropdowns will be displayed.
   • Megamenu – only megamenus will be displayed.
4. Open by – the setting allows you to set submenu opening selection selector on Desktop: By hover, By click;
5. Make 1st-level menu clickable – the setting allows you make 1st-level menu clickable if it has submenu. Only works with open on hover for desktop, if the menu item has a link.
6. Highlighted link name – in this field you should specify the name of the menu first level link to which the highlighting should be applied.

 

Burger menu

1. Enable – setting allows you to enable the burger menu. The burger menu will be displayed if “Primary menu” or “Secondary menu” is set;
2. Primary menu – the setting allows you to set a primary menu for the burger menu;
3. Secondary menu – the setting allows you to set a secondary menu for the burger menu;
4. Image – the setting allows you to specify an image;
5. Heading – the setting allows you to specify a heading for the image;
6. Subheading – the setting allows you to specify a subheading for the image;
7. Link – the setting allows you to specify a link for the image.

 

Colors (Background)

1. Background – the setting allows you to set the header background and dropdown menus;
2. Background mobile menu – the setting allows you to set the background for the mobile menu;
3. Bottom menu background – the setting allows you to set the header bottom menu background (menu desktop position – bottom).

 

Colors (border)

1. Menu border color – the setting allows you to set the header menu borderd color (used in burger menu, mobile menu if burger menu enabled);
2. Bottom menu border color – the setting allows you to set the header bottom menu borderd color (menu desktop position – bottom);
3. Botton menu border color (transparent) – the setting allows you to set the header bottom menu borderd color in the transparent header (menu desktop position – bottom).

 

Colors (text)

1. Text – the setting allows you to set a text color;
2. Text (active / hover) – the setting allows you to set a text color for active text elements or on hover state;
3. Text background (selected) – the setting allows you to specify a background color for a selected menu item on megamenu;
4. Text secondary – the setting allows you to set a secondary text color. Used in bottom menu (menu desktop position – bottom);
5. Text secondary (active / hover) – the setting allows you to set a secondary text color for active text elements or on hover state. Used in bottom menu (menu desktop position – bottom);
6. Text (header transparent) – the setting allows you to set a text color in the transparent header;
7. Text (header transparent)(active) – the setting allows you to set a text color for active text elements in the transparent header;

 

Colors (Highlighted link)

1. Highlighted link color – the setting allows you to specify a text color for the menu first level link specified in the “Highlighted link name” setting.

 

Colors (Icon)

1. Icon – the setting allows you to set a color for the icons;
2. Icon (transparent) – the setting allows you to set a color for the icons in the transparent header.

 

Colors (Count)

1. Count text – the setting allows you to set a color for the text of the number of items in the cart;
2. Count text (transparent) – the setting allows you to set a color for the text of the number of items in the cart in the transparent header;
3. Count background – the setting allows you to set a color for the background of the number of items in the cart;
4. Count background (transparent) – the setting allows you to set a color for the background of the number of items in the cart in the transparent header.

 

Colors (Mega menu image)

1. Mega menu image text – the setting allows you to set a color for the image text in the mega menu;
2. Mega menu image overlay – the setting allows you to set an overlay color for the first image in the mega menu.

 

Colors (Burger button)

1. Burger button – the setting allows you to set a burger button color;
2. Burger button text – the setting allows you to set a burger button text color;
3. Burger button (hover) – the setting allows you to set a burger button color on hover state;
4. Burger button text (hover) – the setting allows you to set a burger button text color on hover state;
5. Burger button (transparent) – the setting allows you to set a burger button color in the transparent header;
6. Burger button text (transparent) – the setting allows you to set a burger button text color in the transparent header;
7. Bottom burger button – the setting allows you to set a bottom burger button color. Used in bottom menu (menu desktop position – bottom);
8. Bottom burger button text – the setting allows you to set a bottom burger button text color. Used in bottom menu (menu desktop position – bottom);
9. Bottom burger button (hover) – the setting allows you to set a bottom burger button color on hover state. Used in bottom menu (menu desktop position – bottom);
10. Bottom burger button text (hover) – the setting allows you to set a botton burger button text color on hover state. Used in bottom menu (menu desktop position – bottom);
11. Burger button close – the setting allows you to set a burger button close color;
12. Burger button close text – the setting allows you to set a burger button close text color;
13. Burger button close (hover) – the setting allows you to set a burger button close color on hover state;
14. Burger button close text (hover) – the setting allows you to set a burger button close text color on hover state;

 

Colors (Search input)

1. Search input – the setting allows you to set a color for search input;
2. Search input text– the setting allows you to set a text color for search input;
3. Search input (transparent) – the setting allows you to set a color for search input in the transparent header;
4. Search input text (transparent) – the setting allows you to set a text color for search input in the transparent header.

 

Blocks settings

Block Mega menu

 

General

1. Link name – in this field, you must specify the name of the first-level link to which the mega menu should be added. Mega Menu will be displayed if the main menu contains a nested level;
2. Menu type – setting allows you to select the type of menu display. There are 2 types:
   • Tabs – in this item, the second menu level is displayed, by clicking on the items of which you can select the 3rd menu level;
     
   • List – in this item, a menu is naturally displayed, where the second level is the title and the 3rd level is like a list under it. If the second level menu link is set to “#”, then the plain text will be displayed;
     
3. Badge text – this setting allows you to add a badge above the menu;
4. Badge text color – this setting allows you to set the text color of the badge;
5. Badge background color – this setting allows you to set the color background color of the badge;
6. Mega menu background – this setting allows you to set the color background color of the mega menu.

 

Media item 1 / Media item 2

1. Image – this setting allows you to set the first image in the mega menu;
2. Heading – this setting allows you to set a heading to the first image in the mega menu;
3. Subheading – this setting allows you to set a subheading to the first image in the mega menu;
4. Link – this setting allows you to set a link to the first image in the mega menu;
5. Product – this setting allows you to display a product card. The product has a higher priority than the picture.

 

Block Mega Menu Split Menu

 

General

1. Link name – the setting is responsible to specifying a menu item name to which the mega menu will be connected;
2. Badge text – this setting allows you to add a badge above the menu;
3. Badge text color – this setting allows you to set the text color of the badge;
4. Badge background color – this setting allows you to set the background color of the badge;
5. Mega menu background – this setting allows you to set the color background color of the mega menu.

 

Text side

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

 

Image side

1. Image – the setting allows you to specify the image;
2. Image link – the setting allows you to specify the link on the image.

 

Block Mega Menu Tier Menus

 

General

1. Link name – the setting is responsible to specifying a menu item name to which the mega menu will be connected;
2. Badge text – this setting allows you to add a badge above the menu;
3. Badge text color – this setting allows you to set the text color of the badge;
4. Badge background color – this setting allows you to set the background color of the badge;
5. Mega menu background – this setting allows you to set the color background color of the mega menu.
6. Text nested – nested menu items text color.

 

Media item

1. Image – this setting allows you to set the first image in the mega menu;
2. Heading – this setting allows you to set a heading to the first image in the mega menu;
3. Subheading – this setting allows you to set a subheading to the first image in the mega menu;
4. Link – this setting allows you to set a link to the first image in the mega menu;
5. Product – this setting allows you to display a product card. The product has a higher priority than the picture.

 

Block Mega Menu Media

 

General

1. Link name – the setting is responsible to specifying a menu item name to which the mega menu will be connected;
2. Badge text – this setting allows you to add a badge above the menu;
3. Badge text color – this setting allows you to set the text color of the badge;
4. Badge background color – this setting allows you to set the background color of the badge;
5. Mega menu background – this setting allows you to set the color background color of the mega menu.

 

Media item (1-6)

1. Image – this setting allows you to set the first image in the mega menu;
2. Heading – this setting allows you to set a heading to the first image in the mega menu;
3. Subheading – this setting allows you to set a subheading to the first image in the mega menu;
4. Link – this setting allows you to set a link to the first image in the mega menu;
5. Product – this setting allows you to display a product card. The product has a higher priority than the picture.

 

Block Mega menu brands

 

General

The menu of brands will be sorted alphabetically. If the Show alphabet setting is enabled the menu will be grouped by the first character of the menu items without repeats. The filter will also display the first characters of the menu items without repeats.

1. Link name – in this field, you must specify the name of the first-level link to which the mega menu should be added. Mega Menu will be displayed if the main menu contains a nested level;
2. Burger menu link name name – in this field, you must specify the name of the burger menu first-level link to which the burger menu should be added. Mega Menu will be displayed if the main menu contains a nested level;
3. Show alphabet – this setting allows you to enable the filter;
   • enabled
   • disabled
4. Badge text – this setting allows you to add a badge above the menu;
5. Badge text color – this setting allows you to set the text color of the badge;
6. Badge background color – this setting allows you to set the background color of the badge;
7. Mega menu background – this setting allows you to set the color background color of the mega menu.
8. Brand logo border (hover) – this setting allows you to set a brand logo border;
9. Filter symbol color – this setting allows you to set a filter symbol color;
10. Category symbol color – this setting allows you to set a category symbol color.

 

Brands logos

The setting is responsible for adding a button with the link to the mega menu.

1. Link text – the setting allows you to specify a link text;
2. Link – the setting allows you to specify a link;

 

Block Brand logo

Used to display brand logos in brand menu.

1. Logo – the setting allows you to specify a logo;
2. Logo name – the setting allows you to specify a logo name;
3. Logo link – the setting allows you to specify a logo link.

 

 

Adding a Section

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.

 

Section settings

1. Heading – the setting allows you to set the text for the section title. By default, it is taken from translations;
2. Show items count in the cart – the setting is responsible for displaying the number of products in the cart;
3. Show gift wrap button – the setting allows you to enable the Show “Add gift box” button in the Cart drawer. You can learn more about the Gift wrap button in the “Gift wrap product” section.

 

Upsell settings

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

 

Blocks settings

Blocks are introduced to provide dynamic content in the cart. Blocks can also be swapped to get different combinations. Usually, this feature is not available in other themes.

 

Block Items

Block limit – 1

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

 

Block Suggested Items

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

1. Heading – the setting allows you to set the text for the block title;
2. Products – the setting allows you to select products that act as upsells. Limit – 12 products.
3. Opened on load – the setting allows you to specify whether a dropdown with upsell products will be opened when opening the cart.

 

Block Free Shipping Progress

Block limit – 1

Block is responsible for displaying the Shipping bar.

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

 

Colors

1. Progress bar background color – the setting allows you to set the background color for the progress bar;
2. Progress bar fill color – the setting allows you to set the fill color for the progress bar.

 

Block Richtext

Block limit – 1

1. Text – the setting allows you to set the text content;
2. Icon – the setting allows you to set the image before the text.

 

Colros

1. Text – the setting allows you to set the color for the text;
2. Background – the setting allows you to set the background color for the block.

 

Additional information

1. Block Suggested Items.
   Products are not displayed if they are already added to the cart;
2. Block Suggested Items.
   When you click on the add to cart button, the Quick View window will be opened first to allow selecting a product variant;

 

Adding a section

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

 

Section settings

General

1. Collection – specifies a collection for the section.
2. Image – specifies an alternative picture for the collection.
3. Image size – specifies the size of the picture.
4. Products per row – specifies the number of products in a row (2, 3).
5. Products to show – specifies the product display limit from 2 to 6.

 

Colors

1. Image overlay – specifies the color for the image overlay.
2. Image text – specifies the color of the picture text.

 

Layout

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

 

Adding a section

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

 

Section settings

1. Product – product picker.

 

Media

 

1. Enable zoom – the setting allows you to enable the Zoom function that appears when you click on the image;
2. Show arrows on mobile – the setting is responsible for whether the slider arrows will be shown in the mobile version;
3. Media layout – the setting allows you to choose the appearance of the product image gallery:
4. Thumbnails position – setting allows you to select the location for the thumbnails, only works if the media layout is a carousel. Has two options: left and bottom;
5. 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”.
6. Make smooth scroll for stacked gallery – in the Stacked, Stacked 2 columns, Stacked 2 columns with big image gallery mode, it has Thumbnails on the left, clicking on which will scroll to the desired image. This parameter will determine whether the movement will be instantaneous or smooth.
7. Enable media scroll for stacked layout – Enables scroll to variant image when changing product options for stacked layout.

 

General

1. Layout – setting is responsible for the structure of the template:
2. Show message of taxes included – if taxes are included in the price of the product in the store, then this parameter will control the visibility of the corresponding message;
3. Show pay installments – if the store has the right to sell by installments and this feature is enabled in the store settings, then this parameter will control the visibility of the installment block;

 

Size guide

1. Show size guide – the setting is responsible for showing/hiding the popup and the button for opening the popup;
2. Button label – popup button text;
3. Button icon – the icon of the size guide button;
4. Popup heading – the title of the size guide popup;
5. General tab label – the text for size guide general tab;
6. Model tab label – the text for the size guide model tab;

 

Colors

1. UI button color – the setting allows you to set the UI button’s color. Will also be used for shadow color;
2. UI button background color – the setting allows you to set the UI button’s background color;
3. UI buttom border color – the setting allows you to set the UI button’s border color.

 

Layout

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

 

Block settings

Block Badges

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block Badge images

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

To show the badge images:

Create product metafield with Name: “Badge images”, Namespace and key: custom.badge_images. Content type must be File as List. After that, go to the corresponding product and add a list of images to the metafield.

 

Block Title

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block Vandor and SKU

1. Show SKU – the setting that allows to show SKU of the product;
2. SKU text – the text of the SKU field. You need to include the “{SKU}” in the text field, which will be replaced with the product’s SKU number;
3. Show vendor – the setting that allows you to show the product’s vendor;
4. Make vendor link to collection – the setting that allows to wrap a vendor into a link.

 

Block Sale timer

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

Colors

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

 

Block Options

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block Quantity

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block Price

It displays the price of the product or the selected option. Also outputs the unit cost if the product has a unit cost instead of a quantity cost.

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

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block Add to cart

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Button style – add to cart button style;
3. Button 'Buy it now' style – ‘Buy it now’ button style;
4. Show additional payment buttons – enables the display of the “Buy it now” button;
5. Show recipient information form for gift cards – allows customers to send gift cards on a scheduled date along with a personal message (works only on a gift product).

 

Block Pickup availability

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

 

Block Drawers

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns.

 

Product description

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

 

Custom drawers 1 – 2

1. Page – the setting allows you to select a page to show its content in the drawer;
2. Button label – the setting allows you to set the button label for the drawer toggler.
3. Drawer heading – the setting allows you to set the drawer heading.

 

Custom drawers 3 – 4

1. Content – the setting allows you to set a text content that will display in the drawer;
2. Button label – the setting allows you to set the button label for the drawer toggler.
3. Drawer heading – the setting allows you to set the drawer heading.

 

Block Complementary products

With this block, you can show complementary products of the current product. To configure upsell products you can use the “Search & Discovery” APP.

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Heading – setting allows you to set heading for the block.

 

Block Highlight Point

With this block, you can add simple text content with an icon.

1. Block column position – specifies the column in which the block is located when section setting Layout in value Three column;
2. Icon image – the setting allows you to set an icon for the message;
3. Text – the text of the block.

 

Block Inventory status

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

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

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

1. Block column position – specifies the column in which the block is located when section setting Layout in value Three column;
2. Low stock text – the text that appears when variant inventory quantity is less or equals ”Low stock threshold” value;
3. Low stock icon – the icon of the “Low stock text”;
4. High stock text – the text that appears when variant inventory quantity is more than the “Low stock threshold” value;
5. High stock icon – the icon of the “High stock text”;
6. 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.

 

Block Gift product

Add a block to show the “Add gift box” button in the product section. This block doesn’t have any settings. You can learn more about the “Gift wrap button” in the “Gift wrap product” section.

 

Block Stock Alert

1. Button label – the text for the button. Required field;
2. Button icon – the icon for the button.
3. Heading – the popup title text field. Required field;
4. Email label – the label for the input. Required field;
5. Button label – the label for the submit button. Required field;
6. Button style – style of the submit button;
7. Success message – the message that the form was sent successfully. Required field.

 

Block Question Form

With this block, you can add a button to the product form that triggers a popup with the Shopify contact form (but with some additional fields).

That allows customers to send emails to you with questions about the current product. The field with the product URL is filled automatically based on the product and his selected variant.

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns.
2. Button label – the text for the button. Required field;
3. Button icon – the icon for the button.

 

Form settings

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

 

Block Custom Text Box

With this block, you can display a text field (input type='text‘), which will represent the line_item property of the product. When a product is added to a cart with a filled field, the value of this field will be added to the cart, checkout, and order.

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Field label – the setting is responsible for the label text for the input;
3. Required text – the setting is responsible for the label text for the checkbox.

 

Custom Text Box logic:

If the Required text is not filled in, only the text input will be displayed. In this case, if the field is filled – the user information will be added to the order.

If Required text is filled in, a checkbox will be displayed under the Custom Text Box with a message from that field. If the checkbox is not clicked OR the Custom Text Box is empty, the product cannot be added to the cart, and the corresponding error is displayed.

 

Block Share

1. Block column position – specifies the column in which the block is located when the section setting Layout in value Three columns;
2. Show Facebook – show a Facebook social share link;
3. Show X (Twitter) – show a X(Twitter) social share link;
4. Show Pinterest – show a Pinterest social share link.

 

Block Benefits

With this block, you can add three blocks with some short information about your services, guarantees, or something like that.

You can add max 2 blocks of this type and 3 “Benefit” items per block. They have the same settings:

1. Block column position – specifies the column in which the block is located when section setting Layout in value Three column.
2. Icon – the icon of the benefit item;
3. Heading – the title of the benefit item;
4. Link label – the link text of the benefit item;
5. Link url – the link URL of the benefit item.

 

Block Custom liquid

1. Block column position – specifies the column in which the block is located when section setting Layout in value Three column;
2. Custom liquid – setting allows you to add your liquid code. You can learn more about liquid here – https://shopify.dev/api/liquid.

 

Adding a section

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

 

Section settings

General

1. heading – you can set a title for the section;
2. Text alignment – you can choose one of two positions for the text;
3. Image aspect ratio – you can choose the look of the picture;
4. Card per row – you can choose the number of columns;
5. Enable rounded cards – you can add rounding and padding for images;

 

Color

1. Overlay color – you can set the color for the overlay;
2. Image text – you can set the color for the text;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

1. Сollection – you can select a collection for the block;
2. Image – you can choose an alternative picture for the collection;

 

Adding a section

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

 

Section settings

1. Show arrows – the setting is responsible for displaying the arrows for switching between slides;
2. Show pagination – the setting is responsible for displaying pagination;
3. Enable loop – the setting is responsible for setting the infinite scrolling of the slider;
4. Enable autoplay – the setting is responsible for setting the automatic switching of slides;
5. Autoplay speed – the setting is responsible for the speed of automatic switching of slides;
6. Animation speed – the setting allows you to set the animation speed of switching slides;
7. Animation type – the setting allows you to set the type of animation for switching slides:

 

Colors

1. Background – the setting allows you to set the background color of the section;
2. Pagination – the setting allows you to set colors for pagination;
3. Arrows background – the setting allows you to set the background color for the arrows for switching between slides;
4. Enable arrows glass effect – the setting allows you to set the glass effect for the arrows background for switching between slides(info: This effect is working only when background opacity less than 1).
5. Arrows color – the setting allows you to set the color for the arrows for switching between slides;
6. Arrows border – the setting allows you to set the color for the arrows border for switching between slides;
7. Arrows background (hover) – the setting allows you to set the background color for the arrows for switching between slides on hover;
8. Arrows color (hover) – the setting allows you to set the color for the arrows for switching between slides on hover;
9. Arrows border (hover) – the setting allows you to set the color for the arrow border for switching between slides on hover.

 

Layout

1. 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;
2. Desktop section height – the setting is responsible for the height of the section for the desktop;
3. Mobile section height – the setting is responsible for the height of the section for mobile;
4. Subtract header height – the setting is responsible for subtracting the header height from the slideshow size. This will be useful when you set the slideshow size to 100% and turn on the setting, then you will fit the announcement bar, header, and slideshow on one screen;
5. Desktop offset top – top indent of the section on the desktop;
6. Desktop offset bottom – bottom indent of the section on the desktop;
7. Mobile offset top – top indent of the section on the mobile;
8. Mobile offset bottom – bottom indent of the section on the mobile.

 

Blocks settings

Block Image Slide

1. Image (desktop) – the setting allows you to set the image for the desktop;
2. Image (mobile) – the setting allows you to set the image for mobile;
3. Heading – the setting allows you to set the text for the title;
4. Text – the setting allows you to set the text for the text field;
5. Button label – the setting allows you to set the label for the label;
6. Button aria-label – the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;
7. Button link – the setting allows you to set a link for the button;
8. Open link in a new tab – the setting allows you to indicate how the link will open, in the current tab or the new;
9. Make link clickable on the entire slide – the setting allows you to make the entire slide a link;
10. Second button label – the setting allows you to set the label for the second label;
11. Second button aria-label – the setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;
12. Second button link – the setting allows you to set a link for the second button;
13. Open second link in a new tab – the setting allows you to indicate how the second link will open, in the current tab or the new.

 

Colors

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

 

Video slide

General

1. Video (desktop) – the setting allows you to select a video from the picker for the desktop;
2. Video (mobile) – the setting allows you to select a video from the picker for the mobile;
3. Preview image (desktop) – the setting allows you to set the preview image for the desktop;
4. Preview image (mobile) – the setting allows you to set the preview image for the mobile;
5. Heading – the setting allows you to set the text for the title;
6. Text – the setting allows you to set the text for the text field;
7. Button label – the setting allows you to set the label for the button;
8. Button aria-label – the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;
9. Button link – the setting allows you to set a link for the button.
10. Open link in a new tab – the setting allows you to indicate how the link will open, in the current tab or the new;
11. Second button label – the setting allows you to set the label for the second label;
12. Second button aria-label – the setting allows you to set the text for the second button aria-label attribute. The attribute is needed for accessibility;
13. Second button link – the setting allows you to set a link for the second button;
14. Open second link in a new tab – the setting allows you to indicate how the second link will open, in the current tab or the new.

 

Video settings

1. Play type – the setting allows you to set the playback type for the video.
   • Autoplay
   • Play by a button
   • Autoplay by button

 

Alignment

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

 

Colors

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

 

Block Video link source

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

 

Video settings

 

Alignment

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

 

Colors

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

 

Block Three-Part Slide

This block (slide) contains three columns. In the first and the last columns, you can set media content (Image, HTML5 video, or YouTube/Vimeo link) and in the second column, you can show the label, title, and button. You can mix media types for different columns. For example, in the first column, you can show an image and in the third column, you can show HTML 5 video.

 

General

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

 

First column / Third column

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

 

Second column

1. Heading – the setting allows you to set the heading;
2. Text – the setting allows you to set the text;
3. Button label – the setting allows you to set the label for the button;
4. Button aria-label – the setting allows you to set the text for the aria-label attribute. The attribute is needed for accessibility;
5. Button link – the setting allows you to set a link for the button;
6. Open link in a new tab – the setting allows you to indicate how the second link will open, in the current tab or the new;
7. Make link clickable on the entire slide – the setting allows you to make the entire slide a link.

 

Colors

1. Background – the setting allows you to set the background color of the slide;
2. Heading – the setting allows you to set the color for the header;
3. Text – the setting allows you to set the color for the description;
4. Button label – the setting allows you to set the color for the button label;
5. Button label – the setting allows you to set the color for the button label when the user hovers over it.

 

 

Adding a section

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

 

Section settings

1. Layout – the way content is displayed. You can choose: One column image above content/One column background image/Two columns;
2. Heading – section heading text;
3. Subheading – section subheading text;
4. Text – section text;
5. Image – you can set a picture for the section;
6. Hide image – this setting can hide the picture. Does not work for “two column” layout;
7. Image position – you can set the position of the image: left/right. Works only when the two columns layout is selected;
8. Content position – you can set the positioning of the content: left/centre/right. Works only when the One column background image layout type is selected;

 

Form

1. Email placeholder – you can set the default text for the email placeholder;
2. Button label – you can set the default button text;
3. Button style – button style: Primary/Secondary/Primary with border/Secondary with border;
4. Success message – text after a successfully sent subscription;

Colors

1. Heading – heading text color;
2. Text – main text color;
3. Section background – background color;
4. Content background – content background color. Works only when layout type One column background image is selected;
5. Enable content glass effect – you can set a glass effect for the content background. Works only when layout type One column background image is selected;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Adding a section

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

 

Section settings

1. Heading – setting allows you to add the text for the title;
2. Text – setting allows you to add text content;
3. Image – setting allows you to select an image for the placeholder.

 

Video

1. Video type – the setting allows you to choose the type of the video (HTML5, Youtube/Vimeo);
2. HTML5 desktop video – the setting allows you to add a desktop video for the HTML5 type;
3. HTML5 mobile video – the setting allows you to add a mobile video for the HTML5 type;
4. YouTube/Vimeo desktop video url – the setting allows you to add a link to a video for the Youtube/Vimeo type for the desktop;
5. YouTube/Vimeo mobile video url – the setting allows you to add a link to a video for the Youtube/Vimeo type for the mobile.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

Adding a section

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

 

Section settings

1. Blog – you can choose the blog you want;
2. Heading – a field where you can specify a title for the section;
3. Small articles heading – a field where you can set the heading for a small section with blogs;

 

Colors

1. Big post color – text color in the big post block;
2. Blog post color secondary – text color for the text with basic data about the article;
3. Big post background – background color for big post;
4. Big post tag color – color for the tag text;
5. Big post tag background – background color for the tag;
6. Enable content glass effect – enable the glass effect for a big post background;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

The Banner Animation Heading section adds a unique and interactive element to your store. It features a zoom-in animation for the heading text that triggers as the user scrolls, creating a modern and engaging visual effect. You can upload a background image or use a solid color to match your branding, and customize the heading text, alignment, and animation speed. This section is perfect for drawing attention to key messages, promotions, or seasonal collections while giving your storefront a dynamic and polished look.

 

Adding a section

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

 

Section settings

1. Enable rounded corners – the setting allows you to add rounded corners for the container;

 

Colors

1. Section background – background color setting;
2. Text content background – background color for the content;
3. Enable glass effect – the setting allows you to add glass effect for the text content background;
4. Heading(before animation) – the setting allows you to set the color for heading(before animation);
5. Text – text color setting;
6. Link – Color of the links inside a text content;
7. Button background – setting the background color of the button;
8. Button label – setting button label color;
9. Button border – setting the color of the button border;
10. Button background (hover) – setting the background color of the button on hover;
11. Button text (hover) – setting button label color on hover;
12. Button border (hover) – setting the button border color on hover;
13. Overlay – overlay color for media content;
14. Image border color – the color of the border that can be added to the media content;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

Only one block can be added to the section.

Block Wide Media

General

1. Desktop banner min height – set a minimum height for the banner on the desktop;
2. Mobile banner min height – set a minimum height for the banner on the mobile;
3. Media type – selector for choosing the type of media content to be displayed. Available types are:
   • Image – a normal image will be displayed;
   • HTML5 video – HTML5 video will be displayed – this is an uploaded video file from your admin panel;
   • Youtube/Vimeo – A video from the YouTube or Vimeo platform will be displayed.
4. Label – field for Label;
5. Heading – field for Heading;
6. Text – field for Text;

1. Button label – a field for the label content of the button;
2. Button link – the URL field for the button;
3. Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;
4. Image desktop – choose a picture to be displayed on the Desktop(Image can be used as background for heading before animation);
5. Image mobile – choose a picture to be displayed on the Mobile(Image can be used as background for heading before animation);
6. Image border width – the setting allows you to set the size of the border;
7. Image border indent – the setting allows you to set the indent of the border;

 

Video

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

 

Alignment

1. Content alignment – content position selector within the block. Text can have 3 positions:
   1. Left – content positioning on the left side;
   2. Center – positioning content in the center;
   3. Right – positioning content on the right side;
2. Content alignment mobile – content position selector within the block on the mobile. Text can have 3 positions:
   1. Left – content positioning on the left side;
   2. Center – positioning content in the center;
   3. Right – positioning content on the right side;
3. Block alignment horizontal – block horizontal position selector. A block can have 3 positions.
   1. Left – block’s positioning on the left side of the container;
   2. Center – block’s positioning in the center of the container;
   3. Right – block’s positioning on the right side of the container.
4. Block alignment vertical – block vertical position selector. A block can have 3 positions.
   1. Top – block’s positioning on the top side of the container;
   2. Center – block’s positioning in the center of the container;
   3. Bottom – block’s positioning on the bottom side of the container.

 

Block Sale timer

This block has the same settings for the General, Video, and Alignment block settings as they are in the Wide media.

Timer

1. Year – years of the end of the countdown timer;
2. Month – month of the end of the countdown timer;
3. Day – day of the end of the countdown timer;
4. Hour – hour of the end of the countdown timer;
5. Timezone – Timezone;
6. Timer cell background color – setting the background color for the time cell;
7. Timer cell color – setting the text color for the cells of the countdown.

 

The Banner Animation Scale section lets you create a bold and animated banner that scales on scroll for an eye-catching effect. It supports images and videos as background, making it perfect for showcasing a product, promotion, or collection in a visually dynamic way. You can also add a countdown timer to highlight limited-time offers or upcoming launches. This section combines strong visuals with smooth animations to create an engaging and modern storefront experience.

 

Adding a section

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

 

Section settings

1. Enable rounded corners – the setting allows you to add rounded corners for the container;

 

Colors

1. Section background – background color setting;
2. Text content background – background color for the content;
3. Enable glass effect – the setting allows you to add glass effect for the text content background;
4. Text – text color setting;
5. Link – Color of the links inside a text content;
6. Button background – setting the background color of the button;
7. Button label – setting button label color;
8. Button border – setting the color of the button border;
9. Button background (hover) – setting the background color of the button on hover;
10. Button label (hover) – setting button label color on hover;
11. Button border (hover) – setting the button border color on hover;
12. Overlay – overlay color for media content;
13. Image border color – the color of the border that can be added to the media content;

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

Block settings

Only one block can be added to the section.

Block Wide Media

1. Desktop banner min height – set a minimum height for the banner on the desktop;
2. Mobile banner min height – set a minimum height for the banner on the mobile;
3. Media type – selector for choosing the type of media content to be displayed. Available types are:
   • Image – a normal image will be displayed;
   • HTML5 video – HTML5 video will be displayed – this is an uploaded video file from your admin panel;
   • Youtube/Vimeo – A video from the YouTube or Vimeo platform will be displayed.
4. Label – field for Label;
5. Heading – field for Heading;
6. Text – field for Text;

1. Button label – a field for the label content of the button;
2. Button link – the URL field for the button;
3. Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;
4. Image desktop – choose a picture to be displayed on the Desktop(Image can be used as background for heading before animation);
5. Image mobile – choose a picture to be displayed on the Mobile(Image can be used as background for heading before animation);
6. Image border width – the setting allows you to set the size of the border;
7. Image border indent – the setting allows you to set the indent of the border;

 

Video

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

 

Alignment

1. Content alignment – content position selector within the block. Text can have 3 positions:
   1. Left – content positioning on the left side;
   2. Center – positioning content in the center;
   3. Right – positioning content on the right side;
2. Content alignment mobile – content position selector within the block on the mobile. Text can have 3 positions:
   1. Left – content positioning on the left side;
   2. Center – positioning content in the center;
   3. Right – positioning content on the right side;
3. Block alignment horizontal – block horizontal position selector. A block can have 3 positions.
   1. Left – block’s positioning on the left side of the container;
   2. Center – block’s positioning in the center of the container;
   3. Right – block’s positioning on the right side of the container.
4. Block alignment vertical – block vertical position selector. A block can have 3 positions.
   1. Top – block’s positioning on the top side of the container;
   2. Center – block’s positioning in the center of the container;
   3. Bottom – block’s positioning on the bottom side of the container.

 

Block Sale timer

This block has the same settings for the General, Video, and Alignment block settings as they are in the Wide media.

Timer

1. Year – years of the end of the countdown timer;
2. Month – month of the end of the countdown timer;
3. Day – day of the end of the countdown timer;
4. Hour – hour of the end of the countdown timer;
5. Timezone – Timezone;
6. Timer cell background color – setting the background color for the time cell;
7. Timer cell color – setting the text color for the cells of the countdown.

The Banner with Thumbnails section allows you to display a headline and supporting text alongside interactive thumbnail tabs. Each tab can showcase a different image, making it easy to highlight various products, features, or collections in one place. When customers click on a thumbnail, the main image updates, creating an engaging, slideshow-like experience that’s perfect for storytelling or promotions.

 

Adding a section

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

 

Section settings

General

1. Label – setting allows you to set the section label;
2. Heading – setting allows you to set the section heading;
3. Text – setting allows you to set the section text;

 

Colors

1. Background – section background color;
2. Label – section label color;
3. Text – section text color;
4. Tab button background (active) – tab background color when it is active;
5. Tab button color (active) – tab text color when it is active;
6. Tab button background – tab background color;
7. Tab button color – tab text color;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

Block limit – 6

1. Heading – block heading text;
2. Media type – you can choose the type of media: image, HTML 5 video, YouTube/Vimeo;
3. Image desktop – you can set a picture for the desktop (”Image” media type);
4. Image mobile – you can set a picture for the mobile (”Image” media type);
5. HTML 5 desktop video – you can set an HTML 5 video for the desktop (”HTML 5 video” media type);
6. HTML 5 mobile video – you can set an HTML 5 video for the mobile (”HTML 5 video” media type);
7. Youtube/Vimeo desktop video url – you can set the url for Youtube/Vimeo video for desktop (media type “YouTube/Vimeo”);
8. Youtube/Vimeo mobile video url – you can set the url for Youtube/Vimeo video for mobile (media type “YouTube/Vimeo”);

The General Banner section is a versatile promotional tool for your store. You can display a bold banner featuring an image or a video to capture attention and highlight key messages. It’s ideal for showcasing special announcements, new collections, or limited-time offers.

Additionally, this section includes an optional countdown timer—perfect for creating urgency during sales or product launches. With customizable visuals and messaging, the General Banner helps you engage customers and drive action right from the storefront.

 

Adding a section

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

 

Section settings

1. Enable rounded corners – the setting allows you to add rounded corners for the container;

 

Colors

1. Section background – background color setting;
2. Text content background – background color for the content;
3. Enable glass effect – the setting allows you to add glass effect for the text content background;
4. Text – text color setting;
5. Link – setting link text color;
6. Button background – setting the background color of the button;
7. Button label – setting button label color;
8. Button border – setting the color of the button border;
9. Button background (hover) – setting the background color of the button on hover;
10. Button text (hover) – setting button label color on hover;
11. Button border (hover) – setting the button border color on hover.
12. Overlay – overlay color for media content;
13. Image border color – the color of the border that can be added to the media content;

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

Blocks settings

The section contains three different types of blocks (banner options): Wide media, Sale timer, and Side-by-side.

Block limit – 1

 

Block Wide Media

1. Desktop banner min height – set a minimum height for the banner on the desktop;
2. Mobile banner min height – set a minimum height for the banner on the mobile;
3. Media type – selector for choosing the type of media content to be displayed. Available types are:
   • Image – a normal image will be displayed;
   • HTML5 video – HTML5 video will be displayed – this is an uploaded video file from your admin panel;
   • Youtube/Vimeo – A video from the YouTube or Vimeo platform will be displayed.
4. Label – field for Label;
5. Heading – field for Heading;
6. Text – field for Text;

1. Button label – a field for the label content of the button;
2. Button link – the URL field for the button;
3. Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;
4. Image desktop – choose a picture to be displayed on the Desktop(Image can be used as background for heading before animation);
5. Image mobile – choose a picture to be displayed on the Mobile(Image can be used as background for heading before animation);
6. Image border width – the setting allows you to set the size of the border;
7. Image border indent – the setting allows you to set the indent of the border;

 

Video

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

 

Alignment

1. Content alignment – content position selector within the block. Text can have 3 positions:
   1. Left – content positioning on the left side;
   2. Center – positioning content in the center;
   3. Right – positioning content on the right side;
2. Content alignment mobile – content position selector within the block on the mobile. Text can have 3 positions:
   1. Left – content positioning on the left side;
   2. Center – positioning content in the center;
   3. Right – positioning content on the right side;
3. Block alignment horizontal – block horizontal position selector. A block can have 3 positions.
   1. Left – block’s positioning on the left side of the container;
   2. Center – block’s positioning in the center of the container;
   3. Right – block’s positioning on the right side of the container.
4. Block alignment vertical – block vertical position selector. A block can have 3 positions.
   1. Top – block’s positioning on the top side of the container;
   2. Center – block’s positioning in the center of the container;
   3. Bottom – block’s positioning on the bottom side of the container.

 

Block Sale timer

This block has the same settings for the General, Video, and Alignment block settings as they are in the Wide media.

Timer

1. Year – years of the end of the countdown timer;
2. Month – month of the end of the countdown timer;
3. Day – day of the end of the countdown timer;
4. Hour – hour of the end of the countdown timer;
5. Timezone – Timezone;
6. Timer cell background color – setting the background color for the time cell;
7. Timer cell color – setting the text color for the cells of the countdown.

 

Block Side-by-side

This block has the same settings as a Wide media block. The difference lies in the visual appearance of the banner.

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

 

Section settings

General

1. Enable rounded corners – you can specify rounded corners for the section and indents on the sides;
2. Desktop banner min height – set a minimum height for the banner on the desktop;
3. Mobile banner min height – set a minimum height for the banner on the mobile;
4. Media type – selector for choosing the type of media content to be displayed. Available types are:
   • Image – a normal image will be displayed;
   • HTML5 video – HTML5 video will be displayed;
   • Youtube/Vimeo – a video from the YouTube or Vimeo platform will be displayed.
5. Label – field for Label;
6. Heading – field for Heading;
7. Text – field for Text;
8. Button label – a field for the label content of the button;
9. Button aria-label – field for aria-label, this field is needed to improve accessibility, people using screen readers will hear the purpose of this button;
10. Button link – the URL field for the button;
11. Image desktop – you can set a picture for the desktop;
12. Image mobile – can set mobile image, if not selected will be desktop image;

 

Video

1. HTML 5 desktop video – you can set an HTML 5 video for the desktop (”HTML 5 video” media type);
2. HTML 5 mobile video – you can set an HTML 5 video for the mobile (”HTML 5 video” media type);
3. Youtube/Vimeo desktop video url – you can set the url for Youtube/Vimeo video for desktop (media type “YouTube/Vimeo”);
4. Youtube/Vimeo mobile video url – you can set the url for Youtube/Vimeo video for mobile (media type “YouTube/Vimeo”);

 

Alignment

1. Content alignment desktop – content position selector within the block. Text can have 3 positions:
   • Left – content positioning on the left side;
   • Center – positioning content in the center;
   • Right – positioning content on the right side;
2. Content alignment mobile – content position selector within the block on the mobile. Text can have 3 positions:
   • Left – content positioning on the left side;
   • Center – positioning content in the center;
   • Right – positioning content on the right side;
3. Block alignment – block position selector. A block can have 3 positions.
   1. Left – block’s positioning on the left side of the container;
   2. Center – block’s positioning in the center of the container;
   3. Right – block’s positioning on the right side of the container.

 

Color

1. Section beckground – you can set the background for the section;
2. Label – you can set the color for the label;
3. Text – you can set the color for the text;
4. Button background – you can set the background for the button;
5. Button label – you can set the color for the button label;
6. Button border – you can set the color for the button border;
7. Button background (hover) – you can set the background for the button on hover;
8. Button label (hover) – you can set the color for the button label on hover;
9. Button border (hover) – you can set the color for the button border on hover;
10. Overlay – you can set the color for the overlay;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

Logo

1. Image – you can set a picture for the Logo;

 

 

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

 

Adding a section

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

 

Section settings

1. Heading – setting allows you to set the text for the title.
2. Cards per row – the setting allows you to choose the type of section display in 2 or 3 blocks;
3. Cards layout – the setting allows you to choose the type of blocks: horizontal / vertical;
4. Button style – you can set a style for the button: primary / secondary / primary with border / secondary with border;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

1. Heading – setting allows you to set the heading in the block;
2. Image – setting allows you to set the image of the block;
3. Button label – setting allows you to set the text for the button in the block;
4. Button link – setting allows you to set the URL for the button in the block.

 

Adding a section

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

 

Section settings

General

1. Label – the setting allows you to set the text for the label;
2. Heading – the setting allows you to set the text for the title;
3. Section button label – the setting allows you to set the label for the button;
4. Section button type – the setting allows you to set the type of the button;
5. Product button type – the setting allows you to set the type of the product button;
6. Product info background opacity – the setting allows you to set the opacity for the product info background;
7. Enable product info glass effect – the setting allows you to set the glass effect for the product info background(info: This effect is working only when background opacity less than 1).

 

Colors

1. Product info background – the setting allows you to set the color of the product info background;
2. Product info text – the setting allows you to set the color of the product info text;
3. Product sale price – the setting allows you to set the color of the product sale price;
4. Product compare price – the setting allows you to set the color of the product compare price.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

Product block

1. Collection – the setting allows you to set the collection for the block;
2. Collection title – the setting allows you to set the collection title to show;
3. Product – the setting allows you to set the product for the block;
4. Product title – the setting allows you to set the product title to show;
5. Image – the setting allows you to set the custom image for the block (default: featured image of the product).

The section allows customers to buy a bundle of products. In this section, there is no possibility to buy products separately, only together.

 

Adding a section

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

 

Section settings

General

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

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

Adding a section

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

 

Section settings

General

1. Heading – heading of the section;
2. Text position – text position. Under the image or inside the image;

 

Colors

1. Overlay color – overlay for the image;
2. Inside the image text color – text color when ‘Text position: Inside the image’ is selected.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

1. Collection – collection;
2. Image – image picker. Use instead of collection image. If the setting is empty and the collection image is empty then an image from the first product of the collection will be shown.

 

Adding a Section

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

 

Section settings

General

1. Heading – the title of the section;
2. Image aspect ratio – aspect ratio of the images. Can be Square, Landscape or Portrait;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

Blocks limit – 3

Image Block

It has only one settings – Image picker. Media dimensions 1884 x 1884px for square, 1884 x 2368px for portrait, 1920 x 1060px for landscape layout recommended to use.

 

Adding a section

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

 

Section settings

General

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

 

Colors

1. Card border– the setting allows you to set the border color of the card;
2. Card background – the setting allows you to set the background color of the card;
3. Heading – the setting allows you to set the color for the title;
4. Subheading – the setting allows you to set the color for the subtitle;
5. Price – the setting allows you to set the color for the price;
6. Price unit label – the setting allows you to set the color for the unit price label;
7. List – the setting allows you to set the color for the list;
8. Button label – the setting allows you to set the color for the button label;
9. Button background – the setting allows you to set the background color for the button;
10. Button border – the setting allows you to set the border color for the button;
11. Button label (hover) – the setting allows you to set the color for the button label on hover;
12. Button background (hover) – the setting allows you to set the background color for the button on hover;
13. Button border (hover) – the setting allows you to set the border color for the button.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

Block Product

Block limit – 3

General

1. Product – the setting allows you to set the product for the card;
2. Label – the setting allows you to set the label for the card;
3. Label position – the setting allows you to set the position of the label. Can be left or center;
4. Hide image – the setting allows you to hide the image;
5. Image view – the setting allows you to specify the image view (contain or cover);
6. Heading – the setting allows you to set the heading for the card (default: title of the product);
7. Subheading – the setting allows you to set the subheading for the card;
8. Price frequency – the setting allows you to set the price unit label;
9. Text – the setting allows you to set the text for the card;
10. Image – the setting allows you to set the image for the card (default: featured image of the product);
11. Button label – the setting allows you to set the button label for the card;

 

Colors

1. Label background – the setting allows you to set the color for the label background;
2. Label color – the setting allows you to set the color for label text.

 

 

Adding a section

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

 

Section settings

General

1. Enable 4th product preview – the setting allows you to show part of 4 product on the desktop;
2. Label – the setting allows you to select a label for the section;
3. Heading – the setting allows you to set a heading for the section;
4. Text – the setting allows you to set a text for the section;
5. Button label – the setting allows you to set a label for the section button;
6. Button link – the setting allows you to set a link for the section button;
7. Button style – the setting allows you to set the style for the section button. Available for selection: “Primary”, “Secondary”, “Primary with border”, “Secondary with border”;
8. Property first label – the setting allows you to set a label for an option;
9. Property second label – the setting allows you to set a label for an option;
10. Property third label – the setting allows you to set a label for an option;
11. Property fourth label – the setting allows you to set a label for an option;
12. Property fifth label – the setting allows you to set a label for an option;
13. Property sixth label – the setting allows you to set a label for an option;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

Product

1. Product – the setting allows you to select product;
2. Property first value – the setting allows you to set a value for an option;
3. Property second value – the setting allows you to set a value for an option;
4. Property third value – the setting allows you to set a value for an option;
5. Property fourth value – the setting allows you to set a value for an option;
6. Property fifth value – the setting allows you to set a value for an option;
7. Property sixth value – the setting allows you to set a value for an option;

Adding a section

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

 

Section settings

1. Heading – the setting allows you to set the title for the contact section;
2. Subheading – the setting allows you to set the subtitle for the contact section;
3. Address heading – the setting allows you to set the title for the address info;
4. Address icon – the setting allows you to set the icon for the address info;
5. Address text – the setting allows you to set the text for the address info;

1. Phone heading – the setting allows you to set the title for the phone info;
2. Phone icon – the setting allows you to set the icon for the phone info;
3. Phone text – the setting allows you to set the text for the phone info;
4. Email heading – the setting allows you to set the title for the email info;
5. Email icon – the setting allows you to set the icon for the email info;
6. Email text – the setting allows you to set the text for the email info;

1. Schedule heading – the setting allows you to set the title for the schedule info;
2. Schedule icon – the setting allows you to set the icon for the schedule info;
3. Schedule text – the setting allows you to set the text for the schedule info;
4. Show socials – the setting enables or disables the display of social media;
5. Social text – the setting allows you to set the text before social media;

 

Contact form

1. Name label– the setting allows you to set the label for the Name field;
2. Name placeholder – the setting allows you to set the placeholder for the Name field;
3. Name required – makes the Name field to be required for filling.
4. Email label– the setting allows you to set the label for the Email field;
5. Email placeholder – the setting allows you to set the placeholder for the Email field;
6. Phone label– the setting allows you to set the label for the Phone field;
7. Phone required – makes the phone field to be required for filling;
8. Phone placeholder – the setting allows you to set the placeholder for the Phone field;

1. Message label– the setting allows you to set the label for the Message field;
2. Message placeholder – the setting allows you to set the placeholder for the Message field;
3. Message required – makes the message field to be required for filling;
4. Button label – the setting allows you to set the text for the button.
5. Button style – the setting allows you to select the button style: primary / secondary / primary with border / secondary with border;

 

Map

1. Google maps API key – the setting allows you to add a Google Maps API key. Learn more about how to create an API key;
2. 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;
3. Image map link – the setting allows you to set a link to the map image;
4. Map image desktop – the setting allows you to set the map image for the desktop;
5. Map image mobile – the setting allows you to set the image for mobile.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Adding a Section

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

 

Section settings

General

 

layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

Block Question and answer

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

 

Block Category

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

1. Heading – title, category name.

 

1. The Question and answer block is not displayed if the settings for the Heading and Text fields are not specified;
2. The Category block is not displayed if the settings for the Heading field are not specified.

In this section, you can show products in a slideshow for your customers. You can change the count of products per row: 3, 4 or 5.

 

Adding a section

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

 

Section settings

General

1. Heading – the setting allows you to add a section title;
2. Products – the setting is responsible for selecting products to display. Limit: 12 products;
3. Layout – setting allows you to change the number of displayed cards on the Desktop. The values are 3, 4, 5;

 

Banner

1. Image – the setting allows you to add an image to the banner;
2. Heading – the setting allows you to add heading text to the banner;
3. Subheading – the setting allows you to add subheading text to the banner;
4. Button label – the setting allows you to add a button text (required for displaying the button);
5. Button link – the setting allows you to add a button link (required for displaying the button);

 

Colors

1. Text color – the setting allows you to set the color for the text;
2. Overlay color – the setting allows you to set the color for overlaying the background for the banner;
3. Button color – the setting allows you to set the color for the button text;
4. Button background – the setting allows you to set the color for the button background;
5. Button border – the setting allows you to set the color for the button border;
6. Button color (hover) – the setting allows you to set the color for the button text on hover;
7. Button background (hover) – the setting allows you to set the color for the button background on hover;
8. Button border (hover) – the setting allows you to set the color for the button border on hover;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Adding a section

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

 

Section settings

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

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

1. Label – setting allows you to set the label in the block;
2. Heading – setting allows you to set the heading in the block;

 

Adding a section

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

 

Section settings

General

1. Heading – section heading;
2. Text – section richtext;
3. First image – the image that will be displayed as a “before image”;
4. Second image – the image that will be displayed as an “after image”. Use an image with the same dimensions as the first image for the best view of the section;
5. 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;
6. Mobile image height – mobile image height. The setting has the same options as the desktop.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Colors

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

 

For Developers

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

In this section, you can add images to the carousel and add a link for each image if you wish.

Adding a section

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

 

Section settings

General

1. Heading – heading of the section.

 

Slideshow settings

1. Autoplay – the setting is responsible for setting the automatic switching of slides;
2. Autoplay speed – the setting is responsible for the speed of the automatic switching of slides.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

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

 

Adding a section

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

 

Section settings

1. Heading – setting allows you to set the text for the title;
2. Heading desktop font size – setting allows you to set the font-size for the desktop title;
3. Heading background-image – the setting allows you to set the background-image for the heading.
4. Enable heading outline – setting allows you to turn on the outline for the heading(Not working with heading background-image);
5. Subheading – setting allows you to set the text for the subtitle;

1. Text – setting allows you to set the text for the text;
2. Button label – setting allows you to set the label for the button;
3. Button aria-label – setting allows you to set the aria-label for the button. This attribute allows screen readers to better convey information to people with disabilities;
4. Button link – setting allows you to set a link for the button;
5. Button type – setting allows you to set the type of the button;

1. Image – setting allows you to select the image;
2. Top layer – setting allows you to select heading/image as top layer between each other.
3. Enable animation – setting allows you to turn on the mouse-move animation for the image(Animation is working by mouseover of the section, when it has heading and image);

 

Colors

1. Heading – setting allows you to select the color of the heading;
2. Heading outline – setting allows you to select the color of the heading outline;
3. Heading background – setting allows you to select the color of the heading background container;
4. Subheading– setting allows you to select the color of the subheading;
5. Text – setting allows you to select the color of the text;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Adding a Section

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

 

Section settings

General

1. Heading – you can set a title for the section;
2. Text – you can specify the text for the section;
3. Cards per row – number of cards per row on desktop. You can show 2, 3, 4 or 5 cards per row. On mobile, the display of cards will automatically change;
4. Image aspect ratio – aspect ratio of the images. Can be square, landscape, portrait;
5. Center block on desktop – if selected the blocks will be centered;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

1. Image – you can choose a picture for the block;
2. Heading – you can add a header for the block;
3. Text – you can add a text for the block;
4. Button label – you can add text for the buttons;
5. Button link – you can add a link for the button, without the added link the button will not be visible on the page;

 

Adding a section

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

 

Section settings

1. Heading – the setting allows you to set the title of the section;
2. Image position – the setting responsible for the direction of the section. If Left is selected, then there will be a picture on the left and a product slider with the LTR direction on the right, and if Right is selected, the picture on the right, the slider on the left, the RTL slider;
3. Enable point button animation – the setting is responsible for whether the animation will be enabled for the point button.

 

Colors

1. Image background – the setting adds a background to the main image with 10% (0.1) opacity. For the best effect, it is recommended to use .png images with a transparent background;
2. Slideshow arrow bg – the setting allows you to change the background color of the slider arrow;
3. Slideshow arrow icon – the setting allows you to change the color of the slider arrow icon;
4. Slideshow arrow bg (hover) – the setting allows you to change the background of the slider arrow on hover;
5. Slideshow arrow icon – the setting allows you to change the color of the slider arrow icon on hover.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

General

1. Image – the setting allows you to set the picture for the look. If the image is not set, the placeholder will be used;
2. Hotspot color – the settings of the access point, background and the icon itself are set.
3. Products set heading – the setting is responsible for displaying the name of your product set;
4. Button label – the setting is responsible for the label of the popup opening button.

 

Product 1 to Product 5

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

 

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

 

Section settings

General

1. Heading – the setting is responsible for adding a section header;
2. Cards per row desktop – the setting is responsible for the number of cards displayed in a row on the desktop. It can be 2, 4, or 6;
3. Cars per row mobile – the setting is responsible for the number of cards displayed in a row on the mobile. It can be 1 or 2;
4. Image aspect ratio – the setting is responsible for the aspect ratio of the images. It can be square or landscape;
5. Overlay color – the setting is responsible for the color of the overlay on hover.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

1. Image – the setting allows you to select an image for the block;
2. Video – the setting allows you to select video instead of image. The video will start on hover (only on the desktop). Has priority over the image. The video preview image will be used on mobile resolution;
3. Icon hover – the setting allows you to specify the icon that will be displayed on hover when the block has a link;
4. Link – the setting allows you to add a link for the block;
5. Open link in new tab – the setting allows you to add the option to open the link in a new tab.

 

Adding a section

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

 

Section settings

General

1. Heading – the setting allows you to set the text for the title;
2. Type – the setting allows you to set type of the grid (carousel or grid).

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

1. Image – the setting allows you to set the image for the card;
2. Image link – the setting allows you to set the link for the card.

 

Adding a section

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

 

Section settings

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

 

Colors

1. Block background – the setting is responsible for background color;
2. Block heading – the setting is responsible for heading color;
3. Block text – the setting is responsible for text color;
4. Block link – the setting is responsible for link color;
5. Block link (hover) – the setting is responsible for link color on hover.

 

Layout

1. Enable cards indents – enable the card indent between benefits blocks. You can use this when enabling card background;
2. 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;
3. Desktop offset top – the top indent of the section on the desktop;
4. Desktop offset bottom – the bottom indent of the section on the desktop;
5. Mobile offset top – the top indent of the section on the mobile;
6. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

Block limit – 4

1. Icon – setting allows you to set icon in the block;
2. Heading – setting allows you to set the heading in the block;
3. Text – setting allows you to set the text in the block;
4. Link label – setting allows you to set the text for the link in the block;
5. Link URL – setting allows you to set the URL for the link in the block.

 

Adding a section

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

 

Section settings

General

1. Layout – layout of the reviews. Can be Base, or Big product;
2. Heading – heading of the section;
3. Autoplay – the setting is responsible for setting the automatic switching of slides;
4. Autoplay speed – the setting is responsible for the speed of the automatic switching of slides.

 

Block settings

1. Author name – setting allows you to set the name of the author of the review;
2. Heading– the setting allows you to set the feedback title if Layout/Big product;
3. Text– setting allows you to set the review text;
4. Product – setting allows you to select a product that will be displayed next to the text review;
5. Additional image – setting allows you to select an image that will replace the product image or for the Big product layout;

 

Adding a section

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

 

Section settings

General

1. Label – can be set for the label section.
2. Heading – can be set for the title section.
3. Text – can be set for the text section.
4. Image – can be set for the image section.
5. Button text – you can set the text for the button.
6. Button link – you can set the link for the button.
7. Button style – the setting is responsible for the style of the button.
8. Box feature blocks alignment – the setting is to set the allignment of the “Box feature” blocks.

 

Color

1. Background – you can choose a color for the background of the section.
2. Label – you can choose a color for the label.
3. Text – you can choose a color for the text.
4. Box background – you can choose a color for the box background.
5. Box text – you can choose a color for the box text.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

Logo block

1. Image – you can set a picture for the logo.

 

Text feature block

1. Heading – you can set a title for the block.
2. Text – you can set the text for the block.

 

Box feature

1. Image – you can set a picture for the block.
2. Heading – you can set a title for the block.

 

Adding a section

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

 

Section settings

General

1. Button style – The setting is responsible for the style of the button.

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

Product

1. Product – you can choose a product for the block;
2. Show first available variant – you can choose whether the block will show options;
3. Banner HTML5 desktop video – you can choose a video for the banner on the desktop;
4. Banner HTML5 mobile video – you can choose a video for the banner on the mobile;
5. Banner image desktop – you can choose an image for the banner on the desktop;
6. Banner image mobile – you can choose an image for the banner on the mobile.

 

Adding a section

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

 

Section settings

General

1. Heading – section heading;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Block settings

Block Tab

1. Heading – the setting is responsible for the tab’s button text;
2. Products – the setting is responsible for products in the tab. Limit: 4 products.
3. Button label – allows you to set the text for the button below the products.
4. Button link – allows you to set a URL for the button;

Adding a Section

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

 

Section settings

General

1. Heanding – you can set a title for the section;
2. Text alignment – you can choose one of two positions for the text;

 

Layout

1. Container width – a container width of the section. If “Inherit” value is selected then container width based on the group ‘Layout’ settings in the Theme settings;
2. Desktop offset top – the top indent of the section on the desktop;
3. Desktop offset bottom – the bottom indent of the section on the desktop;
4. Mobile offset top – the top indent of the section on the mobile;
5. Mobile offset bottom – the bottom indent of the section on the mobile.

 

Blocks settings

1. Сollection – you can select a collection for the block;
2. Image – you can choose an alternative picture for the collection;
3. Menu – you can choose from the menu list;
4. Link label – you can set the text for the link;