Belle - Clothing and Fashion Shopify Theme

Thank you so much for Your purchase !

If you have any questions that are beyond the scope of this help file, please feel free to submit a ticket at http://adornthemes.com/support/.
Thank you very much! Below you will find the guidelines on how to install and use our theme. Cheers !

Installation


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

INFO! If you don't want to spend your time installing the theme and store set up, Feel free to contact for our paid store setup serivce. You can send an email direct on info@adornthemes.com.
We will reach out to you very soon.

Don't have store yet? You can send an email on info@adornthemes.com. We will create Development store for you with unlimited trial time. You can Transfer ownership when store is ready to launch.

Install Theme



Attention! You can't directly upload the zip file that you have downloaded from Themeforest to your Shopify store. So first unzip downloaded file from themeforest.


Install Theme

  1. Download theme package from Themeforest. https://themeforest.net/downloads
  2. Extract/Unzip all files from downloaded package. Find "belle-install-me.zip" file. This is Home 1 Classic demo zip file. Install this zip file on your shopify store.

    You will also find Demo Preset folder which contains preset/data files for other home skins/demos, User guide file and read me text file.

  3. Logging into your Shopify store and Navigate to Themes and Click on Upload theme button : Store Admin -> Online Store -> Themes
  4. To use and install other premade Home skins, Go to "Demo Preset" folder which you downloaded from themeforest.

    ( All you need to do is copy all data from one preset file and paste it in theme settings_data.json file which is explain below)

  5. In this Folder, You will see preset files for different skins for Belle. Please select preset file and open with Chrome browser or text editor. Select ALL and COPY. ( You need to copy all data from this file)

    Click here to see all available home skins/demos

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

  7. Find Config folder and open settings_data.json file.
  8. Select and Remove all content from this file. Now paste copied preset data. ( Preset data you copied in Step 5) And Click Save.

  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.

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.

Install App


  1. Product Review app [Free]

  2. Weglot Translate[Paid] - Get 20% off for Belle theme

  3. Growave - Reviews, Loyalty ++ [Paid] - Get an extended 30 days Free trial

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

    Product reviews with photos build more trust
  5. AVADA Cookie Bar[Free]

  6. Instagram shop by Snapppt[Paid]

    • To enable Instagram shop, please install this app: click here to get this app
    • Read this well written app article to know about how to display shoppable galleries on your store.
    • Read our article for the same.

Store Configuration


Please do follow below required settings on your store.


Basic Configuration  

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

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



  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



  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



  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



Megamenu Links with Image



Megamenu Custom HTML


Menu Labels (Optional)



Page Setup


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

We have created below premade template using section.

Contact Page



Watch Video

  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:

About Page



Watch Video

  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



Watch Video

  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



Watch Video

  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



Lookbook Photo Gallery is an awesome marketing tool and new way to showcase your products in a different style.
You can add shoppable tag or link the products on images so that customers can shop directly from the Gallery.
This creates a beautiful shopping hotspot for your customers to find out more details about featured products and add them directly to their cart
  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



Watch Video

  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

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

Premium Shopify Theme - Product Columns

Products Rows


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

  1. Section Preview

    Premium Shopify Theme - Products Rows

  2. Settings and options

    Premium Shopify Theme - Products Rows

Products Slider


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

  1. Section Preview

    Premium Shopify Theme - Products Slider

  2. Settings and options

    Premium Shopify Theme - Products Slider

Single Product


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

  1. Section Preview

    Premium Shopify Theme - Featured Product

  2. Settings and options

    Premium Shopify Theme - Featured Product

Tabs + Products Slider


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

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

    Premium Shopify Theme - Collections Tabs and Products Slider

  2. Settings and options

    Premium Shopify Theme - Collections Tabs and Products Slider

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 :)

    Premium Shopify Theme - Collection Banners

  2. Settings and options

    Premium Shopify Theme - Collection Banners

Collection Carousel or List


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

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

    Premium Shopify Theme - Collection Carousel or List

  2. Settings and options

    Premium Shopify Theme - Collection Carousel or List

Image With Text


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

  1. Section Preview.

    Premium Shopify Theme - Image with Text

  2. Settings and options

    Premium Shopify Theme - Image with Text

Grid Banners


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

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

    Premium Shopify Theme - Grid Banners

  2. Settings and options

    Premium Shopify Theme - Grid Banners

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

    Premium Shopify Theme - Lookbook Shop

  2. Settings and options

    Premium Shopify Theme - Lookbook Shop

Parallax Banner


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

Parallax effect will not work mobile view.
  1. Section Preview. Click here to view more style

    Premium Shopify Theme - Parallax Banner

  2. Settings and options

    Premium Shopify Theme - Parallax Banner

Slideshow


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

  1. Section Preview.

    Premium Shopify Theme - Slideshow

  2. Settings and options

    Premium Shopify Theme - Slideshow

Store Info.


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

  1. Section Preview.

    Premium Shopify Theme - Store Info.

Rich Text Block


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

Display your store promotion detail text or producs details or other details with Title, Call to action button and Top image.

Testimonials


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

  1. Section Preview.

    Premium Shopify Theme - Testimonials

  2. Premium Shopify Theme - Testimonials

Text Line


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

Section Preview.

Premium Shopify Theme - Text Line

Instagram


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

Section Preview.

Premium Shopify Theme - Instagram

Instagram Shop


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

Section Preview.

Premium Shopify Theme - Instagram Shop

Newsletter


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

Section Preview.

Premium Shopify Theme - Newsletter

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

Premium Shopify Theme - Instagram Shop

Blog List


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

Section Preview.

Premium Shopify Theme - Blog List

Logo List


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

Section Preview.

Premium Shopify Theme - Logo List

Map


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

Section Preview.

Premium Shopify Theme - Map

Custom Block


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

Section Preview.

Premium Shopify Theme - Custom Block

Custom Masonry Block


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

Section Preview.

Premium Shopify Theme - Map

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


There are 4 product layout

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

Currency & Language


  • Enable currency conversion :

    Select to show the currencies on store

  • Format :

    There are 2 options: Without Currency, Ex: $10 and With Currency, $10 CAD

  • Supported currencies:

    Add the currencies, seperated by the space.

  • Default currency:

    Enter the currency you want to set the default for your store

Products Popup


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

Quick View Popup


Newsletter


Newsletter Popup Preview

Social Media


  • Social sharing options :

    Select to show social sharing on store

  • Social accounts :

    Enter url social accounts which you want to show on store else leave blank

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

Follow below steps for Color filters
  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.)


Follow below steps for other filter type i.e. for size, price, brands, material etc... filters
  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


  1. From your Shopify admin, go to Online Store > Navigation.   
  2. Scroll down to Collection filters.
  3. Click the Add filter dropdown menu.
  4. Click Product Options, and then select one or more
      filter options from the list.
  5. Click Save to save your collection filters options.

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


Click here to know content settings and Options ->

Product Tabs


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

From Left sidebar, Click on Product Description Tab -> click Add block
  1. Default Description Tab : Display different data for each products
  2. Review Tab : Display different review for each products
  3. Size Chart : Display global for all products, different for each products,
    display by product type or vednor. Read articles how to add size chart for products?
  4. Global Text Block : Display same data for all products.
    You can add this tab as many times as you want.
  5. Metafields Data : Display different data for each products.
    Read articles how to add different data for each 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

  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


Product Pre-Order allows you to sale your items even if products are out of stock on your store.

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


We did our best to make theme documentation as clear as possible. However, if you have any issues with our theme or any suggestions on theme or documentation,
please Feel free to submit a ticket at http://www.adornthemes.com/support/. We are happy to help you!

We also recommend you to read our item support page and visit our theme knowledgebase