Customization

This page will explain all configuration available and how to edit each section appear on theme. Let's view the first homepage.

Homepage of Default Style

Use Fixed Vertical Menu layout across the whole site

fixed vertical menu layout

You can enable this layout in Theme Editor > Global > Layout, choose Left Sidebar:

Theme editor layout

Vertical mega menu vs. Slide down menu

Note: slide down menu only works with Fixed vertical menu layout.

Mega menu (default):

Mega menu

Slide down menu:

Slidedown menu

You can switch the default mega menu to slide down menu in Theme Editor > Header > tick to Showing sub-categories vertical:

subcategories vertical menu

Top Banner

Top Banner

The top banner can be showed / edited in admin page > Marketing > Banners. When you add / edit remember to choose Location is Top of Page.

Colors Customization

To customize colors of this section, go to admin page > Storefront Design > My Themes, click button Customize of the current theme to open the Theme Editor.

Click customize theme

Look into the options showing below:

Theme editor top banner

Header Styles

This theme support 3 different header styles: - Logo at left - Logo at center - Logo at right

Header Logo at left

Header Logo at center

Header Logo at right

To configure, open the Theme Editor, scroll down to section Logo, click to expand the logo options. Choose a certain option of Logo position, then click Refresh button appear after.

Change logo position

Welcome Text

Welcome text

This welcome text can be showed/hide in the Theme Editor > Header > Show welcome text:

Toggle show/ide welcome text

You can edit the text in the language file lang/en.json in Edit Theme Files:

Edit language for welcome text

Phone Number & Store Address

Header info text

Store address and phone number are pulled out from your store profile. You can edit it in Store Setup > Store Profile:

Edit Store Address and Phone

Social Media Icons

Social media icons on header

This social media icons group can be turned on/off in Theme Editor > Social Media Icons > Placement > Top/Right:

Configure social icons on header

To configure your social media links, go to admin page > Storefront Design > Design Options > Social Media section:

Edit social media links

Colors Customization

To customize colors of the header section, look into the options showing below in the Theme Editor:

Theme editor header

Main menu

This menu automatically show your web page links if visible.

You can hide this menu bar completely or enable custom content, custom links in this posible in Theme Editor > Header > Page Navigation:

theme editor page navigation

  • Hide Content Pages in Main Menu: if checked will hide all this menu bar completely.
  • Use manual links in Main Menu: if checked will allow you enter custom content or custom links in Marketing > Banners. Use this tool below to generate your own links.

Theme allow you input your own links manually in this menu area. First tick on the check box Use manual links in Main Menu in Theme Editor.

Go to Marketing > Banners, click button Create a Banner. In field Banner Content, click button HTML to open HTML Source Editor, input sample content below:

<ul id="emthemesModezBannersBlockStaticNavPages" class="navPages-list">
<li class="navPages-item"><a class="navPages-action" href="/">Home</a></li>
<li class="navPages-item"><a class="navPages-action" href="/about-us">About Us</a></li>
<li class="navPages-item"><a class="navPages-action" href="/contact">Contact Us</a></li>
<li class="navPages-item"><a class="navPages-action" href="/link-1">Link 1</a></li>
<li class="navPages-item"><a class="navPages-action" href="/link-2">Link 2</a></li>
</ul>

Or use button below to generate the code with your own banners:

banner below header

You can enable this banner on all pages or all other pages except homepage in Theme Editor > Banners > Banner after header:

configure banner after header

After enabled, you can edit banner content by go to Marketing > Banners, click button Create a Banner. Input:

  • Banner Name: whatever you want
  • Banner Content: click the square button HTML to open HTML source code editor.

Copy and paste the sample code below:

<div id="emthemesModezBannersBlockAfterHeader" class="container emthemesModezBannersBlockAfterHeader">
<div class="emthemesModez-section emthemesModez-section--banners-one">
<div class="emthemesModez-section-inner">
<div class="emthemesModez-bannersContainer emthemesModez-bannersContainer--one">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://placehold.it/1920x150?text=Content+or+Banner+can+turn+on/off+on+all+pages+or+other+pages" alt="After Header Position" /></a></div>
</div>
</div>
</div>
</div>
</div>

You can use button below to generate the code with your own banner image:

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

Home 1 Main Carousel

Edit the slideshow

Edit the slideshow in admin page > Storefront Design > Design Options:

Edit homepage carousel

Colors Customization

To customize color of the slideshow's elements, look into section Carousel in the Theme Editor:

Theme editor carousel

Hide the slideshow

To hide the slideshow on homepage, uncheck on the checkbox Show Carousel in section Carousel of the Theme Editor.

To display YouTube video on Homepage Carousel, go to Theme Editor > Carousel > input your YouTube video ID in input fields as showing below:

Edit carousel videos

Video 1 will be put on 1st slide, Video 3 will be put on 3rd slide and so on.

Note: you much upload images on slides at position 1 and position 3 in order to display video on these slides.

Example how slides added for displaying videos:

example editing carousel for showing videos

Height/Width ratio percent is percent of your video's height divide video's width, for example your video size is 1920x1080, input 56.25% to this field.

3 Banners on Homepage

3 banners on homepage

To show these banners on homepage, from your admin page > Marketing > Banners > click button Create a Banner. In field Banner Content, click button HTML to open HTML Source Editor, input content below:

<div id="emthemesModezBannersBlockHome01" class="emthemesModez-section  emthemesModez-section--banners-3x">
<div class="emthemesModez-section-inner">
<div class="emthemesModez-bannersContainer 
            emthemesModez-bannersContainer--onethird-x3 
            emthemesModez-bannersContainer--onethird-x3-1 
            ">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://tvlgiao.github.io/bigcommerce-themes/supermarket/demo/images/banner01.jpg" alt="Sample banner 1" /></a></div>
</div>
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://tvlgiao.github.io/bigcommerce-themes/supermarket/demo/images/banner02.jpg" alt="Sample banner 2" /></a></div>
</div>
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://tvlgiao.github.io/bigcommerce-themes/supermarket/demo/images/banner03.jpg" alt="Sample banner 3" /></a></div>
</div>
</div>
</div>
</div>

Or use button below to generate the code with your own banners:

Edit homepage 3 banners

Then click Update button to go back previous screen.

Choose Show on Page is Home Page.

Choose Location is Top of Page.

Show on Page & Location

Click Save button to finish.

You can freely edit the HTML above to change banner images or link but keep the HTML attribute id="emthemesModezBannersBlockHome01" unchanged.

Special products tabs

You can configure this section in Theme Editor > Homepage:

Theme Editor Special Products Tabs

Products By Category

Products by category on homepage

This section will show products by category. You can choose number of categories to display products. Categories are sorted by order specified in Product Categories admin manager.

Hot Categories

The Hot Categories appears on the right is sub-categories of the current category.

Hot categories

Configuration

To configure this section, go to Theme Editor > Homepage > Products by Category with Sorting Tabs:

Configure products by category

Top Categories

Top categories on homepage

This block show top categories and child categories sorted by order in Product Categories manager.

Configuration

You can configure number of categories to display in Theme Editor > Homepage > Top Categories:

Configure Top Categories

Fullwidth Banner on Homepage

fullwidth banner on homepage

To show these banners on homepage, from your admin page > Marketing > Banners > click button Create a Banner. In field Banner Content, click button HTML to open HTML Source Editor, input content below:

<div id="emthemesModezBannersBlockHome02" class="emthemesModez-section  emthemesModez-section--banners-one">
<div class="emthemesModez-section-inner">
<div class="emthemesModez-bannersContainer 
            emthemesModez-bannersContainer--one 
            emthemesModez-bannersContainer--one-1 
            ">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://tvlgiao.github.io/bigcommerce-themes/supermarket/demo/images/banner04.jpg" alt="sample fullwidth banner" /></a></div>
</div>
</div>
</div>
</div>

Or use button below to generate the code with your own banners:

Edit homepage fullwidth banner

Then click Update button to go back previous screen.

Choose Show on Page is Home Page.

Choose Location is Top of Page.

Show on Page & Location

Click Save button to finish.

You can freely edit the HTML above to change banner images or link but keep the HTML attribute id="emthemesModezBannersBlockHome02" unchanged.

Brand Carousel

To show this carousel on homepage, from your admin page > Marketing > Banners > click button Create a Banner. In field Banner Content, click button HTML to open HTML Source Editor, input content below:

<div id="emthemesModezBannersBlockHome03" class="emthemesModez-brandCarousel-container" data-section-type="brands-logo">
<div class="emthemesModez-brandCarousel" data-emthemesmodez-brand-carousel="">
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand01.png" alt="Sample Brand 1" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand02.png" alt="Sample Brand 2" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand03.png" alt="Sample Brand 3" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand04.png" alt="Sample Brand 4" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand05.png" alt="Sample Brand 5" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand01.png" alt="Sample Brand 6" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand02.png" alt="Sample Brand 7" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand03.png" alt="Sample Brand 8" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand04.png" alt="Sample Brand 9" /></a></div>
<div class="emthemesModez-brandCarousel-slide"><a href="#"><img src="https://tvlgiao.github.io/bigcommerce-themes/laparis/demo/images/brand05.png" alt="Sample Brand 10" /></a></div>
</div>
</div>

Or use button below to generate the code:

Edit homepage fullwidth banner

Then click Update button to go back previous screen.

Choose Show on Page is Home Page.

Choose Location is Top of Page.

Show on Page & Location

Click Save button to finish.

You can freely edit the HTML above to change banner images or link but keep the HTML attribute id="emthemesModezBannersBlockHome03" unchanged.

Special Product Columns

Special product columns

This block show bestselling products, featured products, new products in columns.

You can configure this block in Theme Editor > Homepage > Special Products Columns:

Configure special products columns

Newsletter

You can configure the newsletter block, show/hide or change color in Theme Editor > Footer > Newsletter:

Configure newsletter

Footer

You can change colors in Theme Editor > Footer:

Theme editor main footer

You can also show/hide about us block, pages, categories, brands, configure number of links to show.

Theme editor payment icons

To show/hide payment icons, go to Theme Editor > Payment Icons secitons, check or uncheck any icons you want to show or hide.

Theme editor credit links

To show/hide the credit links, go to Theme Editor > Footer section, tick or untick the checkboxes as showing above.

Banners on the Left Sidebar

Show a banner above Facebook Like Page block

sidebar banner 1

To show this banner, go to Marketing > Banners, click button Create a Banner. Input:

  • Banner Name: whatever you want
  • Banner Content: click the square button HTML to open HTML source code editor.

Copy and paste the sample code below:

<div class="sidebarBlock sidebarBlock--banner emthemesModezBannersBlockSidebar01">
<div class="emthemesModez-bannersContainer">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-figure"><a href="#"><img class="emthemesModez-banner-image" title="Sample Banner" src="https://placehold.it/270x450" alt="Sample Banner" /></a></div>
</div>
</div>
</div>

Or you can use this tool to generate your banner content:

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

Show banners & text block below Facebook Like Page block

sidebar banner 2

To show this banner and the text block, go to Marketing > Banners, click button Create a Banner. Input:

  • Banner Name: whatever you want
  • Banner Content: click the square button HTML to open HTML source code editor.

Copy and paste the sample code below:

<!-- Banner -->
<div class="sidebarBlock sidebarBlock--banner emthemesModezBannersBlockSidebar02">
<div class="emthemesModez-bannersContainer">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-figure"><a href="#"><img class="emthemesModez-banner-image" title="Fullscreen Banner" src="https://placehold.it/270x270" alt="Sample Banner" /></a></div>
</div>
</div>
</div>

<!-- Text Block -->
<div class="sidebarBlock sidebarBlock--textBlock sidebarBlock--mobileCollapsible emthemesModezBannersBlockSidebar02">
<h5 class="sidebarBlock-heading is-open" data-collapsible="#sidebar-textBlock01" data-collapsible-disabled-breakpoint="medium">Custom Block</h5>
<div id="sidebar-textBlock01" class="sidebarBlock-content is-open">
<p>Custom block displayed at the left sidebar. You can put your own content here: text, html, images, media... whatever you like.</p>
<p>Here are many similar sample content placeholders across the store. All editable from admin panel.</p>
<p><a class="button" href="#">Sample Button</a></p>
</div>
</div>

<!-- Banner -->
<div class="sidebarBlock sidebarBlock--banner emthemesModezBannersBlockSidebar02">
<div class="emthemesModez-bannersContainer">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-figure"><a href="#"><img class="emthemesModez-banner-image" title="Fullscreen Banner" src="https://placehold.it/270x450" alt="Sample Banner" /></a></div>
</div>
</div>
</div>

Or you can use this tool to generate your banner & text block content:

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

Facebook Like Page on the Left Sidebar

Facebook like page

You can show your own Facebook Like Page block or hide it completely.

From Theme Editor > Social Media Icons > Enter your facebook page name in Facebook page field. For example if your Facebook page URL is https://www.facebook.com/papathemes/ you should only input papathemes.

To hide this block, just leave it empty value.

Category Page - Content Top Banner

content top banner on category page

You can enable this banner on all category pages in Theme Editor > Banners > Top banner on category page set to Show.

After enabled, you can edit banner content by go to Marketing > Banners, click button Create a Banner. Input:

  • Banner Name: whatever you want
  • Banner Content: click the square button HTML to open HTML source code editor.

Copy and paste the sample code below:

<div id="emthemesModezBannersBlockBeforeCategory" class="container emthemesModezBannersBlockBeforeCategory">
<div class="emthemesModez-section emthemesModez-section--banners-one">
<div class="emthemesModez-section-inner">
<div class="emthemesModez-bannersContainer emthemesModez-bannersContainer--one">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://placehold.it/1920x200?text=Content+or+Banner+can+turn+on/off+on+category+pages" alt="Before Category Position" /></a></div>
</div>
</div>
</div>
</div>
</div>

You can use button below to generate the code with your own banner image:

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

Product Page - Banners

banners on product page

Theme supports various banner positions on product pages. You can enable these banner position in Theme Editor > Banners:

  • Banner below ratings on product page
  • Banner below Add To Cart button on product page
  • Banner above description tabs on product page

After enabled, you can edit banner content by go to Marketing > Banners, click button Create a Banner. Input:

  • Banner Name: whatever you want
  • Banner Content: click the square button HTML to open HTML source code editor.

Copy and paste the sample code below:

For banner below ratings:

<div id="emthemesModezBannersBlockAfterRating" class="emthemesModezBannersBlockAfterRating">
<div class="emthemesModez-section emthemesModez-section--banners-one">
<div class="emthemesModez-section-inner">
<div class="emthemesModez-bannersContainer emthemesModez-bannersContainer--one">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://placehold.it/500x80?text=Content+or+Banner+can+turn+on/off+on+product+pages" alt="After product ratings on product page" /></a></div>
</div>
</div>
</div>
</div>
</div>

For banner below Add to Cart button:

<div id="emthemesModezBannersBlockAfterAddToCartButton" class="emthemesModezBannersBlockAfterAddToCartButton">
<div class="emthemesModez-section emthemesModez-section--banners-one">
<div class="emthemesModez-section-inner">
<div class="emthemesModez-bannersContainer emthemesModez-bannersContainer--one">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://placehold.it/500x80?text=Content+or+Banner+can+turn+on/off+on+product+pages" alt="After add to cart button on product page" /></a></div>
</div>
</div>
</div>
</div>
</div>

For banner above description tabs:

<div id="emthemesModezBannersBlockBeforeDescription" class="emthemesModezBannersBlockBeforeDescription">
<div class="emthemesModez-section emthemesModez-section--banners-one">
<div class="emthemesModez-section-inner">
<div class="emthemesModez-bannersContainer emthemesModez-bannersContainer--one">
<div class="emthemesModez-banner">
<div class="emthemesModez-banner-container"><a href="#"><img class="emthemesModez-banner-image" src="https://placehold.it/1920x250?text=Content+or+Banner+can+turn+on/off+on+product+pages" alt="Before description tabs on product page" /></a></div>
</div>
</div>
</div>
</div>
</div>

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

yellow style banner sizes

blue style banner sizes

product page banner sizes

Display Sale badget & custom badges

product badges

Sale badges

You need to input both Sale Price and Retail Price in your product:

edit product sale prices

In Theme Editor > Products > Product Sale Badges, choose to display product Sale badge:

enable badges on theme editor

Custom badges

To display custom badges, enable custom badges option in Theme Editor. Edit your product, input custom field __badge and input badget text in the custom field value:

edit product badges in custom fields

Add our own CSS (Sass) code

To add your own custom CSS code you can edit the file assets/scss/_theme-custom.scss in Edit Theme Files editor:

Edit file _theme-custom.scss

Note:

  • Copy / backup this file for future theme upgrade.
  • Add custom CSS code required CSS (or Sass) programming skill. It's not recommended for new users.