Customization

READ FIRST - Customization Guideline

Contact for Support: contact@papathemes.com

How to add your own CSS / SCSS:

  • Option 1: Edit file assets/scss/_lightbulbs-custom.scss
  • Option 2: Add custom CSS in <style>...</style> into Storefront > Footer Scripts.

How to add your own Javascript:

  • Option 1: Add custom JS in <script>...</script> into Storefront > Footer Scripts.
  • Option 2: Add custom JS into Storefront > Scripts Manager.

Edit HTML:

For sections with the prefix "lightbulbs", edit the file templates/lightbulbs-custom.html. For other sections, edit the file templates/chiara-custom.html.


WARNING: EDIT OTHER FILES WILL PREVENT UPGRADING THE THEME IN THE FUTURE!

Headers

Headers

Theme supports 2 header with logo position left or right. It is configured in Theme Editor > Header > Logo position.

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

Mega Menu vs. Standard Menu

Menus

Theme supports Mega Menu or Standard Menu. You can configure in Theme Editor > Header > Main Navigation > Navigation design.

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.

Top Banner

top banner

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

Or you can use custom top banner in Theme Editor > Header > Banner Top Custom? top banner 2

Footers

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

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.

Homepage Sections Manager

You can select the sections displayed on the homepage (maximum 10 sections) in Theme Editor > Homepage > Sections.

Homepage Sections Manager

Homepage Banners Style 1

homepage 3 banners

  • You can change content within the HTML code: background image, banner image, banner content, button link... by edit the file templates/lightbulbs-custom.html.
  • You must change {{#if false}} to {{!#if false}} and {{/if}} to {{!/if}} or remove these lines before the changes can be applied.

homepage 3 banners

  • HTML Content:
<section class="lightbulbs-section lightbulbs-fullwidth lightbulbs-banners lightbulbs-section--banner1" style="background-image:url(//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-bg.jpg)">
    <div class="container">
        <div class="banner-main-section banner--top">
            <div class="banner-area left-area">
                <div class="heading">Ceiling <br>Lights</div>
                <div class="desc">Add some shine with a ceiling lights!</div>
                <div class="action"><a class="button" href="#">Shop Now</a></div>
            </div>
            <div class="banner-area right-area">
                <div class="video-area" data-lightbulbs-modal-wrap>
                    <div data-lightbulbs-modal-content>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/-vtBgNxMyZI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                    </div>
                    <div data-toggle="modal" data-target="#videomodal">
                        <img class="image-bkg" src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-1.jpg"
                            alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="banner-main-section banner--middle">
            <div class="banner-area left-area">
                <div class="banner-slider" 
                    data-slick='{
                        "dots": true,
                        "mobileFirst": true,
                        "slidesToShow": 1,
                        "slidesToScroll": 1,
                        "vertical": true,
                        "verticalSwiping": true,
                        "autoplay": true,
                        "autoplaySpeed": 2000,
                        "lazyLoad": "anticipated",
                        "arrows": false
                    }'>
                    <div class="banner-element">
                        <a href="#">
                            <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-2.jpg"
                                alt="">
                        </a>
                    </div>
                    <div class="banner-element">
                        <a href="#">
                            <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-3.jpg"
                                alt="">
                        </a>
                    </div>
                    <div class="banner-element">
                        <a href="#">
                            <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-4.jpg"
                                alt="">
                        </a>
                    </div>
                    <div class="banner-element">
                        <a href="#">
                            <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-5.jpg"
                                alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="banner-area right-area">
                <div class="heading">Floor &amp; <br>Table Lamps</div>
                <div class="desc">Add some shine with a floor lamp!<br> Our modern floor lamps</div>
                <div class="action"><a class="button" href="#">Shop Now</a></div>
            </div>
        </div>
        <div class="banner-main-section banner--bottom">
            <div class="banner-area left-area">
                <div class="heading">Wall <br>Lights</div>
                <div class="desc">Add some shine with a ceiling lights!</div>
                <div class="action"><a class="button" href="#">Shop Now</a></div>
            </div>
            <div class="banner-area right-area">
                    <a href="#">
                        <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-6.jpg" alt="">
                    </a>
                    <span class="img-item"><img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-1-7.png"
                            alt=""></span>
            </div>
        </div>
    </div>
</section>

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

Homepage Banners Style 2

homepage 3 banners

  • You can change content within the HTML code: background image, banner image, banner content, button link... by edit the file templates/lightbulbs-custom.html.
  • You must change {{#if false}} to {{!#if false}} and {{/if}} to {{!/if}} or remove these lines before the changes can be applied.

homepage 3 banners

  • HTML Content:
<section class="lightbulbs-section lightbulbs-fullwidth lightbulbs-banners lightbulbs-section--banner2" style="background-image:url(//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-2-bg.jpg)">
    <div class="container">
        <div class="banner-main-section banner--top">
            <div class="banner-area left-area">
                <a href="#">
                    <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-2-1.gif" alt="">
                </a>
            </div>
            <div class="banner-area right-area">
                <div class="heading">LED Light Bulds</div>
                <div class="desc">Add some shine with a LED light! <br>Our modern LED light</div>
                <div class="action"><a class="button" href="#">Shop Now</a></div>
            </div>
        </div>
        <div class="banner-main-section banner--middle">
            <div class="banner-area left-area">
                <div class="heading">Outdoor <br>&amp; Landscape</div>
                <div class="desc">Add some shine with a ceiling lights!</div>
                <div class="action"><a class="button" href="#">Shop Now</a></div>
            </div>
            <div class="banner-area right-area">
                <a href="#">
                    <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-2-2.jpg" alt="">
                </a>
            </div>
        </div>
        <div class="banner-main-section banner--bottom">
            <div class="banner-area left-area">
                <div class="banner-slider" 
                    data-slick='{
                        "dots": true,
                        "mobileFirst": true,
                        "slidesToShow": 1,
                        "slidesToScroll": 1,
                        "vertical": true,
                        "verticalSwiping": true,
                        "autoplay": true,
                        "autoplaySpeed": 2000,
                        "lazyLoad": "anticipated",
                        "arrows": false
                    }'>
                    <div class="banner-element">
                        <a href="#">
                            <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-2-3.jpg" alt="">
                        </a>
                    </div>
                    <div class="banner-element">
                        <a href="#" tabindex="0">
                            <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-2-4.jpg" alt="">
                        </a>
                    </div>
                    <div class="banner-element">
                            <a href="#">
                                <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-2-5.jpg" alt="">
                            </a>
                    </div>
                    <div class="banner-element">
                        <a href="#">
                            <img src="//cdn8.bigcommerce.com/s-3qvmac4a37/product_images/uploaded_images/lightbulbs-banner-section-2-6.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="banner-area right-area">
                <div class="heading">Lighting Accessories</div>
                <div class="desc">Explore brilliant selection of home lighting hardware and accessories  like light bulbs, lamp adapter kits.</div>
                <div class="action"><a class="button" href="#">Shop Now</a></div>
            </div>
        </div>
    </div>
</section>

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

Homepage Special Blog Posts

homepage special blog

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

  • Text Color

homepage special blog

  • You can change content within the HTML code: heading image, read more button text... by edit the file templates/lightbulbs-custom.html
  • You must change {{#if false}} to {{!#if false}} and {{/if}} to {{!/if}} or remove these lines before the changes can be applied.

homepage special blog

Homepage products section

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

Homepage products section 2

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.

homepage brands carousel

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

  • Banner Name: Brands carousel (brands-carousel)
  • Banner Content: Click on the HTML to edit HTML source.
<ul class="chiara-brandsCarousel-slider" data-remote-brand-position="chiara-brand-banner-homepage">
<li class="chiara-brandsCarousel-item"><a title="Brand 1" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand1.jpg" alt="Brand 1" /> </a></li>
<li class="chiara-brandsCarousel-item"><a title="Brand 2" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand2.jpg" alt="Brand 2" /> </a></li>
<li class="chiara-brandsCarousel-item"><a title="Brand 3" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand3.jpg" alt="Brand 3" /> </a></li>
<li class="chiara-brandsCarousel-item"><a title="Brand 4" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand4.jpg" alt="Brand 4" /> </a></li>
<li class="chiara-brandsCarousel-item"><a title="Brand 5" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand5.jpg" alt="Brand 5" /> </a></li>
<li class="chiara-brandsCarousel-item"><a title="Brand 6" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand6.jpg" alt="Brand 6" /> </a></li>
<li class="chiara-brandsCarousel-item"><a title="Brand 7" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand7.jpg" alt="Brand 7" /> </a></li>
<li class="chiara-brandsCarousel-item"><a title="Brand 8" href="#"> <img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/brand8.jpg" alt="Brand 8" /> </a></li>
</ul>

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

  • Show on Page: Home 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:

  • Banner Name: Sidebar banner on category pages (chiara-sidebar-category-banner1)
  • Banner Content: Click on the HTML to edit HTML source.
<div data-remote-banner-position="chiara-sidebar-category-banner1"><img title="banner-sidebar.jpg" src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/banner-sidebar.jpg" alt="banner-sidebar.jpg"/>
<div class="sidebar-banner-content">
<h4 class="sidebar-banner-title">beauty</h4>
<h5 class="sidebar-banner-subtitle">from &pound;29.99</h5>
<a class="sidebar-banner-link" href="#">shop now</a></div>
</div>

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

  • Show on Page: Home Page
  • Location: Top of Page
  • Banner Name: Sidebar banner on category pages (chiara-sidebar-category-banner2)
  • Banner Content: Click on the HTML to edit HTML source.
<div data-remote-banner-position="chiara-sidebar-category-banner2"><img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/banner-sidebar.jpg" alt="banner-sidebar.jpg"/>
<div class="sidebar-banner-content">
<h4 class="sidebar-banner-title">beauty</h4>
<h5 class="sidebar-banner-subtitle">from &pound;29.99</h5>
<a class="sidebar-banner-link" href="#">shop now</a></div>
</div>

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

  • Show on Page: Home Page
  • Location: Top of Page
  • Banner Name: Sidebar banner on brand pages (chiara-sidebar-brand-banner1)
  • Banner Content: Click on the HTML to edit HTML source.
<div data-remote-banner-position="chiara-sidebar-brand-banner1"><img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/banner-sidebar.jpg" alt="banner-sidebar.jpg"/>
<div class="sidebar-banner-content">
<h4 class="sidebar-banner-title">beauty</h4>
<h5 class="sidebar-banner-subtitle">from &pound;29.99</h5>
<a class="sidebar-banner-link" href="#">shop now</a></div>
</div>

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

  • Show on Page: Home 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.
<div data-remote-banner-position="chiara-sidebar-brand-banner2"><img src="https://cdn8.bigcommerce.com/s-o0llnqp9lx/product_images/uploaded_images/banner-sidebar.jpg" alt="banner-sidebar.jpg"/>
<div class="sidebar-banner-content">
<h4 class="sidebar-banner-title">beauty</h4>
<h5 class="sidebar-banner-subtitle">from &pound;29.99</h5>
<a class="sidebar-banner-link" href="#">shop now</a></div>
</div>

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

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

New Products

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

Configure settings for product pages in Theme Editor > Products.

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