Belle - Fashion and Clothing Shopify Theme

Thank you very 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 documentation on how to install and use the 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

Install Theme



  1. Extract all zip files from downloaded package "belle-package". Now log in to your Shopify store and go to the Online Store. Now click on Upload Theme and upload the Belle-home-vX.zip file (vx i.e different demo number) included with this package. Diffrent demo packages included in this package. i.e belle-home-1, belle home-2... You can select any demo

  2. By Default your uploded theme is unpublished. Another theme is runing in your store. Now to publish uploded theme click on Publish Theme

  3. Quick video on how to install theme

Install App


  1. Product Review app [Free]

    To enable Product Review in your site, please install this app: Product Reviews App

  2. How to install app?

    Log in to your shopify store, Now click on any above url(Given App Url). This will open app in new tab, There you will find green Get button. Click on button

    Now Click on Install App button.

Theme Configuration


Enable Customer Registration Form


  1. Go to: Settings >> Checkout

Set up shipping rates


  1. Go to: Settings >> Shipping

Currency Settings


  1. Go to Store Admin >> Settings >> General

  2. Scroll down to Standards and formats section and click on Change formatting link

  3. Update these fields

    HTML With currency to

    HTML without currency to

Create and set megamenu, dropdown or simple navigation links


  1. Set Navigation/Menu Labels,i.e Sale, new, hot...etc

    You can set up to 5 diffrent labels. If you want to display label New then append [label1] to navigation links
    for sale append [label2], for hot append [label3]. You can use your own lable text.


  2. Add Home Link :

    Click on Add content >> Home Link

    Click on save button
  3. Add Single Page Link :

    Click on Add content >> Single Link

    Here you can add label which will display above link .i.e Sale,new,deal..

  4. Add Dropdown :

    Click on Add content >> Dropdown menu

    Same as above. Here you can select dropdown menu you created so far from Navigation Setting

  5. Add Megamenu :

    Click on Add content >> Select any from Style 1,Style 2,Style 3, style 4, style 5

    Megamenu Style 1

    Here you can set 2 column, 3 column, up to 5 columns, Featured product and Single Banner. You can display menu column with multiple rows. All options are flexible.

    Megamenu Style 2

    Here you can set 3 column, 4 column, up to 6 columns and 3 diffrent banner at the bottom of menu column. You can display menu column with multiple rows

    Megamenu Style 3

    Here you can set 1 column, 2 column, up to 5 columns and banner at the top of each column. You can display menu column with multiple rows

    Megamenu Style 4

    Here you can set 2 column, 3 column, up to 5 columns with background image.

    Megamenu Style 5


    For megamenu style 5 you wll need to upload image with the same name as menu items name from Settings=>Files


    Note: Within this megamenu settings you can also create mega menu like this : click here Other Style for megamenu


    Now let' see how to create multi-level drop-down for megamenu

    For example: If you want to display megamenu for "Clothing" as shown below

    Go to: Online Stores >> Navigation >> Add Menu

    Add menu items in menu as shown below and click save

    Now to add Menu links for Women, Add menu items in the same way and then drag that menu item under relavant menu item ( your choice )

    Repeat the same steps to add links under all other menu items.

Page Setup


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

Contact Page


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

    Click Save Button

  2. Add contact page detail from Contact page Section

    Go to Store Admin >> Online Store >> Customize >> Select Contact Page from top dropdown >> Click Contact Page section

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

FAQs Page


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

    Click Save Button

  2. ADD FAQs :

    Go to: Online Stores >> Themes >> Customize theme >> Sections (Now click FAQs from menu appearing on right side) >> FAQ Page

    You can add Faqs here

Lookbook Page


  1. What is lookbook page?

    A lookbook page contains a collection of photographs which has become essential for store owner showcasing new collections through images that convey a “feel” or story for the new season. it's a kind of catalogues

    Go to: Online Stores >> Pages >> Click Add page:

    Click Save Button

  2. Configure Lookbook: There are 2 style for lookbook:

    Go to: Online Stores >> Themes >> Customize theme >> Sections (Now click Lookbook from menu appearing on right side) >> Lookbook Page

    You can select any one style either Lookbook 1 or Lookbook 2

Wishlist Page


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

    Click Save Button

Blog Page


  1. Follow below url to create blog page
    How to create a blog and write an article

  2. Go to: Online Stores >> Themes >> Customize theme >> Sections (Now click Blog from menu appearing on right side) >> Blog Pages

Blog Sidebar Settings

  • Layout :

    There are 2 style of blog page. List and Grid select any one.

  • Sidebar Position

    Select the position of the sidebar on the blog page.

  • Show author, Show date, Show Category, Show Recent Posts

    Select to show on the page.

  • Show Collection

    Select to show any collection from your store in sidebar

Theme Sections and Home Page


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

There are 20+ section available to use.

Total 12 sections available on home page any time you can add,update,reorder and delete any sections

  1. Here’s how easy it is to add new sections to a theme

    Adding a section to a Shopify Theme
  2. Also it is very simple to drag and drop and reorder existing sections

    Reordering sections within a Shopify Theme
  3. Here You can configure Header, Footer, Home Page, Product Detail Page, Product Collection Page, Blog Pages and many more..

    Go to: Online Stores >> Themes >> Customize theme >> Sections

Slideshow


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Slideshow

Settings

  • Auto-rotate slides :

    Choose for auto rotation slide

  • Section height :

    You can manage banner heght - Large, Medium, Small

  • Text size:

    You can manage banner text size - Large, Medium

  • Some other settings

    General Settings >> Color : Settings for text,overlay, caption,border color

Collection Columns


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Collection Columns With Products

Collection List


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Collection Horizontal List

Settings

Collection Tabs


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Collection Tabs with Products

Products Slider


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Products Slider

Products Rows


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Product Rows

Single Product


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Single Product

Image Gallery


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Image Gallery

There are 5 styles for image gallery.


Image with text


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Image with text

  • Pair large text with an image to give focus to your chosen product, collection, or other offers. Add details on availability, style, or even provide a review.

Image with text overlay


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Image with text overlay

Settings

  • Section height:

    You can manage section height - Small, Medium, Large

  • Text size:

    You can manage text size - Medium, Large

  • Some other settings

    General Settings >> Color : Settings for text,overlay and opcaity

Text Columns With Images


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Text Columns With Images

Settings

  • Section height:

    You can manage section height - Small, Medium, Large

  • Text size:

    You can manage text size - Medium, Large

  • Some other settings

    General Settings >> Color : Settings for text,overlay and opcaity

Testimonials


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Testimonials

Logo/Brand List


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Logo list

Instagram


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Instagram

Store Features


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Store Features

Blog Posts


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Blog

Settings

Map


You can show map on home page as well as contact us page

Go to: Online Stores >> Themes >> Customize theme >> Sections >> Map

Settings

Custom Content


Go to: Online Stores >> Themes >> Customize theme >> Sections >> Custom Content

You can show Text, Image, Video, Product, Collection, Custom HTML any where on home page as per your requirement using this section

General Settings


Note: Customize theme's settings and appearance from here

Go to: Online Stores >> Themes >> Customize theme >> General Settings

Now you can customize below

General Options


General

Product List Settings

Set Product Labels

Typography


  1. Set Font Family, Font Style, Font Size and Font Weight for your store

Colors


  1. You have lots of options to config the Color of whole theme, Header, Footer, Page, Page Title, Section Title, Buttons, Price, Products tabs and many more...

Currency


  • 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

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

Product Notification


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

Newsletter Popup


Popup With Image

Popup Without Image

Quick View Popup


Checkout


Checkout Settings

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

Collection Page


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

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. Collection Page 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)


  2. Collection Page Right Content

    You have multiple choice for page

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

    Configure some other options for products from

Store Admin >> Online Store >> Customize >> Theme Settings >> General Options >> Product List Settings

Product Filters


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

  1. To use advance filtering on your store, follow below simple steps

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

  2. There are unlimited filters available for your products.

    Scroll down to bottom and click on Add Content. Select Filter By option. Remember to add color filters select Filter By Colors option. Once you add blocks for Filter, Add title and tags into box separated by comma as shown below


    You must assign the same tags to both. Your store products and sidebar block to enable filtering.


    Filter By Color :

    When you select Image Upload for Swatch Layout Option,
    Image name must same as color name and in lowercase.
    Use '-' instead of space. Examples (Black = black.png, Navy Blue = navy-blue.png).

    Upload images from >> Store Admin >> Settings >> Files

  3. Go to Store Admin >> Products >> Add Product >>

    In Tags sections, Enter all tags that you'd like to use to filter products. Have a look on below screenshot

    Note: Tags must be entered in Collection Page Sidebar Filter Blocks

Product Page


Settings

Go to theme customization > select "product page" from dropdown available at top left

  1. Product Layout
    There are 3 style to display product page
  2. Enable Image Zoom
    Allows you to zoomin image on product hover
  3. Enable Lightbox
    Allows you to view all the product images in larger view by popup
  4. Thumbnail Position
    You can set products thumbnail position either left, right or bottom.
  5. Show Product Navigation?
  6. Show Product Review?
  7. Show % Off Price? ie. % off lable say 20% off, 30% off, etc...
  8. Show Product Availability?
    Customer can view product is in stock or out of stock.
  9. Show Product Type?
  10. Show Vendor?
  11. Show Product SKU?
  12. Show Short Description below price
  13. Show Quantity Message?
    Customer can check how much quantity is left for products
  14. Show Countdown Time?
    Show Countdown Timer for product sale or other offer
  15. Show Dynamic Checkout Button?
    Customer can checkout quickly. No need to go on cart page
  16. Show Social Sharing Buttons?
    User can share products on social media
  17. Show Free Shipping Message?
    Set this shipping message from Theme Settings => General Options => Shipping Message
  18. Show Shipping Estimated Time?
    Set this shipping message from Theme Settings => General Options => Shipping Estimated
  19. Show Collections
  20. Show Product Tags?
  21. Select Variant Style - Select option either swatches or dropdown
  22. Swatch Type - Swatches Color, Image Swatches, Variant Images
  23. Swatch Size - Small, Medium, Large
  24. Swatch Style - Square, Round, Rounded Corner
  25. Fake Orders
    Set Fack orders and time to boost up sales!
  26. Fake visitors
    Set Fack visitoirs to boost up sales!
  27. Show Feature Points?
    You can display information globally ragarding payment, delivery, checkout or any others with icons
  28. Product Tabs
  29. Show and manage related products
  30. Show and manage Recently Viewed Products

Product Metafields

By default, Shopify does not allow you to add new custom field for product. So with BELLE we will help you to understand how to add custom field to your store. 

The first you need install this extension on your chrome by go to this link: http://shopifyfd.com/

Now go to product page, you need click to ShopifyFD icon and metafield will show

  1. Product Video

    namespace: meta
    key: video
    value: youtube url

    You need define metafield name like this and in value, you need to enter youtube video link

    Now you can see product video on product detail page

  2. Product Short Description

    namespace: meta
    key: short_des
    value: add html here

  3. Product Countdown

    namespace: meta
    key: countdown
    value: date in (mm/dd/yyyy) format

  4. Product Size Chart

    namespace: meta
    key: sizechart
    value: image or html code

    If you don't add data here, global data will appear in page (same data for all products) which you can add from customize >> Product Page >> Scroll down to "Show Tab 3"

  5. Product Instagram Tags

    namespace: meta
    key: insta-tag
    value: jacket ( any tag you like to use)

How to add Product Video thumbnail, Product Short Description and Size chart(Any graphic) per product ?

By default, Shopify does not allow you to add new custom field for product. So with belle we will help you understand how to add custom field to your store. 

The first you need install this extension on your chrome by go to this link: http://shopifyfd.com/

Now go to product page, you need click to ShopifyFD icon and metafield will show

For Video


You need define metafield name like this and in value, you need enter youtube video link

Now you can see product video on product detail page

Short Description (Optional)


Product Countdown


Size Chart Image Per Product (Optional)


If you don't upload this graphic, global graphic will appear in tabs (same graphic for all products) which you can add from customization section >> Product detail Settings

Product Variants


There are many styles to display product swatches

Checkout all the possible style for product variants

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


    Go to Store Admin >> Products >> Add Product >>

    Enter product title, add product images, add product tags, other details and now scroll down to Variants box and click on Add Variant

  2. When you select Image Swatches style to display product swatches, Color name and image name must be same and upload image(png image) under Settings=>Files. For example you have 2 colors (Black and Blue )for your product, then upload image named 'black-blue.png'

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

Theme Support


If you have any questions, please Feel free to submit a ticket at http://www.adornthemes.com/support/. We are happy to help you!