Foodmart: The Ultimate Multipurpose Shopify Theme

Foodmart is a premium, all-in-one responsive Shopify theme designed to elevate your online store. Powerful, intuitive, and packed with limitless features, it sets a new standard for eCommerce—no extra customization required.

• 🚀 Launch in Under 2 Minutes — Get started instantly with one-click demo import.
• 🎨 Stunning Design — Professionally crafted visuals that impress and convert.
• 🔧 Extensive Built-In Functionality — Everything you need is already included.
• 🛍️ Perfect for Any Business — Adapts seamlessly to any industry or niche.
• 📱 Fully Responsive & User-Friendly — Optimized for all devices and easy to use.
• ⚙️ Easy for Customization — Build and manage your store effortlessly.

Whether you're launching a new store or refreshing an existing one, Foodmart delivers unmatched performance, style, and flexibility—helping you create an exceptional shopping experience that drives results.

After extract the zip file which you have just download from themeforest, you can get Main-files-ss-foodmart-vx.x.x. The package you download from Envato contains:

1. Data folder
   • Demo-foodmart-images.zip
   • Products_export.zip
   • Page-content.zip
2. Guide folder
3. Theme >> Vx.x.x folder include:
   • ss-Foodmart-home1.zip

To install our theme, please follow the below steps:

Step 1: Preparing the Theme package

1. Download the package from themeforest.net (the package is in zip format).
2. Unzip the package you've just downloaded you will get Main-files-ss-foodmart-vx.x.x.
3. Go to the Main-files-ss-foodmart-vx.x.x => Theme => vx.x.x folder.
4. Select ss-foodmart-homex.zip, then you just need to upload ss-foodmart-homex.zip file to your Shopify store.

Step 2: Upload Theme

1. Please log in to your Shopify store, click Online Store.
2. At the Theme Library, please click on the add theme button and choose upload zip file option
3. The Upload Theme dialog displays. Click Add File or drop file to upload to select the ss-foodmart-homex.zip file you want to upload.
4. Click on the Upload file button.
5. Wait until the uploading process finishes. Then click Publish button to active the source to be live.

Step 3: Import Demo Product data

To import our product demo data to your site, simply follow the steps below:

1. Go to the Main-files-ss-foodmart-vx.x.x => Data folder => extract product_export.zip file.
2. From your Shopify admin, go to Products.
3. Click Import.
4. Click Add file, and then select the product_export.CSV file which you can find in the Main-files-ss-foodmart-vx.x.x/Data folder to import.
   • Optional: If you want to publish new products only to your online store instead of to all of your sales channels, then check Publish new products to all sales channels.
   • Optional: Uncheck for the Publish new products to all sales channels option to replace existing products for all columns included in the CSV.
5. Click Upload and Reviews button.
6. Review the details about the import dialog displays, and then click Import products button.

After your CSV file is uploaded, you receive a confirmation email from Shopify at the email account used to set up your Shopify store. Read some solutions to common problems.

Step 4: Upload Demo Media

In the Data folder, you will find all the demo images of our theme by extract Demo-foodmart-images.zip file. If you'd like to upload them to your store, simply follow these instruction:

1. Please log in to your Shopify store, click on the Content menu
2. Choose Files
3. Click on Upload files button
4. The Upload dialog displays. You can choose one image or multi-images and click on the Upload button
5. Wait until the uploading process finishes.

Step 5: Insert Demo's content for Pages

In our theme, we will provide content of some populated pages such as Delivery Return, Delivery time, Photo gallery, Privacy Policy, Terms and Conditions, Support 247 and Track Order Pages. And If you'd like to upload them to your store, simply follow these instruction:

1. Go to the Main-files-ss-foodmart-vx.x.x => Data => Page-content folder and open each txt file in this folder.
2. Please log in to your Shopify store, click Online Store.
3. Go to the Pages and click on the Add Page button.
4. Add the Name of file to the Title of page.
5. Click on the Show HTML button.
6. Copy the content of txt file and paste it to the Content field
7. Click on the Save button

To update our theme to the latest version, you can follow the below instruction:

Step 01: Rename current live theme to another name.

1. Go to your account on Themeforest to download the latest theme source.
2. Upload the latest theme source into your store.

There are some files that need to be copied to maintain your modifications in the latest theme source. They include:

Step 02: Update for Homepage

1. Go to the Old theme source -> click on the "..." button => Choose Edit Code
2. At the search textbox, search the index => Open this file index.json and COPY ALL codes.
3. Go to the New theme source -> click on the "..." button => Choose Edit Code
4. At the search textbox, search the index => Open this file index.json and delete and PASTE codes you just copied into this file

Step 03: Update for Theme Configure

1. Go to the Old theme source -> click on the "..." button => Choose Edit Code
2. At the search textbox, search the setting_data => Open this file settings_data.json and COPY ALL codes.
3. Go to the New theme source -> click on the "..." button => Choose Edit Code
4. At the search textbox, search the setting_data => Open this file settings_data.json and delete and PASTE codes you just copied into this file

Step 04: Update for Pages

Repeat the procedure: Copy codes in file from old theme source, go to the corresponding file in new theme source, delete and PASTE codes you just copied for other pages:

1. Collection List Page => list-collections.json
2. Collection Page => collection.json
3. Product Page => product.json
4. Blog Page => blog.json
5. Blog Detail Page => article.json
6. For Inner pages such as: About us, Contact us... => Search "page.template" to see the corresponding files

For any other pages you have created yourself, they are not included in the newer theme sources.To keep the same layout + settings of pages, please go to Edit Code -> Templates -> Search .json to see all files of page template. Copy codes in file from the old theme source, go to the corresponding file in new theme source, delete and PASTE codes you just copied.

Step 05: Update for Language files:

1. Go to the Old theme source -> click on the "..." button => Choose Edit Code
2. Go to the Locales folder
3. Open the language file which are you using. For example your language is english, you will open the en.default.json file
4. Copy all codes in the language file from the old theme source and go to the corresponding language file in new theme source, delete and PASTE codes you just copied.

Many themes include login links by default. And to enable it, you can follow the below steps:

1. From your Shopify admin, go to Settings then click on the Customer accounts menu.
2. Turn on the Show login links toggle button.

After doing these steps, the login link will be show in the checkout page. For other pages, Our theme already support Register/Login popup in the header.

To configure shipping rates in your Shopify store, follow these steps:

1. Go to your Shopify admin and click on Settings => Shipping and delivery.
2. In the Shipping section, click the shipping profile that you want to add shipping rates to.
3. Next to the zone that you want to add a rate to, click Add rate
4. Select a transit time, or select a custom flat rate to name the rate
5. Optional: If a custom flat rate is selected, enter a delivery description such as Tracked shipping or Ships next day.
6. Optional: Add weight-based or price-based conditions.
7. Review the checkout preview to ensure that your shipping rate is displayed as expected.
8. Click Done.
9. Enter the shipping rate.
10. Click Done and then click Save.

You can also set up price-based or weight-based conditions for your shipping rates. For more detailed information, you can refer to the Shopify Help Center.

I. Add new language

To add a new language to your store, please follow the below guide:

1. Go to your Shopify admin and click on Settings
2. Click on the Language menu.
3. Click on the Add new language button.
4. The add new language dialog displays. Please click on the dropdown and choose the new language as you want.
5. Click on the Add button.
6. The Add new language dialog disappear and you can see the new language shows in the Unpublished languages section.

II. Translate

After adding a new language to your site, you also need to translate our theme into that language. You can do this using the Shopify Translate & Adapt app with the below steps:

1. Install the Shopify Translate & Adapt app to your store
2. Click on the Settings => Language
3. Click on the Translate link beside your new language and choose Translate & Adapt
4. The add new language dialog displays. Please click on the dropdown and choose the new language as you want.
5. The Localized content window displays.

There are two options for translation: Auto Translate with Google Translate or Manual Translation.

• To use Auto Translate, click the "Auto Translate" button and then click on the Translate dialog button.
  
• To translate manually, click on each content section and enter your translation.

III. Publish a laguage

To publish a unpushed language, please:

1. From your Shopify admin, go to Settings > Languages.
2. In the Unpublished languages, click "..." button beside the language and click on the Publish option

IV. Change the default language of your online store

You can change the default language of your store. Your default store language is used in your store's checkout and theme.

Steps:

1. From your Shopify admin, go to Settings > Languages.
2. In the Published languages section, click the … icon next to your current default language.
3. Click Change default.
4. In the Change default language dialog, select a language from the menu.
5. Click Save.

I. How to edit the HTML for Currency formatting?

1. From your Shopify admin, click Settings => General => Store default => Currency display.
2. Click on the "..." button and click on the Change currency formatting option.
   
3. Change the HTML with currency with the code:

   <span class=money>${{amount}}</span>

4. Change the Email with currency with the code:

   ${{amount}} USD

   Caution:
   

   The currency code in the Email with currency parameter need to be same with the currency default of your store. To set the default currency for your store, please go to the Theme settings => Currency => Default Currency.

5. Click on the Save button.

II. How to set Multiple currencies?

Our Foodmart theme allows you to show multiple currencies on your site. Hovever, please note that this option will not have automatic currency feature by location. To settings, please follow the below guide:

1. From your Shopify admin, go to Online Store -> Themes.
2. Find the theme that you want to edit, and then click Customize.
3. Click Theme settings -> Currencies.
4. Then you can set the Currency's codes which you want in the Supported currencies parameter and other options here. You can see the detailed guide of this feature here

III. How to set Auto currencies?

To sell in multiple currencies, you need to use Shopify Payments in your online store and activate international sales tools. With international sales tools, you can offer a localized experience to your international customers by displaying prices in their local currency. You can also add them by using a third-party geolocation app from the Shopify App Store to include a country selector on your storefront.

You can offer your customers a buy X get Y discount, or an amount off discount on products, collections, or variants in your store. When you create a new discount code, it displays in the Discounts section of your Shopify admin. To distribute this discount code, you can send the code to your customers by email, or display it on your online store. Your customers need to enter the code during checkout to receive the discount. Shopify support many type of coupons including:

1. Amount off products
2. Buy X get Y
3. Amount off order
4. Free shipping

To enable payment methob on your store, please follow the below guide:

1. From your shop admin, go to the Settings / Payments
2. Choose a payment gateway to accept payments for orders. The checkout page is working.

You can create two types of collections, a smart or manual collection:

1. Manual collection: Add products to this collection one by one. Learn more about manual collections.
2. Smart collection: Existing and future products that match the conditions you set will automatically be added to this collection.

To create a collection, please follow the below steps:

1. From your Shopify admin, go to Products > Collection
2. Click on the Create collection
3. Enter the Collection information into the following fields:
   • Title - Enter a name for Collection
   • Description - Enter a description of this Collection to display on your store.
   • Image - Upload Collection image.
   • Collection type - Choose manual or Smart type for the collection.
   • Products - You can add products for this collection here
4. Click on the Save button

Accurate inventory on your Shopify store helps customers when they're trying to place an order. Before you can view or adjust inventory levels for a product, you need to set up inventory tracking for that product. When you track inventory for a product in Shopify, you can view the history of inventory for that product for up to the most recent 180 days.

Steps:

1. From your Shopify admin, go to Products.
2. Click on the Inventory menu
3. In the list of products, you can add a value in the Available and On hand
   1. Available: Inventory at your store that can be sold.
   2. On hand: The total amount of inventory at the location. This is the sum of Available, Committed and Unavailable items

Products can be broken up into a maximum of three options, and a single combination of those options is a variant.

I. How to add variants to a product?

- Add variants to a product that comes in more than one option, such as size or color. Each combination of option values for a product can be a variant for that product. A list of variants available for a product is displayed on its product details page. You can also manage inventory for each variant from the Inventory page.

- If you want to save specialized information for your variants, then you can add custom fields to your variant details pages by using metafields. At this time, product variant metafields can't be displayed to customers.

- You can also connect category metafields to variant options, which allows you to reuse your data across products instead of having to recreate it each time.

- You can add options and option values to generate new variants for your product. After you save the variants, you can add prices to them.

STEPS:

1. From your Shopify admin, go to Products, click the product that you want to edit.
2. Scroll down at the Variants section, click + Add options like size or color.
3. In Option values section, please Add Options for variants:
   • Enter each option value, such as Small, Medium, or Large. The option values are displayed to your customers when they select a variant.
   • To add another option to your variant, such as Color or Material, click + Add another option. You can have up to 3 options for each product.
4. Click Done and Save button
5. Click on the Add Variant button to set infomation for each of this product

II. How to add color/image for a variant?

STEPS:

1. Add Meta-Objects for variant(Example: Color)
   • From your shopify admin, please click on the Content => Metaobjecta.
   • Click on the Add definition button.
   • The add metaobject definition popup appear, please enter the name of metaobject definition in the Name parameter.
   • Click on the Add field button, then you can add single line text for Label, Color for Color and File for the Image .
   • Click on the Save button.
2. Add Color/Image for each attribute of variat.
   • From your shopify admin, please click on Content => Metaobject.
   • Click on the Add foodmart button, then click on the color object.
   • Add Name of attribute and then set Color or Image for that attribute here.

III. How to set display's type of variants

Foodmart theme allows you set the types(label, color or image) for each variants. To set it , please follow the below steps:

1. From your Shopify admin, click on Sale chanels => Online store.
2. Click on the Customize button of the theme.
3. Go to the Theme Settings => Product Variant section.
4. Add Variant Name and Select display's type for each variant.
5. Click on the Save button

Gift cards created from your Shopify admin can be used for a future purchase from your store, at no cost to the recipient. If you want to sell gift cards, then you can add a gift card product to let customers purchase gift cards.

I. Create a gift card

Create a gift card directly from your Shopify admin without receiving any payment in return.Steps:

1. From your Shopify admin, go to Products > Gift cards.
2. Click Create gift card.
3. In the Initial value field, enter the value of the card.
4. In the Customer field, enter a customer's name, phone number, or email address to create or search for a customer. The customer must have either an email address or phone number to be sent the gift card code by email or SMS. If a customer provides both, then the gift card is sent by email.
5. Optional: If you want the gift card to expire, then in the Expiration date section, select Set expiration date, and then select a date. Ensure that you follow the laws for your country about gift cards. Learn more about gift card expiration and settings.
6. Optional: Enter an Internal note for your reference. The note is visible when viewing the gift card in your Shopify admin, but isn't visible to the customer.
7. Optional: Click Preview email to preview how the gift card email displays to your customer.
8. Click Save.
9. Click Send gift card.
10. Do either of the following:
    • If an email address is provided for the customer, then click Send email.
    • If only a phone number is provided for the customer, then click Send SMS.

You can read more about this feature here

II. Create a gift card product

You can add a gift card product to sell gift cards with multiple different values on your storefront. After you create a gift card product, it's added to the Products section of your Shopify admin. Gift cards are digital products, and share product details with non-gift card products.

1. From your Shopify admin, go to Products > Gift cards.
2. Click Add a gift card product.
3. Enter the gift card product information into the following fields:
   • Title - Enter a name for this gift card product. For example: Birthday gift card.
   • Description - Enter a description of this gift card product to display on your store.
   • Media - Upload product media, such as an image. Product media is displayed on the product page of your online store.
   • Sales channels and apps - View and change the availability settings to publish the gift card and sell it through your sales channels. You can click the calendar icon beside Online store to set a specific publishing date.
   • Organization - You can add optional information about the product type and vendor, add the gift card product to existing manual collections, and add tags.
4. Optional: Make any adjustments to the number of gift card denominations and their values.
5. When you're done, click Save gift card product to create a new gift card product.
6. After your gift card product is saved, you're redirected to the gift card's product details page. You can add any additional product details, or make changes to the gift card product.

After you fulfill an order with a gift card product, a gift card is created with the value of the purchased gift card. This gift card is listed in the Gift cards section of your Shopify admin. You can view, organize, or edit created gift cards from the Gift cards page in your Shopify admin.

You can read detail here

I. How to add related products of a product?

Related products are products that are similar to a selected product. You can display potential substitutes to help customers discover other similar products they might like. These products should appear in a You might also like section on the product page and successfully popup.

STEPS:

1. From your Shopify admin, Click on theApps.
2. Click on the Search & Discovery app and go to the Recommendations menu.
3. The Product recommendations list displays.
4. Click on a product and scroll down at Edit related products section.
5. In this section, app will auto-generated some recommendations. However, you also can Select products that are good alternatives manualy by click on the Search products textbox.
6. Check Hide auto-generated recommendations option if you don't want to show auto-generated products in the frontend.
7. Click on the Save button

II. How to show related products of single product?

STEPS:

1. From your Shopify admin, click on Sale chanels => Online store.
2. Click on the Customize button of the theme.
3. Click on the Templates dropdown and go to the Product => Default Products.
4. Click on the Add section button
5. The Search sections popup displays. Click on the Search sections textbox and enter Product Recommendations.
6. Click on the Recommendation Products section. See this image.
7. Follow this guide to do some configurations for the Product Recommendations Section.
8. Click on the Save button.

I. How to create a new menu and add menu items?

---

STEPS:

1. From your Shopify admin, Go to the Content => Menus section.
2. Click on the Create Menu button.
3. At the Name section, Enter a name for the menu.
4. At the Menu items section, Click on the Add menu item.
5. Enter a name for the menu item in the Label field. This name displays in the menu, and can include special characters or emojis.
6. Click on the Search or paste a link field, and then enter a website address for an external website, or select a link type.
   • If you select a link type, such as Products or Pages, then select a specific destination. When you select Home page, the destination is automatically set to your online store's home page.
   • When you select a link type and a specific destination, then the name of the destination, such as a product title or page title, is automatically populated in the Name field unless you have already entered a name.
7. Click on the Save button.

The main menu appears on the header of all pages. So, to set a menu is been the main menu of your store, please follow the below steps:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the sections button at the left sidebar.
4. Click on Header section.
5. Look at the right sidebar and scroll down at the Menu General Settings .
6. Click on the Main Menu Select field, and then select a menu for it..
   • Click Replace to choose another product for the Product gift cart.
   • Click Edit to edit info of the current Product gift cart.
   • Click Delete to empty.
7. Click on the Save button.

You can use drop-down menus to group products, collections, or pages together and make it easier for customers to navigate your online store. Before create a Submenu menu for a menu item, please follow the guide for Add menu and menu items section to create a menu first.

After that, follow the below guide to submenu with style dropdown for a menu item:

STEPS:

1. From your Shopify admin, Go to the Content => Menus section.
2. Edit A menu in the list of menu.
3. Click on the Add menu items button and enter label and link type for it.
4. Click the left mouse on the :: button. Then, drag and drop it to be the submenu of a menu item which you want
5. A List of submenu displays. Please click on the "Add menu item to ..." button to create more submenu items
6. Click on the Save button

IV. How to set Mega menu for a menu item in the Main menu?

By default, Shopify only supports dropdown menus for submenus. However, our theme includes a built-in mega menu feature for main menu and veritcal menu. And with each type of menu, we will have different configurations.

.

- Main menu: please Read the guide of Navigation Menu section.
- Vertical: please Read the guide of Vertical section.

In this section, we provide you the blow configurations:

	Sections	Setting	Meaning
	Favicon	Favicon image	Select/Upload the image for favicon with the size 32x112 px.
	Logo	Logo text Use logo image image Logo's Width	Add text for logo with Logo type text. Enable Logo type : Image. Select/Upload the image for Logo image. Custom the width of Logo Image with unit px.
	Mobile logo	Mobie Image Image's Width(px)	Select/Upload the image for Mobile logo image Custom the width of Logo Image with unit px.
	Effect Banner All Site	Select Effect	There are 12 effects for banner. Choose Select effect option if you want to remove effect on banners.
	Go To Top	Enable go top Show on mobile	On/Off Go to top button. It applied on all devices. On/Off Go to top on Mobile devices.
	Loading Site	Enable loading Loading icon	On/Off loading icon when loading of your site. Select/Upload the image for Mobile logo image. You should add an gif file here.
	Breadcrumb	Background Color Text color Use background image Background image padding top Padding bottom	Select a color code to apply on background color of breadcrumb. Set the color code to apply for text on the breadcrumb. Enable/Disable background image for breadcrumb. If you enable this option, background color will be off. Select/Upload the image for Background image. Set padding top for breadcrumb. Set padding bottom for breadcrumb.

	Sections	Setting	Meaning
	RTL Direction	Enable Layout RTL List RTL language iso code	Allow you set RTL mode of your site for language which you want by: Turn on the Enable RTL mode. Click here and get ISO code of languages which you want to enable RTL and pasted it into the List RTL language iso code. Separate your language codes with a ';'.
	Layout type	Type	Select one of 04 styles for page: Full-width Boxed Rounded Iframed
	Background	Enable background image Background Image Background Color Horizontal position Vertical position Effect	On/Off Background image for your store. Select/Upload the image for Background image. Set a color code for Background Color. This option will work if you turn of background image. Set horizontal position with 3 options: Left/Right/Center. Set vertical position with 3 options: Top/Middle/Bottom. Set scroll or fixed effect. This is only work with background image.

	Sections	Setting	Meaning
	General	Theme Color Color Master 2 Link Color Link hover, active Border Color Body text Background 1 Background 2	Primary Color will be applied on: Background color of Top header. Background color of total mounnt of products of wishlist and minicart. Color of deal time. Hover color of Add to cart button/Close Color Master 2 will be applied on: Title of submenu. Button shop now, pagination on slideshow. Icon of next/prev, add to wishlist, compare, quickview button. Color of section's title, product tabs. Background color of Select options/Add to cart buttons, attributes. Color text of some other elements...... Link color will apply color for all links on your store. Link hover,active will apply color of links for hover/active effect. Border color will set color for button like next/prev, attributes of variants , product tabs, line and price box in the filter sidebar. Body color text will set color for text. Background color 1 will set background color of countdown time section, product infomation. Background color 2 will set background color for product tab, pagination buttons, Collection information, footer...
	Product Icons	Background color for 'Sale' sticker Background color for 'New' sticker Background color for 'Hot' sticker	Set Color code for Icon Sale. Set color code for icon New. Set color code for icon Hot.
	Price	Price Color Sale Price Color Compare Color	Set color of price for products which don't have sale price. Set color for Sale price of product. Set color for Compare price.

	Sections	Setting	Meaning
	Body	Font Use a different body font Google fonts Link for body Fonts Body Font size for Body	This is default font-family of Shopify. If you use the font family in this option, the speed of your site will faster than custom font. On/Off Custom font for your site. If you enable this option, the custom font will be applied. Follow this step to add: Go to https://fonts.google.com/ Find the font which you want and click on that font. Click on the Get font button and choose <> Get embed code button. Click on the Web tab => Link option Copy 01 link tag which you want in the Embed code in the of your html and paste it in theGoogle fonts Link for body parameter. Note: you should choose a font which is not include in the default font list of Shopify. Enter the name of front which you add in the Google fonts Link for custom. Define the font-size for the body of your website using pixel units.
	Font weight body	Regular Light Medium Bold	Define the font-weight level for each style here.
	Heading	Font Use a different header font Google fonts Link for heading Fonts heading Font size for heading Font weight for heading	The same meaning with the font body section. However, these settings will be applied on the heading tags only.
	Custom	Font Use a different header font Google fonts Link for heading Fonts heading Font size for heading Font weight for heading	The same meaning with the font body section. However, these settings will be applied on the ............
	Google font link preload	Preload googleapis Preload gstatic

	Sections	Setting	Meaning
	Social sharing options	Share on Facebook Tweet on Twitter Pin on Pinterest	The share feature will be displayed on single product page. This feature allow you turn on/off the share feature on some Socials: On/off the share on Facebook On/Off Tweet on Twitter On/Off Pin on Pinterest
	Social accounts	Twitter Facebook Pinterest Instagram TikTok Tumblr Snapchat Youtube Vimeo	This feature allows to add the link for socials on the footer.

	Sections	Setting	Meaning
	General	Types Model Drawer Page Minimum price to get free shipping Enable free shipping congratulations	Our theme provide 03 types for when you click on the minicart icon on the header: Modal Drawer Page Define the minimum of subtotal in the cart to get the free shipping. For example. If you add 500 in this parameter=> Mean, free shipping will be applied for all orders which have total >= 500($). Enable the free shipping congratulations message on minicart and my cart page.
	Gift Wrapping	Show gift wrap Product for gift wrap Content gift wrap Show terms and conditions checkbox Terms and conditions content Label Terms and conditions alert Terms and conditions alert Enable order notes Enable Coupon Enable calculate shipping	On/Off gift wrapping on minicart and my cart page. Select a product for gift wrap. To know more, please read this guide. Enter the Content gift wrap. On/Off terms and conditions. Enter the content of terms and conditions. Enter the Label Terms and conditions on alert. Enter the content of Terms and conditions on alert. On/Off Order note on minicart and My cart Page. On/Off Order coupon on minicart and My cart Page. On/Off Order calculate shipping on minicart and My cart Page.
	Calculate shipping setting	Heading text Default country selection Submit button label Submit button label when calculating Success Message Success Price Message Error	On/Off Featured products section on sidebar of Collection Pages. On/Off Featured products section on sidebar of Product Pages. On/Off Featured products section on sidebar of Blog Pages. Enter the title of Featured Products block. Select source for this block. If you don't select any collection, they will get all featured products of all collections. Define the number of product to show in this section Click here to know more detail.

	Sections	Setting	Meaning
	Currency	Display Currency? Enable currency conversion Format Supported currencies Default currency	On/Off currency switcher on the header of your store. On/Off currency switcher on the header of your store. Select the format (with currency or without currency). Go to the https://www.xe.com/currency/ and get currency's codes which you want and add theme in this param. Each currency should be separated by a space.. Define the default currency of your store

	Sections	Setting	Meaning
	Newsletter Popup	Width (px) Enabled Time Expired cookie(day) Popup Heading Title Description Checkbox Title Display Checkbox Upload a new newsletter image Use mailChimp Times show again MailChimp form action URL	Define the width of Popup. On/off newsletter popup. Specify the number of days after which a cookie expires and becomes invalid. Enter the Heading title of the popup. Enter descriptin of the popup. The text for Checkbox Title. On/Off Display Checkbox. Select/Upload the image for Logo newsletter image. On/Off mailChimp form on the newsletter. Define the Times show again with unit minutes. Follow this guide to get url and add it to the MailChimp form action URL
	Social Settings	Display Facebook Link Facebook Display Twitter Link Twitter Display Youtube Link Youtube Display Pinterest Link Pinterest Display Tiktok Link Tiktok Display Instagram Link Instagram Display Tumblr Link Tumblr	Allow you enable social icons and their links in the newsletter popup

	Sections	Setting	Meaning
	Custom CSS	Add custom styles to your entire online store.	Custom CSS lets developers personalize website styles, controlling layout, colors, fonts, and animations for a unique design.

The Homepage 1 page is built by below sections: 1.Announcement bar 2.Navigation Menu 2.1 Service 3.Home Slideshow 4.Collection List 5.SS Section product tabs 6.SS Section product deal 7.Multicolumn 8.SS Video 9.SS Section Image list 10.SS Section product slider 11.SS Section product slider 12.Home Marquee 13.SS Section blogs slider 14.Footer style 1

To change information and do some customize on your header, please:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the Theme option and go to the Header section.
4. Here, you can follow this guide to do configurations for your header.

Besides, there are some elements in the header will be set and configured in other sections follow the below guide:

1. On/off multi-language dropdown in the theme settings => language.
2. On/off multi-Currency dropdown in the theme settings => currency.
3. Change logo image in the theme settings => General options => logo.
4. Select menu to show in the main menu in the header setting section.
5. To configure Dropdown menu for a submenu, please follow this guide.
6. To configure Mega menu for a submenu, please follow this guide.
7. Make configurations for search popup feature in the theme settings => search popup.
8. Make configurations for Minicart feature in the theme settings => Cart.

To change information on your footer, please follow the below guide:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the template button.
4. Click on the footer section.
5. Make some configurations for the elements in the footer settings section on the right sidebar with the details:

   Section	Setting	Meaning
   Header	Background section	Select background color to set for footer. These color will be set in the theme settings => Colors
   Footer Contact	Heading Show contact Image Logo Image width Address Phone Email	Define the title of Contact section in the footer. On/Off Contact section. Select/Upload the image for Logo newsletter image. Define the width of Logo in the footer. Enter the address info. Enter the phone info. Enter the email info.
   Email Signup	Show email signup Heading Sub title	On/Off Subscribe email on Footer. Enter the heading info for this block. Enter the sub-title info for this block.
   Social media icons	Show social media icons	On/Off the socials on the footer. Configure your socials in theme settings => Social media.

6. Click on the Information section. Then edit the heading and select a menu for this section.
7. Click on the Customer Services section. Then edit the heading and select a menu for this section.
8. Click on the Contact Us section. Then edit the heading and select a menu for this section.

I. How to create/edit data for Announcement Bar?

STEPS:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the template button.
4. Click on the Announcement section.
5. Click on the each announcement item => then change the Message and Link for them.
6. To add new an announcement item by hover on the space between announcement items and click on the Add announcement button.
7. To delete an announcement item, please hover on that announcement item and click on the delete button.

II. How to configure layout and style for Announcement Bar?

STEPS:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the template button.
4. Click on the Announcement bar which do you want to edit.
5. In the Announcement bar settings in the right sidebar, you can do the below options:

   Setting	Meaning
   Full width Show Section Padding top Padding bottom Background section Scrolling duration Custom CSS	On/Off layout full-width. On/Off the section. Define the space above section. Deine the space blow section. Select background color to set for footer. These color will be set in the theme settings => Colors. Define the time to change item. Add custom styles to this section only.

I. How to create a new menu item or edit an exited menu item in Vertical menu?

STEPS:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the template button.
4. Click on the ">" icon on the left side of Vertical menu section to expand menu items.
5. Click on each menu item, then you can edit their infos follow the below guide:

   Section	Setting	Meaning
   Title Settings	Title Link	Enter the title of the menu item. Enter the link of the menu item.
   Icon settings	Show Icon Item Use icon image	On/Off icon image of menu item. This icon will be show at the left side of menu item. Select/Upload the image for Logo newsletter image.
   Submenu item settings	Type Width Extra CSS class	With 03 options: - None: Don't show submenu for this menu item. - Dropdown: Submenu will be show in dropdown. - Mega: Submenu will be show in mega. Set the width of submenu. This option only work for Mega type only. Add extra class which you want to use for custom css code.

6. For submenu content, our Vertical menu are supporting 5 types to show. They are including: Navigation, Product, Block HTML, Banner Image and Page menu items. Each type will have different setting collections. So, please follow the below guide to configure each menu type for each vertical menu item:

   Nav Menu Settings	Enable navigation Select Menu Menu column Item column	On/Off naviation menu on vertical mega menu. Select a menu to show here. Define width of navigation menu. Total columns of Submenu is 12 columns. Define number of columns to show menu items. If you set 6 => the menu items will be show in 02 columns. View this image to know more
   Product Item settings	Enable Product Block title Select Collection Product item Limit Menu Column Item Column	Enable/Disable Product item for Submenu. Enter the title for Product Item block. Select the collection to get products. Define the number of products to show in the product item block. Define width of Product menu. Total columns of Submenu is 12 columns. Define number of columns to show product items. If you set 6 => the product items will be show in 02 columns. View this image to know more
   Block HTML item	Enable html Menu Column Content HTML	Enable/Disable block html for Submenu. Defind the width of block HTML.. You can input HTML code, img tag, video code,... in this param.
   Banner item settings	Support maximum 03 banners the show in a submenu of an menu item in Vertical menu. Each banner block include: Show banner Banner Column Banner Image Link	On/Off Banner Item. Width of Banner Item. Select/Upload an Image for banner item. Add link for banner image.
   Page Item settings	Enable Page Page Item Column Select Page	On/Off Page item. Width of Banner Item. Width of Page Item. Select a page to show it's content in the submenu item.

7. Click on the save button.
8. To add new, please hover your mouse on the space between menu item and click on the Add menu item to add more menu item.
9. To delete, please hover on menu item which you want and click on the Delete button.

II. How to set the Heading and View All text for vertial menu?

STEPS:

1. Click directly on the Vertical menu section.
2. On the Vertical menu settings at the right sidebar.
3. Here, you can do some configuarations for vertical menu as blow:

   General settings

   Heading Background Color Heading Text Color Heading View All text View All URL

   Define the background color for heading of vertical menu. Define the color of Heading text. Enter the heading text. Enter the View All text. Enter the URL of View All text.

4. Click on the save button.

Firstly, this section is applicable only to the main menu. Before adding a mega menu item to the main menu, you must create a menu and assign it to the main menu. Please follow the steps below to do so:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the Template button.
4. Click on the Menu navigation section and look at the Menu setting at the right sidebar with below configure:

   Section	Setting	Meaning
   General Settings	Main Menu Select Nav Background Color Nav Menu Text Color Show dropdown arrow icon Show New Icon New Icon for menu items Show Hot Icon Hot Icon for menu items	Select a menu for Main menu. Dev xem lại. Dev xem lại. On/Off the arrow icon for menu items which have submenu. On/Off New icon. On/Off New icon for menu items in main menu. Define the menu items which will have new icon. You can add more than 01 menu item and each item will be seperate by ','. On/Off Hot icon for menu items in main menu. Define the menu items which will have hot icon. You can add more than 01 menu item and each item will be seperate by ','.

5. Click on the Save button.

I. How to create mega menu for a menu item in Main menu?

STEPS:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the Template button.
4. Click on the ">" icon on the left of Nagivation menu section to expand mega menu items.
5. Hover on the bottom of each menu items and click on the add menu item button to add new a mega menu item.
6. At the mega menu item settings section in the right sidebar, we can configure the blow settings:

   Section	Setting	Meaning
   Menu Item settings	Parent of Megamenu Width of megamenu: - Full-width - Custom Custom width (px) Class Custom Dropdown Align: - Left - Right Margin left (px)	Add the title of menu which do you want to create mega menu for it. Select the width type of submenu. In the case, you choose the custom: - You have to add the width(px) of submenu in the Custom width (px) parameter. - Set align for submenu with left or right postion. Set the margin left for the submenu.

7. For submenu content, our Main menu are supporting 4 types to show. They are including: Navigation, Product, Banner Image and Page menu items. Each type will have different setting collections. So, please follow the below guide to configure each menu type for each vertical menu item:

   Nav Menu Settings	Enable navigation Select Menu Menu column Item column	On/Off naviation menu on vertical mega menu. Select a menu to show here. Define width of navigation menu. Total columns of Submenu is 12 columns. Define number of columns to show menu items. If you set 6 => the menu items will be show in 02 columns. View this image to know more
   Product Item settings	Enable Product Block title Select Collection Product item Limit Menu Column Item Column	Enable/Disable Product item for Submenu. Enter the title for Product Item block. Select the collection to get products. Define the number of products to show in the product item block. Define width of Product menu. Total columns of Submenu is 12 columns. Define number of columns to show product items. If you set 6 => the product items will be show in 02 columns. View this image to know more
   Banner item settings	Support maximum 03 banners the show in a submenu of an menu item in main menu. Each banner block include: Show banner Banner Column Banner Image Link	On/Off Banner Item. Width of Banner Item. Select/Upload an Image for banner item. Add link for banner image.
   Page Item settings	Enable Page Page Item Column Select Page	On/Off Page item. Width of Banner Item. Width of Page Item. Select a page to show it's content in the submenu item.

I. How to add new slider in the Home Slideshow section?

STEPS:

1. In the Homepage template editor, find the Home Slideshow section.
2. Hover your mouse at the bottom of an exit slider and click on the Add slide button.
3. A new slider with the heading Talk about your brand appear, please look at the right sidebar to add some information for this slide:

   Status Image Image in mobile Link url slider Show Content Sub title Heading Text content Text Button Custom class

   On/Off this slide on Slideshow. Select/Upload an image for slide. Select/Upload an image for slide on mobile. Add URL for this slide. On/Off Content(including subtitle, heading, text and button). Enter the Subtitle for slide. Enter the heading for slide. The default text is Talk about your brand. You can delete this text and add your text for heading here. Enter the description for slide. Enter the text of button for slide. Enter the classes to add some custom css code for slide if you want. If not, you can empty this parameter.

4. Click on the Save button.

II. How to configure Home Slideshow section?

STEPS:

1. In the Homepage template editor, please click on the Home Slideshow section.
2. The Home slideshow settings appears at the right sidebar of your screen.
3. Now, let follow the blow guide to do some configurations for your Home Slideshow:

   Full-width	On/Off layout full-width for your slideshow.
   Show navigation Style navigation Show dot Owl Auto Play Margin Item Owl Loop Owl Auto Play speed Owl Speed AnimateIn AnimateOut	On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.

I. Add service item for the SS Service.

STEPS:

1. In the Homepage template editor, find the SS Service section.
2. Hover your mouse at the bottom of an exit slider and click on the Add service item button.
3. A new service item with the Title Free shipping appear, please look at the right sidebar to add some information for this service:

   Image icon Image hover Title Description

   Select/Upload an image for icon. Select/Upload an image for icon which will show when hover. Enter the title of service item.

4. Click on the Save button.

II. Configure settings for SS Service section?

STEPS:

1. In the Homepage template editor, please click on the SS service section.
2. The SS service settings appears at the right sidebar of your screen.
3. Now, let follow the blow guide to do some configurations for your SS Service:

   General Settings	Full width Show section Show line	On/Off layout full-width for your slideshow. On/Off SS service section on your Home Page. On/Off the line above Section.
   Section padding	Padding top Padding bottom Background section Title Sub-title	Define the space above section. Define the space below section. Select background for section. You can set none background Or select theme color, Color master 2, background 1 or background 2 for background color for the section. You can go to the Theme settings => Color to set these color. Enter Title of section. Enter Sub-title of section.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

I. Add collection items which you want to Home Collection List section

STEPS:

1. In the Homepage template editor, find the Home Collection List section.
2. Hover your mouse at the bottom of an exit Home Collection List and click on the Add Collection button.
3. A new collection appear, please look at the right sidebar and click on the Select collection dropdown and select a Collection for it

II. Do configurations for Home Collection List section

STEPS:

1. In the Homepage template editor, please find the Home Collection List section and click on it.
2. The Home Collection List settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for your this section:

   General Settings	Full Width Title Sub Title	On/Off layout full-width for your slideshow. Enter text for the title of the section. Enter text for the sub-title of the section.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

I. Add collection items which you want to Home Collection List section

STEPS:

1. In the Homepage template editor, find the Home Collection List section.
2. Hover your mouse at the bottom of an exit Home Collection List and click on the Add Collection button.
3. A new collection appear, please look at the right sidebar and click on the Select collection dropdown and select a Collection for it

II. Do configurations for Home Collection List section

STEPS:

1. In the Homepage template editor, please find the Home Collection List section and click on it.
2. The Home Collection List settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for your this section:

   General Settings	Full Width Title Sub Title	On/Off layout full-width for your slideshow. Enter text for the title of the section. Enter text for the sub-title of the section.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

I. Add collection items which you want to Home Collection Slider section

STEPS:

1. In the Homepage template editor, find the Home Collection Slider section.
2. Hover your mouse at the bottom of an exit collection item and click on the Add Collection button.
3. A new collection appear, please look at the right sidebar and add some information for the collection item:

   Title Sub Title Short description Image Text Button Select collection

   Enter the text for title of section. Enter the text for sub title of section. Enter the description of the section. Select/Upload an image for icon. Enter the text for the See more button. Select a collection of this collection item.

II. Do configurations for Home Collection Slider section

STEPS:

1. In the Homepage template editor, please find the Home Collection Slider section and click on it.
2. The Home Collection Slider settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for this section:

   General Settings	Full Width Title Sub Title View all Button's text Button's url	On/Off layout full-width for your slideshow. Enter text for the title of the section. Enter text for the sub-title of the section. Enter text for the View All button of the section. Enter URL for the View All button of the section.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

I. Add new collect tab to Home Product Tabs section

STEPS:

1. In the Homepage template editor, find the Home Product Tabs section.
2. Hover your mouse at the bottom of an exit tab and click on the Add tabs button.
3. The Add tabs appear at the right sidebar of your screen. You can follow the blow guide to add information for the new tab:

   Title Select collection Select sort order Filter the products with the Tags List Tags

   Enter the title of Tab. If this param is empty, the title of tab will be Collection's title which you choose in the Select Collection parameter. Select a Collection for this tab. Choose 1 of 6 options: Alphabetically(A-Z), Alphabetically(Z-A), Price(Low - High), Price(High - Low), Date(New - Old) or Date(Old-New). This Order By will be apply on products which show in this tab. Enble the filter Products with the tags. Add the product tags which you want to filter products in the tab. Separate tags by a comma, i.e "featured, new".

II. Do configurations for Home Product Tabs section

STEPS:

To configure this section, please follow the below steps:

1. In the Homepage template editor, please find the Home Product Tabs section and click on it.
2. The Home Product Tabs settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for this section:

   General Settings	Full Width Class Suffix Widget Name	On/Off layout full-width for your slideshow. Enter text for the Class Suffix of the section. Enter text for the Title of the section.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

To configure this section, please follow the below steps:

1. In the Homepage template editor, please find the Home Product Deal section and click on it.
2. The Home Product Deal settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for this section:

   General Settings	Enable Section Section Full Width	On/Off section to show on homepage. On/Off layout full-width for the section.
   Widget Head Settings	Title Description	Enter text for the heading of the section. Enter text for the description of the section.
   Widget Content Settings	Deal time Select Collection Button Text Button URL	Enter text for the Deal Time of the section. Select a collection for this section. Enter the text for view all button. Enter the link of button.
   Owl Settings - Only available in Home Product Deal of Homepage 10	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

To configure this section, please follow the below steps:

1. In the Homepage template editor, please find the Home Special Deal section and click on it.
2. The Home Special Deal settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for this section:

   Section Full Width Padding top Padding bottom Background Color Heading Sub title Deal time Text button Link button Custom CSS

   On/Off layout full-width for the section. Allow you set the padding-top of section. Allow you set the padding-bottom of section. Enter text for the heading of the section. Enter text for the sub title of the section. Add the deal time. Add the text for button. Add the link for button. Add custom styles to this section only.

I. Add New Logo data for Home Logo Brand section

STEPS:

1. In the Homepage template editor, find the Home Logo Brand section.
2. Hover your mouse at the bottom of an exit client and click on the Add Logo button.
3. The Add new logo appear at the right sidebar. Then you can add:

   Image Image size Link

   Select/Upload Image for the Logo Brand. Define the size of image. Enter the Link for Logo Brand.

II. Do configurations for Home Logo Brands section

STEPS:

1. In the Homepage template editor, please find the Home Logo Brand section and click on it.
2. The Homepage Logo Brand settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for this section:

   General	Full width Heading Sub title Button's text Button's Link	On/off layout full-width for the section. Enter the text for the title of the section. Enter the text for the sub-title of the section. Enter the text for View All Button. Enter the Link for View All button.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

I. Add Client data for Home Testimonial section

STEPS:

1. In the Homepage template editor, find the Home Testimonial section.
2. Hover your mouse at the bottom of an exit client and click on the Add Client button.
3. The Add new client appear at the right sidebar. Then you can add:

   Client's Name Client's Address Client's Message Add a review

   Enter the text for the Name of client. Enter the text for the Address of client. Enter the text for the Message of client. Set the rate from 1=> 5 for this client.

II. Do configurations for Home Testimonial section

STEPS:

1. In the Homepage template editor, please find the Home Testimonial section and click on it.
2. The Homepage Blogs settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for this section:

   General Settings	Full width Heading Sub title	On/Off layout full-width for the section. Enter the text for heading of section. Enter the text for sub title of section.
   Embed video from URL	Video url Cover image	You can add url of a video on youtube or vimeo to this param. Select/Upload the banner featured image for video.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

To configure this section, please follow the below steps:

1. In the Homepage template editor, please find the Homepage Blogs section and click on it.
2. The Homepage Blogs settings appear at the right sidebar.
3. Now, let follow the blow guide to do some configurations for this section:

   General Settings	Full width Title Blogs Sub title Select Blog Category Show featured image Featured image size	On/Off layout full-width for the section . Enter the text for heading of section. Enter the text for sub title of section. Select a blog category for the section. On/Off featured image of posts. Define the size of featured image post.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

This section allow you add a video from youtube or vimeo url with a list of items in description. Let’s dive in and explore the steps in more detail.

I. Add Item to the list

1. In the Homepage template editor,find the SS video section and click on the Add item button.
2. Add the text for item in the Item title parameter.
3. You also can edit the content of current item by click on the item and then replace current text of Item title by new text

II. Add a Youtube or Vimeo video and do some configurations for SS Video section.

1. In the Homepage template editor,find the SS video section and click on it.
2. The SS video settings appear.
3. Now, you can follow the below guide to configure:

   General Settings	Full width Style layout Heading Sub Title	On/Off layout full-width for the section . Select style 1 or style 2 to show video for this section. Enter the text for heading of section. Enter the text for sub title of section.
   Content setting	Button's Text Button's URL	Add the text for button which show on the below the list of items. Add the URL for button.
   Embed video from URL	Video url Cover image	Add an URL of Youtube video or Vimeo video. Select/Upload an feaured image for video.
   Custom CSS	Custom CSS	Add custom styles to this section only.

The Blog List template is a feature that allows you to display a collection of blog posts on a single page. It provides an organized list of your blog entries, making it easy for visitors to navigate through and explore different posts.

To do some configurations for this page, please follow the below steps:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the section button.
4. Click on the online store dropdown and click on the Blog Post => Default Blog option.
5. Click on the Blogs Pages section. The Blogs Pages settings appears, please follow the blow guide to configure:

   Number of posts in a page Mode view blog - List - Grid 2 - Grid 3 - Grid 4 Show author Show date Show Read More Custom CSS

   Select the number of posts to show in this page. Select 1 of 4 layouts to show post in this page : - List. - Grid style 2: show posts on 2 columns. - Grid style 3: show posts on 3 columns. - Grid style 4: show posts on 4 columns. On/Off Author info of post. On/Off date info of post. On/Off Read More info of post. Add custom styles to this section only.

A Single Post Template is a pre-designed layout used to display individual blog posts on your website. It provides a structured format for showcasing content, including the post title, body, featured image, author details, and publication date. This template ensures consistency in presentation while offering an engaging and user-friendly experience for readers, allowing them to focus on the content with a clean and professional design.

To do some configurations for this page, please follow the below steps:

1. From your Shopify admin, Go to the Sale chanels => Online store.
2. Click on the Customize button of the theme which you are using.
3. Click on the section button.
4. Click on the online store dropdown and click on the Blog Post => Default Blog Post option.
5. Click on the Blog Post section. The Blog Post settings appears, please follow the blow guide to configure:

   Related posts setting	Show related post Title Sub Title Show image Featured image size	Select the number of posts to show in this page. Select 1 of 4 layouts to show post in this page : List, Grid style 1, Grid style 2 or Grid layout 3. On/Off Author info of post. On/Off date info of post. On/Off Read More info of post. Add custom styles to this section only.
   Owl Settings	Desktop Medium Desktop Tablet Small Tablet Mobile Small Mobile Select Row Show navigation Style navigation Show dot Margin Item Owl Auto Play Owl Auto Play speed Owl Loop Owl Speed AnimateIn AnimateOut	Set number of columns to show on desktop which have screen's width > 1920px. Set number of columns to show on desktop which have screen's width from 1200px to 1920px. Set number of columns to show on Tablet which have screen's width from 992px to 1199px. Set number of columns to show on Tablet which have screen's width from 768px to 991px. Set number of columns to show on Mobile which have screen's width from 568px to 767px. Set number of columns to show on Mobile which have screen's width from 320px to 567px. Set number of rows to show. On/Off next/prev button for slideshow. Selet style for Next/prev button. On/Off pagination(dot) for slideshow. On/Off auto-play feature for slideshow. Set space around slideshow. On/Off Loop feature for sldieshow. Define the speed for change slide auto play feature. Define the speed for Slide/Fade animation. Select animate in for slide. Select animate out for slide.
   Custom CSS	Custom CSS	Add custom styles to this section only.

6. Click on the Featured image block, the Featured image settings appear, you can set the size of featured image with 03 options contains adapt to image, medium and large.
7. Click on the Heading block, the Heading settings appear, you can on/off the date and author of post here.

Login to your Shopify admin panel and go to Pages, click Add a page:

1. In the Online Store / Pages, find and click button "Add a page"

2. Write in the Title field page name => Select Visible => Select Template: contact => Click save

Setting Customize

After you create Contact Us page successfully, please go to Themes > Customize theme > Click Page > Contact

At this Section, you can start adjusting like in this image below:

Edit/add fields to the Contact Form

This is the contact form we are going to add/ edit:

To add/edit contact field, please follow below guide:

Adding fields to the Liquid Contact Form

Create Wishlist Page

---

1. From the pages tab, click the Add a page, then click page.

2. From your Shopify admin, click Online Store button. You will be taken to a new template page.

3. From the template page, enter a Title and choose the Template look like the below image.

4. Click Save.

Create About Us Page

---

1. From the pages tab, click the Add a page, then click page.

2. From your Shopify admin, click Online Store button. You will be taken to a new template page.

3. From the template page, enter a Title and choose the Template look like the below image.

4. Click Save.

5. From your Shopify admin, click Online Store, then click Themes. Click Customize theme for the theme you want to customize. In General Settings Tab -> About Us Page.

- Backend setting:

Create FAQs Page

---

1. From the pages tab, click the Add a page, then click page.

2. From your Shopify admin, click Online Store button. You will be taken to a new template page.

3. From the template page, enter a Title and choose the Template look like the below image.

4. Click Save.

Note: Demo content of faqs page in packing -> pages-content.zip

Create other pages like this

1. Shopify Help Center
2. What do I need to start selling on Shopify?
3. Create a translation for your theme
4. Use app Weglot Translate

Need Help?

---

If you have any questions, please do not hesitate to contact us at https://support.wpthemego.com/. We are happy to help!