# Welcome
## Firstly, a huge thanks for choosing Beloria!
We ensure Beloria is very easy to use for all people. Even you don't have the knowledge about coding. If you are not satisfied with this document please do not hesitate to submit a support ticket at our support center. Our support team is extremely enthusiastic to help you to solve all issues as soon as possible. Enjoy your time with Beloria to get the surprise things you are not able to imagine.
Note: All images are just used for Preview Purpose Only. They are not part of the theme and NOT included in the final purchase files.
## Troubleshoot the problems
Many support queries and technical questions are already answered in this documentation, so please read this item first.
If you can not find the answer, please don't hesitate to let us help you. We always ready to help you solve all of your problems ASAP! Just send the ticket via our support center [**https://boostheme.zendesk.com/hc/en-us/requests/new**](https://boostheme.zendesk.com/hc/en-us/requests/new).
All your questions/problems will be checked and answered carefully. So based on the volume and the nature of your questions, the response time can be up to 1 - 2 business days.
## **Support time**
A supported item includes 6 months from the purchase date. During those 6 months, we are expected to be available to provide the item support services. Response times can vary depending on the volume of inquiries, the nature of the request, and whether questions have already been answered or support has already been provided. You’ll also have the option to purchase extended item support, increasing the item support period up to a maximum of 12 months from the date of purchase.
# Installation
## 1. Use the Boostheme Toolkit app
If you haven't purchased the theme yet, you can use the Boostheme Toolkit app to install our themes with a trial mode. That will help you to experience our themes before deciding to buy.
* Install the Boostheme Toolkit app, please refer to [this guide](/shopify-apps/boostheme-toolkit-app#1-installation) for more details.
* From your Shopify admin, open to Apps > Boostheme Toolkit app. Click **Install themes** on the top menu.
* Browse and click the **Install** button of the Beloria theme.
* You will see a list of home styles of the theme you chose.
* If you don't buy the theme yet, click the **Try it free** button of the home style you want to install the theme with a trial mode. Otherwise, you can add your purchase code to the [Manage licenses](/shopify-apps/boostheme-toolkit-app#2-edit-size-chart) page, then click the **Install now** button in each home style without the trial mode.
## 2. Install by the zip file manually
After you have downloaded the package theme from Themeforest. Extract it on your computer then follow the below steps:
* Open your browser and log in to your admin page. Then go to **"Online Store"**.
* Click the "**Upload theme**" button.
* Then browse the folder you extracted theme package, enter the **"theme files"** folder. Choose a zip file corresponding theme style you want to install. Ex: bt-beloria-1-v1-0-0.zip, bt-beloria-2-v1-0-0.zip, bt-beloria-3-v1-0-0.zip,...
Choose a theme file you want to install
* Click the **"Upload"** button.
## 3. Publish a theme
The uploaded theme appears in the Unpublished themes section. You can install a maximum of 20 themes in your store. To publish the theme on your online store, click Publish theme. Your current published theme will become unpublished.
And you can click the "**Actions**" > "**Publish**" to publish the theme. A published theme is the theme that customers see when they visit your online store. Your published theme appears in the **Current theme** section of the **Themes** page, and your unpublished themes appear in the **Theme library** section. If you publish a new theme, then your previously published theme moves to the **Theme library** section. None of your theme changes are lost.
## 4. Open the Theme editor
You can click the "**Customize**" button to customize your theme settings from your Shopify admin by using the theme editor. The theme editor includes a theme preview and a toolbar that you can use to add and remove content, and to make changes to your settings. To learn about which settings are available for your theme, [see your theme's documentation](https://help.shopify.com/manual/using-themes/change-the-layout/documentation).
# Header
## OPEN THE HEADER SETTINGS
#### Steps:
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click "**Theme settings**" from the theme editor toolbar.
4. Click "**Header**" to open the header settings part. 
At there, you can change the settings for the header on the desktop and mobile screen. Below are the details for these settings.
## GENERAL SETTINGS
* **Choose header style:** Beloria offers 10 styles of header on the desktop and tablet screens to help you make the most of the right options for your website. This select box helps you to change to the header style you want. Each header style has its own settings. Base on the header style you choose, you can configure its settings in the corresponding header style settings part.
* **Show logo:** show/hide the logo on your site.
* **Logo image:** this image picker helps you to upload or pick an image to display as a logo on your site.
* **Mobile Logo image:** this image picker helps you to upload or pick an image to display as a logo on the mobile screen. If empty, the logo image above will be displayed on the mobile screen.
* **Header text:** add short text in the header on the desktop and tablet screens**.** This text is only shown in certain header styles: 1, 2, 4, 5, 8, 9.
* **Enable the sticky menu:** if you tick this checkbox, the header will always be shown on the screen even if you scroll the page below the header area. It means the sticky menu will be shown when scrolling up, and disable when scrolling down.
* **Wide display:** tick this checkbox to display the header wider.
## HEADER MOBILE SETTINGS
{% hint style="info" %}
All settings in this part are only applied on the mobile screen.
{% endhint %}
* **Choose header style:** Beloria offers 5 styles of the header on the mobile screen to help you make the most of the right options for your website. This select box helps you to change to the header style you want.
* **Mobile Navigation:** pick a link list to display it as a mobile menu.
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Label:** configure color and background for the label in the menu item. Please refer to [this guide](/tips#add-label-in-the-link-list) for adding a label to the link list.
## HEADER STYLE 1 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Enable social icons:** show/hide the social icons. Please refer to [this guide](/theme-settings/social-media) for setting up the social icon links.
## HEADER STYLE 2 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Enable social icons:** show/hide the social icons. Please refer to [this guide](/theme-settings/social-media) for setting up the social icon links.
* **Categories:** Pick a link list to display on the left of the logo.
## HEADER STYLE 3 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
## HEADER STYLE 4 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Enable social icons:** show/hide the social icons. Please refer to [this guide](/theme-settings/social-media) for setting up the social icon links.
## HEADER STYLE 5 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Enable social icons:** show/hide the social icons. Please refer to [this guide](/theme-settings/social-media) for setting up the social icon links.
## HEADER STYLE 6 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Enable social icons:** show/hide the social icons. Please refer to [this guide](/theme-settings/social-media) for setting up the social icon links.
## HEADER STYLE 7 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
## HEADER STYLE 8 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Enable social icons:** show/hide the social icons. Please refer to [this guide](/theme-settings/social-media) for setting up the social icon links.
* **Search area:** configure the texts on the right of the search form.
## HEADER STYLE 9 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
* **Enable social icons:** show/hide the social icons. Please refer to [this guide](/theme-settings/social-media) for setting up the social icon links.
## HEADER STYLE 10 SETTINGS
* **Logo size:** add the image size to resize the logo. Please refer to [this guide](/tips#image-size-syntax) for the image size syntax.
# Footer
With our theme, you can drag &, drop, adjust the size of each columns in the footer section.
## Open the section
#### Steps:
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the "**Footer**" section from the theme editor toolbar.
Below are the details of settings in the footer section.
## Background
* **Enable:** Show/hide the background.
* **Pick a color:** set the background color.
* **Background image:** pick or upload your image to display as the background image.
## Footer's bottom
Add your copyright and the footer's links that will be shown at the bottom of all pages. However, you can add your copyright as text in the Footer Columns.
## Layout
* **Show the gutter top at:** show/hide the space above the footer section. There are 3 values for this setting:
* **All pages:** show the space on all pages.
* **Exclude the home page:** show the space on all pages except the home page.
* **None:** not show the space on all pages.
* **Wide display:** tick this checkbox to display the footer section in the wider layout.
Scroll down to the bottom of the theme editor toolbar, click the "**Add content"** button to add a column. You can also drag and drop columns to resort to them.
All column types(except "footer line") have common and own settings. Below are common settings:
### 1. Common settings in all column types(except "footer line")
* **GENERAL SETTINGS:**
* **Column Title:** add the title for the column. Ex: About us, Contact,...
* **Text align in desktop:** align the text in a column in tablet and desktop screens.
* **Text align in mobile:** align the text in a column in mobile screens.
* **COLUMN WIDTH:** Adjust the width of a column. By default, the column width is build based on the grid system in Bootstrap (12 columns per row). You can refer [this article](https://getbootstrap.com/docs/3.4/css/#grid) to get the details.
* **Desktop:** the width of a column in tablet and desktop screens.
* **Mobile:** the width of a column in tablet and mobile screens.
* **DESKTOP GUTTERS:** Turn on/off the gutter of a column in tablet and desktop screens.
* **Top:** turn on/off the top gutter.
* **Bottom:** turn on/off the bottom gutter.
* **MOBILE GUTTERS:** Turn on/off the gutter of a column in mobile screens.
* **Top:** turn on/off the top gutter.
* **Bottom:** turn on/off the bottom gutter.
And own settings for each column:
### 2. Text, image & social column
This column type will help you display text, image, and social icons.
* **IMAGE:**
* **Image Picker:** pick an image you want to show in the column.
* **Image size:** add your image size such as "300x", "master",... Leave "master" if you want to display the origin image. Please refer to[ this guide](/tips#image-size-syntax) for more details about image size.
* **TEXT SETTINGS:**
* **Enable:** show/hide the text.
* **Text:** add your text content.
* **Text color:** pick a color to display the text.
* **Font size:** change the text's size.
* **SOCIAL SETTINGS:**
* **Enable:** show/hide the social icons.
* **RSS:** show/hide the RSS icon. Note: RSS icon is only displayed on articles or blog pages.
{% hint style="info" %}
You can edit the social links in **"Theme Settings"** > **"Social media"** and change color and font size for these icons in **"Theme Settings"** > **Colors and Font sizes** > **"Footer"** > **"Social icons"**.
{% endhint %}
### 3. Link list column
* **Link List:** pick a link list to display.
* **Display the link list inline:** by default, the link list will be displayed in vertical mode. Tick this checkbox if you want to display the link list in horizontal mode.
* **Font size:** change the link list size.
### 3. Contact info column
* **Address:** add your store's address.
* **Phone:** add your phone number.
* **Email:** add your email address.
* **Opening hour:** add the opening hour of your store.
### 4. Texts and icons column
This column has 2 element groups. Each group has 1 icon and 2 texts. Below is the settings in a group:
* **TEXT GROUP:**
* **Icon:** add your icon HTML class. You can go to [this icon page](https://boostheme.com/beloria/icons), find and choose any icon you want, then copy the corresponding HTML class and paste it into this setting field.
* **Title:** add your title text.
* **Subtitle:** add your subtitle text.
* **COLORS:**
* **Icon:** change the color of the icons.
* **Title:** change the color of the title. the color of the subtitle will be gotten automatically base on the title.
### 5. Facebook column
This column will help you show a Facebook widget of your Facebook fan page. To display the Facebook widget, you need to register a Facebook app, then paste your Facebook App Id and Facebook fan page URL in the below settings. You can refer to this page to register a Facebook app.
* **Facebook app id:** add your Facebook App ID.
* **Facebook fan page URL:** add your Facebook fan page URL.
### 6. Twitter column
This column type will help you display a Twitter widget.
* Twitter URL: add your twitter URL. Ex:
### 7. Blog, newsletter and social column
This column type will help you display article links in a certain blog, a newsletter form and social icons.
* **BLOG SETTINGS:**
* **Enable:** show/hide article links.
* **Pick a blog:** pick a blog to display article links.
* **NEWSLETTER FORM SETTINGS:**
* **Enable:** show/hide the newsletter form.
* **Form title:** the title of the form.
* **SOCIAL SETTINGS:**
* **Enable:** show/hide the social icons.
* **Rss:** show/hide the RSS icon. Note: RSS icon is only displayed on articles or blog pages.
{% hint style="info" %}
You can edit the social links in **"Theme Settings"** > **"Social media"** and change color and font size for these icons in **"Theme Settings"** > **Colors and Font sizes** > **"Footer"** > **"Social icons"**.
{% endhint %}
### 8. Product list column
* **Pick a collection:** choose a collection to display its products.
* **Limit:** the number of products will be shown.
* **Show the main thumbnail by:**
* **Featured product image:** display the image that is set as the feature.
* **First available variant image:** display the image of the first available variant.
### 9. Footer line
This is a special column type. It will help you create a line to split the rows in the footer if you want to display the footer in multiple rows.
* **GENERAL SETTINGS:**
* **Color:** pick a color for the line.
* **Hide the line:** not display the line. Sometimes you need to create a space between the rows, this setting will be helpful for you.
* **Full width:** display the line full on the screen.
* **DESKTOP GUTTERS:**
* **Top:** change the gutter above the line in tablet and desktop screens.
* **Bottom:** change the gutter bottom the line in tablet and desktop screens.
* **MOBILE GUTTERS:**
* **Top:** change the gutter above the line in tablet and mobile screens.
* **Bottom:** change the gutter bottom the line in tablet and mobile screens.
* **BACKGROUND BOTTOM AREA:** Set the background color for the areas that are displayed below the line.
* **Enable:** turn or/off the background color.
* **Pick a color**: choose a color for the background.
# Boostheme Toolkit app
## 1. Installation
Go to to install the Boostheme Toolkit app. At there, enter your Shopify domain, just enter your domain name(not include 'myshopify.com').
Then click the **Install Now** button. You will be redirected to the authentication page.
{% hint style="info" %}
Please don't worry about the alert "Boostheme Toolkit isn’t listed on the Shopify App Store" because we don't publish this app on the Shopify app store. Only the customers who bought our themes can use this app.
{% endhint %}
{% hint style="warning" %}
Please note: You do not need to remove the Boostheme Toolkit app when you update or upgrade the theme. Our app will be updated automatically on the new theme. If you remove the Boostheme Toolkit app, all your data will be removed and you have to add data from the beginning.
{% endhint %}
Click the **Install unlisted app** button to complete the installation. After Installing, you can go to the manage products page, click a product you want to edit, then click **More actions** > **Edit size chart, custom tabs, count down**.
Or you can go to **Apps** > **Boostheme Toolkit app**. You will see a table of the product list. Just click the product you want to edit. At there, you will also have 3 tabs with Size chart, countdown, custom tabs. We will explore this in the next section.
## 2. Install Shopify themes
If you haven't purchased the theme yet, you can use the Boostheme Toolkit app to install our themes with a trial mode. That will help you to experience our themes before deciding to buy.
* From the Boostheme Toolkit app, click **Install themes** on the top menu.
* Browse and click the **Install** button of the theme you want to install.
* You will see a list of home styles of the theme you chose.
* If you don't buy the theme yet, click the **Try it free** button of the home style you want to install the theme with a trial mode. Otherwise, you can add your purchase code to the Manage licenses page, then click the **Install now** button in each home style without the trial mode.
## 3. Manage licenses
A license is a purchase code that you get when you buy our themes. Please refer to for getting purchase code.
If you bought our themes, you should add your purchase code for installing themes without trial mode.
* From the Boostheme Toolkit app, click Manage licenses on the top menu.
* Then add your purchase code in the input field.
* Then click the **Activate** button. After that, your purchase will appear in the **Your activated licenses** table below. That means you activated the license successfully. And you can click the **Install theme** button to install the Beloria theme on your Shopify store.
## 4. Edit size chart
By default, all Shopify themes support showing the size chart on the product page. However, you can add different size charts for different products. The Boostheme toolkit app will help you to do that. On the edit size chart page, you can use the WYSIWYG editor to build your own size chart in table, list, HTML,...
Then click the **Save** button to save the size chart for the product. If you want to remove the size chart of the product, just click the **Delete** button.
## 5. Edit countdown timer
Click **Countdown** on the top menu to go to the edit countdown timer page.
Pick a date in the future from the calendar picker. Then click the **Save** button to save the countdown for the product. If you want to remove the countdown of the product, just click the **Delete** button.
## 6. Edit custom tabs
Boostheme Toolkit app also helps you to add the custom tabs for each product.
Drag & drop the tab item the list on the left to sort your tab list. Then Edit the tab title and tab content the right panel.
You can add a new tab by clicking the **Add new tab** button on the left.
You can click the trash icon in each tab item on the left to delete the tab item.
Then click the **Save** button to save the tab.
## 7. Frequently bought products together
Go to **App** > **Boostheme Toolkit app**, you will see a table of product list. Click the product you want to set up the frequently bought products together. Then click the **Bought Products Together** tab.
Tick the checkbox of the products you want to set up as frequently bought together for the current product. Then click the **Save** button to save the data.
## 8. Collection tree
The collection tree is displayed on a theme
Drag & drop collection items to edit the collection tree
Go to **App** > **Boostheme Toolkit app,** then click **Collection Tree** on the top menu. Just drag & drop collection items to edit your collection tree. Then click the **Save** button.
## 9. Multiple languages
You can choose the language to translate
To add new languages, click the **Add new languages** button, you will see the manage languages page from Shopify admin. Please refer to [this article](https://help.shopify.com/en/manual/sell-online/multilingual-online-store#add-new-languages) for more details.
### **A. Translate the product**
Go to **App** > **Boostheme Toolkit app**, you will see a table of product list. Click the product you want to translate. Then click the **Translations** tab.
### **B. Translations page**
Go to **App** > **Boostheme Toolkit app**, then click the **Translations** menu item.
At this page, you can translate the theme ( dynamic sections, theme settings, general texts, and checkout page ), collections, pages, blogs, articles, payment gateways, and shop ( meta title and meta description ).
#### **B1. Translate the theme**
You can translate dynamic sections, theme settings in the **Online Store** tab.
{% hint style="info" %}
When you mouse out the input or press the **Tab** key, the translation input value will be saved automatically.
{% endhint %}
#### **B2. Translate collections**
You can translate collections in the **Collections** tab.
Then click a collection you want to translate. You will see the collection translation page.
At this page, you can translate the title, description, meta title, and meta description. Then click the **Save** button to save your translations.
#### **B3. Translate static pages**
You can translate pages in the **Pages** tab.
Then click a page you want to translate. You will see the details of the translation page.
At this page, you can translate the title, content, meta title, and meta description. Then click the **Save** button to save your translations.
#### **B4. Translate blogs**
You can translate blogs in the **Blogs** tab.
Then click a blog you want to translate. You will see the blog translation page.
At this page, you can translate the title, meta title**,** and meta description. Then click the **Save** button to save your translations.
#### **B5. Translate articles**
At the blog translation page, scroll to the bottom, you will see a list of articles which belong to the current blog.
Just click a**n** article you want to translate. You will see the article's translation page.
At this page, you can translate the title, content, excerpt, meta title, and meta description. Then click the **Save** button to save your translations.
#### **B6. Translate links**
You can translate all links from the link lists on your site in the **Links** tab.
{% hint style="info" %}
When you mouse out the input or press the **Tab** key, the translation input value will be saved automatically.
{% endhint %}
**B7. Translate payment gateways names**
You can translate the payment gateways name in the **Payment Gateways** tab.
{% hint style="info" %}
When you mouse out the input or press the **Tab** key, the translation input value will be saved automatically.
{% endhint %}
#### **B8. Translate Shop**
You can translate the Shop meta title and meta description in the **Shop** tab.
{% hint style="info" %}
When you mouse out the input or press the **Tab** key, the translation input value will be saved automatically.
{% endhint %}
# Metafields Guru
This article will help you know how to add/edit/remove a product metafields in Shopify with the Metafields Guru app. IF you don't know what metafields is, please refer to this article .
## 1. Installation
1. From your Shopify admin, go to **Apps**.
2. Click the **Visit the Shopify App Store** button to go to the Shopify App Store.
3. Search the app with terms: "Metafields Guru".
4. Click the app like the below image, then click the **Add app** button to go to the Installation page, then click the **Install app** button to install it.
## 2. Add Product metafields
1. From your Shopify admin, go to **Apps > Metafields guru**.
2. Click the **Products & Variants** row.
3. Find and click the product you want to add product metafields.
4. In each metafield, you can edit the namespace, key, type, and value. Click the **Create metafield** if you want to create a new one. Then click the **Save** button to save your changes.
# Powerful Megamenu
Build your main navigation easily by drag & drop the menu items. This menu is shown on the desktop and tablet screens.
{% hint style="info" %}
This guide only matches with version tf-4.0 or newer. If you want are using version tf-3.5 or older, please refer to [the old guide](/static-sections/powerful-megamenu-section/old-powerful-megamenu-section).
{% endhint %}
## 1. Open Powerful Megamenu section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful Megamenu** section.
Megamenu is built based on the menu item types. Our theme provides 8 menu item types that will help you build the menu easily. Each item is a block. Please refer to [this guide](/manage-blocks-in-a-section) for managing blocks in a section.
## 2. Section settings
Click on the section name to open the section settings.
### 2.1. Simple menu
If you would like to display the menu by a link list. Just use the settings in this part and ignore section blocks.
* Show a link list as menu: tick to enable this feature.
* Pick a link list: choose a link list to show it as the menu.
* Top item color: set color for top items.
### 2.2. Dropdown background color
Set the background color for the dropdown menu.
### 2.3. Dropdown column title
Set color, adjust the font size for the column title.
### 2.4. Dropdown content
### 2.5. Product settings
Apply for the products that have been in the dropdown menu.
## 3. Block settings
### 3.1. General settings
* Title: add your text to show it as the menu item's title.
* Item link: add URL for the menu item.
* Icon class: add the HTML icon class to show the icon. You can refer to to copy the icon class.
### 3.2. Text color
Set color for the text in the top level.
### 3.3. Label settings
Add your label, set the color and background for it.
### 3.4. For developer
Add custom HTML class for the item.
### 3.5. Dropdown's general settings
Adjust the width of the item's dropdown.
### 3.6. Dropdown columns settings
Depend on the menu item type you added, the number of columns in the dropdown is from 0 to 6. A column is a child item in the dropdown This guide shows you the settings in a column.
* **Column's width:** adjust the width of the column. By default, the dropdown is always separated into the same 12 cols like Bootstrap's layout. You can adjust the width of the child item by changing the number of cols.
* **Column title:** add your text to display it as the title of the child item.
* **Link list:** pick a link list to display in the child item's content.
* **Label text color:** set color labels that are shown in the link list. Please refer to[ this guide for adding labels to a link list](/tips#add-a-label-icon-to-a-text-link-list-shopify-navigation).
* **Label background color:** set color labels that are shown in the link list.
* **Pick a product:** pick a product to display in the child item's content.
* **Pick an image:** pick or upload an image to display in the child item's content.
* **The link for the image:** set URL for the image.
* **Open the link in a new tab:** turn on/off opening in a new tab when customers click the image.
* **Add your HTML:** add your custom HTML to display in the child item's content.
# Powerful Megamenu(version tf-3.5 or older )
{% hint style="info" %}
This guide only matches with version tf-3.5 or older. If you want are using version tf-3.5 or newer, please refer to [the new guide](/static-sections/powerful-megamenu-section).
{% endhint %}
## Open Powerful Megamenu section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful Megamenu** section.
## Menu item types
Megamenu is built based on the menu item types. Our theme provides 6 menu item types that will help you build the menu easily. To add a menu, click the **Add content** button, then choose an item type you want to add.
{% hint style="info" %}
If you would like to use a simple menu such as a link list instead of the mega menu. Just tick **Show a link list as a menu**, then pick a link list you want to show. The specified link list will be shown instead of the mega menu.
{% endhint %}
{% hint style="info" %}
In 6 menu item types, there is one parent item type and 5 subitem types. All subitems will be displayed in the drop-down of the parent item which is adjacent just in front of their position.
{% endhint %}
The below content will help you understand all menu item types clearly.
## 1. Parent Item
This is the top-level item. All other item types will be shown in a drop-down of this item.
#### GENERAL SETTINGS
* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Title:** the menu item title that will be shown at the storefront.
* Item link: add the link of the menu item.
* **Dropdown width:** adjust the width of the dropdown menu. Leave 0 to display the dropdown with auto width.
* **Icon class:** insert the icon to the menu item title. You can refer to [this icon page](https://boostheme.com/beloria/icons), copy the HTML class of the icon you want to insert, then paste it into this setting.
* **Custom class:** add your custom HTML class. Use this setting if you have the knowledge about HTML, CSS, and Shopify Liquid code.
#### TEXT COLOR
* **Use default value:** tick this checkbox to use the color is configured at **Theme settings** > **Colors & Font sizes** > **Header style settings** (base on the header style is being chosen for the desktop and tablet screens) > **Text color** or **text color in the bottom area if exist**.
* **Color:** if the above checkbox is not ticked, the color in this setting will be used.
#### DROPDOWN'S BACKGROUND COLOR
* **Use default value:** tick this checkbox to use the background color is configured at **Theme settings** > **Colors & Font sizes** > **Header style settings** (base on the header style is being chosen for the desktop and tablet screens) > **Background color** or **background color in the bottom area if exist**.
* **Background color:** if the above checkbox is not ticked, the color in this setting will be used.
#### LABEL SETTINGS
* **Name:** add the title of the label.
* **Text color:** pick a color for the text in the label.
* **Background color:** pick a color for the background of the label.
## 2. Subitem - Common settings
These settings appear in all subitems.
* **Menu name:** This setting helps you find the item easily in Theme Settings. It is not displayed at the storefront.
* **Tittle settings:**
* **Title:** add the title of a menu item.
* Align: align the title.
* Position: set the title's position. Top or bottom of the subitem's content.
* Extend text color from parent: tick this checkbox to apply the text color of the parent item for the title.
* Text color: pick a color for the title. Only work if the above setting is not ticked.
* Layout settings
* Column width: by default, the dropdown always has the same 12 columns like Bootstrap's layout. You can grant the number of columns as the width of a subitem.
* Horizontal inside gutter: adjust the gutter on the left and right of the subitem.
* Vertical inside gutter: adjust the gutter on the top and bottom of the subitem.
* Disable Gutter on: specify the position to remove the gutter on it.
* **Own background settings:**
* Enable: turn on/off the background.
* Background color: pick a background color.
* Background Image: pick or upload your image to display it as a background image.
* Layout:
* Inside: show the background in the gutters.
* Outside: show the background out the gutters.
* No repeat: no-repeat the background image.
* Use external background: show background by an external image URL.
* External background Url: add your external image URL.
## 3. SubItem - Link list
#### Link list settings
* **Shopify navigation:** pick a link list to display it. If your site does not have any link list, you can create a new link list in Online Store > Navigation. Refer to this article [**https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links**](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links) for more details about the link list.
* **Extend text color from parent:** tick this checkbox to apply the text color of the parent item for the link list.
* **Text color:** pick a color for the link list. Only work if the above setting is not ticked.
#### Label settings
{% hint style="info" %}
You can refer to [this guide](/tips#add-label-in-the-link-list) for adding a label to the link list.
{% endhint %}
* **Extend from parent item's text color:** tick this checkbox to apply the text color of the parent item for the label.
* **Text color:** pick a text color for the label. Only work if the above setting is not ticked.
* **Background color:** pick a color for the label's background.
## 4. Subitem - Image
#### Image settings
* Pick an image: pick or upload your image to display it.
* Image size: add your image size to resize the image. You can refer to[ the image size syntax there](/tips#image-size-syntax).
* The link for image: add an URL for the image.
{% hint style="warning" %}
**Note:** **image size** setting only helps you compress the image to a valid size for optimizing performance. It does not help you display the image bigger. If you want to display the image bigger, you can increase the width of the subitem. View the **Layout settings** in [**common settings**](/static-sections/powerful-megamenu-section/old-powerful-megamenu-section#2-subitem-common-settings) for more details.
{% endhint %}
## 5. Subitem - product
Display a product in the menu dropdown.
#### Product settings:
* Pick a product: pick a product from your store to display it.
* Other product item settings: please refer to [this guide](/tips#product-item-settings) for more details.
## 6. Subitem - HTML
Add your custom HTML. You can also change the text color for the texts in your HTML.
* Content settings: add your custom HTML.
* Extend from parent item's text color: tick this checkbox to apply the text color of the parent item for texts in your HTML.
* Text color: pick a text color for texts in your HTML. Only work if the above setting is not ticked.
## 7. Subitem - Row Line
Display a line in the menu dropdown. It will help you to separated different contents well.
* Line height: adjust the thin of the line.
{% hint style="success" %}
**Tips:** you can **background color settings** to set up the color for the line.
{% endhint %}
# Powerful Mobile Megamenu
{% hint style="info" %}
This guide only matches with version tf-4.0 or newer. If you want are using version tf-3.5 or older, please refer to [the old guide](/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section).
{% endhint %}
## 1. Open Powerful Mobile Megamenu section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful Mobile Megamenu** section.
{% hint style="warning" %}
To see the changes in this section, you need to adjust the Theme Editor Preview to the mobile screen. Please refer to the below image.
{% endhint %}
## 2. Global font size settings
Configure font size for Level 1, 2, 3 items, and label.
## 3. Menu item types
Mobile Megamenu is built based on the menu item types. Our theme provides 2 menu item types that will help you build the menu easily. An item is a block. Please refer to [this guide](/manage-blocks-in-a-section) for managing blocks in a section.
### 3.1. Top items by link list
This is a level item type. This item type will help you display a hierarchy of menu items quickly. This is a special item, it's not a parent, also a child item. An item of this type can render lots of level 1 menu items.
#### GENERAL SETTINGS
* **Pick a Shopify Navigation:** pick a Shopify Navigation ( Link list ) to display top and child items.
* **Children style:** specify a style to display child items.
#### LAYOUT SETTINGS
* **Show the link list in 2 Columns:** display child items in 2 columns. Only work on children's style 1.
#### COLORS
* **Level 1:** configure color for level 1 items.
* **Level 2:** configure color for level 2 items.
* **Level 3:** configure color for level 3 items.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.
### 3.2. Menu item
#### GENERAL SETTINGS
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips#add-a-label-icon-to-a-text-link-list-shopify-navigation) to add a label, icon to the title. The title will be displayed as a level 1 menu item.
* **Title URL:** add a link to the menu item.
#### COLORS
* **Level 1:** configure color for level 1 items.
* **Level 2:** configure color for level 2 items.
* **Level 3:** configure color for level 3 items.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.
#### FOR DEVELOPER
Add your custom HTML for the item.
#### CHILD ITEM (LEVEL 2 & 3) SETTINGS
This item type offers 5 children items. Below are settings in a child item:
* **Enable:** tick to show the child item.
* **Title:** add the item's title. The title will be shown as a level 2 item.
* **URL:** set the link for the item.
* **Item's width:** adjust the width of the item's content. The item content will be shown as a level 3.
* **Item content ( level 3 ):**
* **Pick a link list:** choose a link list to display in the item content.
* **Show the link list in 2 columns:** tick to show the link list in 2 columns.
* **Label color:** set the color of labels that are shown in the link list. Please refer to [this guide for adding labels in a link list](/tips#add-a-label-icon-to-a-text-link-list-shopify-navigation).
* **Label background color:** set the background color of labels that are shown in the link list.
* **Image:** pick or upload an image to display in the item content.
* **The text overlay:** add text to display override the image.
* **URL:** set the link for the image.
* **Your text or HTML:** add custom text or HTML to display in the item content.
# Powerful Mobile Megamenu ( version tf-3.5 or older )
Build your main navigation easily by drag & drop the menu items. This menu is shown on the mobile screen.
{% hint style="info" %}
This guide only matches with version tf-3.5 or older. If you want are using version tf-4.0 or newer, please refer to [the new guide](/static-sections/powerful-mobile-megamenu-section).
{% endhint %}
## Open Powerful Mobile Megamenu section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful Mobile Megamenu** section.
{% hint style="warning" %}
To see the changes in this section, you need to adjust the Theme Editor Preview to the mobile screen. Please refer to the below image.
{% endhint %}
## Global color settings
Configure colors for Level 1, 2, 3 items, label, and the text overlay image. In an item, the global color settings may be overridden by its own color settings.
## Global font size settings
Configure font size for Level 1, 2, 3 items, and label.
## Menu item types
Mobile Megamenu is built based on the menu item types. Our theme provides 5 menu item types that will help you build the menu easily. To add a menu, click the **Add content** button, then choose an item type you want to add.
## 1. Top items by link list
This is a level item type. This item type will help you display a hierarchy of menu items quickly. This is a special item, it's not a parent, also a child item. An item with this type can render lots of level 1 menu items.
### GENERAL SETTINGS
* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Pick a Shopify Navigation:** pick a Shopify Navigation ( Link list ) to display top and child items.
* **Children style:** specify a style to display child items.
### LAYOUT SETTINGS
* **Show the link list in 2 Columns:** display child items in 2 columns. Only work on the children style 1.
### COLORS
* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Level 1:** configure color for level 1 items.
* **Level 2:** configure color for level 2 items.
* **Level 3:** configure color for level 3 items.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.
## 2. Parent( Level 1 ) item
This is the top-level item. All other child item types will be shown in a drop-down of this item. So you have to put it before child items on the Theme Editor page.
### GENERAL SETTINGS
* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips#add-label-in-the-link-list-text) to add a label, icon to the title. The title will be displayed as a level 1 menu item.
* **Title URL:** add a link to the menu item.
### COLORS
* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 1):** configure color for the title.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.
### FOR DEVELOPER
* **Custom HTML class:** add your custom HTML class.
## 3. Child item - Link list
{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section#2-parent-level-1-item) in front of it.
{% endhint %}
### GENERAL SETTINGS
* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips#add-label-in-the-link-list-text) to add a label, icon to the title. The title will be displayed as a level 2 menu item.
* **Title URL:** add a link to the title.
* **Pick a link list:** choose a link list to display it as level 3 menu items. Only display the top-level in the chosen link list.
### LAYOUT SETTINGS
* **Item's width:** adjust the width of the menu item. There are 2 options: full or half.
* **Show the link list in 2 columns:** tick this checkbox to display the link list in 2 columns.
{% hint style="info" %}
Tips: If you want to display the link list in 2 columns, we recommend configuring the item's width to **full** to display the link list fine.
{% endhint %}
### COLORS
* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 2 ):** configure color for the title.
* **Link list( Level 3 ):** configure color for the link list.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.
### **FOR DEVELOPER**
* **Custom HTML class:** add your custom HTML class.
## 4. Child item - Image
{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section#2-parent-level-1-item) in front of it.
{% endhint %}
### GENERAL SETTINGS
* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips#add-label-in-the-link-list-text) to add a label, icon to the title. The title will be displayed as a level 2 menu item.
* Image: pick or upload your image.
* **The text overlay:** type your text to display override the image. This text will display as a level 3 menu item. So color and font size settings for the level 3 item will be applied to this text.
* **URL:** add a link to the title and image.
### LAYOUT SETTINGS
* **Item's width:** adjust the width of the menu item. There are 2 options: full or half.
### COLORS
* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 2 ):** configure color for the title.
* **Text overlay( Level 3 ):** configure color for text overlay.
* Text overlay background: configure background color for text overlay.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.
### **FOR DEVELOPER**
* **Custom HTML class:** add your custom HTML class.
## 5. Child item - Custom HTML
{% hint style="warning" %}
This is a child item type. So you need to put [a parent item](/static-sections/powerful-mobile-megamenu-section/old-powerful-mobile-megamenu-section#2-parent-level-1-item) in front of it.
{% endhint %}
### GENERAL SETTINGS
* **Menu Name:** This setting is only used to help you find the items in Theme Settings easily. It will not be shown at the storefront. **Tips:** use the prefix " Parent -" for the parent items and "---" for the sub-items will help you organize the items better.
* **Item title:** the menu item title that will be shown at the storefront. You can refer to [this guide](/tips#add-label-in-the-link-list-text) to add a label, icon to the title. The title will be displayed as a level 2 menu item.
* **Title URL:** add a link to the title.
* **Your text or HTML:** type your text or HTML to display it as a level 3 menu item.
### LAYOUT SETTINGS
* **Item's width:** adjust the width of the menu item. There are 2 options: full or half.
### COLORS
* **Extend from the global color settings:** tick this checkbox to override the global color settings by below color settings.
* **Item title( Level 2 ):** configure color for the title.
* **Item text( Level 3 ):** configure color for the link list.
* **Label text color:** configure color for the text in a label.
* **Label background color:** configure the background color for a label.
### **FOR DEVELOPER**
* **Custom HTML class:** add your custom HTML class.
# Product pages
All settings of the content on the product page, quick view popup.
{% hint style="warning" %}
If you are using version tf-3.5 or older, please refer to [the guide](/static-sections/product-pages/old-product-pages) for more details.
{% endhint %}
## 1. Open Product pages in the Theme editor:
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **Products > Default**.
On the left sidebar, you will see a list of available sections such as Main product, Main product - Reviews, Main product - Tabs,... We will explore the details of these sections now.
# Main product section
Show product's main informations. Only available in version tf-4.0 or newer.
## 1. Open the Main product section:
On the left sidebar of the Theme editor, click the **Main product** section.
## 2. General settings:
* **Show next/previous products:** show/hide the next/prev products navigation. It only works if the user views the product page with a collection link. Example: `/collections/collection_handle/products/product_handle`
* **Show label:** show/hide product labels that are displayed override the product image. For the sale label, the percent discount in this label will be updated automatically if customers change product options at the storefront.
* **Enable image zoom:** turn on/off the zoom effect of the main product image.
## 3. Product images:
* **Show small images:** show/hide small images.
* **Show Media button:** show/hide the button that is used to view product images in fullscreen.
* **Display as:** set the layout to display small images. There are 3 values for this setting. Below is the demonstration of these values.
* **Sticky images when scrolling:** tick to keep the image when customers scrolling down or up and the images reach the top of the screen.
## 3. The sticky add to cart:
Tick to open the add to cart box at the bottom when the customer scrolls down past the main add to cart button.
## 4. Collapse tab settings:
Adjust font sizes of the collapse tabs title on the desktop and mobile.
## 5. Add/Edit/Remove product's information:
Each piece of product information is stored in section blocks that help you arrange the product page easily by dragging & dropping blocks. Please refer to [this guide](/manage-blocks-in-a-section) for managing blocks in a section.
Now we will explore all block types in the **Main product** section:
### 5.1. Text block:
Display the custom text, product title, or vendor.
### 5.2. Title:
Display the product title.
### 5.3. Price:
Display product's price. You can turn on/off the discount text ( if the current variant has a discount ), show/hide the shipping policy.
### 5.4. Review stars:
Display the review stars base on the product reviews you are using. Please refer to [the guide](/theme-settings/product-settings#review-app) to configure the product reviews app.
### 5.5. SKU:
Display the current variant's SKU.
### 5.6 Quantity & buy buttons:
You can configure this block to show/hide the quantity box, dynamic checkout buttons, Shop Pay Installments banner, add to compare, and wishlist buttons.
### 5.7. Variant picker:
Display product options.
### 5.8. Description:
Display the product's description.
### 5.9. Share:
Display the social's button to help customers share your product to social platforms such as Facebook, Twitter, Pinterest,...
### 5.10. Random sold number
Display a sold counter to create a sense of urgency in your customers to buy NOW.
### 5.111. Countdown timer:
Display the countdown timer.
{% hint style="info" %}
You can set the countdown date for all products in **Theme settings** > **Product settings** > **Countdown timer**, refer to [this guide](/theme-settings/product-settings#countdown-timer). Or you can also set different countdown dates for each product by using the Boostheme Toolkit app, please refer to [this guide](/shopify-apps/boostheme-toolkit-app#3-edit-countdown-timer) for more details. Especially, in Shopify 2.0, you can use Metafields editor to set the countdown date for each product with namespace is **btt**, key is **countdown**, and type is **Date and time**. Please refer to [the guide](https://help.shopify.com/en/manual/metafields) for more details.
{% endhint %}
### 5.12. Payment badge:
You can pick or upload your image to display it as a payment badge. If empty, the payment icons that are configured from your payment settings will be shown.
### 5.13. Size chart:
Display the size chart link and popup.\
**Settings:**
* **Enable:** show/hide the size chart link.
* **Use a fallback size chart:** if a product does not have its own size chart, a fallback image will be displayed as a size chart.
* **Fallback size chart:** pick or upload your image to display it as a size chart in the popup when customers click the size chart link.
{% hint style="info" %}
**Tips:** you can use the Boostheme Toolkit app to add different size charts for each product. Please refer to [this guide](https://app.gitbook.com/@boostheme/s/vodoma-docs/~/drafts/-Mfb84LjsbdYbr4NcrAg/shopify-apps/boostheme-toolkit-app#2-edit-size-chart) for more details. If you want to add the size chart in the product description, just wrap the size chart with an HTML tag with class:**`sizechart-table`**or add this class to the size chart table. Example: `Size chart
...`
{% endhint %}
### 5.14. Limited stock text:
There are two inventory texts are shown corresponding with 2 cases:
#### **N1. The text when quantity is** greater **than zero:**
Only show this text when the **Inventory policy** is configured to **Shopify tracks this product's inventory** and quantity is greater than zero. Tip: leave`[quantity]`to show the quantity.
* **The quantity in the text:** show the quantity number in your text. Your text has to contain the`[quantity]`variable. This field has two values:
* **Real quantity:** show the real quantity of product variant.
* **Random:** show a random number.
* **Random quantity:** set a range to generate a random number.
#### **N2. The text without quantity:**
Only show this text when the **Inventory policy** is configured to **Don't track inventory** or quantity is zero and **Allow customers to purchase this product when it's out of stock** is checked.
#### **N3. The color and font size**
* **The text color:** set the text color except for the number. The color of the number is configured in **Theme settings** > **Colors & font sizes** > **Links** > **Alternative style** > **Text color**.
* **The text font size:** adjust the font size of the text.
#### **N4. The progress bar**
* **The percent number in the progress bar:** adjust the completed area. Leave zero to hide the progress bar.
* **The text in the progress bar:** add your text that is displayed in the progress bar. Tip: leave`[number]`to show the percent number.
* **The text color:** pick a color for the text in the progress bar.
* **The text font size:** adjust the font size of the text in the progress bar.
* **The background color of the completed area:** pick a color for the completed area.
* **The background color of the remaining area:** pick a color for the remaining area.
* **The height of the progress bar:** adjust the height of the progress bar.
**Settings:**
* **Enable:** show/hide the size chart link.
* **Use a fallback size chart:** if a product does not have its own size chart, a fallback image will be displayed as a size chart.
* **Fallback size chart:** pick or upload your image to display it as a size chart in the popup when customers click the size chart link.
{% hint style="info" %}
**Tips:** you can use the Boostheme Toolkit app to add different size charts for each product. Please refer to [this guide](/shopify-apps/boostheme-toolkit-app#2-edit-size-chart) for more details. If you want to add the size chart in the product description, just wrap the size chart by an HTML tag with class:**`sizechart-table`**or add this class to the size chart table. Example:\
`Size chart
`\
``\
``\
`...`
{% endhint %}
### 5.15. Store availability:
Display the option for customers to pick up their online orders at your retail store, curbside, or any location that you choose. Please refer to [the article](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup) for setting up the local pickup stores.
### 5.16. Customization field:
Add your customization fields to the product page. Our theme supports adding up to 5 custom fields. Below are settings for a field:
* **Enable:** show/hide the field.
* **Label:** type the label of the field.
* **Type:** choose the type of field. There are 7 values:
* *Text - short:* a text field with one line.
* *Text - long:* a text field with multiple lines.
* *Radio buttons:* a set of radio buttons.
* *Dropdown - select:* a dropdown box.
* *Checkbox:* a tick box.
* *Checkbox group:* a set of tick boxes.
* *File uploader:* a file picker to help customers upload their image.
* **Option values:** if you choose the **type** as one of the radio buttons, a drop-down select, or checkbox group, you should add the option values. Separate your options with a comma.
* **Accepted types:** if you choose the **type** as **File uploader**, you can specify a filter for what file types the user can pick from the file input dialog box. Syntax: *"file\_extension|audio|video|image/\*|media\_type".*
* **Required:** specify the field is require or not.
* **Required message:** type the error message. This message will be shown when customers click the add to cart button without ticking the required field.
### 5.17. Customization fields group:
Help you to show up to 4 customization fields in a block. That will help to save the number of blocks because Shopify only allows showing a maximum of 12 blocks in a section. You can refer to #5.16 for details of a field.
### 5.18. Collapsible tab - Custom text:
You can configure the heading tab, add the tab content or get the content from a page.
### 5.19. Collapsible tab - Description:
Display the product's description in the tab content. You can add your heading tab.
### 5.20. Collapsible tab - Reviews:
Display the reviews form based on the review app that has been configured in Theme settings > Product settings > Reviews app. You can add your heading tab.
### 5.21. Collapsible tab - Toolkit app:
Display the tabs that have been added by using the Boostheme Toolkit app. Please refer to [the article](/shopify-apps/boostheme-toolkit-app#4-edit-custom-tabs) for more details.
### 5.22. Popup:
You can add a text to display it as a link. And specify the page to show its content when customers click this link.
{% hint style="info" %}
Because Shopify only allows showing a maximum of 12 blocks in a section, so the below block types are a group of above block types. That will help you to save the number of blocks.
{% endhint %}
### 5.23. Group of 2 texts, SKU:
Show 2 custom texts and SKU in a block.
### 5.24. Group of review stars, price, countdown:
Show reviews stars, price, and countdown.
### 5.25. Group of collections, product tags, sharing icons, payment badges
Show collections, tags, social sharing icons, and payment badges.
# Main product - Reviews
## 1. Open the Main product - Reviews section:
On the left sidebar of the Theme editor, click the **Main product - Reviews** section.
If this section does not exist on the available list, you can also add it by clicking the **Add section** button, then choose **Main product - Reviews**.
## 2. Settings
Click the section name from the available section list on the left sidebar to open the section settings.
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
# Main product - Tabs
## 1. Open the Main product - Tabs section:
On the left sidebar of the Theme editor, click the **Main product - Tabs** section.
If this section does not exist on the available list, you can also add it by clicking the **Add section** button, then choose **Main product - Tabs**.
## 2. Settings
Click the section name from the available section list on the left sidebar to open the section settings.
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
## 3. Add/Edit/Remove tabs:
Each tab is stored in section blocks that help you arrange tabs easily by dragging and dropping blocks.
To add/edit/remove blocks, click the arrow before the section name.
You will see a list of blocks. Each block is a tab. You can click an available block to edit it or click the **Add block** button to add a new block. You can refer to [the guide for managing blocks in a section](/manage-blocks-in-a-section). Below are details of block types:
### 3.1. Product description tab:
Display product description. You can also add the heading of the tab.
### 3.2. Review tab:
Display the reviews form based on the review app that has been configured in *Theme settings* > *Product settings* > *Reviews app*. You can also add your heading tab.
### 3.2. Text tab:
You can show the custom text or the content from a specified page in this tab.
### 3.3 From toolkit app:
Display the tabs that have been added by using the Boostheme Toolkit app. Please refer to [the article](/shopify-apps/boostheme-toolkit-app#4-edit-custom-tabs) for more details.
# Main product - Upsell
{% hint style="info" %}
To show products in this section, you need to configure upsell products by using **upsell tags**, please refer to [the guide](/theme-settings/upsell-products#add-upsell-tags-to-certain-products) for more details.
{% endhint %}
## 1. Open the Main product - Upsell section:
On the left sidebar of the Theme editor, click the **Main product - Upsell** section.
If this section does not exist on the available list, you can also add it by clicking the **Add section** button, then choose **Main product - Upsell**.
## 2. Settings
Click the section name from the available section list on the left sidebar to open the section settings.
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* Heading: add your text to show it as the section heading.
* Subheading: add your text to show it as the section subheading.
To configure the limit of products, product item settings, please refer to [the guide ](/theme-settings/upsell-products#product-item-settings)for more details.
# Main product - Cross-sell
## 1. Open the Main product - Cross-sell section:
On the left sidebar of the Theme editor, click the **Main product - Cross-sell** section.
If this section does not exist on the available list, you can also add it by clicking the **Add section** button, then choose **Main product - Cross-sell**.
## 2. Settings
Click the section name from the available section list on the left sidebar to open the section settings.
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add your text to show it as the section heading.
* **Subheading:** add your text to show it as the section subheading.
* **Pick a rule:** specify to load the way to load the cross-sell products. There are 2 values: **automation** or **manual**. Please refer to [the article](/cross-sell-recommendation-rules) for details of these rules.
* **Automation:** the site will load the cross-sell products in a manual way first. If there are not found products, the site will load the cross-sell products in an automated way.
* **Manual:** the site only loads the cross-sell products in a manual way. If there are not found products, the cross-sell block will be hidden.
* **Display as:** choose the way to show the cross-sell products block. There are two values for this setting: **Calculating widget**, and **Carousel slider**.
* **Limit:** adjust the number of products that will be shown.
### Product carousel item settings
Only affect if you configure to show products in a slider. Please refer to [the guide](/tips#product-item-settings) for details of these settings.
# Old version ( tf-3.5 or older )
## 1. Open Product pages section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **Product pages**.
4. Click **Product pages**.
## 2. General settings
* **Show next/previous products:** show/hide the next/prev products navigation. Only work if the user views the product page with a collection link. Example: `/collections/collection_handle/products/product_handle`
* **Show quantity selector:** show/hide the quantity box.
* **Show the compare button:** show/hide the compare button that is used to add a product to the comparison list.
* **Show the wishlist button:** show/hide the wishlist button that is used to add a product to the customer's wishlist.
* **Show vendor:** Show/hide the product vendor.
* **Show SKU:** Show/hide the variant's SKU. The SKU will be updated to the corresponding variant's SKU automatically if customers change product options at the storefront.
* **Show collections:** show/hide collections that the current product belongs to.
* **Show product tags:** show/hide product tags of the current product. Product tags are also shown in product tabs. The guide about product tabs will explain that in-depth.
* **Show label:** show/hide product label that is shown override the product image. For the sale label, the percent discount in this label will be updated automatically if customers change product options at the storefront.
* **Enable image zoom:** turn on/off the zoom effect of the main product image.
* **Show social sharing buttons:** show/hide the social sharing buttons.
* **Show Media button:** show/hide the button that is used to view product images in fullscreen.
* **Show review stars:** show/hide the reviews that are shown below the product title base on the review app you are using. You should configure to let the theme know which app you are using in **Theme settings** > **Product settings** > **Review app**. Please refer to [the review app guide](/theme-settings/product-settings#review-app) for more details.
* **Show review form from outside tab:** by default, the review from is shown in product tabs. However, this setting will help you show it outside product tabs. The review form is also shown base on the review app you are using.
* **Show dynamic checkout button:** show/hide buttons that customers can use to quickly buy the product they're viewing. Please refer to [this article](https://help.shopify.com/en/manual/online-store/os/dynamic-checkout) for more details.
* **Short general information:** show/hide the short product description. This is a global short description that is used for all products. TODO: add link to metafield.
{% hint style="success" %}
**Tips:** use `[description]` variable to show the product's description
{% endhint %}
## 3. Discount text
**Settings:**
* **Show discount text:** show/hide the discount text. The discount text will be updated automatically when customers change product options.
* **Discount text:** add your discount text.
{% hint style="info" %}
**Tips:** in the discount text, insert`[percent]`variable to show the percent number. Example: -50%.
{% endhint %}
## 4. Small images
Display the product images as thumbnails beside the main image.
**Settings:**
* **Show small images:** show/hide small images.
* **Display as:** set the layout to display small images. There are 3 values for this setting. Below is the demonstration of these values.
Small images - Vertical slider
Small images - Horizontal slider
## 5. Layouts
Our theme provides 6 layouts for the product page. You can pick a layout you like in this setting area.
**Settings:**
* **Only use one layout for all products:** all products on your store will be displayed in the same layout. If you want to display the products in different layouts, just **untick this checkbox**. Then go to the product edit page, change the template to one of 6 values ( **product.layout1, product.layout2, product.layout3, product.layout4, product.layout5, product.layout6** ).
* **Pick default layout:** set the default layout for the product page. Only work if the product template is configured to **product.liquid** and **the above checkbox is not ticked.**
## 6. Random sold number
Display a sold counter to create a sense of urgency in your customers to buy NOW.
**Settings:**
* **Enable:** turn on/off the sold counter.
* **Min sold number:** the minimum value of the sold number.
* **Max sold number:** the maximum value of the sold number.
* **Min hour number:** the minimum value of the time period.
* **Max hour number:** the maximum value of the time period.
## 7. Countdown timer
**Settings:**
* **Enable:** turn on/off the countdown timer.
* **Text:** the text beside the countdown timer.
{% hint style="info" %}
You can set the countdown date for all products in **Theme settings** > **Product settings** > **Countdown timer**, refer to [this guide](/theme-settings/product-settings#countdown-timer). Or you can also set different countdown dates for each product by using the Boostheme Toolkit app, please refer to [this guide](/shopify-apps/boostheme-toolkit-app#3-edit-countdown-timer) for more details.
{% endhint %}
## 8. Trusted payment badge
**Settings:**
* **Enable:** turn on/off the payment badge.
* **Pick your badge image:** pick or upload your image to display it as a payment badge. If empty, the payment icons that are configured from your payment settings will be shown.
## 9. Limited stock text
**Settings:**
* **Enable:** Show/hide this block.
There are two inventory texts are shown corresponding with 2 cases:
### **A. The text when quantity is** greater **than zero:**
Only show this text when the **Inventory policy** is configured to **Shopify tracks this product's inventory** and quantity is greater than zero. Tip: leave`[quantity]`to show the quantity.
* **The quantity in the text:** show the quantity number in your text. Your text has to contain the`[quantity]`variable. This field has two values:
* **Real quantity:** show the real quantity of product variant.
* **Random:** show a random number.
* **Random quantity:** set a range to generate a random number.
### **B. The text without quantity:**
Only show this text when the **Inventory policy** is configured to **Don't track inventory** or quantity is zero and **Allow customers to purchase this product when it's out of stock** is checked.
### **C. The color and font size**
* **The text color:** set the text color except for the number. The color of the number is configured in **Theme settings** > **Colors & font sizes** > **Links** > **Alternative style** > **Text color**.
* **The text font size:** adjust the font size of the text.
### **D. The progress bar**
* **The percent number in the progress bar:** adjust the completed area. Leave zero to hide the progress bar.
* **The text in the progress bar:** add your text that is displayed in the progress bar. Tip: leave`[number]`to show the percent number.
* **The text color:** pick a color for the text in the progress bar.
* **The text font size:** adjust the font size of the text in the progress bar.
* **The background color of the completed area:** pick a color for the completed area.
* **The background color of the remaining area:** pick a color for the remaining area.
* **The height of the progress bar:** adjust the height of the progress bar.
## 10. The sticky add to cart
The sticky cart on the desktop screen
The sticky cart with closed state on the mobile screen
The sticky cart with open state on the mobile screen
**Settings:**
* **Enable:** turn on/off the sticky cart.
## 11. Size chart
The size chart link on the product page
The popup is shown when customers click the size chart link
**Settings:**
* **Enable:** show/hide the size chart link.
* **Use a fallback size chart:** if a product does not have its own size chart, a fallback image will be displayed as a size chart.
* **Fallback size chart:** pick or upload your image to display it as a size chart in the popup when customers click the size chart link.
{% hint style="info" %}
**Tips:** you can use the Boostheme Toolkit app to add different size charts for each product. Please refer to [this guide](/shopify-apps/boostheme-toolkit-app) for more details. If you want to add the size chart in the product description, just wrap the size chart by an HTML tag with class:**`sizechart-table`**or add this class to the size chart table. Example:\
`Size chart
`\
``\
``\
`...`
{% endhint %}
## 12. Customization fields
Add your customization fields to the product page. Our theme supports adding up to 5 custom fields. Below are settings for a field:
* **Enable:** show/hide the field.
* **Label:** type the label of the field.
* **Type:** choose the type of field. There are 7 values:
* *Text - short:* a text field with one line.
* *Text - long:* a text field with multiple lines.
* *Radio buttons:* a set of radio buttons.
* *Dropdown - select:* a dropdown box.
* *Checkbox:* a tick box.
* *Checkbox group:* a set of tick boxes.
* *File uploader:* a file picker to help customers upload their image.
* **Option values:** if you choose the **type** as one of the radio buttons, a drop-down select, or checkbox group, you should add the option values. Separate your options with a comma.
* **Accepted types:** if you choose the **type** as **File uploader**, you can specify a filter for what file types the user can pick from the file input dialog box. Syntax: *"file\_extension|audio|video|image/\*|media\_type".*
* **Required:** specify the field is require or not.
* **Required message:** type the error message. This message will be shown when customers click the add to cart button without ticking the required field.
## 13. Product tabs
Scroll down to the bottom, you will see an **Add content** button, click this button to add a new tab. Or you can click one of the available tab items to edit/remove it and drag/drop items to rearrange them.
Our themes provide 3 tab item types: **Product description tab**, **Review tab**, and **Custom HTML tab**. Each tab item type will have a **Tab title** field to help you add the title of the tab item. Below are details of 3 tab item types:
* **Product description tab:** show the description of a product.
* **Review tab:** show a review form base on your settings in **Theme settings** > **Product Settings** > **Review app**. [Please view more details here](/theme-settings/product-settings#review-app).
{% hint style="warning" %}
**Note:** if you tick **Show review form outside tab** in the **General settings** part, you should not add a review tab to avoid displaying 2 review forms on your site.
{% endhint %}
* **Custom HTML tab:** use this tab item type to add your custom HTML tab.
# Collection pages
{% hint style="info" %}
This guide only matches with version tf-4.0 or newer. If you are using version tf-3.5 or older, please refer to [the old guide](/static-sections/collection-pages/old-collection-pages).
{% endhint %}
## 1. Open Collection pages section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **Collections > Default collection**.
## 2. Section settings
To open section settings, click the section name on the left sidebar.
### **2.1.** PRODUCTS GRID
* **Limit:** adjust the number of products per page. If you turn on the infinity loading feature, the **Limit** is the number of products per one loading time.
### **2.2.** INFINITY LOADING PRODUCTS
By default, the pagination with the numbers will be shown.
If you turn on the infinity loading products feature, the pagination with numbers will be replaced by the load more button or infinity scrolling.
### 2.3. PRODUCT ITEM
Please refer to [this guide](/tips#product-item-settings) for more details.
### 2.4. TOOLBAR
* **Enable toolbar:** show/hide the toolbar.
* **Enable sorting:** show/hide the sort select box.
### 2.5. FILTER SETTINGS
#### General settings
* **Enable the filter sidebar:** turn on/off the filter sidebar.
* **Item format:** specify to display the color swatches in square or circle.
* **Expand/Collapse state:** set the default state of the filter item.
#### Categories filter item
* **Enable:** turn on/off categories filter item.
* **Filter label:** add the item label.
* **Get data from:**
* **Shopify Navigation(link list):** use a link list to display as categories.
* **The collection tree from the Boostheme Toolkit app:** choose this option if you want to display the collection tree. You can edit the collection tree by dragging & dropping easily. Please refer to [this guide](/shopify-apps/boostheme-toolkit-app#6-collection-tree) for more details.
## 3. Section blocks
The **Collection pages** section uses Shopify blocks to show the collection's featured image, description, product list, and filter sidebar. You can refer to [this guide](/manage-blocks-in-a-section) for managing blocks in a section. In this section, we have 3 block types:
### 3.1. Products grid and filter
This block type shows the products grid and filter sidebar.
To edit the content of the filter sidebar, You can go to Online Store > Navigation. Please refer to for more details.
### 3.2. Description
This block type shows the collection's description.
### 3.3. Collection image
This block type shows the collection's featured image.
# Version tf-3.5 or older
## 1. Open Collection pages section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **Collection pages**.
4. Click **Collection pages**.
## 2. General settings
* **Limit:** adjust the number of products per page. If you turn on the infinity loading feature, the **Limit** is the number of products per one loading time.
* **Show collection image:** show/hide the featured image of the collection.
* **Hide collection image in mobile screen:** not show the collection image on the mobile screen even **the Show collection image setting** is ticked.
* **Enable toolbar:** show/hide the toolbar.
* **Enable sorting:** show/hide the sort select box.
## 4. Infinity loading products:
By default, the pagination with the numbers will be shown.
If you turn on the infinity loading products feature, the pagination with numbers will be replaced by the load more button or infinity scrolling.
The "Click load more button" checkbox is ticked
The "Scroll to load more button" checkbox is ticked
## 5. Product item settings
Please refer to [this guide](/tips#product-item-settings) for more details.
## 6. Filter settings
* **Enable the filter sidebar**: turn on/off the filter sidebar.
* **Enable auto filter feature:** turn on/off the auto filter feature.
{% hint style="info" %}
The auto filter is a new feature that is only available from version 1.3.0. This feature will help you display the filter sidebar in more values without adding product tags for a hundred of products like the old method. Just specify the option name you want to show, all corresponding product option values will be shown.
{% endhint %}
{% hint style="danger" %}
The auto filter feature can only use for a store that has less than 1000 products. If your store has more than 1000 products, it will be working incorrectly.
{% endhint %}
Scroll down to the bottom, you will see an **Add content** button, click this button to add a new filter item. Or you can click one of the available filter items to edit/remove it and drag/drop items to rearrange them.
Our theme provides 4 filter item types: "**Filter Item - Colors**", "**Filter Item - Checkboxes**", "**Filter Item - Price range**", and "**Categories**". Below are details of 4 filter item types:
### A. Categories
* **Enable:** show/hide this item.
* **Get data from:**
* **Shopify Navigation(link list):** use a link list to display as categories.
* **The collection tree from the Boostheme Toolkit app:** choose this option if you want to display the collection tree. You can edit the collection tree by dragging & dropping easily. Please refer to [this guide](/shopify-apps/boostheme-toolkit-app#6-collection-tree) for more details.
* **Choose a link list:** pick a link list. Only work if the **"Get data from"** setting is configured to **"Shopify Navigation(link list)"**.
* **Expand/Collapse state:** set the default state of the filter item.
### B. Option - Colors format ( old name: **Filter Item - Colors )**
* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Color format:** specify to display the color swatches in square or circle.
* **Swatch size:** adjust the size of all colors.
* **Expand/Collapse state:** set the default state of the filter item.
* **Option name:** if you turn on **the** **Auto filter feature**, you need to add the product option name, something like "*Color*",... All values of this option name will be shown.
All colors in this filter item are configured in Theme settings > Product settings > Custom color codes. Please refer to [this guide](/theme-settings/product-settings#custom-color-codes) for more details.
### C. Price range ( old name: Filter Item - Price range )
* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Keys:** add your product tags. Each tag is separated by a comma. Ex: tag1, tag 2, tag 3, ... You should ignore this field if you turn on the Auto filter feature.
* **Expand/Collapse state:** set the default state of the filter item.
{% hint style="info" %}
**Note:** Always use "**$**" when typing your tags that contain price. The theme will convert all prices to the currency users are viewing.
{% endhint %}
### D. Option - Checkbox format ( old name: Filter Item - Checkboxes )
* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Keys:** add your product tags. Each tag is separated by a comma. Ex: tag1, tag 2, tag 3, ... You should ignore this field if you turn on the Auto filter feature.
* **Expand/Collapse state:** set the default state of the filter item.
* **Option name:** if you turn on **the Auto filter feature**, you need to add the product option name, something like "*Size*",... All values of this option name will be shown.
### E. Product type
Show all types of all products in the current collection or search result.
{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}
* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.
### F. Brand ( Vendor )
Show all vendors of all products in the current collection or search result.
{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}
* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.
### G. Metafields
Just specify the namespace and key, the filter block will show all meta field values of all products in the current collection or search result.
{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}
#### General settings
* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.
#### Meta field settings
* **Namespace:** add your meta field namespace.
* **Key:** add your meta field key.
* **Type:** let the filter block know the type of your meta field value.
### H. Average rating
Show the rating levels.
{% hint style="warning" %}
Only work when you enable the "**Autofilter**" feature.
{% endhint %}
* **Enable this filter item:** show/hide this item.
* **Label:** add the label of the filter item.
* **Show separated line:** show the line at the item's bottom.
* **Expand/Collapse state:** set the default state of the filter item.
* **The minimum rating to show:** adjust the min level to show.
# Blog pages
Customize the blog pages
## 1. Open Blog pages section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **Blog pages**.
4. Click **Blog pages**.
## 2. General settings
* **Use one layout for all blog pages:** tick the checkbox and choose the layout in the below select box to display all blog pages in one layout.
* **Layout:** specify the layout of the post items. There are 3 values: **List**, **Large Grid**, **Very Large Grid**.
* **The number of posts per page:** Limit the number of posts displayed before the pagination.
* Show date: show/hide the date in each post.
## 3. Sidebar settings
* **Enable:** show/hide the sidebar.
* **Show recent posts:** show/hide the recent post block.
* **The recent posts limit:** limit the number of recent posts.
* **Show filter tags:** show/hide the tags block.
# Posts
Customize post pages
## 1. Open Posts section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **Blog posts**.
4. Click **Posts**.
## 2. General settings
* **Show featured image:** show/hide the featured image of the post.
* **Show author:** show/hide the author name of the post.
* **Show date:** show/hide the published date of the post.
* **Show social sharing buttons:** show/hide buttons that are used to share the post.
## 3. Sidebar settings
* **Enable:** show/hide the sidebar.
* **Show recent posts:** show/hide the recent post block.
* **The recent posts limit:** limit the number of recent posts.
* **Show filter tags:** show/hide the tags block.
# Cart page
## 1. Open Cart page section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Open the drop-down menu at the top of the page.
4. Click the **Cart**.
## 2. Settings
* **Enable cart notes:** show/hide the note form.
* **Cart hold timer:**
* **Enable:** turn on/off this feature.
* **Hour:** adjust the hour of the expiration time.
* **Minute:** adjust the minute of the expiration time.
{% hint style="info" %}
For the shipping estimation block, you can refer to [the shipping rate calculator](/theme-settings/shipping-rates-calculator) guide and [this guide](/theme-settings/cart#terms-and-conditions) for the terms and conditions of the checkout feature.
{% endhint %}
# Cross-sell products Section
## 1. Open the Cross-sell products section:
On the left sidebar of the Theme editor, click the **Cross-sell products** section.
If this section does not exist on the available list, you can also add it by clicking the **Add section** button, then choose **Cross-sell products**.
## 2. Settings
Click the section name from the available section list on the left sidebar to open the section settings.
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add your text to show it as the section heading.
* **Subheading:** add your text to show it as the section subheading.
* **Pick a rule:** specify to load the way to load the cross-sell products. There are 2 values: **automation** or **manual**. Please refer to [the article](/cross-sell-recommendation-rules) for details of these rules.
* **Automation:** the site will load the cross-sell products in a manual way first. If there are not found products, the site will load the cross-sell products in an automated way.
* **Manual:** the site only loads the cross-sell products in a manual way. If there are not found products, the cross-sell block will be hidden.
* **Limit:** adjust the number of products that will be shown.
### Product item settings
Only affect if you configure to show products in a slider. Please refer to [the guide](/tips#product-item-settings) for details of these settings.
# Search result page
{% hint style="info" %}
This section is only available from version tf-1.0.
{% endhint %}
## 1. Open Search result page section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the search icon from the header to go to the search page. If there is a search form that appears, just click the search icon in the search form again.
4. Click the **Search result page** section on the left.
## 2. General settings
* **Limit:** adjust the number of items ( products, articles, or static pages ) per page.
* **Products layout:** choose a layout to display products. There are 4 values: medium grid, large grid, very large grid, and list.
* **Articles layout:** choose a layout to display articles. There are 4 values: large grid, very large grid, and list.
## 3. Blog article item
* **Show author:** show the author's name.
* **Show date:** show the published date.
## 4. Toolbar
Turn on/off the block that helps customers switch between item layouts such as large grid, list,...
## 5. INFINITY LOADING PRODUCTS
By default, the pagination with the numbers will be shown.
If you turn on the infinity loading products feature, the pagination with numbers will be replaced by the load more button or infinity scrolling.
These settings work like the same settings in the Collection pages section.
## 6. Filter settings
{% hint style="danger" %}
The filter feature can only use for a store that has less than 1000 products. If your store has more than 1000 products, it will be working incorrectly.
{% endhint %}
Turn on/off the filter sidebar. You can add/edit/remove filter items like the **Collection pages** section. Please refer to [this page](/dynamic-sections/collection-product/collection-filter-section#add-a-collection-filter-section-to-your-home-page) for more details about filter items.
## 7. Product item settings
You can refer to [this guide](/tips#product-item-settings) for more details.
# FAQ
## 1. Create a FAQ static page
1. From your Shopify admin, go to **Online Store** > **Pages**.
2. Click the **Add page** button to create a new page.
3. Enter the title of the page( such as "FAQ"), and choose the template is "*page.faq*".
4. Then click the **Save** button to save the page.
{% hint style="warning" %}
If the "page.faq" template does not appear in the **Template** select box. That means our theme is currently a draft theme, and your current live theme does not contain this template. Don't worry, just add this template file with empty content in your current live theme and that does not affect your current live theme. Go to Online store, click **Actions** > **Edit code** of the current live theme. Click **Add a new template**. A popup should appear. Choose "page" in the select box, and enter ***faq*** into the text box, then click the **Create template** button. A new template will be created, just remove all content of this template and then click the **Save** button.
{% endhint %}
## 2. Open the FAQ section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **FAQ** ( this is the title page which you created in part #1 ).
4. Click the **FAQ** section on the left.
## 3. Settings
* **Full width:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Hide on mobile:** not show the section on the mobile screen.
## 4. Add/Edit/Remove a FAQ item
Scroll up to the top, you will see an **Add item** button, click this button to add a new item. Or you can click one of the available items to edit/remove it and drag/drop items to rearrange them.
**Item settings:**
* **Title:** enter the item's title.
* **Content:** enter the item's content.
# Collection and product
## Collection & product
Include the sections relate to collections and products.
The section list:
1. [Collection filter.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/collection-filter-section)
2. [Collection list.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/collection-list-section)
3. [Flexible collection list.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/flexible-collection-list-section)
4. [Powerful product block.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/powerful-product-block)
5. [Powerful product block 2.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/powerful-product-block-2)
6. [Powerful product columns.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/powerful-product-columns)
7. [Product single deal.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/product-single-deal)
8. [Simple product slider.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/simple-product-slider)
9. [Vedette product.](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/vedette-product)
[Static sections - PreviousCart page](/static-sections/cart-page)[NextCollection filter](https://vodoma-docs.boostheme.com/dynamic-sections/collection-product/collection-filter-section)
Last updated 3 weeks ago
# Collection filter
Display the collection filter block(except the categories element) from the collection page to the home page. You can refer to the collection filter guide to configure the content in this section.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Collection filter** section.
## Add a collection filter section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Collection filter** > **Add**.
4. Use the settings to customize your **Collection filter** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* Enable top gutter: turn on/off the space distance on the top of the section.
* Enable bottom gutter: turn on/off the space distance on the bottom of the section.
### General settings
* Heading: add the section title.
* Subheading: add the section subtitle.
### Custom heading colors
By default, the heading colors are gotten from **Theme settings** > **Colors and font sizes** > **Section title**, and **Section subtitle**. However, you can override these settings in the collection filter section.
* Enable: turn on/off overriding the title and subtitle color settings.
* Heading: pick a color for the title.
* Subheading: pick a color for the subtitle.
# Collection list
Display a list of collections.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Collection list** section.
## Add a collection list section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Collection list** > **Add**.
4. Use the settings to customize your **Collection list** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Collections per row:** the number of collection rows in the grid layout.
* **Collection item style:** specify the style of a collection item.
* **Wide display:** show the section in the widen layout.
### Colors
* **Title:** pick a color for the collection title.
* **Highlight:** pick a color for the text in the collection title you want to highlight.
* **Number:** pick a color for the number that is the number of products in the specified collection.
* **Reply button:** pick a color for the arrow in the reply button.
* **Reply button background:** pick a color for the background of the reply button.
* **Enable the title background:** this setting is only applied in the collection item style 2. It's used to pick a color for the background of the collection title.
* **Title background:** pick a color the background of the collection title.
### Font size
* **Collection title:** change the font size of the collection title.
* **Collection count:** change the font size of the number below the collection title.
## Add/Edit/Remove a collection item
Scroll down to the bottom, you will see an **Add collection** button, click this button to add a new collection. Or you can click one of the available collections to edit/remove it and drag/drop collections to rearrange them.
#### Collection item settings:
* **Collection:** pick a collection you want to show.
* **Custom image:** pick or upload your image to show. Leave empty to show the featured image of the specified collection or the featured image of the first product image of the specified collection.
* **Custom title:** add your text to show as collection title. Leave empty to show the real collection title. Use the `` tag to wrap your highlight text. Example: `Animal Print tees | Summer`
* Click the **Remove content** button to remove a collection item.
# Flexible collection list
Display a list of collections in multiple advanced layouts.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Flexible collection list** section.
## Add a flexible collection list section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Flexible collection list** > **Add**.
4. Use the settings to customize your **Flexible collection list** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable small top gutter:** turn on/off the small space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
* **Enable small bottom gutter:** turn on/off the small space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
## Add/Edit/Remove a collection list layout
Scroll down to the bottom, you will see an **Add content** button, click this button to add a new collection list layout. Or you can click one of the available collection list layouts to edit/remove it and drag/drop layouts to rearrange them.
### 1. Common settings
Except the layout 7, all other layouts have the same settings in each collection item. So this guide only explains the settings in a collection.
* **Collection:** pick a collection.
* **Pick an image:** pick or upload your image to display it as the collection image. if you leave empty, the featured image of the specified collection will be displayed.
* **Position:** set the position to display the collection. This setting only exists in collection 1 of the layout 1.
* **Use background-color:** turn on/off the background of the collection title.
* **Title background:** set background of the collection title.
* **Title color:** pick a color of the collection title.
* **Title font size:** adjust the font size of the collection title on the desktop and tablet screens.
* **Title font size on mobile:** adjust the font size of the collection title on the mobile screen.
* **Show button:** show/hide the **Shop now** button.
* **Button font size:** adjust the font size of the button on the desktop and tablet screens.
* **Button font size on mobile:** adjust the font size of the button on the mobile screen.
* **The distance to the text:** adjust the space between the collection title and the button on the desktop and tablet screens.
* **The distance to the text on mobile:** adjust the space between the collection title and the button on the mobile screen.
* **Text and button position:** by default, the block that contains the collection title and button is displayed overriding on the collection image. So this setting helps you to choose the position to display this block. There are 9 positions are provided in this setting.
### 2. Layout 7
#### General settings
* Revert the left and right position in the RTL layout: turn on this setting to reverse the text position, arrow in the RTL layout automatically.
#### **Text block settings**
* **TITLE**
* **Title:** add your text to display it as the title. In the above image, the **Top Categories** text is the title.
* **Color:** pick a color for the title.
* **Font size:** adjust the font size of the title on the desktop screen.
* **Font size on tablet:** adjust the font size of the title on the tablet screen.
* **Font size on mobile:** adjust the font size of the title on the mobile screen.
* **SHORT DESCRIPTION**
* **Short description:** add your text to display it as a short description. In the above image, the short description is shown below of the title.
* **Color:** pick a color for the short description.
* **Font size:** adjust the font size of the title on the desktop and tablet screens.
* **Font size on mobile:** adjust the font size of the title on the mobile screen.
* **BUTTON**
* **Button text:** add your text for the button.
* **URL:** edit the URL of the button.
* **Button style:** change the button style. Each button has a different color and background, you can edit these styles in **Theme settings** > **Colors & font sizes** > **Style 1 button**, **Style 2 button**, or **Style 3 button**.
#### Collection item settings
Collection 1, 2, 3, and 4 have the same settings. So this guide only explains the details of a collection item settings.
* **Collection:** pick a collection.
* **Pick an image:** pick or upload your image to display it as a collection image. if you leave empty, the featured image of the collection will be displayed if the collection has an image.
* **Title:** add your title. Leave empty to display the title of the picked collection.
* **Subtitle:** add your subtitle.
* **Label:** add your label.
* **Color:**
* **Title:** set color for the title.
* **Subtitle:** set color for the subtitle.
* **Label:** set color for the label.
* **Label background:** set background color for the label.
* **Font size:**
* **Title:** set font size for the title on the desktop and tablet screens.
* **Title on mobile:** set font size for the title on the mobile screen.
* **Subtitle:** set font size for the subtitle on the desktop and tablet screens.
* **Subtitle on mobile:** set font size for the subtitle on the mobile screen.
* **Text and button position:** set the position in the collection image to display the title, subtitle, and the shop now button.
# Powerful product block
Display the tabs of the product list. In each tab, you can display the product list in the grid layout, slider, infinity scrolling,...
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful product block** section.
## Add a powerful product block section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Powerful product block** > **Add**.
4. Use the settings to customize your **Powerful product block** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Use lazy loading image:** turn on/off the loading image by using the lazyload technique. Recommend turning on this setting.
* **Wide display:** turn on/off displaying the section in the wider layout.
* **Load the first tab in ajax:** by default, all tabs except the first tab load the product list in ajax. This setting helps you turn on/off to load the product list in the first tab in ajax or not. Recommend enable this setting.
### Product item settings
Please refer to [this guide](/tips#product-item-settings) for more details.
## Add/Edit/Remove a tab item
Scroll down to the bottom, you will see an **Add tab item** button, click this button to add a new tab item. Or you can click one of the available tab items to edit/remove it and drag/drop items to rearrange them.
Settings in a tab item:
### 1. Collection settings:
* **Collection:** pick a collection to display its products.
* **Tab Title:** add your tab title. If there is only one tab item, the tab title will not be shown.
* **Layout:** specify the way to display products. There are 6 values for this setting:
* **Slider:** display the products in a slider layout.
* **Slider + "View all" button:** display the products in a slider layout and a "View all" button below the slider. Customers can click this button to go to a corresponding collection page.
* **Grid:** display products in a grid layout.
* **Grid + "Load more" button:** display the products in a grid layout and a "Load more" button. Customers can click this button to load more products in the specified collection. The "Limit" value is also the number of products in one time of loading.
* **Grid + "View all" button:** display the products in a grid format and a "View all" button. Customers can click this button to go to a corresponding collection page.
* **Grid + infinite scroll:** display the products in a grid format and a scrolling button. When this button appears in a customer's viewport, the site will load more products in the specified collection. The **Limit** value is also the number of products in one time of loading, the scrolling button will be hidden when your all products in the specified collection have been loaded. If your site has so many products, you can use this layout to display your all products.
{% hint style="info" %}
**View all**, **Load more,** and **scrolling** buttons are only displayed if the number of products in the specified collection is greater than the **Limit** value.
{% endhint %}
* Limit: adjust the number of products that will be shown.
### 2. Slider settings:
These settings are only applied if the **Layout** setting is configured to **Slider** or **Slider + "View all" button**.
* **Enable the center focus effect:** display the product slider like the below image and the slider will be shown in one row with item size is **Large.**
* **The number of rows:** specify the number of rows in a slide. This setting will be ignored if you enable **the center focus effect**.
* **Navigation type:** specify the way to show the navigation slider. Dots or arrows.
### 3. Banner settings
These settings help you to display a banner and text beside the product list.
* **Enable:** show/hide the banner.
* **Hide the banner on mobile:** tick this checkbox to hide the banner on the mobile screen.
* **Banner width:** adjust the banner area. The width of the product list will be recalculated base on this setting.
* **Position:** specify the position that the banner is shown. Left or right of the product list.
* **Image:** pick or upload your image to show it as a banner.
* **Heading text:** add your text that is shown override the image.
* **Heading text color:** set the color for the heading text.
* **Shop button text:** add your text to display it in a button.
* **Button URL:** set the URL for the button.
* **Button style:** set the style of the button. You can configure the button style in **Theme settings** > **Colors & font sizes** > **Style 1 button**, **Style 2 button**, or **Style 3 button**.
* **Text box alignment:** specify the position that the text box ( include the heading text and button ) is shown in the image. There are 3 values: **Top**, **Center**, and **Bottom**.
* **Use the background color for the text box:** turn on/off the background color for the text box.
* **Background color:** pick a background color for the text box.
* **Background opacity:** adjust the background opacity for the text box.
# Powerful product block 2
Display the tabs of the product list. In each tab, a big product is displayed beside the small products.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful product block 2** section.
## Add a powerful product block 2 section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Powerful product block 2** > **Add**.
4. Use the settings to customize your **Powerful product block 2** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Use lazy loading image:** turn on/off the loading image by using the lazyload technique. Recommend turning on this setting.
* **Wide display:** turn on/off displaying the section in the wider layout.
## Add/Edit/Remove a tab item
Scroll down to the bottom, you will see an **Add tab item** button, click this button to add a new tab item. Or you can click one of the available tab items to edit/remove it and drag/drop items to rearrange them.
Settings in a tab item:
### 1. General settings:
* **Tab title:** add your text to display it as a tab title. If there is only one tab item, the tab title will not be shown.
* **Layout style:** set the layout to display a big product and small products. There are 3 values for this setting: layout 1, layout 2, and layout 3. Below are examples of each layout style.
### 2. Big product:
* **Pick a product:** choose a product to display it as a big product.
* **Position:** set the position. Left or right of small products.
* **Other product item settings:** please refer to [this guide](/tips#product-item-settings) for more details.
### 3. Small products:
* **8 product pickers:** pick products to display them as small products. Base on the chosen layout style, the number of small products will be shown.
| Layout style | Shown Small products |
| :----------: | :------------------: |
| 1 | from #1 to #4 |
| 2 | from #1 to #6 |
| 3 | from #1 to #8 |
* **Other product item settings:** please refer to[ this guide](/tips#product-item-settings) for more details.
# Powerful product columns
Display product lists in the separated columns. Each column is a product slider with multiple rows.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Powerful product columns** section.
## Add a powerful product columns section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Powerful product columns** > **Add**.
4. Use the settings to customize your **Powerful product columns** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Load data in ajax:** turn on/off to load the product list in ajax.
* **Wide display:** turn on/off displaying the section in the wider layout.
### Product item settings
* **Show the main thumbnail by:** specify the thumbnail of the product will be displayed. There are 2 values for this setting.
* **Featured product image:** display the image that is set as the feature.
* **First available variant image:** display the image of the first available variant.
* **Show review stars:** display the product reviews base on your review app you are using. You can configure the review app in **Theme Settings > Product Settings > Review app**.
* **The number of rows:** adjust the number of products will be shown in a slide.
* **Product name's size:** if your product name is too long, you can make it shorter with this setting. Just drag to the number of words you want to show, the product name will be displayed shorter. And leave zero if you want to display the full product name.
## Add/Edit/Remove a column
Scroll down to the bottom, you will see an **Add column** button, click this button to add a new column. Or you can click one of the available columns to edit/remove it and drag/drop items to rearrange them.
Settings in a column:
* **Collection:** pick a collection to display its products.
* **Title:** add the column title.
* **Limit:** adjust the number of products that will be shown.
# Product single deal
If you need to promote a product with the sales off price on the homepage, this section will be helpful for you.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Product single deal** section.
## Add a product single deal section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Product single deal** > **Add**.
4. Use the settings to customize your **Product single deal** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable small top gutter:** turn on/off the space distance on the small top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
* **Enable small bottom gutter:** turn on/off the space distance on the small bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Wide display:** turn on/off displaying the section in the wider layout.
### Product settings
* **Pick a product:** choose a product you want to display it as a deal product.
* **Deal title:** add your text to display the title of the deal. If empty, the product title will be shown.
* **Deal description:** add your text to display the description of the deal. If empty, the product description will be shown.
* **Deal image:** pick or upload your image to display the image of the deal. If empty, the featured image of the product will be shown.
* **Button label:** the label of the button.
# Simple product slider
Easy to display a product slider beside a banner with image and texts.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Simple product slider** section.
## Add a Simple product slider section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Simple product slider** > **Add**.
4. Use the settings to customize your **Simple product slider** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Collection:** pick a collection to display its products.
* **Wide display:** turn on/off displaying the section in the wider layout.
### Slider settings
* **Enable center focus effect:** display the product slider and focus on the middle product and the slider will be shown in one row with item size is **Large**.
* **The number of rows:** specify the number of rows in a slide. This setting will be ignored if you enable **the center focus effect**.
* **Navigation type:** specify the way to show the navigation slider. Dots or arrows.
* **Autoplay:** run slider automatically.
* **Autoplay Speed in seconds:** adjust the time between the slide transition.
### Product item
Please refer to [this guide](/tips#product-item-settings) for more details.
### Banner column settings
* **Enable:** turn on/off the banner column.
* **Banner width column:** adjust the banner column's width. The width of the product slider will be recalculated base on this setting.
* **Position:** set the position to display the banner column. Left or right of the product slider.
## Add/Edit/Remove a banner
All banners are shown in the banner column. Scroll down to the bottom, you will see an **Add banner** button, click this button to add a new banner. Or you can click one of the available banners to edit/remove it and drag/drop banners to rearrange them.
**Banner settings:**
### 1. General settings:
* Image: pick or upload your image.
* Heading: add the heading in the banner.
* Subheading. add the subheading in the banner.
{% hint style="info" %}
Note: in the heading and subheading settings, you can insert the`[price]`variable to display the price that is configured in the below setting.
{% endhint %}
* Price: add your price that is shown in the heading or subheading.
* Shop button text: add your text to display it in a button.
* Button URL: pick an URL for the button.
* Button style: pick a button style.
* Icon class: add HTML class of the icon you want to insert to the button. You can go to[ https://boostheme.com/beloria/icons](https://boostheme.com/beloria/icons) to find and copy the icon HTML class.
### 2. Text box layout:
Align the text box in the horizontal and vertical.
### 3. Background and color
Configure the background color of the text box, and text color of heading, subheading, price.
### 4. Font sizes
Configure the font sizes of heading, subheading, price, and button on the desktop, tablet, and mobile screens.
### 5. Gutters
Adjust the top and bottom gutters of heading, subheading, and button on desktop, tablet, and mobile screens.
# Vedette product ( single product )
Helps you to display a single product block well. Bring product details from the product page to the home page.
## Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Vedette product** section.
## Add a Vedette product section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Vedette product section** > **Add**.
4. Use the settings to customize your **Vedette product** section.
5. Click **Save**.
## Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Wide display:** turn on/off displaying the section in the wider layout.
### Product settings
Pick a product to display its details. All other settings are the same as the settings on the Product pages section. So you can refer to [the Product pages section](/static-sections/product-pages/old-product-pages) for more details.
# Banner & image
Include the sections that helps you create the complex and simple banner easily.
# Banner creator pro
Combine your texts and image to create awesome banners.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Banner Creator Pro** section.
## 2. Add a Banner Creator Pro section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Banner Creator Pro** > **Add**.
4. Use the settings to customize your **Banner Creator Pro** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Section name:** add the section name that is only used to help you find the section in Theme Settings easily. It will not be shown at the storefront.
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Full width:** turn on/off displaying the section in full width of the window(no gutter on the left and right). If you enable this setting, the **Wide display** setting will be ignored.
* **Revert the left and right position in the RTL layout:** turn on this setting to reverse the text position, arrow in the RTL layout automatically.
### Slider settings
Help you display a list of banners in a slider format. Example: display a slideshow,...
* **Enable:** tick this checkbox to enable the slider feature.
* **Banner item size:** choose the number of items will be shown in the user's viewport. In the slider format, the size of each item will be ignored. All items will have the same size, and you can change it in this setting.
| Banner item size | The number of items in the user's viewport | |
| :--------------: | :----------------------------------------: | :----: |
| | Desktop & tablet | mobile |
| Small | 5 | 2 |
| Medium | 4 | 2 |
| Large | 3 | 2 |
| Very Large | 2 | 1 |
| Full Width | 1 | 1 |
* **Enable autoplay:** tick this checkbox if you want to show the slider autoplay.
* **Autoplay speed:** Autoplay Speed in seconds. Only apply this setting if you tick "Enable autoplay".
* **Show arrow:** show Prev/Next arrows.
* **Show dot indicators:** show the navigation dots in the slider.
* **Enable fade effect:** tick to enable the fade effect of the slide transition.
### Small vertical banners
Display the small vertical banners beside the main banners.
#### General settings:
* **Enable:** show/hide the small vertical banners.
* **Width:** adjust the width of the area that contains the small vertical banners. The width of the area contains the main banners will be calculated base on this setting.
* **Position:** specify the position to show the small vertical banners. There are 2 values: **left** or **right** of the main banners.
* **Remove the distance with the main banners:** turn on/off the distance between the main banners and the small vertical banners.
#### Effect settings:
* **Enable:** turn on/off the effect.
* **Transition effects:** specify the transition effect of the image when users hover the mouse on the banner.
* **Color effects:** specify the color effect of the image when users hover the mouse on the banner.
#### Add your images:
Banner Creator Pro offers at most 3 images in the small vertical banners area. You can configure the URL for each image.
## 4. Add/Edit/Remove a banner item
Scroll down to the bottom, you will see an **Add content** button, click this button to add a new banner item. Or you can click one of the available banner items to edit/remove it and drag/drop items to rearrange them.
Banner Creator Pro section provides 5 item types: **Banner with text**, **Banner with link list**, **Product**, **Collection,** and **Video**. Each type has common and own settings**.** Now let us explore how they work.
## 5. Common settings in all banner item types
These are the common settings that appear in all banner item types.
#### A. Item size
Banner Creator Pro uses the grid layout like Bootstrap. The content box will be separated in the same 12 columns. You can change the width of a banner item by increasing or decreasing the number of columns. You can set the different item sizes for a banner item on desktop and mobile screen.
* **Item size:** adjust the width of the item on desktop and tablet screens.
* **Item size in mobile screen:** adjust the width of the item on the mobile screen.
#### B. Item gutters
Use these settings to add the distance for a banner item on the desktop, tablet, and mobile screens.
## 6. "Banner with text" item type
This banner item type will help you create a banner with images and texts, buttons.
{% hint style="info" %}
For the item size or gutters, you can view [the common settings](/dynamic-sections/banner-and-image/banner-creator-pro#5-common-settings-in-all-banner-item-types).
{% endhint %}
### **A. GENERAL SETTINGS:**
* **Template:** this setting will help you specify a way for displaying a banner item. There are 5 values for this setting. Below is the demonstration for 5 templates.
* **Image:** pick or upload your image.
* **Mobile image:** pick or upload your image to display it on the mobile screen. If empty, the image from the above setting will be displayed instead.
* **The link for image:** add your URL so that users can click the image to go to a new page with this URL.
* **Open link in a new tab:** open a new page in a new tab when users click the image.
* **Image alignment:** align the image in its wrap area. Only affect when the image does not fit the wrap area.
* **Hide this banner on mobile:** not show the banner on the mobile screen.
* **Hide this banner on the desktop:** not show the banner on the desktop and tablet screens.
* **Enable background color:** turn on/off the background color.
* **Background color for banner:** pick a background color.
{% hint style="warning" %}
If you are configuring the template is **Text inside the image** and **the image fits its wrap area**, you are not able to see the background color.
{% endhint %}
* **Enable text effect in the slider:** turn on/off the effect to show texts after the slider is initialized.
* **Set as an LCP element:** if this is the first slide, recommend turning on this setting for optimizing Google Pagespeed Insights. You can refer to this page for more details about LCP element.
### B. EFFECTS:
* **Enable:** turn on/off the effect.
* **Transition effects:** specify the transition effect of the image when users hover the mouse on the banner.
* **Color effects:** specify the color effect of the image when users hover the mouse on the banner.
### C. LAYOUT SETTINGS:
Adjust the width of the image and text box on the desktop, tablet, and mobile screens.
* **Align the text box in the vertical center:** align the text box in the center of the image box. Only work when **Template** is **Image left - Text right** or **Image right - Text left**.
{% hint style="warning" %}
Note: To avoid broken layout, if the **Template** setting is configured to **Image left - Text right** or **Image right - Text left**, the sum of Image box width and Text box width in a level screen should be **12** or **24**.
{% endhint %}
### D. INSIDE TEMPLATE SETTINGS:
These settings are only implemented if the **Template** is configured to **Insight**.
* **Wrap the text box in a container:** use this setting to avoid the text box reaches the border left or right of the window.
* **Standard position:** our theme offers 9 standard positions that help you display the text box inside the image.
* **Custom positions:** If you would not like to use the standard positions, you can create a custom position by yourself.
* **Use custom position:** tick this checkbox to use the custom position instead of the standard position.
* **Text box left position:** adjust the left coordinate. Unit: %.
* **Text box top position:** adjust the top coordinate. Unit: %.
### E. OWN BACKGROUND FOR TEXTS
These settings will help you handle the background for the text box.
* **Enable:** show/hide the background.
* **Background color:** pick a color to display the background.
* **Opacity:** Adjust the background blur.
* **Layout:** set the layout of the background.
* **Background image:** pick or upload your image to display it as a background instead of background color.
### F. TEXT ITEM SETTINGS:
There are 4 text items that are provided in a **banner with text** item type. All text items have the same settings. So this guide only explains settings in a text item.
#### General settings:
* **Text:** add your content to the text.
{% hint style="warning" %}
Note: break lines are only applied when the text is displayed as a **paragraph.** In the below content, you will see the setting that helps you display the text as a paragraph, button, H1, H2, H3, H4, H5, H6,...
{% endhint %}
* **Hide this text on mobile:** tick to hide the text on the mobile screen.
* **Hide this text on desktop:** tick to hide the text on the desktop and tablet screens.
* **Display as:** specify the way the text is shown. That also decides which HTML tag will be used to contain your text. **So good for optimizing SEO in your store**. There are 11 values for this setting.
* Button ( HTML tag: `your text` with a button style).
* Link ( `your text` ). You will see the setting to configure the URL in the below content.
* Paragraph ( `your text
` )
* HTML block ( `your text
` )
* Countdown timer: you need to add a countdown date to the text with the right syntax. Please refer to [this guide](/theme-settings/product-settings#countdown-timer) for the countdown date syntax.
* H1 tag ( `your text
` )
* H2 tag ( `your text
` )
* H3 tag ( `your text
` )
* H4 tag ( `your text
` )
* H5 tag ( `your text
` )
* H6 tag ( `your text
` )
* **Link for text:** pick or add your URL. Only work when the **Display as** setting is configured to **Button** or **Link.**
* **Open link in a new tab:** open the new tab in the browser when users click your text. Only work when the **Display as** setting is configured to **Button** or **Link** and the **Link for text** setting is not empty**.**
* **Alignment:** align the text.
* **Color:** pick a color for the text. If you choose to display the text as a **Countdown timer**, this setting will only be applied for numbers.
* **Button settings:** Only work when the **Display as** setting is configured to Button.
* **Button style:** change the button style. Each button has a different color and background, you can edit these styles in **Theme settings** > **Colors & font sizes** > **Style 1 button**, **Style 2 button**, or **Style 3 button**.
* **Include icon:** insert an icon to your text. You can go to [the icons page](https://boostheme.com/beloria/icons) to copy an icon class and paste it into this setting.
* **Countdown timer settings:** Only work when the **Display as** setting is configured to **Countdown timer**.
* **Text color:** pick a color for words such as "day", "year", "month",...
* **Background color:** pick a color for the background of the countdown timer.
* **Extend days:** adjust the number of days to extend the countdown time when it's expired.
* **Desktop styles:** change the typography of the text on tablet and desktop screens.
* **Gutter top:** adjust the gutter on the top of the text.
* **Gutter bottom:** adjust the gutter on the bottom of the text.
* **Gutter left:** adjust the gutter on the left of the text.
* **Gutter right:** adjust the gutter on the right of the text.
* **Font size:** adjust the size of the text.
* **Line height:** adjust the line-height of the text.
* **Font style:** specify the style of the text.
* **Font weight:** specify the weight of the text.
* **Letter spacing:** adjust the space between characters in the text.
* **Mobile styles:** change the typography of the text on the mobile screen.
* **Extend from desktop styles settings:** tick this checkbox to apply all settings of **desktop styles** on the mobile screen. Otherwise, the settings in mobile styles will be applied.
* Other settings in **mobile styles** have **the same meaning** as in **desktop styles**.
* **Custom HTML(CSS) class:** add your custom HTML class to the text. Our theme also provides some standard HTML class, you can use these HTML classes in this setting. Please refer to [this guide](/dynamic-sections/text/custom-html) for more details.
## 7. "Banner with link list" item type
This banner item type will help you create a banner with images and a link list.
{% hint style="info" %}
For the item size or gutters, you can view [the common settings](/dynamic-sections/banner-and-image/banner-creator-pro#5-common-settings-in-all-banner-item-types).
{% endhint %}
### **A. GENERAL SETTINGS:**
* **Template:** this setting will help you specify a way for displaying a banner item. There are 5 values for this setting. Below is the demonstration for 5 templates.
* **Image:** pick or upload your image.
* **Mobile image:** pick or upload your image to display it on the mobile screen. If empty, the image from the above setting will be displayed instead.
* **The link for image:** add your URL so that users can click the image to go to a new page with this URL.
* **Open link in a new tab:** open a new page in a new tab when users click the image.
* **Image alignment:** align the image in its wrap area. Only affect when the image does not fit the wrap area.
* **Hide this banner on mobile:** not show the banner on the mobile screen.
* **Hide this banner on the desktop:** not show the banner on the desktop and tablet screens.
* **Enable background color:** turn on/off the background color.
* **Background color for banner:** pick a background color.
{% hint style="warning" %}
If you are configuring the template is **Link list inside the image** and **the image fits its wrap area**, you are not able to see the background color.
{% endhint %}
### B. THE CONTENT:
* **Link list title:** add your text to display it as the link list title.
* **Hide title on mobile:** not show the title on the mobile screen.
* **Link list:** pick a link list to display it.
* **Hide link list on mobile:** not show the link list on the mobile screen.
### C. EFFECTS:
* **Enable:** turn on/off the effect.
* **Transition effects:** specify the transition effect of the image when users hover the mouse on the banner.
* **Color effects:** specify the color effect of the image when users hover the mouse on the banner.
### D. LAYOUT SETTINGS:
Adjust the width of the image and link list box on the desktop, tablet, and mobile screens.
* **Show the link list in 2 columns:** use this setting if your link list is too long and need to separate it in 2 columns.
* **Align the text box in the vertical center:** align the text box in the center of the image box. Only work when **Template** is **Image left - Link list right** or **Image right - Link list left**.
{% hint style="warning" %}
Note: To avoid broken layout, if the **Template** setting is configured to **Image left - Link list right** or **Image right - Link list left**, the sum of Image box width and Text box width in a level screen should be **12** or **24**.
{% endhint %}
### E. LABEL:
* **Text color:** set the color for the text in labels.
* **Background color:** set the background for labels.
{% hint style="info" %}
For adding labels to a link list, please refer to [this guide](/tips#add-label-in-the-link-list) to get more details.
{% endhint %}
### F. INSIDE TEMPLATE SETTINGS:
These settings are only implemented if the **Template** is configured to the **Link list insight image**.
* **Wrap the link list box in a container:** use this setting to avoid the text box reaches the border left or right of the window.
* **Standard position:** our theme offers 9 standard positions that help you display the text box inside the image.
* **Custom positions:** If you would not like to use the standard positions, you can create a custom position by yourself.
* **Use custom position:** tick this checkbox to use the custom position instead of the standard position.
* **Text box left position:** adjust the left coordinate. Unit: %.
* **Text box top position:** adjust the top coordinate. Unit: %.
### G. OWN BACKGROUND FOR LINK LIST:
These settings will help you handle the background for the text box.
* **Enable:** show/hide the background.
* **Background color:** pick a color to display the background.
* **Opacity:** Adjust the background blur.
* **Background image:** pick or upload your image to display it as a background instead of background color.
### H. LINK LIST TITLE SETTINGS:
* **Alignment:** align the link list title.
* **Gutter top:** adjust the gutter on the top of the title.
* **Gutter bottom:** adjust the gutter on the bottom of the title.
* **Font size:** adjust the size of the title.
* **Line height:** adjust the line-height of the title.
* **Font style:** specify the style of the title.
* **Font weight:** specify the weight of the title.
* **Color:** pick a color for the title.
* **Custom HTML(CSS) class:** add your custom HTML class to the title. Our theme also provides some standard HTML class, you can use these HTML classes in this setting. Please refer to [this guide](/dynamic-sections/text/custom-html) for more details.
### I. LINK LIST SETTINGS:
* **Alignment:** align the link list on desktop and tablet screens.
* **Alignment in mobile:** align the link list on the mobile screen.
* **Gutter top:** adjust the gutter on the top of the link list.
* **Gutter bottom:** adjust the gutter on the bottom of the link list.
* **Font size:** adjust the size of the link list.
* **Line height:** adjust the line-height of the link list.
* **Font style:** specify the style of the link list.
* **Font weight:** specify the weight of the link list.
* **Color:** pick a color for the link list.
* **Custom HTML(CSS) class:** add your custom HTML class to the link list. Our theme also provides some standard HTML class, you can use these HTML classes in this setting. Please refer to [this guide](/dynamic-sections/text/custom-html) for more details.
## 8. "Product" item type
This item type will help you show a product grid item.
{% hint style="info" %}
For the item size or gutters, you can view [the common settings](/dynamic-sections/banner-and-image/banner-creator-pro#5-common-settings-in-all-banner-item-types).
{% endhint %}
### A. GENERAL SETTINGS:
* **Pick a product:** choose a product you want to show.
* **Hide on mobile:** hide the banner item on the mobile screen.
* **Hide on desktop:** hide the banner item on desktop and tablet screens.
* **Enable background color:** turn on/off the background color.
* **Background color for banner:** pick a color to set it as background.
### **B.** PRODUCT SETTINGS:
These are product item settings, so please refer to [this guide](/tips#product-item-settings) for more details.
## 9. "Collection" item type
This item type will help you show a collection grid item.
{% hint style="info" %}
For the item size or gutters, you can view [the common settings](/dynamic-sections/banner-and-image/banner-creator-pro#5-common-settings-in-all-banner-item-types).
{% endhint %}
### GENERAL SETTINGS:
* **Pick a collection:** pick a collection to display it.
* **Enable background:** turn on/off the background of the collection title.
* **Title background:** pick a color to display it as a background of the collection title.
* **Font size:** adjust the size of the collection title.
* **Hide on mobile:** not show this banner item on the mobile screen.
* **Hide on desktop:** not show this banner item on desktop and tablet screens.
## 10. "Product list" item type
This is a great combination of the texts and a list of product grid items.
{% hint style="info" %}
For the item size or gutters, you can view [the common settings](/dynamic-sections/banner-and-image/banner-creator-pro#5-common-settings-in-all-banner-item-types).
{% endhint %}
### A. GENERAL SETTINGS:
* **Heading:** add your text to display it as a heading.
* **Subheading:** add your text to display it as a subheading.
* **Hide on mobile:** not show the banner item on the mobile screen.
* **Hide on desktop:** not show the banner item on desktop and tablet screens.
### B. HTML TAGS:
Pick the HTML tags to display heading and subheading for optimizing SEO in your store.
* **Heading:** choose an HTML tag to display the heading. These are 7 options in this setting:
* H1: HTML code like `heading
`
* H2: `heading
`
* H3: `heading
`
* H4: `heading
`
* H5: `heading
`
* H6: `heading
`
* Paragraph: `heading
`
* **Subheading:** choose an HTML tag to display the subheading. These are 7 options in this setting:
* H1: HTML code like `subheading
`
* H2: `subheading
`
* H3: `subheading
`
* H4: `subheading
`
* H5: `subheading
`
* H6: `subheading
`
* Paragraph: `subheading
`
### C. COLORS:
* **Heading color:** pick a color for the heading.
* **Subheading color:** pick a color for the subheading.
### D. FONT SIZES:
Adjust the size of heading and subheading on desktop, tablet, and mobile screens.
### E. COLLECTION SETTINGS:
* **Pick a collection** to display its products.
* **Limit:** adjust the number of products that will be shown.
* **Choose a product item size:** specify the size of a product grid item.
### F. PRODUCT ITEM SETTINGS:
Please refer to [this guide](/tips#product-item-settings) for more details.
## 11. "Video" item type
Embed a video from Youtube or Vimeo.
{% hint style="info" %}
For the item size or gutters, you can view [the common settings](/dynamic-sections/banner-and-image/banner-creator-pro#5-common-settings-in-all-banner-item-types).
{% endhint %}
### GENERAL SETTINGS:
* **YouTube or Vimeo link:** enter your Youtube or Vimeo link.
* **Video thumbnail:** pick or upload your image to display it as a thumbnail video. If empty, the default iframe of Youtube or Vimeo will be shown.
* **Hide on mobile:** not show this banner item on the mobile screen.
* **Hide on desktop:** not show this banner item on desktop and tablet screens.
# Layer banner
No need to install any Shopify apps. With the Layer Banner section, you have will a strong tool to present your creativity.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Layer banner** section.
## 2. Add a Layer banner section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Layer banner** > **Add**.
4. Use the settings to customize your **Layer banner** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Section name:** add the section name that is only used to help you find the section in Theme Settings easily. It will not be shown at the storefront.
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Full width:** turn on/off displaying the section in full width of the window(no gutter on the left and right). If you enable this setting, the **Wide display** setting will be ignored.
* Hide this section on the mobile screen: not show this section on the mobile screen.
* **Revert the left and right position in the RTL layout:** turn on this setting to reverse the text position, arrow in the RTL layout automatically.
### Slider settings
Help you display a list of banners in a slider format. Example: display a slideshow,...
* **Enable:** tick this checkbox to enable the slider feature.
* **Banner layer size:** choose the number of items will be shown in the user's viewport. In the slider format, the size of each item will be ignored. All items will have the same size, and you can change it in this setting.
| Banner item size | The number of items in the user's viewport | |
| :--------------: | :----------------------------------------: | :----: |
| | Desktop & tablet | mobile |
| Small | 5 | 2 |
| Medium | 4 | 2 |
| Large | 3 | 2 |
| Very Large | 2 | 1 |
| Full Width | 1 | 1 |
* **Enable autoplay:** tick this checkbox if you want to show the slider autoplay.
* **Autoplay speed:** Autoplay Speed in seconds. Only apply this setting if you tick "Enable autoplay". Unit: seconds.
* **Show arrow:** show Prev/Next arrows.
* **Show dot indicators:** show the navigation dots in the slider.
### Small vertical banners
Display the small vertical banners beside the main banners.
**General settings:**
* **Enable:** show/hide the small vertical banners.
* **Width:** adjust the width of the area that contains the small vertical banners. The width of the area contains the main banners will be calculated base on this setting.
* **Position:** specify the position to show the small vertical banners. There are 2 values: **left** or **right** of the main banners.
* **Remove the distance with the main banners:** turn on/off the distance between the main banners and the small vertical banners.
**Effect settings:**
* **Enable:** turn on/off the effect.
* **Transition effects:** specify the transition effect of the image when users hover the mouse on the banner.
* **Color effects:** specify the color effect of the image when users hover the mouse on the banner.
**Add your images:**
Layer banner offers at most 3 images in the small vertical banners area. You can configure the URL for each image.
## 4. Add/Edit/Remove a layer item
Scroll down to the bottom, you will see an **Add content** button, click this button to add a new layer item. Or you can click one of the available layer items to edit/remove it and drag/drop items to rearrange them.
The Layer banner section provides 3 item types: **parent layer**, **text layer**, and **Product starting price**. Each type has common and own settings**.** Not like the [Banner Creator Pro](/dynamic-sections/banner-and-image/banner-creator-pro) section, each banner in the Layer banner section is a combination of a **parent layer**, **multiple text layers**, and **Product starting price layers.** Now let us explore how they work.
## 5. Parent layer
{% hint style="info" %}
This is the top-level layer. All other layer types will be displayed in a part of this item.
{% endhint %}
### A. GENERAL SETTINGS:
* Layer name: This setting is only used to help you find the layer in Theme editor easily. It will not be shown at the storefront. Tips: use the prefix "**Parent -**" for the parent items and "**---**" for the sub-layers will help you organize the items better.
### B. LAYER SIZE:
The Layer banner section uses the grid layout like Bootstrap. The content box will be separated in the same 12 columns. You can change the width of a banner item by increasing or decreasing the number of columns. You can set the different item sizes for a banner item on desktop and mobile screen.
* Layer size: adjust the size of the banner on desktop and tablet screens.
* Layer size on the mobile screen: adjust the size of the banner on the mobile screen.
* Wrap children items in a container: use this setting to avoid the text box reaches the border left or right of the window.
### C. GUTTERS ON TABLET AND DESKTOP:
Turn on/off gutters on desktop and tablet screens.
* Top: turn on/off the top gutter.
* Bottom: turn on/off the bottom gutter.
* Left: turn on/off the left gutter.
* Right: turn on/off the bottom gutter.
### D. GUTTERS ON MOBILE:
Turn on/off gutters on the mobile screen.
* Top: turn on/off the top gutter.
* Bottom: turn on/off the bottom gutter.
* Left: turn on/off the left gutter.
* Right: turn on/off the bottom gutter.
### E. UPLOAD IMAGE:
* **Image:** pick or upload your image.
* **Mobile image:** pick or upload your image to display it on the mobile screen. If empty, the image from the above setting will be displayed instead.
* **The link for image:** add your URL so that users can click the image to go to a new page with this URL.
* **Open link in a new tab:** open a new page in a new tab when users click the image.
* **Image alignment:** align the image in its wrap area. Only affect when the image does not fit the wrap area.
* **Hide this banner on mobile:** not show the banner on the mobile screen.
* **Hide this banner on the desktop:** not show the banner on the desktop and tablet screens.
### F. BACKGROUND COLOR:
* Enable: turn on/off the background color.
* Pick a color: pick a color for the background.
{% hint style="warning" %}
If **the image fits its wrap area**, you are not able to see the background color.
{% endhint %}
### G. EFFECTS:
* **Enable:** turn on/off the effect.
* **Transition effects:** specify the transition effect of the image when users hover the mouse on the banner.
* **Color effects:** specify the color effect of the image when users hover the mouse on the banner.
## 6. Text layer
This is the sub-layer, let you add texts in the banner. All these texts will be displayed in the Parent layer.
{% hint style="info" %}
**Note:** all sublayer will be displayed in the parent layer which is adjacent just in front of their position. Check below image:
{% endhint %}
### A. **GENERAL SETTINGS:**
* **Layer name:** add **a** name for the layer.
* **Text content:** add text contents.
{% hint style="info" %}
Note: the breadlines are only applied when the text is displayed as "**paragraph**".
{% endhint %}
### B. LAYOUT SETTINGS**:**
This setting will help you handle the width of the text box that **contains the texts and buttons**.
* **Text box width:** adjust the width on the desktop and tablet screens.
* **Text box width on the mobile screen:** adjust the width on the mobile screen.
* **Standard position:** pick a position to display the text box. The Layer banner provides 9 available positions.
* **Custom positions:** If you would not like to use the standard positions, you can create a custom position by yourself.
* **Use custom position:** tick this checkbox to use the custom position instead of the standard position.
* **Left position:** adjust the left coordinate. Unit: %.
* **Right position:** adjust the right coordinate. Unit: %. **Note:** The right position only works if the "Left position" is less than zero.
* **Top position:** adjust the top coordinate. Unit: %.
* **Bottom position:** adjust the bottom coordinate. Unit: %. **Note:** Only work if "Top position" is less than zero.
### C. TEXT COLOR:
* **Pick a color:** Choose a color to set the text color.
{% hint style="info" %}
Note: If the text color is empty, the general color will be set for the text color.
{% endhint %}
* **Opacity:** Adjust the text color blur.
* **Appear effect:** choose the effects which you want to text appear. There are 4 effects and no-effect.
{% hint style="info" %}
Note: Effects only work with slider.
{% endhint %}
### D. OWN BACKGROUND FOR TEXTS:
These settings will help you handle the background for the text box.
* **Enable:** show/hide the background.
* **Background color:** pick a color to display the background.
* **Opacity:** Adjust the background blur.
* **Background image:** pick or upload your image to display it as a background instead of background color.
### E. TEXT SETTINGS:
* **Hide this text on mobile:** tick to hide the text on the mobile screen.
* **Hide this text on desktop:** tick to hide the text on the desktop and tablet screens.
* **Display as:** specify the way the text is shown. That also decides which HTML tag will be used to contain your text. **So good for optimizing SEO in your store**. There are 11 values for this setting.
* Button ( HTML tag: `your text` with a button style).
* Link ( `your text` ). You will see the setting to configure the URL in the below content.
* Paragraph ( `your text
` )
* HTML block ( `your text
` )
* Countdown timer: you need to add a countdown date to the text with the right syntax. Please refer to [this guide](/theme-settings/product-settings#countdown-timer) for the countdown date syntax.
* H1 tag ( `your text
` )
* H2 tag ( `your text
` )
* H3 tag ( `your text
` )
* H4 tag ( `your text
` )
* H5 tag ( `your text
` )
* H6 tag ( `your text
` )
* **Link for text:** pick or add your URL. Only work when the **Display as** setting is configured to **Button** or **Link.**
* **Open link in a new tab:** open the new tab in the browser when users click your text. Only work when the **Display as** setting is configured to **Button** or **Link** and the **Link for text** setting is not empty**.**
* **Alignment:** align the text.
* **Button settings:** Only work when the **Display as** setting is configured to Button.
* **Button style:** change the button style. Each button has a different color and background, you can edit these styles in **Theme settings** > **Colors & font sizes** > **Style 1 button**, **Style 2 button**, or **Style 3 button**.
* **Include icon:** insert an icon to your text. You can go to [the icons page](https://boostheme.com/beloria/icons) to copy an icon class and paste it into this setting.
* **Desktop styles:** change the typography of the text on tablet and desktop screens.
* **Gutter top:** adjust the gutter on the top of the text.
* **Gutter bottom:** adjust the gutter on the bottom of the text.
* **Gutter left:** adjust the gutter on the left of the text.
* **Gutter right:** adjust the gutter on the right of the text.
* **Font size:** adjust the size of the text.
* **Line height:** adjust the line-height of the text.
* **Font style:** specify the style of the text.
* **Font weight:** specify the weight of the text.
* **Letter spacing:** adjust the space between characters in the text.
* **Mobile styles:** change the typography of the text on the mobile screen.
* **Extend from *****desktop styles***** settings:** tick this checkbox to apply all settings of **desktop styles** on the mobile screen. Otherwise, the settings in mobile styles will be applied.
* Other settings in **mobile styles** have **the same meaning** as in **desktop styles**.
## 7. Product starting price:
* **Hide this banner on mobile:** not show the banner on the mobile screen.
* **Hide this banner on the desktop:** not show the banner on the desktop and tablet screens.
### A. LAYOUT SETTINGS:
* **Wrap box width:** adjust the width on the desktop and tablet screens.
* **Wrap box width on the mobile screen:** adjust the width on the mobile screen.
* **Text Alignment:** align the text on the desktop and tablet screens.
* **Text Alignment mobile:** align the text on the mobile screen.
* **Standard position:** pick a position to display the text box. The Layer banner provides 9 available positions.
* **Custom positions:** If you would not like to use the standard positions, you can create a custom position by yourself.
* **Use custom position:** tick this checkbox to use the custom position instead of the standard position.
* **Left position:** adjust the left coordinate. Unit: %.
* **Right position:** adjust the right coordinate. Unit: %. **Note:** The right position only works if the "Left position" is less than zero.
* **Top position:** adjust the top coordinate. Unit: %.
* **Bottom position:** adjust the bottom coordinate. Unit: %. **Note:** Only work if "Top position" is less than zero.
### B. PRICE SETTINGS:
* **Pick a product:** Select a product to display you want.
* **Starting text:** add the texts you want to show in the price.
* **Text color:** choose a color to set the color for the price.
* **Starting price:** add the value for the price you want to show.
{% hint style="info" %}
Note: If left empty, the product's min price will be displayed.
{% endhint %}
* **Price color:** pick a color you want to set for the price.
### C. BUTTON:
* **Button link:** add the link of the button you want to display.
{% hint style="info" %}
Note: If empty, the product's URL will be displayed.
{% endhint %}
* **Button text:** add the text of the button you want to display.
* **Button style:** choose the button style you want to display, there are 3 styles.
* **Appear effect:** choose the effects which you want to text appear. There are 4 effects and no-effect.
{% hint style="info" %}
The effects only work with the slider.
{% endhint %}
# Information list
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Information list** section.
## 2. Add an Information list section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Information list** > **Add**.
4. Use the settings to customize your **Information list** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable small top gutter:** turn on/off the small space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
* **Enable small bottom gutter:** turn on/off the small space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Pick an image:** pick or upload your image to display beside the information list.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
### Button
Configure a button is shown below the information list.
* Enable: show/hide the button.
* Label: add your text to show as the button's label.
* URL: specify an URL for the button.
## 4. Add/Edit/Remove an information item
Scroll down to the bottom, you will see an **Add information item** button, click this button to add a new information item. Or you can click one of the available information items to edit/remove it and drag/drop items to rearrange them.
### Information item settings
* Title: add your item's title.
* Short description: add a short text to display it as an item's short description.
* The link: add your URL for the item.
# Instagram slider
Helps you display Instagram photo in a slider or grid layout easily.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Instagram Slider** section.
## 2. Add an Instagram slider section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Instagram Slider** > **Add**.
4. Use the settings to customize your **Instagram Slider** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable small top gutter:** turn on/off the small space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
* **Enable small bottom gutter:** turn on/off the small space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subtitle:** add section subtitle.
* **Hashtag:** add hashtag Instagram.
* **The number of items to show on the screen:** drag & drop quantity items to displaying on the screen.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Full width:** turn on/off displaying the section in the full layout. If you enable this option, the "Wide display" option will be ignored.
## 4. Add/Edit/Remove an Instagram photo
Scroll down to the bottom, you will see an **Add photo** button, click this button to add a new Instagram photo. Or you can click one of the available Instagram photos to edit/remove it and drag/drop items to rearrange them.
### Instagram photo settings
* **Pick an image:** pick or upload your image to display it as the Instagram photo.
* **The post URL on Instagram:** add the URL of the Instagram photo.
* **The post title on Instagram:** add the title of the Instagram photo.
# Logo list
Helps you display logos in a slider or grid layout easily.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Logo list** section.
## 2. Add a Logo list section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Logo list** > **Add**.
4. Use the settings to customize your **Logo list** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Heading position:** specify the position to show the heading and subheading. Left, right, or above the logos slider.
* **Choose item size:** configure the size of a logo item.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
### Slider settings
* **Enable:** turn on/off the slider layout. If you turn off this setting, the logos will be shown in a grid layout.
* **Show the logo list in two lines:** display the logos slider in two rows.
## 4. Add/Edit/Remove a logo
Scroll down to the bottom, you will see an **Add logo** button, click this button to add a new logo. Or you can click one of the available logos to edit/remove it and drag/drop items to rearrange them.
**Logo settings:**
* **Image:** pick or upload your image to display it as a logo.
* **Link:** add your URL for the logo.
# Banner & quotes
# Text
[Shipping rates calculator](/theme-settings/shipping-rates-calculator)
# Custom HTML
Use this section to add your CUSTOM HTML.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Custom HTML** section.
## 2. Add a Custom HTML section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Custom HTML** > **Add**.
4. Use the settings to customize your **Custom HTML** section.
5. Click **Save**.
## 3. Settings
* **Enable wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Your custom HTML:** add your CUSTOM HTML to this text box.
# Testimonials
With this section, you can display the customer reviews/comments from the customers.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Testimonials** section.
## 2. Add a Banner Creator Pro section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Testimonials** > **Add**.
4. Use the settings to customize your **Testimonials** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subtitle.
* **Heading position:** specify the position to show the heading and subheading. Left, right, or above the testimonials slider.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
## 4. Add/Edit/Remove a testimonial
Scroll down to the bottom, you will see an **Add testimonial** button, click this button to add a new testimonial. Or you can click one of the available testimonials to edit/remove it and drag/drop items to rearrange them.
**Testimonial settings:**
* **Author:** add an author name.
* **Author's title:** add an author's title.
* **Text:** add a short text to display it as an author's quote.
* **Show avatar:** show/hide the avatar.
* **Author's avatar:** pick or upload your image to display it as an author's avatar.
* **Background:** set background color for a testimonial.
* **Color:** set text color for a testimonial.
# Text list
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Text list** section.
## 2. Add a Text list section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Text list** > **Add**.
4. Use the settings to customize your **Text list** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Show the text in uppercase format:** display all characters in the uppercase format.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Hide this section on the mobile screen:** not show the section on the mobile screen.
### Separated line
* Enable: show/hide the line between text list items.
### Colors
Configure colors for title, subtitle, and icon.
### Font sizes
Configure the font sizes for the title, icon on the desktop, tablet, and mobile screens.
{% hint style="info" %}
The font size of the subtitle will be calculated base on the title's font size.
{% endhint %}
## 4. Add/Edit/Remove a text item
Scroll down to the bottom, you will see an **Add text item** button, click this button to add a new text item. Or you can click one of the available items to edit/remove it and drag/drop items to rearrange them.
**Text item settings:**
* **Content:**
* **Icon Class:** add the icon HTML class. You can go to [this page](https://boostheme.com/beloria/icons) and copy the HTML class of an icon you want to add, then paste it into this setting.
* **Title:** add your text to display it as a title.
* **Subtitle:** add your text to display it as a subtitle.
* **Background color:** set an item's own background.
* **Enable:** turn on/off the background color.
* **Pick a color:** choose a color for the background.
# Marketing & others
[Shipping rates calculator](/theme-settings/shipping-rates-calculator)
# Featured blog posts
Helps you display feature blog posts in a slider or grid layout easily.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Blog posts** section.
## 2. Add a Blog posts section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Blog posts** > **Add**.
4. Use the settings to customize your **Blog posts** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable small top gutter:** turn on/off the small space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
* **Enable small bottom gutter:** turn on/off the small space distance on the bottom of the section.
### General settings
* **Heading:** add the heading blog.
* **Sub heading:** add the sub heading blog.
* **Blog:** select a blog to display the blog article list.
* **Posts:** drag & drop values to display quantity post on the screen.
* **Show date:** turn on/off displaying the date in blog.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
### Colors
Config the colors on the featured blog.
* **Section heading :** choose a color to set the color of the section heading blog.
* **Section subheading:** choose a color to set the color of the section subheading blog.
* **Article Date:** choose a color to set the color of the article date.
* **Article date background:** choose a color to set the background color of the article date.
* **Article title:** choose a color to set the color of the article title blog.
### Font size
* **Section heading in tablets and desktop:** drag and drop a value to choose the section heading font size in tablets and desktop.
* **Section heading in mobile:** drag and drop a value to choose the section heading font size in mobile.
* **Section subheading:** drag and drop a value to choose the section subheading font size.
* **Article date:** drag and drop value to choose the article date font size.
* **Article title:** drag and drop a value to choose the article title font size.
# Newsletter
Helps you display Newsletter form on the homepage easily.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Newsletter** section.
## 2. Add a Newsletter section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Newsletter** > **Add**.
4. Use the settings to customize your **Newsletter** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable small top gutter:** turn on/off the small space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
* **Enable small bottom gutter:** turn on/off the small space distance on the bottom of the section.
### General settings
* **Heading:** add the section title.
* **Subheading:** add section subheading.
* **Wide display:** turn on/off displaying the section in the wider layout(still keep the gutter on the left and right).
* **Enable social icons:** turn on/off displaying the social icons.
### Color & Font size
* **Section heading color:** choose a color to set the color of the section heading.
* **Section subheading color:** choose a color to set the color of the section subheading.
* **Input text color:** choose a color to set the color of the input text.
* **Input background color:** choose a color to set the background color of the input.
* **Input font size:** drag & drop to choose a value to set the font size of the input. Only apply on the desktop screen.
* **Input icon color:** choose a color to set the color of the input icon.
* **Terms & conditions color:** choose a color to set the color of terms & conditions.
* **Social icons color:** choose a color to set the color of social icons.
# Contact us
Helps you display Contact us layout easily.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Contact us** section.
## 2. Add a Contact us section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Contact us** > **Add**.
4. Use the settings to customize your **Contact us** section.
5. Click **Save**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
### General settings
* **Heading:** add the heading contact us. Leave empty to show the page title which is configured in Online Store > Pages.
* **The form title:** add the form title.
### Contact information
* **Enable:** turn on/off your contact information at the bottom of this section.
### Google Maps
* **Show the map:** turn on/off the map.
* **Show the map above the form:** turn on/off the map above the form.
* **Map address:** add the address of the map, Google Maps will find the exact location.
* **Background:**
* **Google Maps API key:** You’ll need to [register a Google Maps API Key](https://help.shopify.com/manual/using-themes/troubleshooting/map-section-api-key) to display the map
* **Image:** choose or upload the image which will be displayed when the map isn’t loaded
* **Image position:** choose the position of the image map. There are 9 positions.
### Opening hours
Configure to show the opening hours of your store.
## Add/Edit/Remove an address
Scroll down to the bottom, you will see an **Add contact information** button, click this button to add new contact information. Or you can click one of the available information to edit/remove it and drag/drop items to rearrange them.
# Map
Configure to show the Google map on the homepage and contact page.
{% hint style="warning" %}
You’ll need to [register a Google Maps API Key](https://help.shopify.com/manual/using-themes/troubleshooting/map-section-api-key) to display the map
{% endhint %}
## Configurations:
* **Show the map:** tick to show the map
* **Google Map API key:** add your Google Map API key
# Loox widget
Display reviews from the Loox Shopify app on the homepage.
## 1. Open the existing section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Loox widget** section.
## 2. Add a Loox widget section to your home page
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Loox widget** > **Add**.
4. Use the settings to customize your **Loox widget** section.
5. Click **Save**.
## 3. General settings
* **Heading:** add the section title.
* **Subheading:** add section subheading.
## 4. Loox settings
* **Display only reviews with photos:** hide all text-only reviews from appearing in the widget.
* **Number of reviews to display:** Limit the number of reviews displayed before the "Show more reviews" button.
# About us 1
Create the about us page to show your business information with "About us 1" section.
## 1. Create an About us page with the "About us 1" section.
1. From your Shopify admin, go to **Online Store** > **Pages**.
2. Click the **Add page** button.
3. Add the page title, content. Choose template is **"page.about1"**.
4. Click the **Save** button.
{% hint style="warning" %}
Note: the template "**page.about1**" is only available after you have published our theme.
{% endhint %}
## 2. Open About us 1 section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **About us 1 page** (this is the static page you created in the part #1).
4. Click **Sections**.
5. Click **About us 1**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### General settings
* **Image:** pick or upload your image to display it besides the page title and content.
* **Image size:** adjust the image size.
* Image position: specify the position to display the image.
### Social channels
Configure to show URLs of your Twitter, Facebook, Instagram, or Pinterest.
### Layout settings
* **Full width:** turn on/off displaying the section in the wider layout.
# About us 2
Create the about us page to show your business information with "About us 2" section.
## 1. Create an About us page with the "About us 2" section.
1. From your Shopify admin, go to **Online Store** > **Pages**.
2. Click the **Add page** button.
3. Add the page title, content. Choose template is **"page.about2"**.
4. Click the **Save** button.
{% hint style="warning" %}
Note: the template "**page.about1**" is only available after you have published our theme.
{% endhint %}
## 2. Open About us 2 section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **About us 2 page** (this is the static page you created in part #1).
4. Click **Sections**.
5. Click **About us 2**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### Layout settings
* **Full width:** turn on/off displaying the section in the wider layout.
# About us 3
Create the about us page to show your business information with "About us 3" section.
## 1. Create an About us page with the "About us 3" section.
1. From your Shopify admin, go to **Online Store** > **Pages**.
2. Click the **Add page** button.
3. Add the page title, content. Choose template is **"page.about3"**.
4. Click the **Save** button.
{% hint style="warning" %}
Note: the template "**page.about3**" is only available after you have published our theme.
{% endhint %}
## 2. Open About us 3 section
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. From the top-bar drop-down menu, select **About us 3 page** (this is the static page you created in part #1).
4. Click **Sections**.
5. Click **About us 3**.
## 3. Settings
### Background
* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
### Section gutters
* **Enable top gutter:** turn on/off the space distance on the top of the section.
* **Enable bottom gutter:** turn on/off the space distance on the bottom of the section.
### Layout settings
* **Full width:** turn on/off displaying the section in the wider layout.
# Theme settings
# General
## Open General settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **General**.
## General settings
* **Display content in the wide layout**: display the content in the wider layout.
{% hint style="info" %}
**Note:** Not apply for the sections on the homepage.
{% endhint %}
* **Disable copy text:** tick to turn off the **right-click**, and **Ctrl + C** short key to save your content.
* **Enable lazyload fade effect:** turn on/off the lazyload loading effect. Each language code is separated by a comma.
## RTL settings
* **Enable right to left style:** turn on/off the RTL layout.
* **Language codes:** add the language code of the languages you want to display in the RTL layout. Example: **ar**.
# Collections list page
## Collections list page
Edit the meta title, meta description of the collections list page. That will help to improve SEO of your store.
## Open Collections list page settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click the **Collections list page**.
## Settings
* **Meta title:** add your meta title.
* **Meta description:** add your description.
# Typography
Change the fonts on your store.
## Open Typography settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Typography** ( in version tf-3.2 or older, the group name is **Google fonts )**.
## For version tf-3.3 or newer
Use font pickers to change the Primary and secondary fonts.
## For version tf-3.2 or older
* Go to [https://fonts.google.com](https://fonts.google.com/), click the font you want to use. Recommend only select at most 2 fonts for optimizing the loading time.
* In each font, select styles you want to use. Recommend Regular(300 or 400), and Semi-bold(600).
* Then click the icon on the top right to open the right panel. And click "**Embed**" in the right panel to open the embed configuration.
* Copy the value in the **href** attribute, then paste it into the URL setting in the theme editor on your store.
* Depend on which font you want to use as **General** or **Secondary** font, copy the font declaration and paste it into the **General Font Declaration** setting or **Secondary Font Declaration** setting. Note: not copy the "**font-family:**" word.
# Breadcrumbs
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Breadcrumbs.**
## Background
Use the color picker to pick a background color for the breadcrumbs block.
## Collection page
Configure the breadcrumbs on the collection page.
* **Slogan:** add the slogan text that is shown below the collection title.
* **Background image:**
* **Enable:** turn on/off the background image.
* **Pick or upload an image:** configure the image to display it as a background image.
* **Text color:** pick a color for texts in the breadcrumbs block.
## Blog page
Configure the breadcrumbs on the blog page.
* **Slogan:** add the slogan text that is shown below the blog title.
# Multiple languages
## Open Multiple languages settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Multiple languages.**
## **Settings**
* **Enable Language Picker:** turn on/off the language picker on the storefront.
# Colors & Font sizes
## Open Color & Font size settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Color & Font sizes.**
## **Body**
* **Background color:** set the page background for all pages.
* **Text color:** pick a color for all texts on all pages.
* **Font size:** adjust the color for all texts on all pages.
Some texts in some sections or special elements(price, section title,...) have their own color, font size settings.
## Rich text editor
Configure font size for the text in the product description, article content, static page content. You can adjust the font size for general text, H1, H2, H3, H4, H5, H6 tags.
## Links
Configure color for anchors tags.
### A. General style:
* **Text color:** pick a color for anchor tags in the general state.
* **Text color hover:** pick a color for anchor tags when users hover the mouse or click on it.
### B. Alternative style:
Configure color for anchor tags that have the HTML class: **alternative**.
* **Text color:** pick a color for anchor tags in the general state.
* **Text color hover:** pick a color for anchor tags when users hover the mouse or click on it.
## Main navigation
Configure color and font size for the horizontal navigation.
### A. Top item:
By default, the top item color is configured at header style settings ( depend on the header style you are using ). The below content will show details of header style settings.
* **Color hover:** pick a color for anchor tags when users hover the mouse on it.
* **Font size:** adjust the size of the text.
### B. Dropdown Title:
A dropdown title is the title of a dropdown column.
* **Font size:** adjust the size of the text.
### C. Dropdown Content:
* **Font size:** adjust the size of the texts in the dropdown content.
* **Background color:** pick a color for the dropdown content.
## Vertical navigation
Configure color for the trigger bar, top-level item, background color of the dropdown content.
You can go to the **Colors & Font sizes > Header Style 1** to config:
You can go to the **Colors & Font sizes > Header Style 2** to config:
There are 3 areas in header style 2: top, middle, and bottom.
You can go to the **Colors & Font sizes > Header Style 3** to config:
You can go to the **Colors & Font sizes > Header Style 4** to config:
There are 2 areas on header style 4: top, and bottom.
You can go to the **Colors & Font sizes > Header Style 5** to config:
There are 2 areas: top, bottom & middle.
You can go to the **Colors & Font sizes > Header Style 6** to config:
You can go to the **Colors & Font sizes > Header Style 7** to config:
You can go to the **Colors & Font sizes > Header Style 8** to config:
There are 3 areas on header style 8: top, bottom, and search.
You can go to the **Colors & Font sizes > Header Style 9** to config:
There are 2 areas on header style 9: top, and bottom.
You can go to the **Colors & Font sizes > Header Style 10** to config:
You can go to the **Colors & Font sizes > Mobile Header** to config:
## Section title
You can go to the **Colors & Font sizes > Section title** to config:
## Section subtitle
You can go to the **Colors & Font sizes > Section subtitle** to config:
## Product title
You can go to the **Colors & Font sizes > Product title** to config:
## Price
You can go to the **Colors & Font sizes > Price** to config:
## Compare price
You can go to the **Colors & Font sizes > Compare price** to config:
## Color swatch
You can go to the **Colors & Font sizes > Color swatch** to config:
## Item vendor
You can go to the **Colors & Font sizes > Item vendor** to config:
## Cart button
You can go to the **Colors & Font sizes > Cart button** to config:
## Style 1 button
This config is used in the Product grid (Add to cart button), Banner Creator Pro, Flexible collection list, Contact page, and some of the static pages which the same structure. You can go to the **Colors & Font sizes > Style 1 button** to config:
## Style 2 button
This config is used in the Banner Creator Pro, Flexible collection list, and some of the static pages which the same structure. You can go to the **Colors & Font sizes > Style 2 button** to config:
## Style 3 button
This config is used in the Product Grid (Compare, Wishlist, Quickview buttons), Banner Creator Pro, Flexible collection list, and some of the static pages which the same structure. You can go to the **Colors & Font sizes > Style 3 button** to config:
## Tab title
You can go to the **Colors & Font sizes > Tab title** to config:
This config is used in the cart sidebar, mobile menu, and filter sidebar background. You can go to the **Colors & Font sizes > Sidebar canvas** to config:
## Product page and Quick view popup
You can go to the **Colors & Font sizes > Product page and Quick view popup** to config:
You can go to the **Colors & Font sizes > Footer** to config:
## Input fields
This config is used in all input fields. You can go to the **Colors & Font sizes > Input Fields** to config:
# Social media
## Open Social media settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Social media.**
## Social sharing image
Configure image to share your site on social media. Except for sharing the product, collection, article because the featured image of a product, collection, or article will be used.
## Social sharing options
Configure platforms are used to share products, articles.
## SOCIAL ACCOUNTS
Add your social account that customers can reach you on social platforms. These social accounts will be shown as social icons in the header or footer.
* **Twitter:** add your Twitter page. Example:
* **Facebook:** add your Facebook page. Example: [https://facebook.com/boostheme](https://www.facebook.com/boostheme/)
* **Pinterest:** add your Pinterest page. Example:
* **Instagram:** add your Instagram page. Example: [https://instagram.com/boosthemeteam](https://www.instagram.com/boosthemeteam/)
* **Tumblr:** add your Tumblr page. Example:
* **Snapchat:** add your Snapchat page. Example:
* **Youtube:** add your Youtube page. Example: [https://youtube.com/boostheme](https://www.youtube.com/channel/UCFwShnR9znBRdsp8xlXxUjw)
* **Vimeo:** add your Vimeo page. Example:
# Favicon
## Open Favicon settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Favicon.**
## Favicon image
Pick or upload your image to display it as a favicon. Your image should be a square.
## Badge
Display the number of items in the cart on the browser bar.
* **Enable**: show/hide the badge.
* **Position**: pick a position to display the badge.
* **Background color**: pick a color for the badge's background.
* **Text color**: pick a color for the text.
# Product settings
These are the common settings for all products which be displayed on all pages.
## Open Product settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Product settings.**
## GENERAL SETTINGS
* **Enable quick view button:** check or uncheck to Enable quick view button.
* **Show option as a drop-down:** Add option name you want to show as a dropdown. Each option's name is separated by a comma.
## PRE-ORDER SETTINGS
* **Enable:** Check or uncheck to enable the pre-order feature.
When the inventory quantity is less than zero and you enable "Continue selling when out of stock". The pre-order text will be shown.
## WISHLIST FEATURE
* **Enable:** check or uncheck to enable the wishlist feature.
* **Product item settings**: Please refer to [this guide](/tips#product-item-settings) for more details.
## COMPARISON FEATURE
* **Enable:** check or uncheck to enable the comparison feature.
* **Truncate product's name in comparison popup:** Just drag to the number of words you want to show, the product name will be displayed shorter. And leave zero if you want to display the full product name.
## COLOR SWATCHES
* **Show color swatch by:** You can choose the way to display the color options. Use the variant image or custom colors. If you choose "custom color codes", you can configure your color codes in the below fields.
## CUSTOM COLOR CODES
* The Color product tag must match with the color name. Ex: if you have a color name is "Light Blue", you have to add a color product tag is "light-blue".
{% hint style="info" %}
Note: If your store is using multiple languages, you should add multiple color names corresponding with multiple languages, each color name separated by a comma.
{% endhint %}
## REVIEW APP
* **Enable review feature:** check or uncheck to enable/disable review feature.
* **Choose review app:** Our themes have been integrated with some popular Shopify review apps. You only need to install these apps without changing any codes to show the reviews.
* Product review by Shopify: install [**here**](https://apps.shopify.com/product-reviews).
* Ali Reviews app: install [**here**](https://apps.shopify.com/ali-reviews).
* Ryviu app: install [**here**](https://www.ryviu.com/?rel=qwqw8qzg).
* Yotpo app: install [**here**](https://www.yotpo.com/).
* Loox app: install [**here**](https://loox.io/app/getboost) to receive an extended 30-day free trial (instead of the usual 14).
* Judge.me app: install [**here**](https://loox.io/app/getboost).
\- Check other apps if you don't want to use the above apps.
## COUNTDOWN TIMER
* **Enable countdown for all:** check or uncheck to show/ hide all countdown timer for all products.
* **Countdown Express:** if you want to reset the countdown timer when it ends automatically, use format: **DD:HH:II:SS**, example: **00:05:30:00**. And if you want to set up a specified date to end the countdown, use format **YYYY/MM/DD HH:II:SS**, for example: **2019/01/30 05:30:00**. You can use this format to add your own countdown timer for each product by using Product Metafields with namespace: **btt**, key: **countdown**, the value type is **string**. Please refer to [here](https://boostheme.com/themes-documentation/product-metafields) for setting up Product Metafields.
### Syntax
* **Format:** YYYY/MM/DD HH:II:SS
* **Example:** 2019/01/30 05:30:00
# Product labels
## Open Product Labels.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Product labels.**
With these labels, just tick the checkbox in the corresponding label settings area to enable them, you can also add text for the labels, change color and background. However, to the labels are displayed, you need to add the tag for the product. If you don’t clear about product tags in Shopify, please refer to [this article](https://help.shopify.com/manual/productivity-tools/using-tags).
## NEW LABELS
* add the '**new**' tag into your products
* **Active New Label:** check or uncheck to enable.
* **Label Type:** you can choose the type for the label, there are two types: text or image.
* **Text label:** add the text you want to show.
* **Color for Text label:** pick a color you want to display for text.
* **Background Color for Text label:** pick a color you want to display for the background.
* **Image label:** pick or upload your image to display it as new labels. Recommend width x height: 50x100. Unit: px.
## BEST SELLING LABELS
* add the '**best**' tag into your products
* For the below configs that are the same the New labels. You can refer New labels for more details.
## TRENDING LABELS
* add the '**trend**' tag into your products
* For the below configs that are the same the New labels. You can refer New labels for more details.
## DEAL LABELS
If you activate this label, the label will be shown automatically when a product has the compare price and compare price must be greater than the price.
* Like other labels, you can add text, change color, and background for the "deal" label. You can refer New labels for more details.
* **Text label:** use the syntax "\[percent]" variable to show the percent number.
# Currency
These settings will help you show the price in multiple currencies and all the prices from your store can be automatically adjusted to the country of your customer.
## Open Currency.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Currency.**
## GENERAL SETTINGS
To offer multiple currencies on your online store, you must first edit your store's currency formatting.
* **Format:** choose whether to include currency descriptor, such as USD or CAD, with the converted currency.
* **Show Currency Switcher**: check or uncheck to show currency picker on the storefront so that customers can change to display in a currency they like.
* **Currency Converter Engine:**
* **Shopify JS:** default. It will be explained more details below.
* **Shopify Payments:** If you pick "Shopify Payments", you can refer to [this article](https://help.shopify.com/en/manual/payments/multi-currency/setup) for setting up multiple currencies.
## SHOPIFY JS ENGINE
The only affect when you pick the currency converter engine is "Shopify JS". Even though prices are displayed in different currencies, orders will still be processed in your store's currency. Clear your browser cache to see your changes.
* **Enable Auto Currency Converter:** check or uncheck to all the prices will be adjusted to the country of your customer.
* **Supported currencies:** enter currencies that your store is using. Use the country's ISO [currency code](http://www.xe.com/iso4217.php). Separate your currency codes with space.
* **Default currency:** enter currency default on your store.
# Cart
These settings will help you handle how what happens after a customer added a product to cart and how to display the header cart in desktop and mobile.
## Open Cart settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Cart.**
## GENERAL SETTINGS
* **Add to cart action:** This configuration has 5 values for what happens after a customer added a product to the cart
* **Show popup:** show a popup to inform the details of the product which the customer added to the cart.
* **Go to the cart page:** redirect the customer to the cart page.
* **Open cart dropdown or canvas sidebar:** show cart dropdown or canvas sidebar. Showing cart dropdown or canvas sidebar depends on the below configuration.
* **Only show the notification:** show a short message.
* **Not do anything:** ignore all actions.
You can specify the way to show the header cart on desktop and mobile screens.
* **Display content in desktop screen:** choose a way to show the header cart on a desktop. There are 4 options:
* Dropdown: show as a dropdown
* Sidebar canvas: show as sidebar canvas
* Only link, no content: show as a link
* No display: if you choose this option, it means the header cart will be hidden.
* **Display content in mobile screen:** choose a way to show the header cart on the mobile screen. There are 4 options like the desktop screen.
* **Truncate product name:** Just drag to the number of words you want to show, the product name will be displayed shorter. And leave zero if you want to display the full product name. Unit: word(w)
## TERMS AND CONDITIONS
* **Enable:** check or uncheck to enable Terms and conditions feature
* **Terms and conditions page:** pick or enter a page you want to display
* **Error message:** enter the message you want to display if your customer does not check the Terms & conditions.
## FREE SHIPPING TEXT
* **Enable:** check or uncheck to enable Free shipping text feature.
* **Free shipping goal:** enter the goal that you want to free shipping. Unit: $ (USD). Example: 100, it means $100 USD.
* **Goal achieved text:** enter the text you want to display when your customer gets a free shipping goal.
Note: Display when the cart value is greater than the goal.
* **Progress text:**
* Default: use structure \[remain\_amount] to set the remain amount shipping
* Display when the cart value is less than the goal.
* Progress Bar Colors: pick colors you want to show in the text, archive bar, and background.
# Shipping rates calculator
A shipping rates calculator on your cart page that lets customers estimate their shipping costs before they proceed to the checkout page.
## Open Shipping rates calculator settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Shipping rates calculator.**
## GENERAL SETTINGS
* **Show the shipping calculator:** set **Yes** to display the shipping rates calculator on your cart page, or **No** to hide it.
* **Heading text**: enter the text that will be displayed above your shipping rates calculator.
* **Default country selection:** choose which country will be selected by default.
Note: If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the spelling to use here, refer to the first checkout page.
* **Submit button label:** enter the text that will be shown on the submit button.
* **Submit button label when calculating:** enter the text that will be shown when the shipping price is being calculated.
## ERROR MESSAGES
* **General:** enter the messages you want to show in error messages. Note: Use the "messages" variable to display dynamic messages.
* **Country is not supported:** enter the message you want to show if your customers' country is not supported.
# Upsell products
Increase your average customer cart value by showing your customer products that may fit their needs. You can upsell any products with our themes.
## Add Upsell tags to certain products
Our themes use product tags as "upsell tags" to set up upsell. An upsell tag must be a handle string(only allow letters, "**-", "\_"**, no space, no special characters) and have the syntax: **"upsell\_"**. Refer to [**here**](https://shopify.dev/docs/themes/liquid/reference/filters/string-filters#handle-handleize) for more details about the handle string. When users view a product page, products have **at least one upsell tag that is identical to the current viewing product's upsell tags** will be displayed as upsell products. A product is able to have many upsell tags.
Example: product A has the upsell tags are **upsell\_fashion, upsell\_clothing**. When users view this product on the product page. Products have tags **upsell\_fashion** or **upsell\_clothing** will be shown as upsell products.
Upsell products are also shown in the popup cart after a product has been added to the cart.
## Open Upsell products settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Upsell products.**
## GENERAL SETTINGS
* **Sort random the product list:** check or uncheck to show product list sort random.
* **Enable:** check or uncheck to enable upsell in cart popup
* **Limit:** drag and drop to choose product quantity that displayed in cart popup
## VISIBLE ON PRODUCT PAGE
* **Enable:** check or uncheck to enable upsell in the product page
* **Limit:** drag and drop to choose product quantity that displayed
## VISIBLE ON CART PAGE
* **Enable:** check or uncheck to enable upsell in the cart page
* **Limit:** drag and drop to choose product quantity that displayed
## PRODUCT ITEM SETTINGS
* Please refer to [this guide](/tips#product-item-settings) for more details.
# Cross-sell ( recommendation ) products
{% hint style="info" %}
From version tf-4.0, the cross-sell products will be shown on the product and cart in individual sections. Please refer to [this guide](/static-sections/product-pages/main-product-cross-sell) for showing cross-sell products on the product page, and [this guide](/static-sections/cart-page/cross-sell-products-section) for the cart page. So you can ignore the below instructions if you are using version 3.0.0 or newer.
{% endhint %}
## Open Cross-sell products settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Cross-sell products.**
## **How are the cross-sell products loaded?**
### **A. Automation**
The algorithm that identifies cross-sell products is based on data about products that were purchased together and products with similar descriptions. It uses this data to provide a mix of those related products as recommendations for a given product.
In cases where purchase or product description data aren't available for a given product, products from a related collection are shown. The algorithm uses the collection in the URL from which the request to the API endpoint originated, and pulls other products from that collection. If the product doesn't have a collection URL, then the recommendation algorithm finds collections that include the product and pulls other products from those instead (excluding collections with handles “all” and “frontpage”).
The recommendation algorithm associates up to ten products per individual product, in order of relevance. For example, the first cross-sell product is more relevant than the tenth cross-sells product. Because of this, it's a good idea to show no more than four products per product page to promote only the most relevant recommendations.
**Requirements and limitations**
* The types of product recommendations that appear are determined by your online store and your Shopify plan:
* Purchase history and product descriptions: Plus plan and having <7000 products published in your Online Store, with an English storefront
* Purchase history only: Plus plan and having <7000 products published in your Online Store, with a non-English storefront
* Purchase history only: Non-Plus plan and having <7000 products published in your Online Store
* Collections: Any plan with >7000 products published in your Online Store
* The recommendation algorithm doesn't use orders that have been imported from another store or e**-**commerce platform to generate product recommendations.
* Products that are out of stock, set to a price of 0, or gift cards aren't included in recommendations.
### B. **Manual**
You can use the Boostheme Toolkit app to specify the products as recommendations for a given product. Please view more details [**here**](/shopify-apps/boostheme-toolkit-app#5-frequently-bought-products-together).
## Product page
* **Enable:** turn on/off the cross-sell products on the product page.
* **Pick a rule:** specify to load the way to load the cross-sell products. There are 2 values: **automation** or **manual**.
* The site will load the cross-sell products in [a manual way](/theme-settings/cross-sell-products#b-manual) first. If there are not found products, the site will load the cross-sell products in [the automation way](/theme-settings/cross-sell-products#a-automation).
* The site only loads the cross-sell products in [a manual way](/theme-settings/cross-sell-products#b-manual). If there are not found products, the cross-sell block will be hidden.
* **Display as:** choose the way to show the cross-sell products block. There are two values for this setting: **Calculating widget**, and **Carousel slider**.
Show the cross-sell products as a calculating widget
Show the cross-sell products as a carousel slider
* **Limit:** adjust the number of products that will be shown.
## Cart page
On the cart page, the cross-sell products are always shown as a carousel slider.
* **Limit:** adjust the number of products that will be shown.
## Product carousel item settings
Only work if the cross-sell products are shown as a carousel slider on the product page or cart page. Please refer to [this guide](/tips#product-item-settings) about these settings.
# Recently viewed products
Configure the recently view products on the product and collection page
## Open Recently viewed products settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Recently viewed products.**
## **General settings**
* **Enable:** turn on/off this feature.
## Visible on the product page
* **Enable:** turn on/off this block on the product page.
* **Limit:** adjust the maximum number of products that will be shown.
* **Product carousel item settings:** please refer to [the product item settings guide](/tips#product-item-settings) for more details.
#### VISIBLE ON THE COLLECTION PAGE
* **Enable:** turn on/off this block on the collection page.
* **Limit:** adjust the maximum number of products that will be shown.
# Progressive web app
Helps your site work well in the poor network connection or offline, and as a native app on customer’s devices. This increases speed, SEO, and sales.
## Open Progressive web app settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click the **Progressive web app.**
## Settings
* **Enable:** turn on/off this feature.
* **Name and/or short name:** you must provide at least the name or short name property. If both are provided, the short name is used on the user's home screen, launcher, or other places where space may be limited. The name is used when the app is installed.
* **Icon:** when a user installs your PWA, you can define a set of icons for the browser to use on the home screen, app launcher, task switcher, splash screen, and so on. Your icon size must be at least 512x512 pixels(recommend PNG image).
* **Display:** you can customize what browser UI is shown when your app is launched. For example, you can hide the address bar and browser chrome. Games can even be made to launch a full screen.
| **Property** | **Use** |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fullscreen` | Opens the web application without any browser UI and takes up the entirety of the available display area. |
| `standalone` | Opens the web app to look and feel like a standalone native app. The app runs in its own window, separate from the browser, and hides standard browser UI elements like the URL bar. |
| `minimal-ui` | This mode is similar to `standalone`, but provides the user a minimal set of UI elements for controlling navigation (such as back and reload). |
| `browser` | A standard browser experience. |
* **Background color:** pick a color that is used on the splash screen when the application is first launched on mobile.
* **Theme color:** sets the color of the toolbar, and may be reflected in the app's preview in task switchers. This setting will be also used for the meta-theme color specified in the document head even you turn off the PWA feature.
{% hint style="info" %}
Please note: You should publish your theme to use this feature.
{% endhint %}
# Sales notification
Let's your visitors know they aren't the only ones shopping into your Shopify store. You set up the frequency you want it to show up and choose a collection you want to display the products belong it.
## Open Sales notification settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click the **Sales notification.**
## **Settings**
* **Active:** turn on/off this feature.
* **Pick a product collection:** choose a collection to show the products.
* **Limit:** the number of products will be shown.
* **Image size:** the size to scale product image. Please refer to [this guide](/tips#image-size-syntax) about the image size syntax.
* **Minute from number** and **Minute to number**: in sales notification, you will see a text like this "**19 minutes ago**". Number 19 is generated in a range \[**Minute from number**, **Minute to number**].
* **The time to display(seconds):** the time sales notifications block is displaying a product before it is hidden to show another product.
* **The waiting time to display(seconds)**: the time sales notifications block is being hidden before it's been visible to display the next product.
* **Hide on mobile:** hide sales notifications on mobile.
# Search suggestion
Helps customers search on your site faster without going to the search page.
## Open Search suggestion settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Search suggestion.**
## General settings
* **Enable:** turn on/off this feature.
* **Limit:** adjust the maximum number of items per type (product, article, static page) per page.
## Titles
* **Popup:** add your text to display it as a small title above the search form.
* **Products block:** add your text to display it as the product tab's title.
* **Article block:** add your text to display it as the article tab's title.
* **Pages block:** add your text to display it as the static page tab's title.
## Product item settings
Please refer to [this guide](/tips#product-item-settings) for more details.
# Newsletter
Configure the popup and platform you want to use the run the newsletter feature.
## Open Newsletter settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click **Newsletter.**
## General settings
* Platform: Specify the platform to run the newsletter feature. There are values: **Shopify**, **Klaviyo**, **Mailchimp**.
## Terms and conditions
Show a checkbox with the link of your terms and conditions page. Customers need to tick to agree with your terms & conditions before subscribing to their email. This feature only works with the platform is **Shopify**.
* Enable: turn on/off this feature.
* Terms and conditions page: specify a static page to display your terms and conditions.
* Error message: the message that is shown when customers subscribe to their email without ticking the checkbox.
## Klaviyo settings
Only work when you choose the platform is "**Klaviyo**". Add your Klaviyo API key and embed code. You can refer to [**https://help.klaviyo.com/hc/en-us/articles/360002035871-Install-Klaviyo-Signup-Forms**](https://help.klaviyo.com/hc/en-us/articles/360002035871-Install-Klaviyo-Signup-Forms) to get the API key and embed code.
## MailChimp settings
Only work when you choose the platform is "**MailChimp**". Add your MailChimp embed code. You can refer to [**https://mailchimp.com/help/add-a-signup-form-to-your-website**](https://mailchimp.com/help/add-a-signup-form-to-your-website/) to get the embed code.
## Popup
* **Enable:** turn on/off the popup.
* **Short text:** add your text to the popup.
* **Background color:** pick a color for the popup's background.
* **Image:** pick or upload your image to display it in the popup. The image will not be shown on the mobile screen to help customers focus on the text and the newsletter form.
# Promotion bar
## Open Promotion bar settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click the **Promotion in the header**.
### A. GENERAL SETTINGS:
* **Enable:** check or uncheck to show or hide the **Promotion bar.**
* **Text color:** pick a color you want to display for the text of the Promotion bar.
* **Use background color:** check or uncheck to show background color.
* **Background color:** pick a color you want to display for the background.
{% hint style="info" %}
Note: You should check to show the use of background color above before you pick the color for the background.
{% endhint %}
* **Background image:** pick or upload your image to display it as a background image.
* **Wide display:** check or uncheck to show Promotion bar in the wide box.
### B. INFORMATION:
* **Content:** add the contents you want to show in the Promotion bar.
* **The link for the content:** add the URL of the link you want to show in the Promotion bar.
* **Open link in new tab:** check or uncheck to open link in the new tab.
### C. BUTTON**:**
* **Enable:** check or uncheck to show or hide Button.
* **Text:** add the text you want to show in the Button.
* **The link for the button:** add the URL of the link you want to show in the Button.
* **Open link in new tab:** check or uncheck to open link in the new tab.
# Cookie consent
Cookie Consent is a quick, easy way to add an interactive cookie permissions pop-up to your site and handle EU Cookies Directive (ePrivacy) and GDPR legislation.
## Open Cookie consent settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click the **Cookie consent.**
## Settings
* Enable: turn on/off this feature.
* Your notice text: add your text to display as the cookie consent content.
* Background color: pick a color to set it as the background.
* Text color: pick a color for the text.
# For developer
If you wanna custom by CSS, please follow here
## Open For developer settings.
1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. In the left-hand toolbar, click **Theme settings.**
4. Click the **For developer.**
5. Check/Uncheck to Enable/disable load your custom CSS.
{% hint style="info" %}
If you have knowledge about css/html, you can make any change by yourself in “Assets/custom-css.scss.liquid” file. By default, the theme does not load "Assets/custom-css.liquid", you have to go to Customize Page > Theme Settings, scroll down to "Developer" and click it, tick "Load your custom css" to the theme load "Assets/custom-css.scss.liquid".
{% endhint %}
{% hint style="warning" %}
Please take care when you make any changes in the CSS and JS files. Because it can make your site broken or conflict with some function, make it can not work right. So, you should backup your site first. One more, You should modify code in “Assets/custom-css.scss.liquid” file, we don’t ensure if you change in the other files. Please keep in touch with us if you have any discussions via our support center [**https://boostheme.zendesk.com/hc/en-us/requests/new**](https://boostheme.zendesk.com/hc/en-us/requests/new).
{% endhint %}
{% hint style="info" %}
#### What Included
* Responding to questions or problems regarding the item and its features
* Fixing bugs and reported issues
* Providing updates to ensure compatibility with new software versions
{% endhint %}
{% hint style="warning" %}
#### Do NOT included
* Item customization
* Setting up your store
* The theme is customized without our permission
* Support for third party customs/software/apps
* Teaching HTML & CSS etc.
{% endhint %}
# Tips
## Image size syntax
Syntax: {width}x{height}. If {height} is empty, the height will be scale base on the width. Ex: 100x, 150x100, ... Use **master** to display the original image.
{% hint style="info" %}
syntax only helps Shopify know the size you want to resize the image. It does not make to display the image larger. That depends on the area that contains the image. For a responsive screen, the width of the image must be less than its wrap area.
{% endhint %}
## Add a label, icon to a text, link list ( Shopify Navigation ).
This guide shows you how to add a label, icon syntax to the link list or item title.
Label syntax: **{{label \[label\_name]}}**. Ex: {{label new}}. Note: space is not allowed before the label key and after the label name. There is only one space between the label key and the name. Below are some wrong syntaxes:
Use the syntax **{{icon \[icon\_class*****\_*****name]}}** to add an icon to a text. Ex: {{icon lnr-handbag}}. You can refer to [this page](https://boostheme.com/beloria/icons) to view all icons that are provided in the theme.
## Product item settings
You will see these settings in sections that show the product list in a grid layout or slider. Some sections and pages such as [**Powerful product block**](/dynamic-sections/collection-product/powerful-product-block), [**Powerful product block 2**](/dynamic-sections/collection-product/powerful-product-block-2), [**Banner Creator pro**](/dynamic-sections/banner-and-image/banner-creator-pro), [**collection page**](/static-sections/collection-pages/old-collection-pages), [**search results page**](/static-sections/search-result-page), [**upsell block**](/theme-settings/upsell-products),...
* **Choose item size:** change the size of an item. That also helps you change the number of items per row. In slider format, this configuration will help you change the number of items is shown in a slide. Below is a summary of all values:
| Item size | The number of items per rows | |
| :--------: | :--------------------------: | :----: |
| | Desktop | Mobile |
| Small | 5 | 2 |
| Medium | 4 | 2 |
| Large | 3 | 2 |
| Very large | 2 | 1 |
* **Show the main thumbnail by:** specify the thumbnail of the product that will be displayed. There are 2 values for this setting.
* **Featured product image:** display the image that is set as the feature.
* **First available variant image:** display the image of the first available variant.
* **Show label:** show/hide the product labels. You can configure the product labels in Theme Settings > Product labels.
* **Show add to cart button:** show/hide the add to cart button.
* **Show the quick shop button:** show/hide the quick shop button. This button will help customers view your product quickly without going to the product page. When customers click this button, a quick view popup will be displayed to help customers can view the product and buy it.
* **Show the compare button:** show/hide the compare button. This button helps customers add the products to the comparison list so that they can compare the attributes of products such as price, image, description,... and buy the products they like.
* **Show the wishlist button:** show/hide the wishlist button. This button helps customers add products to their wishlist.
* **Show review stars:** display the product reviews base on your review app you are using. You can configure the review app in **Theme Settings > Product Settings > Review app**.
* **Enable product options:** show the product options so that customers can choose the option and purchase the product without going to the product page.
{% hint style="info" %}
The option has the name is "color" or "colour" will be shown as the "**Color Swatches**" format, please refer to [this guide](/theme-settings/product-settings) to configure the Color swatches format. Other options will be shown as small buttons. You can also display options as a drop-down format in **Theme Settings > Product Settings > "Show option as a drop-down"**, just add your option name in this field.
{% endhint %}
* **Show countdown timer:** show/hide the countdown timer. You can configure countdown time for all products or different products.
* **Show product vendor:** show/hide product vendor as a brand name.
* **Product name's size:** if your product name is too long, you can make it shorter with this setting. Just drag to the number of words you want to show, the product name will be displayed shorter. And leave zero if you want to display the full product name.
## Local pickup feature
We integrated the local pickup feature in our themes. You do not need to do anything, you only need to manage preferences for a local pickup location.
1. From your Shopify admin, go to **Settings** > [**Shipping and delivery**](https://www.shopify.com/admin/settings/shipping).
2. Under **Local pickup**, click **Manage** for the location that you want to edit.
3. Update the settings.
4. Click **Save**.
## How to search in our documentation
You can search for everything in our documentation via the below tip:
1. Click the Search icon on the left sidebar
2\. Enter the words which you want to find in the search box.
3\. A list of keywords that you search will be shown below the search box. Just click to choose one of them which you are searching.
Hope you are happy with our theme. Please feel free to let us know if you have any questions or discussions via our support center - . Our developer will be glad to answer your questions.
# Manage blocks in a section
## 1. Open the list of blocks
From the Theme Editor, click the arrow before the section name to open the list of blocks.
From this list, click a block you want to edit its settings.
## 2. Edit/Remove a block
From the list of blocks, click on a block you want to remove. You will see the Remove button on the bottom. Just click this button to remove the block.
## 3. Add a new block
Click the **Add block** button below the list of blocks to add new a block.
{% hint style="info" %}
In some sections, this button may have a different name like *add tab item*, *add logo*,...
{% endhint %}
## 4. Rearrange a block
Move the mouse the to block you want to rearrange, use the left mouse to press and hold the last icon, then move the block to a new position you want.
## 5. Show/hide a block
Move the mouse the to block you want to show/hide, click the eye icon to show/hide the block.
# Cross-sell ( recommendation ) rules
## **How are the cross-sell products loaded?**
### **A. Automation rule**
The algorithm that identifies cross-sell products is based on data about products that were purchased together and products with similar descriptions. It uses this data to provide a mix of those related products as recommendations for a given product.
In cases where purchase or product description data aren't available for a given product, products from a related collection are shown. The algorithm uses the collection in the URL from which the request to the API endpoint originated, and pulls other products from that collection. If the product doesn't have a collection URL, then the recommendation algorithm finds collections that include the product and pulls other products from those instead (excluding collections with handles “all” and “frontpage”).
The recommendation algorithm associates up to ten products per individual product, in order of relevance. For example, the first cross-sell product is more relevant than the tenth cross-sells product. Because of this, it's a good idea to show no more than four products per product page to promote only the most relevant recommendations.
**Requirements and limitations**
* The types of product recommendations that appear are determined by your online store and your Shopify plan:
* Purchase history and product descriptions: Plus plan and having <7000 products published in your Online Store, with an English storefront
* Purchase history only: Plus plan and having <7000 products published in your Online Store, with a non-English storefront
* Purchase history only: Non-Plus plan and having <7000 products published in your Online Store
* Collections: Any plan with >7000 products published in your Online Store
* The recommendation algorithm doesn't use orders that have been imported from another store or e**-**commerce platform to generate product recommendations.
* Products that are out of stock, set to a price of 0, or gift cards aren't included in recommendations.
### B. **Manual rule**
You can use the Boostheme Toolkit app to specify the products as recommendations for a given product. Please view more details [**here**](/shopify-apps/boostheme-toolkit-app#5-frequently-bought-products-together).
# Change log
{% hint style="info" %}
To view the changed files between the current version and the previous version:
1. Step 1: Extract your downloaded package from ThemeForest.
2. Step 2: go to [**https://diffy.org**](https://diffy.org/). Click "Upload Diff" then browse to the folder you extracted in Step 1, open the "Changelog" folder, then upload the diff file of the theme style you want to view the changed files. Ex: beloria-1.diff.
3. Step 3: click "Diff me" and you will see the changed files.
There are some files that have not been listed in the .diff files and you should not modify these files. These files contain CSS and JS codes that have been compressed for optimizing the speed. I will list them below:
* assets/bt-application.min.js
* assets/bt-collection.min.js
* assets/bt-search.min.js
* assets/bt-cart-page.min.js
* assets/bt-customers.min.js
* assets/bt-fre-bought.min.js
* assets/lazysizes.min.js
* assets/bt-shipping-cart.min.js
* assets/bt-vendors.scss.liquid
* assets/styles-rtl-full.scss.liquid
* assets/product-single-full.scss.liquid
* The files with the syntax of name: assets/bt-section-\*.min.js
* assets/bt-product-global.min.js
* assets/bt-newsletter-popup.min.js
* assets/bt-cookie-consent.min.js
* assets/bt-sales-notification.min.js
* assets/bootstrap-rtl.min.css
* assets/bootstrap.min.css
* assets/bt-icons.css
* assets/bt-section-collection-filter.css
* assets/cloudzoom.css
* assets/google-maps.css
* assets/newsletter-popup.css
* assets/product-single.css
* assets/quick-view\.css
* assets/recommended-products.css
* assets/shipping-calculator.css
* assets/styles-collection-page.css
* assets/styles-remain-pages.css
* assets/styles-rtl.css
* assets/styles.css
* assets/lightgallery.min.css
* assets/vendor.min.js
* assets/challenge.css
* The files with the syntax of name: snippets/preload-\*.css.liquid ( in version before 3.1, it is snippets/preload-\*.scss.liquid ).
{% endhint %}
## Version tf-4.2 Sep 13, 2021
### ADDED:
* Improve image and tooltip effects.
* Improve performance on the collection and product page.
### FIXED:
* Fix RTL issues on the collection and product page.
## Version tf-4.1 - Aug 26, 2021
### FIXED:
* Filter on collection page: fix an issue when showing categories by using a link list.
* Fix the password page.
## Version tf-4.0 - Aug 12, 2021
### ADDED:
* Compatible with Shopify 2.0, administrators can add sections everywhere.
* Drag & drop product information such as title, price, options, tabs, reviews,... on the product page.
* Show filters from Online store > Navigation > Filters on the collection page.
* Allow administrator configures the quantity threshold to show the progress bar on the product page.
## Version tf-3.5 - July 01, 2021
**ADDED:**
* Integrate Judge.me review app.
* Add a fixed close button in the collection filter on the mobile view.
**CHANGED:**
* Optimize performance for all pages.
## Version tf-3.4 - Jun 01, 2021
### ADDED
* Show the Shop Pay Installments banner.
* Show the "View in your space" button on the 3d model product page on the mobile devices.
* Add the Hebrew language to available locales.
### CHANGED
* Display all heading tags in the secondary font.
* Beautify all CSS files.
### FIXED
* Font size configuration not working in the accordion tabs on the product page.
## Version tf-3.3 - Apr 26, 2021
### ADDED:
* 8 new home styles( 3 one product styles, 5 lingeries styles ).
* Shopify font picker to change the font easily.
### CHANGED:
* Optimize performance for the homepage, collection page, and product page.
## Version tf-3.2 - Mar 28, 2021
### ADDED:
* Wishlist, compare button in the product grid item on mobile.
### CHANGED:
* Optimize the js compression to load faster.
* Remove PWA because Shopify has no longer supports the proxy to run this feature.
### FIXED:
* Collection filter auto: separate multiple values by a comma in meta fields with string type
* Social sharing with the image that has been uploaded in Online store > Preferences
* Tooltip on the cart page when removing an item
* Duplicate description in quick view when admin adds the "\[description]" variable in the short description from Theme Editor.
* Klaviyo integration
* Missing the remove wishlist button on the mobile.
* Align collection items in the collection list section.
* Improve facebook pixel tracking.
## Version tf-3.1 - Feb 25, 2021
### Added
* Add the preload LCP image on the home page, collection page, and product page to improve the Google Pagespeed Insights.
* Add animation for the header promotion.
* Integrated the Growave app. Click here to view the demo. [And click here to install the Growave app with a 30-day free trial. ](https://bit.ly/2ZO11AB)
### Changed
* Improve the wishlist tooltip button.
* Removed PWA feature - Details: From Mar 1st, 2021 Shopify has sent us (and others who use the Service Worker framework) a note indicating that they will not support the Service Worker Header in the App Proxy. We (along with numerous other application developers in the community) are reaching out to the team there to see what the plan/status is. Recommend to turn off this feature in your theme to avoid the 404 issue. Please refer to [this article](/theme-settings/progressive-web-app) to do that.
### Fixed
* Fix loading products and snippets in ajax because Shopify has ignored some params in AJAX requests.
* Fix loading products in ajax.
## Version tf-3.0 - Jan 27, 2021
### Added
* Add the bottom mobile toolbar.
### Changed
* Improve loading product tabs section.
* Display the review form below product tabs on the product page.
* Bring the progressive web app back because Shopify allows using the service worker.
## Version tf-2.2 - Jan 23, 2021
### Added
* Customization fields on the product page.
* Powerful mobile megamenu section.
### Changed
* Cart icons in the add to cart button and header cart.
* Remove the PWA feature because Shopify will not support the Service Worker Header in the App Proxy.
* The register and cancel buttons in the login and register form.
### Fixed
* The links of load more button and infinity loading in the powerful product tabs section.
* Displaying the "mpn" attribute of a variant in product snippets.
* Conflict the "sidebar cart" HTML class with other apps.
* Slider arrows in RTL, slider arrows of product images on the product page, and the product columns section.
* Collection auto filter with tags.
* Update to the corresponding product variant after change the main image.
* Challenge pages.
## Version tf-2.1 - Dec 21, 2020
### Changed
* Improve the URLs history when clicking filter or pagination on the collection page.
* Collection page: Not collapse filter items that customers are choosing their values
### Fixed
* The current filter item link when enabling the tag filter instead of an auto filter.
* Viewing product images gallery in the product layout 10. Use the LightGallery plugin to view product images on the desktop screen.
## Version tf-2.0 - Nov 14, 2020
### Added
* FAQ section and template.
* The page title configuration of the list-collections page.
### Changed
* Deprecating using Sass for Shopify Themes to stay up to date with the latest changes in Shopify .
* the style of a collection grid item.
### Fixed
* Product JSON snippet.
* Breadcrumbs metadata.
## Version tf-1.0 - Nov 04, 2020: Release on ThemeForest
### Added
* Collection filter auto on the collection and search result page. Create your filter sidebar without adding product tags for a hundred products.
* Local store pickup feature.
### Changed
* Defer running the brand slider to improve performance on the home page.
* Improve Product JSON snippet data.
### Fixed
* Fix the param to load dynamic snippets to avoid affecting the Shopify top online store searches report.
## Version 1.1.0 - Aug 06, 2020
### Added
* The Progressive Web App features. Add the service worker to improve the loading speed, support SEO better, offline experience, and add the home screen button.
* Display product unit prices.
* Show the cart terms notification message when customers click the checkout button without ticking the terms checkbox.
* 10 new home styles.
* The new effect for the ADD TO CART button on the product page.
### Fixed
* The megamenu dropdown sometimes has not appeared.
## Version 1.0.0 - May 10, 2020: Release on boostheme.com
###
# Upgrade to a new version
{% hint style="warning" %}
This guide will help you update your theme from version tf-4.0 or newer to the latest version. If you are using a version older than tf-4.0, please refer to [this guide](/upgrade-to-a-new-version/old-upgrade-to-a-new-version) for more details.
{% endhint %}
{% hint style="warning" %}
Please note **that upgrade can not bring all advance customization works** (modified our theme files or app integration) which are done by 3rd apps, our team, or your team. To avoid any risk, **you should create a backup of the current theme first**.
{% endhint %}
When our item has a new version, you will receive an updated email from Envato and visit [https://themeforest.net/download](https://themeforest.net/item/vodoma-fastest-multipurpose-shopify-theme/25971898)
You can download our theme again and extract it to see the theme upload package (like when you used the previous version). Please follow some steps below to understand how to upgrade our items from the old version to the new version. it takes only 1 minute to update.
If you have customized the old version (such as hiring a developer to write new features or customizing our theme) so that the upgraded version cannot carry these codes, you will need to migrate all the custom code by hand.
## **1. Step 1: Download the latest package**
If you buy our themes from ThemeForest, log in to ThemeForest by the account you have used to buy our theme. Then download the latest theme package. If you don't know how to do that, please refer to this page .
## **2. Step 2: Upload a new theme file from your computer**
Extract the package you download in step 1, then browse to the "**Theme files**" folder. Find and upload the theme file corresponding with the current theme on your site. You can refer to [this guide](broken://pages/-MFdqdim18bnVDq-_dQu#upload-a-theme-file) to upload a theme in Shopify.
## 3. **Step 3: Copy the settings data**
Click the "**Actions**" button of the old theme, chose "**Edit code**".
Find and open the "**settings\_data.json**" file in the "**config**" folder.
Then copy all the content of this file. Then open the "**settings\_data.json**" in the new theme, and replace all content in this file by the content you copied.
## 4. **Step 4: Copy templates data**
Back to **the old theme,** browse and open the **Templates** folder. You will see a list of JSON files. A JSON file contains data of a template. Just copy the content of JSON files in the old theme and paste them to the same JSON files in the **Templates** folder of the new theme.
You can use the following JSON templates in your theme:
* [404](https://shopify.dev/themes/architecture/templates/404)
* [article](https://shopify.dev/themes/architecture/templates/article)
* [blog](https://shopify.dev/themes/architecture/templates/blog)
* [cart](https://shopify.dev/themes/architecture/templates/cart)
* [collection](https://shopify.dev/themes/architecture/templates/collection)
* [index](https://shopify.dev/themes/architecture/templates/index-template)
* [list-collections](https://shopify.dev/themes/architecture/templates/list-collections)
* [page](https://shopify.dev/themes/architecture/templates/page)
* [password](https://shopify.dev/themes/architecture/templates/password)
* [product](https://shopify.dev/themes/architecture/templates/product)
* [search](https://shopify.dev/themes/architecture/templates/search)
## 5. Step 5: Copy translation
Back to Online Store, Click the "**Actions**" button of the old theme, chose "**Edit code**".
Find and open the **Locales** folder.
Open and copy the content of the file corresponding with the language you want to move to the new theme. Ex: en.default.json for English, fr.json for French,... Then paste the content you copied to the same file in the new file.
{% hint style="info" %}
Please note: If there are custom tasks that I helped you with on the old version, you have to copy all contents from the Assets > custom-css.scss.liquid to the new version.
{% endhint %}
##
# From versions older than tf-4.0
This guide shows you how to copy data of the homepage from a version older than tf-4.0 to the latest version.
{% hint style="warning" %}
This guide will help you update your theme from a version older than tf-4.0 to the latest version. If you are using version tf-4.0 or newer, please refer to [this guide](/upgrade-to-a-new-version) for more details.
{% endhint %}
{% hint style="warning" %}
Please note **that upgrade can not bring all advance customization works** (modified our theme files or app integration) which are done by 3rd apps, our team, or your team. To avoid any risk, **you should create a backup of the current theme first**.
{% endhint %}
When our item has a new version, you will receive an updated email from Envato and visit [https://themeforest.net/download](https://themeforest.net/item/vodoma-fastest-multipurpose-shopify-theme/25971898)
You can download our theme again and extract it to see the theme upload package (like when you used the previous version). Please follow some steps below to understand how to upgrade our items from the old version to the new version. it takes only 1 minute to update.
If you have customized the old version (such as hiring a developer to write new features or customizing our theme) so that the upgraded version cannot carry these codes, you will need to migrate all the custom code by hand.
## **1. Step 1: Download the latest package**
If you buy our themes from ThemeForest, log in to ThemeForest by the account you have used to buy our theme. Then download the latest theme package. If you don't know how to do that, please refer to this page .
## **2. Step 2: Upload a new theme file from your computer**
Extract the package you download in step 1, then browse to the "**Theme files**" folder. Find and upload the theme file corresponding with the current theme on your site. You can refer to [this guide](/installation#upload-a-theme-file) to upload a theme in Shopify.
## 3. **Step 3: Copy the settings from the old theme**
Click the "**Actions**" button of the old theme, chose "**Edit code**".
Find and open the "**settings\_data.json**" file in the "**config**" folder.
Then copy all the content of this file.
## 4. **Step 4: Paste the settings into the new theme**
Back to **Online Store**, click the "**Actions**" button of the new theme which has been uploaded in step 2. Then click "**Edit code**". Find and open "**settings\_data.json**" in the "**config**" folder. Replace the content in this file with the content you copied in step 3.
Then find the **sections** data, find the sections data and remove all sections that have key is not number ( exclude the **footer** section ). Ex: collection-template, navigation, product-template,...
## 5. Copy data for the homepage
At the settings\_data.json file, cut all remaining sections( exclude footer ). Open templates/index.json in the new theme. Replace all sample data in the sections with your data.
Back to **settings\_data.json** in the new theme, cut all data in "**content\_for*****\_*****index**", back to templates/index.json in the new theme, replace all data in the "**order**" part by your data.
Then click the **Save** button.