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

Promotion Content on Top Left of Header

Promotion content on top left of header

To display custom content at this position, go to Theme Editor > Header, tick on Show custom content after welcome text, save & publish:

Theme editor - show custom content after welcome text

Then, create a new banner content in Marketing > Banners as showing below:

Edit banner Promo Text on top left of header

Banner Content: Click button HTML to open HTML Source Editor and input sample content below:

<div class="emthemesModezBannersBlockTopHeaderBanner01"><strong>WE PROVIDE HIGH QUALITY PRODUCTS, GREAT SERVICE AND QUICK SHIPPING</strong></div>

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

Note: Don't remove emthemesModezBannersBlockTopHeaderBanner01.

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

Custom Links on Top Right of Header

To display custom content at this position, go to Theme Editor > Header > Top Bar, tick on Show extra links, save & publish:

theme-editor-show-extra-links-topbar

Then, create a new banner content in Marketing > Banners as showing below:

Edit banner custom links on top right of header

Banner Content: Click button HTML to open HTML Source Editor and input sample content below:

<ul class="navUser-section emthemesModezBannersBlockTopHeaderBanner02">
<li class="navUser-item"><a class="navUser-action" href="#">FAQs</a></li>
<li class="navUser-item"><a class="navUser-action" href="/contact">Contact</a></li>
<li class="navUser-item"><a class="navUser-action" href="#">Track Order</a></li>
<li class="navUser-item"><a class="navUser-action" href="#">Reviews</a></li>
</ul>

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

Note: Don't remove emthemesModezBannersBlockTopHeaderBanner02.

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

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:

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

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

Show Banner per Category

products-by-category-banner

To show custom banner image per products by category block, tick on option Show banner in Theme Editor > Homepage > Products by Category with Sorting Tabs:

theme-editor-show-banner-on-products-by-category

Then go to Storefront > Image Manager, upload your banner images with appropriated name: products-by-category-{i}.jpg where {i} is replaced by category order starting from 1.

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

Show Thumbnails

theme-editor-show-thumbnails-of-top-categories

To show thumbnail images beside each category, tick on option Show thumbnails in Theme Editor > Homepage > Top Categories Of This Month.

Then go to Storefront > Image Manager, upload your thumbnail images with appropriated name: categories-list-thumbnail-{i}.jpg where {i} is replaced by category order starting from 1.

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

Recent Posts

To show recent posts on homepage, go to Theme Editor > Homepage > set Recent blog posts is number of posts you want to show up.

Instagram

To show your Intagram photos on homepage, go to Theme Editor > Homepage > Instagram, input your Access Token code and User ID.

Choose Number of photos to show up.

Newsletter Popup

theme-editor-newsletter-popup

To configure Newsletter Popup, go to Theme Editor > Newsletter Popup.

To edit content of popup, add a new banner in Marketing > Banners:

edit-banner-newsletter-popup

Banner Content: Click button HTML to open HTML Source Editor and input sample content below:

<div id="emthemesModezBannersBlockNewsletterPopup" class="newsletterPopup">
<div class="newsletterPopup-image"><img src="https://placehold.it/300x375" alt="" /></div>
<div class="newsletterPopup-content">
<h3 class="newsletterPopup-heading">Subscribe to our newsletter</h3>
<div class="newsletterPopup-description">Sign up here to get the latest news, updates and special offers delivered directly to your inbox.</div>
<div id="newsletterPopup-form-placeholder" class="newsletterPopup-form"><span class="u-hiddenVisually" style="color: red;">FORM SHOWS HERE - DO NOT DELETE THIS RED LINE</span></div>
</div>
</div>

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

Note: Don't remove emthemesModezBannersBlockNewsletterPopup.

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

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

Product Page - Custom Tabs

To add custom tabs and product page, edit your product description, click on HTML button to switch on HTML editor mode:

edit-product-custom-tabs

Copy and paste custom HTML code below into end of product description HTML content:

<div data-custom-tab>
<p data-custom-tab-title>Custom Tab 1</p>
<p>Tab 1 content etc...</p>
</div>

<div data-custom-tab>
<p data-custom-tab-title>Custom Tab 2</p>
<p>Tab 2 content etc...</p>
</div>

You can add many tabs as you want. replace tab title in <p data-custom-tab-title> and tab content below this element.

Product Page - Shipping Date Notification (BETA)

shipping-date-notification

Warning: This feature is Beta testing. We do not guarantee with work as your expectation.

This notification displays estimated shipping automatically.

Enable Banner below Add To Cart button on product page in Theme Editor > Banners.

Next, create a banner in Marketing > Banners:

edit-banner-for-shipping-date-notification

Content:

<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">
<p data-blackout-dates="02-05,03-01,05-02" data-deadline-time="13" data-shipping-day="2" data-time-offset="-5"><strong>Want it on <span data-shipping-date="dddd, MMM. d">***</span>?<br /></strong> Choose <strong>Priority Mail</strong> at checkout.</p>
</div>
</div>
</div>
</div>
</div>
</div>
  • data-blackout-dates="02-05,03-01,05-02": Configure backout dates of year
  • data-deadline-time="13": Configure deadline time when postal service is closed.
  • data-shipping-day="2": Configure shipping days.
  • data-time-offset="-5": Configure your time offset.
  • data-shipping-date="dddd, MMM. d": Configure print out date format.

Note: Don't remove emthemesModezBannersBlockAfterAddToCartButton.

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

Next, insert this custom javascript in Storefront > Footer Scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<script>
// <!--
$(function(e){if(e("body").hasClass("papaSupermarket-page--pages-product"))var t=setInterval(function(){var a=e("#emthemesModezBannersBlockAfterAddToCartButton");if(a.length>0){clearInterval(t);var i=a.find("[data-deadline-time]");if(i.length>0){var n=parseInt(i.data("deadline-time"),10),r=parseInt(i.data("shipping-day"),10),s=[];i.data("blackout-dates").split(",").forEach(function(e){var t=e.split("-");s.push(t)});var d=parseInt(i.data("time-offset"),10),g=new Date;g.setTime(g.getTime()+60*d*60*1e3),g.getUTCHours()>=n&&g.setTime(g.getTime()+864e5);var p,o=!1;do{if((p=!1)||0!=g.getUTCDay()||(p=!0),p||6!=g.getUTCDay()||o||(p=!0),!p)for(var l in s)if(s[l][0]==g.getUTCMonth()+1&&s[l][1]==g.getUTCDate()){p=!0;break}(r>0||p)&&g.setTime(g.getTime()+864e5),p||(r--,o=!0)}while(r>=0||p);g.setTime(g.getTime()-60*d*60*1e3);var m=e("[data-shipping-date]");m.length>0&&m.html(g.toString(m.data("shipping-date")))}}},1e3)});
// -->
</script>

Brands Page Layout

theme-editor-brands-page-layout

Configure the brands page layout display alphabet table and grouped by letter in Theme Editor > Products > Brands pages > Layout = A-Z Table. Save & Publish.

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 / JavaScript code

You can add your custom CSS by inserting into Storefront > Footer Scripts, wrapped by a <style> tag.

To insert custom JS, you can insert into Footer Scripts wrapped by a <script> tag or insert in to Scripts Manager.