Customization

Headers

Theme supports 3 header with logo position left, right or center. It is configured in Theme Editor > Header & Footer > Logo position.

You can configure Header style, logo size, colors, fonts in Theme Editor > Header & Footer.

--- Mega Menu vs. Standard Menu

Menus

Theme supports both Mega Menu and Standard Menu. You can configure in Theme Editor > Header & Footer > Main Navigation > Navigation design.

The menu is automatically popuplated from your product categories and web pages (in Storefront > Web Pages). You can hide all web pages on this menu by tick on the option Hide web pages in main navigation in Theme Editor > Header & Footer.

--- Top Banner

top banner

You can edit the top banner on the homepage, category pages, product pages in Marketing > Banner Manager.

Footers

Configure the footer in Theme Editor > Footer section.

  • You can change colors.
  • Show/hide web page links, categories, brands.
  • Add custom links in maximum 3 columns.
  • Newsletter form support top or right position of the footer.
  • Change colors of the copyright section.
  • Show/hide copyright links.
  • Show/hide payment icons.

Home Page

--- Customizing Sections

You can customize the content display on Home Page, rearrange content blocks, show or hide them from Theme Editor > Home Page > Sections.

Check out this video for quick start:

Main carousel

Main carousel displays on the home page can be input in Storefront > Home Page Carousel.

You can configure carousel settings in Theme Editor > Home Page > Carousel section. Here you can turn on/off this carousel, configure colors, content position and so on.

Our recommended image size is 1920x770px.

--- Banners

homepage 5 banners

Create a new banner in Marketing > Banners.

  • Banner Name: 5 banners below the main carousel (home-banner1)
  • Banner Content: Click on the HTML to edit HTML source.
<div class="chiara-section chiara-section--banners" data-local-banner-position="chiara-home-banner1">
    <div class="chiara-banners">
        <ul class="chiara-banners-list">
            <li class="chiara-banners-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner1.jpg?t=1534872898" alt="496x496" /><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner1a.png?t=1534872899" alt="496x496" /></a></li>
            <li class="chiara-banners-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner2.jpg?t=1534872900" alt="496x496" /><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner2a.png?t=1534872900" alt="496x496" /></a></li>
            <li class="chiara-banners-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner3.jpg?t=1534872901" alt="496x496" /><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner3a.png?t=1534872901" alt="496x496" /></a></li>
        </ul>
        <ul class="chiara-banners-list">
            <li class="chiara-banners-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner4.jpg?t=1534872902" alt="747x496" /><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner4a.png?t=1534872903" alt="747x496" /></a></li>
            <li class="chiara-banners-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner5.jpg?t=1534872903" alt="747x496" /><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner5a.png?t=1534872904" alt="747x496" /></a></li>
        </ul>
    </div>
</div>

Or use button below to generate HTML code with your custom content:

  • Show on Page: Home Page
  • Location: Top of Page

Our recommended image size is 496x431px for the first row and 747x430px for the second row.

Check out the video step by step how to create these banners:

Fullwidth Banner

homepage fullwidth banner

Create a new banner in Marketing > Banners.

  • Banner Name: Full width banner (home-banner2)
  • Banner Content: Click on the HTML to edit HTML source.
<div class="chiara-section chiara-section--banners" data-local-banner-position="chiara-home-banner2">
    <div class="chiara-banners">
        <ul class="chiara-banners-list">
            <li class="chiara-banners-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner6.jpg?t=1534874551" alt="1500x300" /><img src="https://cdn7.bigcommerce.com/s-g0pakqdzwl/product_images/uploaded_images/furniture-banner6a.png?t=1534874552" alt="1500x300" /></a></li>
        </ul>
    </div>
</div>

Or use button below to generate HTML code with your custom content:

  • Show on Page: Home Page
  • Location: Top of Page

Our recommended image size is 1500x306px.

Default style:

Homepage new products

Parallax style:

Homepage featured products

Configure New Products, Featured Products, Bestselling Products showing on the home page in Theme Editor > Homepage:

  • Number of products to display.
  • Heading of the new, featured, bestselling product blocks.
  • Sub-heading.
  • Columns (number of products per row).
  • Columns on tablet.
  • Columns on mobile.
  • Type (Grid or List).
  • Style (default or parallax).

Our recommended parallax background image size is 1720x450px.

--- Categories List

categories list

Configure categories list in Theme Editor > Homepage > Categories List:

  • Categories ID: input your category IDs seperated by a comma. If not specify, categories will be display in default order automatically. Example: 40,25. Also check How to find category ID.
  • Number of categories to display.
  • Number of sub-categories to display.
  • Heading
  • Subheading
  • Show banners? If checked, input the banner image urls in the below input boxes to display beside the category names.
  • Banner 1 to Banner 10: Upload your banner images in Storefront > Image Manager and copy links to here. Example: /product_images/uploaded_images/furniture-home-cat1.jpg. Recommended image size is 400x572px. For Fashion style, recommended image size is 400x454px.
  • Show on desktop?
  • Show on tablet?
  • Show on mobile?

Check out this video how to display the images:

--- Recent Blog Posts

homepage recent blog

Configure Recent Blog section on the home page in Theme Editor > Home Page > Recent Blog:

  • Number of posts
  • Display Type
  • Heading
  • Subheading

All blog images should have same size to have the best visual display. No image size is restricted.

--- Instagram Photos Feed

homepage instagram

Configure Instagram section on the home page in Theme Editor > Home Page > Instagram:

  • Token Access: Use this tool to generate your Instagram token access code: https://bit.ly/2rpaWxU.
  • Number of photos to display.
  • Columns (or photos per row).
  • Type: Boxed - display like Furniture demo. Fullwidth - display like Fashion demo.
  • Heading.
  • Subheading.
  • Image fit: Cover or Contain.

homepage brands carousel

To display the images carousel, create a new banner in Marketing > Banners:

  • Banner Name: Brands carousel (home-banner3)
  • Banner Content: Click on the HTML to edit HTML source.
<div class="chiara-section chiara-section--brandsCarousel" data-local-banner-position="chiara-home-banner3">
    <div class="chiara-brandsCarousel">
        <ul class="chiara-brandsCarousel-slider" data-brands-slick="">
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand01.png" alt="brand01" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand02.png" alt="brand02" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand03.png" alt="brand03" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand04.png" alt="brand04" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand05.png" alt="brand05" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand01.png" alt="brand06" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand02.png" alt="brand07" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand03.png" alt="brand08" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand04.png" alt="brand09" /></a></li>
            <li class="chiara-brandsCarousel-item"><a href="#"><img src="https://cdn7.bigcommerce.com/s-esi1aufjsk/product_images/uploaded_images/brand05.png" alt="brand10" /></a></li>
        </ul>
    </div>
</div>

Or use button below to generate HTML code with your custom content:

  • Show on Page: Home Page
  • Location: Top of Page

Our recommended image size is 220x100px.

Category & Brand Pages

To display custom banners on category pages or brand pages, create a new banner in Marketing > Banners:

--- Top & bottom banners on all categories

category top banner on all pages

  • In Banner Content, click HTML button to input HTML code:
<!--
  -- TOP BANNER ABOVE PRODUCTS LIST
  -->
<div data-remote-banner-position="chiara-category-banner1"><a href="#"><img title="1500x360" src="//placehold.it/1500x360" alt="1500x360" /></a></div>

<!--
  -- BOTTOM BANNER BELOW PRODUCTS LIST
  -->
<div data-remote-banner-position="chiara-category-banner3"><a href="#"><img title="1500x360" src="//placehold.it/1500x360" alt="1500x360" /></a></div>
  • Show on Page: choose Search Results Page - IMPORTANT.
  • Location: Top of Page.

Our recommended image size is 1500x360px.

Watch this video for a step by step tutorial:

--- Top & bottom banners on a specific category

Edit the category, in Description field, click HTML button to input HTML code:

<!-- 
  -- TOP BANNERS ABOVE PRODUCTS LIST 
  -->
<div class="chiara-banners u-hiddenVisually-mobile" data-local-banner-position="chiara-category-banner2">
<ul class="chiara-banners-list">
<li class="chiara-banners-item"><a href="#"><img src="//placehold.it/670x520" alt="670x520" /></a></li>
<li class="chiara-banners-item"><a href="#"><img src="//placehold.it/670x520" alt="670x520" /></a></li>
<li class="chiara-banners-item"><a href="#"><img src="//placehold.it/670x520" alt="670x520" /></a></li>
</ul>
</div>

<!-- 
  -- BOTTOM BANNERS BELOW PRODUCTS LIST 
  -->
<div class="chiara-banners u-hiddenVisually-mobile" data-local-banner-position="chiara-category-banner4">
<ul class="chiara-banners-list">
<li class="chiara-banners-item"><a href="#"><img src="//placehold.it/670x520" alt="670x520" /></a></li>
<li class="chiara-banners-item"><a href="#"><img src="//placehold.it/670x520" alt="670x520" /></a></li>
<li class="chiara-banners-item"><a href="#"><img src="//placehold.it/670x520" alt="670x520" /></a></li>
</ul>
</div>

Our recommended image size is 670x520px.

--- Top banner on all brands

  • In Banner Content, click HTML button to input HTML code:
<div data-remote-banner-position="chiara-brand-banner1"><a href="#"><img title="1500x360" src="//placehold.it/1500x360" alt="1500x360" /></a></div>
  • Show on Page: Search Results Page
  • Location: Top of Page

--- Custom banners on the sidebar

Theme support custom banners display on the sidebar for category pages and brand pages.

To enable these banners, open Theme Editor > Sidebar, tick on these options:

  • Show banner #1 on category pages
  • Show banner #2 on category pages
  • Show banner #1 on brand pages
  • Show banner #2 on brand pages

Create a new banner in Marketing > Banners:

Sidebar banner1

  • Banner Name: Sidebar banner on category pages (chiara-sidebar-category-banner1)
  • Banner Content: Click on the HTML to edit HTML source.
<p data-remote-banner-position="chiara-sidebar-category-banner1"><a href="#"><img src="https://placehold.it/302x302" alt="302x302" /></a></p>

Or use button below to generate HTML code with your custom content:

  • Show on Page: Search Results Page
  • Location: Top of Page

Our recommended image size is 302x302px.

Sidebar banner2

  • Banner Name: Sidebar banner on category pages (chiara-sidebar-category-banner2)
  • Banner Content: Click on the HTML to edit HTML source.
<p data-remote-banner-position="chiara-sidebar-category-banner2"><a href="#"><img src="https://placehold.it/302x500" alt="302x500" /></a></p>

Or use button below to generate HTML code with your custom content:

  • Show on Page: Search Results Page
  • Location: Top of Page

Our recommended image size is 302x500px.

  • Banner Name: Sidebar banner on brand pages (chiara-sidebar-brand-banner1)
  • Banner Content: Click on the HTML to edit HTML source.
<p data-remote-banner-position="chiara-sidebar-brand-banner1"><a href="#"><img src="https://placehold.it/302x302" alt="302x302" /></a></p>

Or use button below to generate HTML code with your custom content:

  • Show on Page: Search Results Page
  • Location: Top of Page
  • Banner Name: Sidebar banner on brand pages (chiara-sidebar-brand-banner2)
  • Banner Content: Click on the HTML to edit HTML source.
<p data-remote-banner-position="chiara-sidebar-brand-banner2"><a href="#"><img src="https://placehold.it/302x500" alt="302x500" /></a></p>

Or use button below to generate HTML code with your custom content:

  • Show on Page: Search Results Page
  • Location: Top of Page

--- New Products on sidebar

Sidebar new products

Configure in Theme Editor > Sidebar:

  • New products: number of products to display.

--- Facebook likes & chat box

sidebar facebook

Configure in Theme Editor > Sidebar, input your facebook page name in Facebook page text box. If your facebook page URL is https://facebook.com/papathemes, input only papathemes. Make sure your Facebook page is public for anyone in order to display on your store.

Product Pages

-- Custom content placement

product page banner placement

Display custom content on all product pages under product ratings:

Create a new banner in Marketing > Banners:

-- Banner Content click HTML button to input HTML code:

<div data-remote-banner-position="chiara-productpage-banner1">
  ADD YOUR CUSTOM CONTENT HERE...
</div>
  • Show on Page: Search Results Page
  • Location: Top of Page

Display custom content on a specific product page under product ratings:

Edit a product, in Description field, click HTML button to input HTML code:

<div data-local-banner-position="chiara-productpage-banner2">
  ADD YOUR CUSTOM CONTENT HERE...
</div>

Display custom content on all product pages under add to cart button:

Create a new banner in Marketing > Banners:

-- Banner Content click HTML button to input HTML code:

<div data-remote-banner-position="chiara-productpage-banner3">
  ADD YOUR CUSTOM CONTENT HERE...
</div>
  • Show on Page: Search Results Page
  • Location: Top of Page

Display custom content on a specific page under add to cart button:

Edit a product, in Description field, click HTML button to input HTML code:

<div data-local-banner-position="chiara-productpage-banner4">
  ADD YOUR CUSTOM CONTENT HERE...
</div>

--- Add to Cart & Buy Now button

Theme allows to display Add to Cart or Buy Now button or both. Configuring this option in Theme Editor > Storewide > Purchase Options > Show Add to Cart & Buy Now as the screenshot below:

Configure Add to Cart & Buy Now button

--- Product page settings

Configure settings for product pages in Theme Editor > Products.

Settings & Features

--- Infinite product loading

Theme support infinite product loading or infinite scroll on category pages, brand pages and search results pages. It is automatically enabled by default. You can configure this option in Theme Editor > Products > Infinite Scroll:

  • Category pages
  • Brands pages
  • Brand pages
  • Search pages

--- Product Card & Color Swatches

product card

Configure how products display on listing in Theme Editor > Products > Product cards:

  • Product title color & hover color.
  • Button text color & background color.
  • Show brand
  • Show color swatches: To display color swatches for product options with type "Swatches".

--- Bottom bar on mobile

mobile bottom bar

Configure this bottom bar in Theme Editor > Footer > Bottom bar on mobile:

  • Background color
  • Text color
  • Active color
  • Icon size
  • Font size
  • Show Shop by Brands in Store panel: Display "Show by Brands" link in the menu panel when lick on the Store icon.

Contact info

mobile contact info

Configure contact info to display when click the Contact icon in Theme Editor > Storewide > Contact info:

  • Email
  • Phone number
  • Call text
  • Contact page URL
  • Contact link text