Installation

Installation is easy and quick. We recommended you to read Shopify Manual to have clear idea about all the aspects of theme customization.

Install Theme Shopify 2.0

Install Classic Demo – Home 1

Step 1. Download theme package from Themeforest. https://themeforest.net/downloads

Step 2. Extract/Unzip all files from downloaded package. Find “belle-install-me-shopify2.0.zip” file. This is theme default demo zip file. You need to install this file on your shopify store.

Step 3. Logging into your Shopify store and Navigate to Themes and Click on Upload theme button. Click here

Step 4. To publish new theme click on Actions –> Publish.

Install premade Home skins

Step 1. Follow above step 1 to step 3

Step 2. Now go to “Demo Preset Shopify 2.0” folder which you downloaded from themeforest.net

All you need to do is copy all data from index.json and settings_data.json file from any preset folder file and paste it on same theme file on your store. Explain in below steps..

Step 5. In Preset folder, You will see folders for all available skins. Please open any skin folder which you would like to install.

Click here to see all available home skins/demos

You will see 2 files index.json and settings_data.json.

Step 6. Now Go to Belle theme which you just uploaded. Click Action –> Edit Code

Step 7. Find Templates folder and open index.json file.

Step 8. Select and Remove all data from this file. Now paste copied preset data. ( index.json file data you copied in Step 5) And Click Save.

Step 9. Find Config folder and open settings_data.json file.

Step 10. Select and Remove all data from this file. Now paste copied preset data. ( settings_data.json file data you copied in Step 5) And Click Save.

Step 9. By Default your uploaded theme is unpublished. Another theme is active on your store. You can publish new theme when you are done with theme configuration and setup.

Step 10. To publish new theme click on Actions –> Publish.

Recommended Apps

1. Shopify Search & Discovery - Free

   Customize your store search, filtering, and product recommendations, so you can enhance your products’ relevance and sell more.

   click here to get this app

2. Loox Product Review app [Paid] - Get an extended 30-day free trial

   • Product reviews with photos build more trust.
     To enable Loox Product Review, please install this app: click here to get this app

3. Weglot Translate[Paid] - Get 20% off for Avone theme

   • To enable multiple language on your store, please install this app: click here to get this app
   • Read this well written app article to enable multilangular store.

4. Growave - Reviews, Loyalty ++ [Paid] - Get 30 days Free trial

   • Grow sales with loyalty & rewards, reviews, wishlist, and UGC.
   • click here to get this app and discount

5. Trustoo.io Product Reviews - Free plan available

   • Display reviews in beautiful widgets to build trust with visitors and make it easy to make more informed purchase decisions. Reach new customers by rewarding customers for referring their friends and through organic search
   • click here to get this app and discount

6. Parcel Panel Order Tracking - Free plan & trial available.

   • Improve customer satisfaction & boost your sales with a branded post-purchase tracking experience.
   • click here to get this app and discount

7. Cart2Cart Store Migration - Paid

   • Most Advanced & Trusted eCommerce Migration Service. Migrate store data like products, customers, orders, categories, images and much more to a dream eCommerce platform in no time. Even if you’ve never done it before.
   • click here to get this app and discount

8. PageFly Landing Page Builder - Free to install

   Craft stunning web pages without code. More advanced customization to convert your visitors. PageFly caters to everyone, from first-time store owners to fast-growing merchants and expert agencies.

   click here to get this app

9. AI Search, Filter & Recommend - Paid

   Create effortless shopping experiences that boost conversion & maximizes AOV with Boost AI Search and Discovery. A powerful search app that uses AI to deliver lightning-fast & most relevant search results. Help shoppers find their next favorite product with AI recommendations

   click here to get this app

10. UpPromote Affiliate & Referral - 14-day free trial

    Complete, easy referral & affiliate program app, trusted by top brands & experts for a revenue boost. Discover UpPromote's powerful influencer marketing & referral program, winning the hearts & brands' trust through real testimonials

    click here to get this app

Store Configuration

Please do follow below required settings on your store.

Enable Customer Accounts

Go to Store Admin -> Settings -> Checkout

Find Customer accounts, Select Accounts are optional and click Save

Set up Shipping Rates

1. Go to Store Admin -> Settings -> Shipping

2. Click here to read more in details

Currency Settings

Go to Store Admin –> Settings –> General

• Scroll down to Store currency block and click on Change formatting link

• Update these fields

  HTML With currency to Copy Line

  HTML without currency to Copy Line

  
  

  

Navigation

This section will help you how to have some collections and products added in your store.

Here are some links that will help you to have clear idea about how to setup your new store
Before you create store navigation, take a look at how to create collections.

• How to create a collection
• How to create a smart collection
• How to create a product and add it to a collection

• How to add links to the main menu navigation
• How to create a new menu
• How to create a dropdown menu

How to create new menu

1. You can create a link list of collections,products,pages or blogs in menu

   Go to: Online Stores -> Navigation -> Select Add Menu button

   

Single Link (No dropdown or megamenu)

Preview of Single link menu

1. Go to Online Store –> Customize –> Main Navigation –> Add block –> Add Single Links

2. This is very easy. Set Link Name and Select Menu Link. Repeat this steps for all menu items you want to display.

   

Dropdown Menu

Preview of dropdown menu

1. How to create dropdown menu? Click here to read more in detail
   
   

   

2. Go to Online Store –> Customize –> Main Navigation –> Add block –> Add Dropdown Menu

3. Set Link Name, Menu Link and Select Dropdown Menu

   

Megamenu Simple

• Display Menu Columns Up to 6
• Display Bottom Images Up to 3
• Display Right Column Image or Featured Product

• Preview of Megamenu Simple

  

1. Go to Online Stores -> Navigation -> Add Menu with Sub Menu Items As display below ( below screenshot is only for reference )





2. Go to Online Store –> Customize –> Main Navigation –> Add block –> Add MM Simple
3. Add Link Name, Select Menu, Set Columns, Set Product or Featured Image(Optional) and Set Bottom Images(Optional).
   
   

   

   

Megamenu Products

• Display Products Columns Up to 6
• Display Featured Products on Left or fullwidth
• Display Banner With or Without Text on Right Side(Optional)

• Preview of Megamenu Products

  

1. Go to Online Store –> Customize –> Main Navigation –> Add block –> Add MM Products
2. Set Links Name, Menu Link and Select Collection to display featured products.
3. Set Products Limit, Number of Columns for products and Button.
4. Set Featured Column with image, title, subtitle, buttons and link.

Megamenu Top Image Columns

• Display Up to 5 Columns with Image On Top
• Display Up to 5 Images Banner with Title and Links

• Preview of Megamenu Top Image Columns

  

1. Go to Online Stores -> Navigation -> Add Menu with Sub Menu Items
2. To use this Megamenu, Please create different menus for each columns.
   I.e. If you want to display 4 columns to Display Women, Men, Kids, and Accessories collection then create 4 different menus with sub menu links for each column.
3. Follow this article to read more in details : How to create Menu?

4. Go to Online Store –> Customize –> Sections –> Main Navigation –> Add block –> Add MM Top Image Columns

   

Megamenu Background Image

• Display Up to 6 Columns with Background Image

• Preview of Megamenu Background Image

  

• Go to Online Stores -> Navigation -> Add Menu with Sub Menu Items (below screenshot is only for reference)
  
  

  

• Go to Online Store –> Customize –> Sections –> Main Navigation –> Add block –> Add MM Background Image

  

  

Megamenu Links with Image

• Display Image with Title in Columns
• Select Image Column Up to 6

Preview of Megamenu Links with Image



• Go to Online Stores -> Navigation -> Add Menu with Menu Items (Without Sub menu item)
  
  

  To use this megamenu, you need to create simple Menu with menu items. as shown in below screenshot

  

• Go to Online Store –> Customize –> Main Navigation –> Add block –> MM Links with Image

  Set Link Name, Menu Link, Select Menu and Select Columns

  

Megamenu Custom HTML

• Display Custom HTML - You can put html code here

• Go to Online Store –> Customize –> Main Navigation –> Add block –> MM Custom HTML

  

Menu Labels (Optional)

• Go to Online Store –> Customize –> Main Navigation

• Set Manu Label 1 to Menu Label 5 as required

  

• Set menu labels with main menu items

  

• Set menu labels with sub menu items

  Online Stores -> Navigation -> Select Menu --> Click on Menu items

  

  

Page Setup

You can create as many CMS pages as you want. Here is the link which help you to create pages.

• How to create a pages?

  

We have created below premade template using section.

• Contact Us - page.contact
• About Us - page.about
• FAQs - page.faq
• Wishlist - page.wishlist
• Lookbook - page.lookbook

Contact Page

1. Go to: Online Stores –> Pages –> Click Add page:

   

2. Add contact page detail from Contact page Section

   Go to Online Store –> Customize –> Select Contact Page from top dropdown menu –> Contact Page

   

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

   • Adding fields to the Liquid Contact Form

About Page

1. Go to: Online Stores –> Pages –> Click Add page:
2. Set page Title and choose Template suffix page.about
3. Click save button

4. Add About details from :

   Online Stores –> Customize theme –> Select About Us from top dropdown menu –> About Page

   Select style and add details here

FAQs Page

1. Go to: Online Stores –> Pages –> Click Add page:
2. Set page Title and choose Template suffix page.faq
3. Click save button

4. Add FAQs details from :

   Online Stores –> Customize theme –> Select FAQs Page from top dropdown menu –> FAQ Page

   Select style and add details here

Wishlist Page

1. Go to: Online Stores –> Pages –> Click Add page:
2. Set page Title and choose Template suffix page.wishlist
3. Click save button
4. Now Go to: Online Stores –> Customize theme –> Scroll down to Theme Settings --> General Settings
   
   Make you sure "Enable WishList" option is enabled and Select WishList page.
5. Click save button

Lookbook Page

1. Go to: Online Stores –> Pages –> Click Add page:
2. Set page Title and choose Template suffix page.lookbook
3. Click save button

Add lookbook pictures from :

Customize theme –> Select Lookbook page (Page you created in step 2) from top dropdown menu –> Lookbook

Lookbook Shop Page

1. Go to: Online Stores –> Pages –> Click Add page:
2. Set page Title and choose Template suffix page.lookbook-shop
3. Click save button

Add lookbook pictures and select products from :

Customize theme –> Select Lookbook Shop page (Page you created in step 2) from top dropdown menu –> Lookbook Shop

Blog Page

1. Follow below url to create blog page

   How to create a blog and write an article

2. Go to: Online Stores –> Customize theme –> Blog from top dropdown menu –> Blog Pages

   

Header

Go to: Online Stores –> find theme –> click customize –> Scroll down to Theme settings –> Header

Start customizing header as per your needs. Please have a look on headers on demo store to get idea what header style you can set.

Footer

Footer Configuration  

Go to: Online Stores –> find theme –> click customize –> Scroll down to Footer

Start customizing footer as per your needs. Please have a look on footer on demo store to get idea what footer style you can set.

Settings and Options

Theme Sections

Sections allows user to easily add or move content on their store with just a few clicks. You can preview your changes in real-time in either desktop or mobile view

There are 28 Sections availables to use for home page as well as for inner pages. You can add,update,reorder and delete any sections any time as per your requirements.

Products Columns

Go to   Online Store –> Customize –> Add Section –> Products Columns

Products Rows

Go to   Online Store –> Customize –> Add Section –> Products Rows

1. Section Preview

   

2. Settings and options

   

Products Slider

Go to   Online Store –> Customize –> Add Section –> Products Slider

1. Section Preview

   

2. Settings and options

   

Single Product

Go to   Online Store –> Customize –> Add Section –> Single Product

1. Section Preview

   

2. Settings and options

   

Tabs + Products Slider

Go to   Online Store –> Customize –> Add Section –> Tabs + Products Slider

1. Section Preview. Click here to view more Tab styles.

   

2. Settings and options

   

Collection Banners Masonry

Go to   Online Store –> Customize –> Add Section –> Collection Banners Masonry

1. Section Preview  Click here to view more styles. You would like it for sure :)

   

2. Settings and options

   

Collection Carousel or List

Go to   Online Store –> Customize –> Add Section –> Collection Carousel or List

1. Section Preview.  Click here to view more styles.

   

2. Settings and options

   

Image With Text

Go to   Online Store –> Customize –> Add Section –> Image With Text

1. Section Preview.

   

2. Settings and options

   

Grid Banners

Go to   Online Store –> Customize –> Add Section –> Grid Banners

1. Section Preview. Click here to view all grid style.

   

2. Settings and options

   

Image Slideshow

Go to   Online Store –> Customize –> Add Section –> Image Slideshow

1. You can display image slideshow without image crops anywhere on your store home page. (Display image only not text)

Lookbook Shop

Go to   Online Store –> Customize –> Add Section –> Lookbook Shop

1. Section Preview. Click here to view more grid style

   

2. Settings and options

   

Parallax Banner

Go to   Online Store –> Customize –> Add Section –> Parallax Banner

1. Section Preview. Click here to view more style

   

2. Settings and options

   

Slideshow

Go to   Online Store –> Customize –> Add Section –> Slideshow

1. Section Preview.

   

2. Settings and options

   

Store Info.

Go to   Online Store –> Customize –> Add Section –> Store Info.

1. Section Preview.

   

Rich Text Block

Go to   Online Store –> Customize –> Add Section –> Rich Text Block

Testimonials

Go to   Online Store –> Customize –> Add Section –> Testimonials

1. Section Preview.

   

Text Line

Go to   Online Store –> Customize –> Add Section –> Text Line

Section Preview.

Instagram

Go to   Online Store –> Customize –> Add Section –> Instagram

Section Preview.

Instagram Shop

Go to   Online Store –> Customize –> Add Section –> Instagram Shop

Section Preview.

Newsletter

Go to   Online Store –> Customize –> Add Section –> Newsletter

Section Preview.

Video

Go to   Online Store –> Customize –> Add Section –> Video

You can display youtube, vimeo or mp4 videos. Display mp4 video with overlay text.

There are some options for mp4 video as below

1) Display autoplay mute video. Autoplay will work for both Desktop and Mobile

2) Display autoplay video with sound and play/pause controls. Autoplay will not work on mobile with sound. Please add video from below section to use this option

Go to   Online Store –> Customize –> Add Section –> Custom content –> Video

Video section preview

Blog List

Go to   Online Store –> Customize –> Add Section –> Blog List

Section Preview.

Logo List

Go to   Online Store –> Customize –> Add Section –> Logo List

Section Preview.

Map

Go to   Online Store –> Customize –> Add Section –> Map

Section Preview.

Custom Block

Go to   Online Store –> Customize –> Add Section –> Custom Block

Section Preview.

Custom Masonry Block

Go to   Online Store –> Customize –> Add Section –> Custom Masonry Block

Section Preview.

Themes Settings

Go to: Online Stores –> Themes –> Customize theme –> Scroll down to Themes Settings

Layout Style

General Settings

Fonts, Colors and Styles

Top Promotion Bar

Products Grid

Global product grids's settings. These settings will be overwrite by individual section's settings

Product Page

Go to: Online Stores –> Themes –> Customize theme –> Scroll down to Themes Settings -> Product Page

Currency & Language

Products Popup

Show live stream of products to your customers if anyone likes or bought product..

Quick View Popup

Newsletter

Social Media

Checkout

Checkout Settings

You can do settings for Banner , Logo , Main Content Area , Order Summary , Typography and Colors of Checkout Page

Collection Page

Setup Collection Page  

Go to Online Store –> Customize –> Select Collection Pages from top dropdown menu –> Collection Pages

We have included lots of options to display Collection Page.
So you can choose your own style for Collection Page. No need to worry for any codes.

1. Page Header
2. Left Sidebar
3. Page Content

Page Header

1. Top Heading - Simple
   
   

   

2. Top Heading - with Background Image.
   
   

   

3. Heading - info. over Image at content area.
   
   

   

4. Heading - default at content area.
   
   

   

   Without Collection Image
   
   

   

Left Sidebar

Page sidebar is very powerful. We have included lots of options to display page sidebar.

You can add unlimited filters, Popular products, Static text block and Promotion banner. Product filters worked on product tags. So carefully enter product tags at both side. ( Explained in detail at Product Filters section)

Settings & Options

Page Content

1. Collection Page Right Content

   You have multiple choice for page

   • Left Sidebar
   • Right Sidebar
   • Full Width
   • Grid View
   • List View
   • Collection Banner
   • Collection Slideshow
   • 2 column grid
   • 3 column grid
   • 4 column grid
   • 5 column grid
   • 6 column grid
   • 7 column grid

   

   Configure some other options for products from

Online Store –> Customize –> Theme Settings –> Products Grid

Product Filters using product tags

Watch Video

Product Filtering is built using tags of shopify. Tags are case sensitive. So if you have enter tags in small letter in sidebar assign same tags in small to product also.
In your store you can see Product filtering on top of left sidebar of collection page (As Product Filters)

There are unlimited filters available for your products.

Go to Online Store –> Customize –> Scroll down to "Custom Colors"

Add all custom colors to be used for product filters. i.e. Sage, Olive Green, Camel etc...

Go to Online Stores –> Click Customize –> Open the drop-down menu at the top of the page –> Collections –> Default collection

1. Click "Add block" -> Add "Filter By Colors"
   
   

2. Add Filter by section title and Filter tags. Select Swatch Size and Swatch Style from dropdown.

   

3. Go to Products -> Select Product -> Scroll down to "Tags" block.

   In Tags sections, Start adding same tags that you enter in sidebar text block. (You need to assing Only product relavant tags. Tags are different for each products.)

   
   

   

1. Click "Add block" -> Add "Filter By"

2. Add Filter By Title and Filter tags

   

3. Go to Products -> Select Product -> Scroll down to "Tags" block.

   In Tags sections, Start adding same tag that you enter in sidebar text block. (You need to assing Only product relavant tags. Tags are different for each products.)

   

Product Filters dynamic for shopify 2.0

Now with OS 2.0 product filtering are dynamic. When Collection filtering is enabled, the filter options appear on collection page and search result page.
Customers can filter their products by availability, product types, product vendors and Variant options(colors,size,height..)to find the products that interest them the most.
Now you do not need to go with that lengthy time consuming process of filter setup.

To Enable products filter on your store, follow below steps

There are 4 style you can display products filter. Display in Left Sidebar, Right Sidebar, Top Bar, Popup Box

Go to Online Stores –> Click Customize –> Open the drop-down menu at the top of the page –> Collections –> Default collection

Click on Collection Page from left sidebar and you will see products filter options options on right sidebar.

Product Page

• Product Content
• Product Tabs
• Related Products
• Recommended Products
• Recently Viewed
• Product Metafields
• Product Swatches
• Product Preorder
• Products Bundle
• Upsell bundle products

Product Content

Product Tabs

Go to Online Stores –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Related Products

Go to Online Stores –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Click on Related product section from left sidebar

Recommended Products

Go to Online Stores –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Click on Recommended Products section from left sidebar

Recently Viewed Products

Go to Online Stores –> Click Customize –> Open the drop-down menu at the top of the page –> Products –> Default product

Click on Recently Viewed Products section from left sidebar

Product Swatches

Watch Video  

We advise reading and familiarizing yourself with the Shopify Variants. It is an extremely well written and easy to understand.

There are many styles to display product swatches

• Color Swatches
• Variant Images
• Simple Dropdown Style

1. Go to Store Admin –> Products –> Add Product –>
2. Enter product title, add product images, add product tags, other details.
3. now scroll down to Variants box and click on Add Variant
   

4. When you select Color Swatch style to display product swatches and products have 2 color to display as product swatch then add color images from Custom Color Sections.

   Go to Store Admin –> Customize –> Scroll down to Custom Colors section -> Add Color

   Note!Color name and Variant name must be same

   

Product Preorder

Please read full shopify article here which is very well written : Allow Product Pre-Order

1. Authorizing payment for pre-orders
   

   When selling products as pre-orders, you should not capture payment immediately unless the customer is aware that they are purchasing a product that is not currently available. Instead, you can authorize a payment without capturing the funds immediately. Authorizing a payment at the time of checkout allows you to capture the funds at a later date, when the product is available and you are ready to fulfill the order.

   1. From your Shopify admin, go to Settings –> Payment providers.

      Scroll down to find the Payment authorization section.

   2. Select Manually capture payment for orders:

      

   3. Click Save

2. Allow products for pre-order

   1. From your Shopify admin, go to Products.
   2. Click the name of the product you want to make available for pre-order.

   3. In the Theme templates sidebar section, change product to product.pre-order:

      

   4. Check Allow customers to purchase this product when it's out of stock:

      

   5. Click Save.

Products Bundle

Step 1 : Go to your products, Add one product and give name of your choice

Step 2 : Now, Go to: Online Stores -> Navigation -> Select Add Menu button

Step 3 : Now, Go to: Online Stores -> view this product live on your store.

Translations

Go to: Online Stores –> Themes –> Click Edit language:

Here's a quick way to change some of the more commonly text or you can use other language

Credits

1. jQuery Library
2. Google Maps
3. Slick Carousel
4. Masonry

Images

1. Pixabay
2. freepik
3. 123RF

Note: All images are just used for Demo Purpose Only. They are not part of the theme and NOT included in the final purchase files.

Theme Support