BigCommerce Supermarket Theme Documentation
return
IndexGet Started
Customization
Child Themes
FAQsIMPORTANT NOTE:Limit length of product name display on products gridHide category name on category pageHide the category images on category pagesChange active tabs & remove other tabs in products by category blockMy products by category with sorting tabs block is not rendering on homepage?Make main image & thumbnails on product details page uniformDisplay tooltip when hover Compare button on product itemsHow to change "Image Coming Soon" default product image?How to show "Coming Soon" default product image on product page?Move maintenance notice box to top of pageDisplay the sub-category name below the sub-category imageDisplay entire product description on mobileMove reviews tab next to description tab on product pageMove brands list underneath products list on Brand pageMove bottom banner to under brand title on brand pageMove bottom banner up above product tabsDisplay custom message above shipping options on checkout page:Hide Sale badge for logged in usersDisplay customer group name & 'Price' label before products priceFix product thumbnails carousel on product page for Supermarket version 1.5.4 and olderDisplay product condition badge on every product card and product page main imageMake all product card items in carousel (Related Products, Customer Also Viewed) same heightShow Out of Stock message on product pageShow UPS and all options of shippingFix quick search popup cut off when the header is configured stickyShow all product thumbnails on product pageMove Out of Stock alert to the top of product details on product pageAdd background image to headerAlways show Add to Cart button on product cardsShow Add to Cart button at the bottom of product card itemDisplay phone number on header on mobileFix instagram photos display uniformFix Products Bought Together stop working after BigCommerce API changedFix the main product image carousel show next image croppedFix the popular brands not show enough items as configured in the footerShow all thumbnails as grid in product detail pagesAdd custom labels on the main menu itemsMove sub-pages menu to the right sidebarHow to use animated GIF logoUse SVG logoHide the active page title on the breacrumbsFix review link anchor jump to content hidden by the sticky headerDisplay the main carousel's content overlay the image on mobile like on desktopFix the phone number link on the top header barAdd custom CSS to all pagesAdd custom CSS to Checkout PageFix cart quantity counter shouldn't count child productsChange the placeholder text of the search input boxChange the wording "You can only purchase a maximum of 1..." in the popup message.Remove the new products on the left sidebar of blog pagesFix social bookmarks doesn't work properly when Instant-Load feature is enabledMove product description show under the priceFix product main images loading slow on product pageUse animated GIF images on Home Page CarouselMake the header logo sharper on Retina screensAutomatically add quotation marks to make the quick search more accuratelyApply a coupon code automatically on the cart pageFix product variant image changed slow when selecting product optionMake Homepage Carousel fade in/out instead of sliding right to leftDisplay phone number below the header on mobileTranslate language in Optimized Checkout Page and Order Confirmation Page without editing theme files.Show sold out products at bottom of product category page or at the end of in products gridDisplay non-image products last on the product listsMake the pagination standing outAdd the external CSS file to your themeMove the bottom banners to the top of content on Category PageMove Add to Cart button in Recently Viewed Products not overlap the priceFix price styling in Shipping Method section of Checkout pageShow Mega Menu on Homepage and Slide-down Menu on other pagesUncheck "My Billing address is the same as my Delivery address" on Checkout pageSort Popular Brands on the sidebar by alphabetMove Popular Brands block on the left sidebar to the right sidebarFix 2 banners beside the main carousel on home page display wrong in version 4.5.2Display product stock number under every product card itemsMove the first paragraph of product description to under the product rating and product info to under product optionsShow the original category image on the category page in v4.5.2Hide "There are no products listed under this category" on the category pageChange the welcome message on the top header for logged in usersMove the release date (pre-order message) to under the Add to Cart button on PDPAdd custom text after the copyright text in the footerIntegrate PartFinder app to display below the headerAdd custom links to Footer > Navigate columnHide Shipping Estimation on the cart pageHide Refine By block on the left sidebarLimit the main navigation level up to 3 on mobileMove Paypal Checkout button display under Amazon Pay button on the cart pageDisplay product main images with fixed sizeHide UPC and MPN on the product pageFix product images on Featured / Bestselling / New columns uniform on mobileHide AMEX credit card option on the checkout pageCustomize the main navigation full widthHide the default image when hover the product cardDisplay YouTube videos as the alternate images on PDPDisplay your custom social icons on the headerDisplay custom social icons on the footerDisplay another phone number on the footerDisplay another contact details in the footerMove Bulk Discount Rates table to below the quantity boxCollapse subcategories list on category pages on mobile by defaultHide PayPal Express Checkout buttonsCenter the logo on mobileMake products pick list images biggerDisable Lazy Load of the main product images on PDPHide Go to Top buttonHide Sub-Categories column in Products by Category sectionsDisplay your Instagram photo feeds on home pageAdd Read More button on the category description and brand descriptionHide number of products on the pagination bar on category pagesDisplay Affirm logo in the footer payment iconsHide "Subscribe to our newsletter" on the checkout pageMove Warranty tab to the lastUse flyout menu for certain categoriesShow Availability on the cart page and checkout pageDisplay a custom message on the cart pageDisable quick search display search results popupImprove web page's style for printIncrease the header height and logo height on mobileDisplay Pay by PO payment method for certain customers on the checkout pageTweak Brands Carousel to display more images on desktop and mobileTweaks Brands Carousel autoplayChange Bulk Price table to Buy XX+ and Save $XX.XX eachImprove Bulk Price table to display both price & percent and price changed when quantity updatedMake all categories and subcategories expanded by default on the sidebarHide the left sidebar for all static web pagesDisplay content below product imageDisplay custom content above product descriptionDisplay a banner at bottom of all pagesDisplay category links and brand links manually in the footerFix product image not sticky properly on small screen 1024pxLimit sub-categories shown on the left sidebarReplace On Sale product badge by imageDNS Prefetch and custom CSS for Page Speed OptimizationAlign prices evenly on all product cardsDisplay asterisks (*) beside the required fieldsShow "you save" price = regular price - sale priceMake the search form sticky on mobileDisplay Bulk Pricing table on every product cardsHide Additional Information tab on PDP when it is emptyInstall Google Survey Opt-In script to the order confirmation pageInstall Pinterest Tag code to the checkout pageFix page auto scrolled down when openedFix blog post alignment issue in version 4.8.0Display a search icon on mobileDisplay GeoTrust, Norton, McAfee seals on the checkout pageFix Search in Category form overlaps the widget banner on mobileImprove Cookie Consent banner appearanceDisplay Coupon / Gift Certificate box and on the checkout pageDisplay AfterPay "or 4 interest-free installments" messageDisplay Klarna "4 interest-free payments of" on-site messageDisplay all cart items in the dropdown cart previewRedirect customers to the login page if not logged inAdd Image Cloud Zoom to product images on PDPAdd jQuery Zoom to product images on PDPDisplay products by category image in GIF formatHide Shipping Nofitication on PDP when product is out of stock or not trackDisplay additional checkout buttons full widthDisplay page content full width when the sidebar is emptyFix an issue with the button icon in version 5.1.0Add links to Frequently Bought Together productsDisplay the quantity box on product cardsDisplay Sticky Add to Cart barDisplay the included VAT/Tax price below the excluded Tax priceDisplay an alert message after customer select a specific shipping countryDisplay a custom message below the order number on the Order Confirmation pageFix anchor links do not work on category pages if the Faceted Filters is enabledCustomize Mega Menu Banners for each category menu itemDisplay recent blog posts on the homepage in 4 columnsDisplay Phone Number mask on the checkout pageChange color of the info alert messageAlways display shipping address form on the checkout pageHide all additional checkout buttons on all pagesFix the incorrect indent displayed by UL, OL, LI elements in the product descriptionAdjust the mega menu to display columns that flow vertically from left to rightHide Quick-View, Add to Cart and Compare icons on product cardsHide brand on product cardsFixing Quick Payment Button Sizing on MobileRelease NotesSupportChiara

FAQs

IMPORTANT NOTE:

ALL CUSTOM CODE SNIPPETS BELOW WE DO NOT HAVE ANY GUARANTEE WILL WORK AS YOU INTENDED. IN ADDITION, IT MAY AFFECT THE STABILITY OF THE ORIGINAL THEME. RECOMMENDED TO USE ONLY WHEN YOU UNDERSTAND. WE DO NOT HAVE ANY COMMITMENT NOR RESPONSIBILITY. IF IT CAUSES UNEXPECTED PROBLEMS, PLEASE REMOVE IT TO GET THE THEME WORKING PROPERLY AGAIN.

Limit length of product name display on products grid

Limit number of lines of product name on product grids

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_cef1288b7b7e1fac">
.card-title {
max-height: 3.75rem;
overflow: hidden;
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_cef1288b7b7e1fac').innerHTML;
document.head.appendChild(style);
})();
</script>

It will limit maximum 3 lines. Set max-height: 2.5rem to limit maximum 2 lines.

Hide category name on category page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_7b6c1f362f735ab5">
.papaSupermarket-page--pages-category .page-heading--desktopOnly {
display: none;
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_7b6c1f362f735ab5').innerHTML;
document.head.appendChild(style);
})();
</script>

Hide the category images on category pages

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.emthemesModez-categoryPage-mainImage { display: none !important }';
document.head.appendChild(css);
})();
</script>

Change active tabs & remove other tabs in products by category block

Change active tabs of products by category

By default, the theme display Bestselling tab active by default, if you want to make other tab active by default and/or hide other tabs, follow instruction below to edit the theme source code.

Make a copy of your theme in order to edit the theme source code:

Make a copy

Then click on Edit Theme Files. In the editor, edit file templates\components\papa-supermarket\category\ajax-products-by-category-sorting-tabs.html:

edit file ajax products by cateegory sorting tabs

Edit as screenshot:

edit-file-to-change-active-tab-of-products-by-category-1

edit-file-to-change-active-tab-of-products-by-category-2

In the next version, we will add new feature allow customize this in Theme Editor.

My products by category with sorting tabs block is not rendering on homepage?

products-by-category-is-not-rendering

If you already configured Number of Categories in Theme Editor but it's still not appearing, it's probably your categories have no products. To bypass this case to display products in sub-categories, you will need to edit theme source code. Edit file templates/components/emthemes-modez/section/section.html

Delete 2 line as screenshot below:

edit-file-to-show-products-by-category-in-empty-category

Make main image & thumbnails on product details page uniform

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_ac2423c77b8d0206">
.productView-imageCarousel-nav-item.slick-slide {
position: relative;
}
.productView-imageCarousel-nav-item.slick-slide:before {
display: block;
content: ' ';
height: 0;
padding-bottom: 113.8%; /* height/width */
}
.productView-imageCarousel-nav-item img {
max-height: 100%;
max-width: calc(100% - 10px);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.productView-imageCarousel-main {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 550px) {
.productView-imageCarousel-main {
max-width: 500px;
}
}
.productView-imageCarousel-main-item > a {
position: relative;
display: block;
height: 0;
padding-top: 113.8%; /* height/width */
}
.productView-imageCarousel-main-item > a img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
max-height: 100%;
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_ac2423c77b8d0206').innerHTML;
document.head.appendChild(style);
})();
</script>

Display tooltip when hover Compare button on product items

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.card-figcaption-button--compare:hover:after {'
+ 'content: "Compare";'
+ 'position: absolute;'
+ 'padding: 4px 8px;'
+ 'background: #fff;'
+ 'display: inline-block;'
+ 'font-size: 12px;'
+ 'color: #666666;'
+ 'bottom: calc(100% + 4px);'
+ 'right: 0;'
+ 'text-indent: 0;'
+ '}';
document.head.appendChild(css);
})();
</script>

How to change "Image Coming Soon" default product image?

Please upload your own "Coming Soon" image in Marketing > Banner Manager, then copy the image URL.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
var YOUR_COMINGSOON_IMG = '//placehold.it/500x500'; // <-- PUT YOUR COMING SOON IMAGE HERE
function replaceImg($scope) {
$('img[src*="ProductDefault.gif"]', $scope).attr('src', YOUR_COMINGSOON_IMG);
}
replaceImg();
const observer = new MutationObserver(function(mutationsList, observer) {
for (var i in mutationsList) {
var mutation = mutationsList[i];
if (mutation.type === 'childList') {
replaceImg(mutation.addedNodes);
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
var style = document.createElement('style');
style.innerHTML = 'img[src*="ProductDefault.gif"] { visibility: hidden }';
document.head.appendChild(style);
})(window.jQuerySupermarket || window.jQuery);
</script>

Replace https://placehold.it/500x500 by your "Coming Soon" image URL.

How to show "Coming Soon" default product image on product page?

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_ad518d0a007a0be2">
.productView-images { background: url(https://placehold.it/500x500) no-repeat center center; background-size: auto; padding-top: 100%; height: 0; }
@media (min-width: 801px) {
.productView-images { padding-top: 50%; }
}
</script>
<script>
{{#unless product.main_image}}
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_ad518d0a007a0be2').innerHTML;
document.head.appendChild(style);
})();
{{/unless}}​
</script>

Replace https://placehold.it/500x500 by your "Coming Soon" image URL.

Move maintenance notice box to top of page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_8a47a1451ed693c2">
body {
padding-top: 10rem;
}
.maintenanceNotice {
top: 55px;
left: 0;
right: 0;
width: auto;
display: flex;
justify-content: space-between;
height: 6rem;
font-size: 11px;
overflow: hidden;
}
@media (min-width: 550px) {
body {
padding-top: 8rem;
}
.maintenanceNotice {
height: 4rem;
}
}
@media (min-width: 800px) {
body {
padding-top: 4rem;
}
.maintenanceNotice {
top: 0;
}
}
@media (min-width: 1200px) {
body {
padding-top: 3rem;
}
.maintenanceNotice {
height: 3rem;
}
}
.maintenanceNotice > p {
margin: 0;
padding-right: 1.5rem;
}
.maintenanceNotice > br {
display: none;
}
.maintenanceNotice > a {
padding-left: 1.5rem;
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_8a47a1451ed693c2').innerHTML;
document.head.appendChild(style);
})();
</script>

Note: Remove it when you launch your store.

Display the sub-category name below the sub-category image

By the default, the theme dipslays sub-category name over the category image. If you don't like this style, but want to display sub-category name under.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = ''
+ '.papaSupermarket-subcategories-image { height: 0; padding-top: 100%; text-align: center; display: block; position: relative; }'
+ '.papaSupermarket-subcategories-image img { max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }'
+ '.papaSupermarket-subcategories-grid-item:hover img { transform: translate(-50%, -50%) scale(1.2); }'
+ '.papaSupermarket-subcategories-image + .papaSupermarket-subcategories-name { position: static; transform: none; background-color: transparent; display: block; text-align: center; padding-left: 0; padding-right: 0; }'
+ '';
document.head.appendChild(style);
})();
</script>

Display entire product description on mobile

To optimize for mobile view, product description are collapse by default. Tap on VIEW ALL link to expand all product description.

product description on mobile

If you want to display entire product description by default,

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_bacb3edbb02b3fdd">
@media (max-width: 800px) {
.productView-description-tabContent.emthemesModez-mobile-collapse-content {
max-height: none;
overflow: auto;
}
.productView-description-tabContent .emthemesModez-mobile-collapse-handle {
display: none;
}
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_bacb3edbb02b3fdd').innerHTML;
document.head.appendChild(style);
})();
</script>

Move reviews tab next to description tab on product page

Edit file templates\components\products\product-view.html, insert the code as showing below:

edit product-view.html to move reviews tab

{{#if settings.show_product_reviews}}
{{#if product.reviews.total '>' 0}}
<li class="tab">
<a class="tab-title" href="#tab-reviews">{{lang 'products.reviews.header' total=product.reviews.total}}</a>
</li>
{{/if}}
{{/if}}
{{#if settings.show_product_reviews}}
{{#if product.reviews.total '>' 0}}
<div class="tab-content" id="tab-reviews" data-emthemesmodez-mobile-collapse>
<h2 class="page-heading">{{lang 'products.reviews.header' total=product.reviews.total}}</h2>
<div class="emthemesModez-mobile-collapse-content" data-emthemesmodez-mobile-collapse-content>
{{> components/products/reviews reviews=product.reviews product=product urls=urls}}
</div>
<a href="#" class="emthemesModez-mobile-collapse-handle" data-emthemesmodez-mobile-collapse-handle><span class="on">{{lang 'common.view_all'}}</span><span class="off">{{lang 'common.close'}}</span></a>
</div>
{{/if}}
{{/if}}

Edit file templates\pages\product.html, delete the code as showing below:

delete code in product.html to move reviews tab

Move brands list underneath products list on Brand page

If you want to display brands list under products list on brand page,

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_33271177168f914f">
@media (max-width: 800px) {
.papaSupermarket-page--pages-brand .page {
display: flex;
flex-direction: column;
}
.papaSupermarket-page--pages-brand .page-sidebar {
order: 2;
}
.papaSupermarket-page--pages-brand .page-content {
order: 1;
}
.emthemesModez-productsFilter {
position: fixed;
top: 100px;
left: 10px;
z-index: 100;
}
.emthemesModez-productsFilter .actionBar {
width: 280px;
}
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_33271177168f914f').innerHTML;
document.head.appendChild(style);
})();
</script>

Move bottom banner to under brand title on brand page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var body = document.body || document.getElementsByTagName('body')[0];
if (body.className.match(/papaSupermarket-page--pages-brand/)) {
var banners = document.querySelectorAll('.banners--bottom');
var title = document.querySelectorAll('.h1.page-heading')[0];
for (var i = 0; i < banners.length; i++) {
title.parentNode.insertBefore(banners[i], title.nextSibling);
}
var css = '.papaSupermarket-page--pages-brand .banners--bottom { margin-top: 0; }';
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
})();
</script>

Move bottom banner up above product tabs

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var body = document.body || document.getElementsByTagName('body')[0];
if (body.className.match(/papaSupermarket-page--pages-home/)) {
var banners = document.querySelectorAll('.banners--bottom');
var productTabs = document.querySelectorAll('.emthemesModez-section--specialProductsTabs')[0];
for (var i = 0; i < banners.length; i++) {
productTabs.parentNode.insertBefore(banners[i], productTabs);
}
}
})();
</script>

Display custom message above shipping options on checkout page:

display custom message above shipping options on checkout page

Insert the code below into Scripts Manager, Checkout page, footer location:

<script>
(function() {
function processCheckoutShippingOptionTips() {
$(function() {
var $tipsEl = $('#checkout-shipping-options-tips');
window.setInterval(function() {
if ($('#checkout-shipping-options-tips-clone').length === 0) {
var $shippingOptionsEl = $('#checkout-shipping-options');
if ($shippingOptionsEl.length > 0) {
$tipsEl.clone()
.attr('id', 'checkout-shipping-options-tips-clone')
.show()
.insertBefore($shippingOptionsEl.children('legend'));
}
}
}, 500);
});
}
document.write('\
<div id="checkout-shipping-options-tips" style="display: none">\
<ul>\
<li>Please allow 1 to 2 business days for handling in addition to shipping time.</li>\
<li>Orders placed on Fridays or Holidays may not be shipped until the next business day.</li>\
</ul>\
<p>Tip: Look at USPS as a shipping option for late week orders. We ship from Rhode Island and in many cases USPS is more cost effective method and will deliver on Saturdays as opposed to other carriers in the same or less time frame.</p>\
</div>');
var script = document.createElement("script");
script.onload = processCheckoutShippingOptionTips;
document.currentScript.parentNode.insertBefore(script, document.currentScript);
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js';
})();
</script>

Hide Sale badge for logged in users

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_e73470ed35aef4e8">
.sale-flag-side:not(.sale-flag-side--custom) {
display: none;
}
</script>
<script>
{{#if customer}}
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_e73470ed35aef4e8').innerHTML;
document.head.appendChild(style);
})();
{{/if}}
</script>

Display customer group name & 'Price' label before products price

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_f9854f5538bb2352">
.customerGroup-price-label {
float: left;
margin-right: .75rem;
margin-top: 5px;
}
.card-customerGroup-price-label {
margin-right: .375rem;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
{{#if customer.customer_group_id}}
$(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_f9854f5538bb2352').innerHTML;
document.head.appendChild(style);
$('.productView-price').prepend('<div class="customerGroup-price-label">{{{customer.customer_group_name}}} Price</div>');
$('.card-text .price:not(.price--rrp)').prepend('<span class="card-customerGroup-price-label">{{{customer.customer_group_name}}} Price</span>');
});
{{/if}}
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_4451e5b7fafe22d6">
.productView-imageCarousel-nav .slick-track { transform: none !important }
</script>
<script>
{{#if page_type '===' 'product'}}
{{#if product.images.length '<=' theme_settings.productpage_thumbnails_count}}
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_4451e5b7fafe22d6').innerHTML;
document.head.appendChild(style);
})();
{{/if}}
{{/if}}
</script>

Display product condition badge on every product card and product page main image

Product condition badge

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<!-- Papathemes: display product condition badge on product cards and product details page -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
function product_page() {
var $el = $('.productView-info-value--condition');
var $cond_badge = $('<div class="sale-flag-side sale-flag-side--custom"><span class="sale-text">' + $el.text() + '</span></div>');
var $image = $('.productView-imageCarousel-main');
var $last_badge = $('.productView-images .sale-flag-side').last();
if ($last_badge.length > 0) {
$last_badge.before($cond_badge);
} else {
$image.after($cond_badge)
}
}
product_page();
function request_all($scope) {
$('[data-emthemesmodez-cart-item-add]', $scope).each(function(i, a) {
var m = a.href.match(/product_id=([0-9]+)/);
if (m) {
var $card_figure = $(a).closest('.card-figure');
var id = m[1];
request_card(id, $card_figure);
}
});
}
function request_card(id, $card_figure) {
$.ajax({
url: '/products.php?productId=' + id,
headers: {
'stencil-options': '{"render_with":"products/quick-view"}'
},
success: function(data, status, xhr) {
$html = $(data);
$cond = $html.find('.productView-info-value--condition');
if ($cond.length > 0) {
var $cond_badge = $('<div class="sale-flag-side sale-flag-side--custom"><span class="sale-text">' + $cond.text() + '</span></div>');
var $last_badge = $card_figure.find('.sale-flag-side');
if ($last_badge.length > 0) {
$last_badge.after($cond_badge);
} else {
$card_figure.prepend($cond_badge);
}
}
}
});
}
request_all($('body'));
setInterval(function() {
$('.emthemesModez-productsByCategoryTabs-products').each(function(i, el) {
if (!$(el).data('conditionBadgeAdded')) {
$(el).data('conditionBadgeAdded', true);
request_all($(el));
}
});
}, 500);
});
</script>​

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '.productCarousel .slick-track { display: flex; align-items: stretch; }'
+ '.productCarousel .slick-track:before,'
+ '.productCarousel .slick-track:after { display: none; }'
+ '.productCarousel .slick-slide { height: auto; }'
+ '.productCarousel .card { min-height: 100%; }'
;document.head.appendChild(css);
})();
</script>

Show Out of Stock message on product page

It is a built-in feature of BigCommerce. However, some of our clients don't know how to accomplish. So we think this guide will be helpful.

Out of Stock message on product page

Please configure Advanced Settings > Inventory as showing below: Configure Inventory for Out of Stock message

Edit your product, make sure you enable tracking inventory: Track product inventory

Show UPS and all options of shipping

On Checkout page for developers

Edit file checkout_express.html in Storefront > Checkout Template Files, add the code below:

<style>
.shippingquote { display: block !important; }
.shippingquote a[onclick*=toggle] { display:none; }
</style>

On estimated shipping of shopping cart page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_960cfc517f197627">
.estimator-form--ups { display: block !important; clip: auto !important; height: auto !important; width: auto !important; position: static !important }
.estimator-form-toggleUPSRate { display: none }
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_960cfc517f197627').innerHTML;
document.head.appendChild(style);
})();
</script>

Fix quick search popup cut off when the header is configured sticky

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_bcf3cedefb470bf6">
[data-stickymenu] .dropdown--quickSearch .quickSearchResults { max-height: calc(100vh - 300px); overflow: auto; overflow-x: hidden }
.is-sticky[data-stickymenu] .dropdown--quickSearch .quickSearchResults { max-height: calc(100vh - 250px) }
[data-stickymenu] .dropdown--quickSearch .modal-close { top: -25px; right: -25px }
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_bcf3cedefb470bf6').innerHTML;
document.head.appendChild(style);
})();
</script>

Show all product thumbnails on product page

Configure Theme Editor to show up to 10 thumbnail images and

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_91043ec741c0ca95">
@media (min-width: 801px) {
.productView-imageCarousel-nav { height: auto !important; overflow: visible !important; padding: 0 !important; }
.productView-imageCarousel-nav .slick-arrow { display: none }
.productView-imageCarousel-nav .slick-track { width: 100% !important; transform: none !important; }
.productView-imageCarousel-nav-item { width: 100px !important; margin-bottom: 10px !important }
.js .productView-imageCarousel-nav { max-height: none }
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_91043ec741c0ca95').innerHTML;
document.head.appendChild(style);
})();
</script>

Move Out of Stock alert to the top of product details on product page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function () {
function moveAlert(from, to) {
var alerts = from.querySelectorAll('.alertBox.alertBox--error');
if (alerts) {
for (var i in alerts) {
if (typeof alerts[i] === 'object') {
var alert = alerts[i];
to.insertBefore(alert, to.firstChild);
}
}
}
}
var productView = document.querySelector('.productView');
var productViewInfo = document.querySelector('.productView-options');
if (productView && productViewInfo) {
setInterval(function () {
moveAlert(productViewInfo, productView);
}, 100);
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
var observer = new MutationObserver(function () {
moveAlert(productViewInfo, productView);
});
observer.observe(productViewInfo, {
childList: true,
subtree: true,
});
}
}
})();
</script>

Add background image to header

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '@media (min-width: 801px) {'
+ '.emthemesModez-header-userSection { background-image: url("https://cdn8.bigcommerce.com/s-tlt0fnmxln/product_images/uploaded_images/lpgshop-logo.png?t=1535516377"); background-repeat: no-repeat; background-position: left center; background-size: contain }'
+ '.header .header-logo-text { opacity: 0 }'
+ '}'
;document.head.appendChild(css);
})();
</script>

Always show Add to Cart button on product cards

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '.productCarousel .card-buttons, .productGrid .card-buttons { opacity: 1; clip: auto; visibility: visible }'
+ '.card-figcaption { opacity: 1 }'
+ '.card-figcaption-button.quickview { opacity: 0 }'
+ '.card:hover .card-figcaption-button.quickview { opacity: 1 }'
;document.head.appendChild(css);
})();
</script>

Show Add to Cart button at the bottom of product card item

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_cf872f8ef5540cc5">
@media (min-width: 801px) {
.card { padding-bottom: 50px !important }
.card-figure { overflow: visible; position: static }
.card-img-container { position: relative }
.card-figcaption-button.quickview-alt { bottom: 0 }
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_cf872f8ef5540cc5').innerHTML;
document.head.appendChild(style);
})();
</script>

Display phone number on header on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = ''
+ '@media(max-width:800px) {'
+ '.emthemesModez-header-topSection .navUser { z-index: 25; right: 55px }'
+ '.emthemesModez-header-topSection .navUser:last-child .navUser-section .navUser-item:first-child { display: block; margin-right: 0; border: 0 } '
+ '.emthemesModez-header-topSection .navUser:last-child .navUser-section .navUser-item:first-child .navUser-action { padding-left: 0; padding-right: 0; font-size: 14px }'
+ '.emthemesModez-header-topSection .navUser:last-child .navUser-section .navUser-item:first-child .navUser-item-icon { padding-right: 5px; font-size: 20px }'
+ '}';
document.head.appendChild(style);
})();
</script>

Fix instagram photos display uniform

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_645b7c2a8feb6ed0">
.emthemesModez-instafeed .slick-slide a {
padding-top: 100%;
content: '';
display: block;
height: 0;
position: relative;
}
.emthemesModez-instafeed .slick-slide img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_645b7c2a8feb6ed0').innerHTML;
document.head.appendChild(style);
})();
</script>

Fix Products Bought Together stop working after BigCommerce API changed

If you suddenly get a problem that the products also bought together stop working on your product pages. That is because BigCommerce has changed the content type of product ajax request.

To workaround this issue while waiting for the fix from BigCommerce or the theme update, please follow this instruction.

Login to your store admin panel, go to Storefront > Script Manager > click on the button Create a Script.

Input:

  • Name of Script: Fix Also Bought Products stop working after BC API changed or whatever.
  • Location of page: Footer
  • Select pages where script will be added: Storefront pages.
  • Script type: Script.
  • Script contents:
<script>
window.jQuerySupermarket(document).ajaxSend((event, xhr, settings) => {
if (settings.url.match(/\/products\.php/)) {
xhr.setRequestHeader('x-requested-with', '');
}
});
</script>

Then click Save button.

Your script should look like this screenshot:

Fix products also bought together

This issue may appears when upgrade theme from version 4.1 to 4.2. To fix it, just increase the main image size from 608x608 to 734x734 or bigger. Go to Theme Editor > Products > Image Sizes > set Main product images = Specify dimensions and set Max width = 734, Max height = 734.

Fix product image carousel in version 4.2

From version 4.2, we added an option to support show/hide popular brands in the sidebar. The popular brands in the footer may not work properly because your theme settings still stores the old variable. To fix this, go to Theme Editor > Products > Category pages > set Show shop by brands on = any value; Footer > Main Footer > Show brands = any value.

Fix popular brands in the footer in version 4.2

Show all thumbnails as grid in product detail pages

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '.productView-imageCarousel-nav .slick-track { transform: none !important; width: 100% !important; }'
+ '.productView-imageCarousel-nav-item { width: calc(25% - 10px) !important; margin: 5px !important; }'
+ '.productView-imageCarousel-nav .slick-arrow { display: none }'
;document.head.appendChild(css);
})();
</script>

Add custom labels on the main menu items

custom labels on nav items

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

​<script id="theme_custom_css_c63e8abf31b2a73f">
@media (min-width: 801px) {
.navPages-container .navPages > .navPages-list > .navPages-item:nth-child(5) > a:after {
content: "New";
font-size: 9px;
position: absolute;
top: -2px;
right: 0;
background: #167ac6;
color: white;
padding: 0 4px;
}
.navPages-container .navPages > .navPages-list > .navPages-item:nth-child(6) > a:after {
content: "Hot";
font-size: 9px;
position: absolute;
top: -2px;
right: 0;
background: red;
color: white;
padding: 0 4px;
}
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_c63e8abf31b2a73f').innerHTML;
document.head.appendChild(style);
})();
</script>

Update nth-child(5) and nth-child(6) coresponding your menu item order number.

Move sub-pages menu to the right sidebar

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function load() {
var $subpages = $('.page-sidebar .navList--aside .sidebarBlock--navList:not(.sidebarBlock--brands)');
var $rightSidebar = $('<div class="page-sidebar page-sidebar--right"></div>');
if ($subpages.length > 0) {
$rightSidebar.append($subpages);
$('.page-sidebar').after($rightSidebar);
}
}
load();
$('body').on('loaded.instantload', load);
})(window.jQuerySupermarket || window.$);
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var els = document.getElementsByClassName('header-logo-image');
for (var i in els) {
var el = els[i];
el.src = el.src.replace(/^.*\/([^\/]+)$/, '/product_images/$1');
}
})();
</script>

Upload your SVG logo in Storefront > Images Manager and copy the image URL.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var els = document.getElementsByClassName('header-logo-image');
for (var i in els) {
var el = els[i];
el.src = 'YOUR-SVG-LOGO-URL';
}
})();
</script>

Replace YOUR-SVG-LOGO-URL by your logo URL.

Hide the active page title on the breacrumbs

If you want to hide the active page title or the last item link on the breadcrumbs,

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_cbdb22470b125a7a">
.breadcrumb.is-active { display: none }
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_cbdb22470b125a7a').innerHTML;
document.head.appendChild(style);
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('.productView-reviewLink a').not('[data-reveal-id]').on('click', function() {
$('html, body').animate({scrollTop: $('#product-reviews').offset().top - 200}, 500);
});
})(window.jQuerySupermarket || window.chiarajQuery || window.jQuery);
</script>

Display the main carousel's content overlay the image on mobile like on desktop

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_f836111e78526e0f">
@media (max-width: 800px) {
.heroCarousel-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 8px 16px;
background-color: transparent;
display: flex;
flex-direction: column;
}
.heroCarousel-title {
font-size: 16px;
background-color: rgba(0, 0, 0, .6);
padding: 2px 4px;
margin: 0 auto;
}
.heroCarousel-description {
font-size: 12px;
background-color: rgba(0, 0, 0, .6);
padding: 2px 4px;
margin: 4px auto 0;
}
.heroCarousel-action {
padding: 4px 8px;
font-size: 12px;
margin: 4px auto 0;
}
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_f836111e78526e0f').innerHTML;
document.head.appendChild(style);
})();
</script>

The phone number link which has tel: attribute requires to specify the country code in order to make it callable.

To fix this issue, go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents and update +11231231234 by your phone number. +1 is dialing code of USA:

<script>
(function($) {
$('.emthemesModez-header-topSection a[href^="tel:"]').attr('href', 'tel:+11231231234');
})(window.jQuerySupermarket || window.jQuery);
</script>

Add custom CSS to all pages

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = 'INSERT YOUR CUSTOM CSS HERE';
document.head.appendChild(style);
})();
</script>

Add custom CSS to Checkout Page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = 'INSERT YOUR CUSTOM CSS HERE';
document.head.appendChild(style);
})();
</script>

Fix cart quantity counter shouldn't count child products

By default, BigCommerce API returns cart quantity include the parent products and the child products (products used in product pick-list option). If think it's incorrect, take a look at the code below to make it only counts the parent products.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$(document).ajaxComplete(function(event, xhr, options) {
if (!options.url || options.url.indexOf('api/storefront/cart') === -1 || !xhr.responseJSON || xhr.responseJSON.length === 0) {
return;
}
var cart = xhr.responseJSON[0];
//console.log(cart);
var lineItemQuantities = [
cart.lineItems.physicalItems,
cart.lineItems.digitalItems,
cart.lineItems.customItems
].reduce(function(a, b) {
return a.concat(b);
}, []).reduce(function(total, item) {
return (typeof total == 'object' ? total.quantity : total) + (item.parentId ? 0 : item.quantity);
}, 0);
var giftCertificateQuantity = cart.lineItems.giftCertificates.length;
var quantity = lineItemQuantities + giftCertificateQuantity;
//console.log(quantity);
if (isNaN(quantity)) {
setTimeout(function() {
$('body').trigger('cart-quantity-update', quantity);
}, 200);
}
});
})(window.jQuerySupermarket || window.jQuery);
</script>

Change the placeholder text of the search input box

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('input[data-search-quick]').attr('placeholder', 'Search by product name,sku and keyword');
})(window.jQuerySupermarket || window.jQuery);
</script>

Change the wording "You can only purchase a maximum of 1..." in the popup message.

change the wording You can only purchase a maximum of 1

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('#alert-modal').on('opened.fndtn.reveal', function(event) {
var $el = $(event.target).find('.modal-content > span');
if ($el.length > 0) {
var msg = $el.html().replace('You can only purchase a maximum of 1', 'You already have one in your shopping cart');
$el.html(msg);
}
});
})(window.jQuerySupermarket || window.chiarajQuery || window.jQuery);
</script>

Remove the new products on the left sidebar of blog pages

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('.sidebarBlock .productList[data-product-type=new]').closest('.sidebarBlock').remove();
})(window.jQuerySupermarket || window.jQuery);
</script>

Fix social bookmarks doesn't work properly when Instant-Load feature is enabled

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('body').on('loaded.instantload', function() {
if (window.addthis) {
window.addthis.toolbox('.addthis_toolbox');
}
});
})(window.jQuerySupermarket || window.jQuery);
</script>

Move product description show under the price

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
$('.productView').first().find('.productView-price').first().after($('#tab-description .productView-description-tabContent').html());
$('.productView').first().find('.productView-description').hide();
}
$(document).ready(main);
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Fix product main images loading slow on product page

If your original product image uploaded is PNG format and its size is too large, BigCommerce will need time to convert the image into WEBP format that is optimized for web. Especially with the new LQIP algorithm that supports better responsiveness for mobile and retina screen, it will take longer processing time for the original image in PNG format and large size.

This problem usually occurs on the product page and product quick-view. To fix this, you can disable the LQIP compression feature, using the old image conversion method.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main($scope) {
console.log('Fix product main images.');
$('.productView-imageCarousel-main-item img', $scope)
.removeAttr('srcset')
.removeAttr('data-srcset');
}
main();
$(document).ready(main);
$('body').on('loaded.instantload', main);
$('#modal').on('opened.fndtn.reveal', function() {
setTimeout(main, 1000);
});
$(document).ajaxComplete(function(event, resp, options) {
if (options.headers['stencil-options'] && options.headers['stencil-options'].match(/quick-view/)) {
setTimeout(main, 1000);
}
});
})(window.jQuerySupermarket || window.jQuery);
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
$('.heroCarousel-image').each(function(i, el) {
var $el = $(el);
var url = $el.attr('src').replace(/^(.+\/.+\.bigcommerce\.com\/s-[^\/]+)\/.+\/([^\/]+)$/, '$1/product_images/theme_images/$2?imbypass=on');
$el.removeAttr('data-srcset').removeAttr('srcset');
if ($el.hasClass('lazyload')) {
$el.attr('data-src', url);
} else {
$el.attr('src', url);
}
});
}
$(document).ready(main);
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Make the header logo sharper on Retina screens

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
var $img = $('.header-logo-image');
if ($img.length > 0) {
var src = $img.attr('src');
var s = src.replace(/stencil\/[^\/]+\//, 'stencil/***/');
$img.attr('srcset', src + ' 1x, ' + s.replace('***', '640w') + ' 2x');
}
})(window.jQuerySupermarket || window.jQuery);
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout
  • Script type = Script

Enter the script below to Scripts contents:

<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
(function($) {
var $img = $('#logoImage');
var src = $img.attr('src');
var s = src.replace(/stencil\/[^\/]+\//, 'stencil/***/');
console.log(s);
$img.attr('srcset', src + ' 1x, ' + s.replace('***', '640w') + ' 2x');
})(window.jQuerySupermarket || window.jQuery);
</script>

Automatically add quotation marks to make the quick search more accurately

Question: What changes have to be made to the quick search code for it to automatically add "quotations" to the keyword being entered in the search bar so that searches are more exact.

Answer:

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
stencilUtils.api.search._oldSearch = stencilUtils.api.search.search;
stencilUtils.api.search.search = function(query, params, callback) {
if (params && params.template && params.template == 'search/quick-results') {
return this._oldSearch('"' + query + '"', params, callback);
} else {
return this._oldSearch(query, params, callback);
}
};
$('form[action*="search.php"]').on('submit', function() {
var $el = $(event.target).find('input[name=search_query]');
var s = $el.val().trim();
if (!s.match(/^['"]/)) {
$el.val('"' + s + '"');
}
});
// Without jQuery:
// var els = document.querySelectorAll('form[action*="search.php"]');
// for (var i = 0; i < els.length; i++) {
// els[i].addEventListener('submit', function(event) {
// var input = event.target.querySelectorAll('input[name=search_query]')[0];
// var s = input.value.trim();
// if (!s.match(/^['"]/)) {
// input.value = '"' + s + '"';
// }
// });
// }
}
$(document).ready(main);
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Apply a coupon code automatically on the cart page

If you want to apply a coupon code automatically when it is passed to the cart page URL, for example: /cart.php?coupon=YOUR-COUPON-CODE.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
var scriptLoading = 0;
function addScript(fn) {
scriptLoading++;
var el = document.createElement('script');
el.src = fn;
el.onload = function() { scriptLoading--; };
document.head.appendChild(el);
}
if (typeof $ == 'undefined') {
addScript('https://code.jquery.com/jquery-3.4.1.min.js');
}
if (typeof stencilUtils == 'undefined') {
addScript('https://cdn.jsdelivr.net/npm/@bigcommerce/stencil-utils@4.2.0/dist/stencil-utils.min.js');
}
if (typeof Cookies == 'undefined') {
addScript('https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js');
}
function ready() {
// console.log('ready is called');
var couponcode = Cookies.get('couponcode');
if (m = window.location.search.match(/coupon=([^&]+)/)) {
couponcode = m[1];
Cookies.set('couponcode', couponcode);
}
if (couponcode) {
stencilUtils.api.cart.getCartQuantity({}, function(_, quantity) {
// console.log(quantity);
if (quantity > 0) {
stencilUtils.api.cart.applyCode(couponcode, function(error, response) {
Cookies.remove('couponcode');
if (window.location.pathname.match(/^\/cart\.php/)) {
window.location = '/cart.php';
}
});
}
});
}
}
function main() {
if (typeof $ == 'undefined') {
$ = window.jQuery;
}
$(document).ready(ready);
$('body').on('loaded.instantload', ready);
stencilUtils.hooks.on('cart-item-add', function() {
setTimeout(ready, 500);
});
}
var i = setInterval(function() {
if (scriptLoading === 0) {
clearInterval(i);
main();
}
}, 100);
})(window.jQuerySupermarket || window.jQuery);
</script>

Fix product variant image changed slow when selecting product option

From Cornerstone 4.0, BigCommerce supports responsive image using <img> srcset attribute which allows the browser to download different image depending on user's screen size. This function consumes a lot of time to generate many different size images, specially if your original product images are high quality and large sizes.

For workaround, you can install the custom script below to disable this feature, so that BigCommerce only generates the main product image one size.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var getSrcsetOld = stencilUtils.tools.imageSrcset.getSrcset;
stencilUtils.tools.imageSrcset.getSrcset = function(url, sizes) {
if (!sizes) {
sizes = {'1x': '608x608'};
}
return getSrcsetOld(url, sizes);
}
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script id="theme_custom_css_b6b4a9a8b24f85b7">
.heroCarousel-container { width: 100% }
.js .slick-initialized.heroCarousel .slick-track { width: 100% !important; transform: none !important; position: relative; }
.js .slick-initialized.heroCarousel .slick-slide { z-index: 1; opacity: 0 !important; top: 0; left: 0; position: absolute; transition: opacity .5s ease-in; }
.js .slick-initialized.heroCarousel .slick-active { z-index: 2 !important; opacity: 1 !important; position: relative; }
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_b6b4a9a8b24f85b7').innerHTML;
document.head.appendChild(style);
})();
</script>

Display phone number below the header on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '@media (max-width: 800px) {'
+ '.emthemesModez-header-topSection .navUser:last-child { position: absolute; left: 0; top: 55px; width: 100%; transform: none }'
+ '.emthemesModez-header-topSection .navUser:last-child .navUser-section { display: block; float: none; }'
+ '.emthemesModez-header-topSection .navUser:last-child .navUser-item:last-child { display:block; text-align: center; width: 100%; background: black; height: 34px; }'
+ 'body { padding-top: 89px }'
+ '}'
;document.head.appendChild(css);
})();
</script>

Translate language in Optimized Checkout Page and Order Confirmation Page without editing theme files.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Checkout for the checkout page or Order Confirmation for the order confirmation page.
  • Script type = Script

Enter the example script below to Scripts contents:

<script>
window.language = {"locale":"en","locales":{},"translations":{
"optimized_checkout": {
"address": {
"postal_code_label": "Zip/Postal Code"
},
"shipping": {
"shipping_heading": "Delivery"
},
"order_confirmation": {
"order_with_support_number_text": "An email will be sent containing information about your purchase. If you have any questions about your purchase, email us at <a ng-href=\"mailto:order@papathemes.com?Subject=Order {orderNumber}\" target=\"_top\">order@papathemes.com</a> or call us at <a href=\"tel://+1 111-111-1111\">111-111-1111</a>.",
"order_without_support_number_text": "An email will be sent containing information about your purchase. If you have any questions about your purchase, email us at <a ng-href=\"mailto:order@papathemes.com?Subject=Order {orderNumber}\" target=\"_top\">order@papathemes.com</a>."
}
}
}};
</script>

In the example above, we translated Postal Code to Zip/Postal Code, Shipping to Delivery. We also translate the message on the order confirmation page to insert our email order@papathemes.com and phone number 111-111-1111.

For a full list of the translation keys, check and download the language file in this guide: https://developer.bigcommerce.com/stencil-docs/localization/multi-language-checkout#browsing-hidden-translation-keys

Show sold out products at bottom of product category page or at the end of in products grid

Using the custom script below to show out of stock products at the end of products grid.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function addCss() {
$('head').append(''
+ '<style>'
+ '.product { order: 1 }'
+ '.product--outstock { order: 3 }'
+ '</style>'
);
}
function main() {
$('.productGrid .product').each(function(i, el) {
const $el = $(el);
if ($el.find('.card-figcaption-button.quickview-alt, .card-figcaption-button[href*="/cart.php?action=add"]').length === 0) {
$el.addClass('product--outstock');
}
});
}
$(document).ready(function() {
addCss();
main();
});
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Display non-image products last on the product lists

Using the custom script below to show out of stock products at the end of products grid.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function addCss() {
$('head').append(''
+ '<style>'
+ '.product { order: 1 }'
+ '.product--noimage { order: 2 }'
+ '</style>'
);
}
function main() {
$('.productGrid .product').each(function(i, el) {
const $el = $(el);
if ($el.find('img[src*="ProductDefault.gif"], img[data-src*="ProductDefault.gif"]').length > 0) {
$el.addClass('product--noimage');
}
});
}
$(document).ready(function() {
addCss();
main();
});
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Make the pagination standing out

custom-css-pagination

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '.pagination-item .pagination-link { font-size: 16px; font-weight: bold; min-width: 40px; }'
+ '.pagination-item, .pagination-item.pagination-item--current { border-color: #f0790b; border-radius: 4px; }'
+ '.pagination-item--current .pagination-link, .pagination-item--current .pagination-link:hover { background: #f0790b; color: #fff; }'
;document.head.appendChild(css);
})();
</script>

Add the external CSS file to your theme

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var el = document.createElement('link');
el.rel = "stylesheet";
el.href = "/PATH-TO-YOUR-CSS-FILE/FILE-NAME.css";
document.head.appendChild(el);
})();
</script>

Replace /PATH-TO-YOUR-CSS-FILE/FILE-NAME.css with your external CSS file URL.

Host your external CSS file with BigCommerce CDN to take advantage of BigCommerce's cache system to optimize page load speed

Upload your external CSS file to your BigCommerce store WebDAV. We recommend to upload in folder content/.

Find your store CDN URL by opening your website, right click View page source (Ctrl + U on Chrome). Find (Ctrl + F) string data-stencil-stylesheet, the string https://cdn11.bigcommerce.com/s-c14n6tful3/ in href attribute start with https://cdn... end with s-....../ is your store CDN URL:

find-your-store-cdn

For example your CSS file name is custom.css and you upload to folder content/ via WebDAV, its URL is https://cdn11.bigcommerce.com/s-c14n6tful3/content/custom.css

Move the bottom banners to the top of content on Category Page

move-bottom-banner-to-top-on-category-page

Create a banner in Marketing > Bannners:

  • Show on Page = For a Specific Category
  • Visible = Yes
  • Location = Bottom of Page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
if ($('body').hasClass('papaSupermarket-pageType--category')) {
$('.banners[data-banner-location=bottom]').children().insertAfter('.breadcrumbs');
}
}
$(document).ready(main);
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Note: This solution doesn't work when Instant-Load feature is enabled in the current version. We will fix it in the next version.

Move Add to Cart button in Recently Viewed Products not overlap the price

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '@media (min-width: 801px) {'
+ '.listItem-body { padding-bottom: 40px !important }'
+ '.listItem-buttons { min-width: 200px; left: auto !important; right: 0 !important }'
+ '}'
;document.head.appendChild(css);
})();
</script>

Fix price styling in Shipping Method section of Checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '.shippingOptionLabel .shippingOption-price { min-width: 10rem; max-width: 10rem }';
document.head.appendChild(style);
})();
</script>

Show Mega Menu on Homepage and Slide-down Menu on other pages

  1. Tick on Showing sub-category vertical in Theme Editor > Header > Main navigation.
  2. Go to Storefront > Script Manager, click Create a Script, choose:
  • Location on page = Head
  • Select pages where script will be added = Store pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>/* {{#if page_type '===' 'default'}}{{merge theme_settings subcategories_menu_vertical=false}}{{/if}} */</script>

Uncheck "My Billing address is the same as my Delivery address" on Checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var done = false;
var timer = setInterval(function() {
if (done) {
clearInterval(timer);
return;
}
var el = document.getElementById('sameAsBilling');
if (el) {
if (el.checked) {
el.click();
}
done = true;
}
}, 500);
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
var $li = $('#brands-navList li:not(:last-child)').sort(function(a, b) {
return $(a).find('a').attr('title').localeCompare($(b).find('a').attr('title'));
});
$('#brands-navList').prepend($li);
})(window.jQuerySupermarket || window.jQuery);
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function ready() {
var $sidebar = $('<div class="page-sidebar page-sidebar--right custom"></div>').insertBefore('.page-content');
var $brandsBlock = $('.page-sidebar .sidebarBlock--brands').first().appendTo($sidebar);
if ($brandsBlock.length === 0) {
$.get('/cart.php', null, function(resp) {
$(resp).find('.sidebarBlock--brands').appendTo($sidebar);
});
}
}
$(document).ready(ready);
$('body').on('loaded.instantload', ready);
$('<style />').html('.page-sidebar--right.custom { padding-left: 0; padding-right: 1.125rem } @media (min-width: 801px) { .page-sidebar--advancedSearch { width: 20% } }').appendTo('head');
})(window.jQuerySupermarket || window.jQuery);
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '@media (min-width: 801px) {'
+ '.heroCarousel-container--hasBanners { flex-wrap: nowrap; }'
+ '.heroCarousel-container--hasBanners .heroCarousel { min-width: auto; *width: auto; }'
+ '.heroCarousel-banners { width: auto; max-width: 385px; }'
+ '.heroCarousel-container:not(.heroCarousel-container--hasBanners) .heroCarousel-banners { display: none }'
+ '}';
document.head.appendChild(css);
window.addEventListener('DOMContentLoaded', function() {
if (document.querySelector('.heroCarousel-banners')) {
document.querySelector('.heroCarousel-container').classList.add('heroCarousel-container--hasBanners');
}
});
})();
</script>

Display product stock number under every product card items

  1. Go to Advanced Settings > Inventory, set Stock level display = Show stock levels.

  2. Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script src="https://cdn.jsdelivr.net/npm/in-view@0.6.1/dist/in-view.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/javascript-debounce@1.0.1/dist/javascript-debounce.min.js"></script>
<script>
(function($) {
function main() {
var $card = $('.card');
//
// Request stock number
//
var update = debounce(function() {
$card.each(function(i, el) {
const $scope = $(el);
if ($scope.data('stockLoaded') || !inView.is(el)) {
return;
}
var id = $scope.find('.quickview[data-product-id]').data('productId');
stencilUtils.api.product.getById(id, { template: 'products/quick-view' }, function(err, resp) {
if (err || resp.error) {
return;
}
var stock = $(resp).find('[data-product-stock]').html().trim();
if (stock) {
$scope.find('.card-body').append('<div class="card-text cart-text--stock">Current Stock: <span class="value">' + stock + '</span></div>');
}
});
$scope.data('stockLoaded', true);
$card = $card.not($scope);
});
}, 200);
//
// Bind events and call at initial
//
$(window).on('scroll resize load', update);
update();
//
// Watch DOM changes
//
const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
if (MutationObserver) {
var mo = new MutationObserver(function(mutations) {
for (var i in mutations) {
if (mutations[i].type === 'childList' && mutations[i].addedNodes) {
$card = $card.add($(mutations[i].addedNodes).find('.card'));
update();
}
}
});
mo.observe(document.documentElement, {
childList: true,
subtree: true,
});
}
//
// Add custom CSS
//
var css = '<style>'
+ '.cart-text--stock .value { font-weight: bold; color: #000 }'
+ '</style>';
$('head').append(css);
}
$(document).ready(main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Move the first paragraph of product description to under the product rating and product info to under product options

product-page-short-description

product-page-product-info-under-options

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function load($scope) {
// Move the first paragraph of product description to below the product rating
var $p = $('.productView-description-tabContent > p').first();
if ($p.length > 0) {
$('<div class="productView-sortDescription"></div>').append($p).insertAfter($('.productView-rating', $scope));
}
// Move the product info to below the product options
$('.productView-info', $scope).insertAfter($('.productView-options', $scope));
}
$(document).ready(function() {
if ($('body').hasClass('papaSupermarket-pageType--product')) {
load();
}
})
$('body').on('loaded.instantload', function() {
if ($('body').hasClass('papaSupermarket-pageType--product')) {
load();
}
});
$('body').on('loaded.quickview', function(product) {
load(product.$scope);
});
})(window.jQuerySupermarket || window.jQuery);
</script>

Show the original category image on the category page in v4.5.2

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
var $img = $('.emthemesModez-categoryPage-mainImage img[srcset]');
if ($img.length > 0) {
$img.attr('src', $img.attr('src').replace(/stencil\/[^\/]+\//, 'stencil/original/'))
.attr('srcset', '')
}
}
$(document).ready(main);
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Hide "There are no products listed under this category" on the category page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '#product-listing-container > p:first-child { display: none }';
document.head.appendChild(css);
})();
</script>

Change the welcome message on the top header for logged in users

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
{{#if customer}}
(function($) {
function main() {
$('.navUser--storeInfo .navUser-item')
.first()
.find('span')
.html('Hi {{customer.name}}');
}
$(document).ready(main);
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
{{/if}}
</script>

Move the release date (pre-order message) to under the Add to Cart button on PDP

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function css() {
$('<style/>')
.html('.productView-options > p { font-weight: bold; color: red }')
.appendTo('head');
}
function main($scope) {
var $el = $('.productView-options > p', $scope).first();
if ($el.length > 0) {
$el.parent().append($el);
}
}
main();
css();
$('body').on('loaded.instantload', main);
$('body').on('loaded.quickview', function(event, product) {
main(product.$scope);
});
})(window.jQuerySupermarket || window.jQuery);
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var el = document.createElement('span');
el.innerHTML = ' All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.';
document.querySelector('.footer-copyright .powered-by').appendChild(el);
})();
</script>

Integrate PartFinder app to display below the header

Display PartFinder app: https://www.bigcommerce.com/apps/partfinder-targeted-product-search/ below header across the site.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var el = document.createElement('div');
el.id = 'pf-embed-container';
document.querySelector('[data-content-region="header_bottom"]').appendChild(el);
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
document.querySelector('.footer-info .footer-info-col:nth-child(2) .footer-info-list').innerHTML += ''
+ '<li><a href="/privacy-policy">Privacy Policy</a></li>'
+ '<li><a href="/suppliers">Suppliers</a></li>'
})();
</script>

Change your own links by editting lines:

+ '<li><a href="/privacy-policy">Privacy Policy</a></li>'
+ '<li><a href="/suppliers">Suppliers</a></li>'

Or duplicate it to add more links.

Hide Shipping Estimation on the cart page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.cart-total--shippingEstimator { display: none }';
document.head.appendChild(css);
})();
</script>

Hide Refine By block on the left sidebar

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.facetedSearch-toggle, #facetedSearch { display: none }';
document.head.appendChild(css);
})();
</script>

Limit the main navigation level up to 3 on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
function main() {
var els = document.querySelectorAll('.navPage-childList-action.has-subMenu');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
window.location = e.target.href;
});
}
var css = document.createElement('style');
css.innerHTML = '@media (max-width: 800px) {'
+ '.navPage-childList-action.has-subMenu .navPages-action-moreIcon { display: none }'
+ '.navPage-childList .navPage-childList { display: none }'
+ '}';
document.head.appendChild(css);
}
// main();
window.addEventListener('DOMContentLoaded', main);
})();
</script>

Move Paypal Checkout button display under Amazon Pay button on the cart page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '.cart-additionalCheckoutButtons { display: flex; flex-direction: column }'
+ '.cart-additionalCheckoutButtons .CheckoutButton { order: 1 }'
+ '.cart-additionalCheckoutButtons .AmazonPaymentsCheckout { order: 1 }'
+ '.cart-additionalCheckoutButtons .PayPalExpressCheckout { order: 2 }';
document.head.appendChild(css);
})();
</script>

Display product main images with fixed size

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.productView-imageCarousel-main { max-width: 300px; max-height: 300px; margin: 0 auto; }';
document.head.appendChild(css);
})();
</script>

Change max-width: 300px; max-height: 300px; by the width and height of images you want.

Hide UPC and MPN on the product page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.productView-info-name--upc, .productView-info-value--upc, .productView-info-name--mpn, .productView-info-value--mpn { display: none }';
document.head.appendChild(css);
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '@media (max-width: 801px) {'
+ '.listItem-figure { padding-top: 100%; margin-bottom: .75rem }'
+ '.listItem-image { position: absolute; left: 0; top: 0; bottom: 0; right: 0; max-height: 100%; margin: 0 auto; object-fit: contain; }'
+ '.listItem-content { display: flex; flex-direction: column }'
+ '.listItem-actions { order: 1; margin-bottom: .75rem }'
+ '.listItem-details { order: 2 }'
+ '}';
document.head.appendChild(css);
})();
</script>

Hide AMEX credit card option on the checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.creditCardTypes-list-item .icon[data-test="credit-card-icon-american-express"] { display: none }';
document.head.appendChild(css);
})();
</script>

Customize the main navigation full width

customize-main-nav-full-width

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = ''
+ '@media (min-width: 801px) {'
+ '.navPages-container .container { width: auto; max-width: none; padding: 0 }'
+ '.navPages { max-width: none; text-align: center }'
+ '}';
document.head.appendChild(css);
})();
</script>

Hide the default image when hover the product card

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.card-image ~ .card-image { background-color: #fff; height: 100% }';
document.head.appendChild(css);
})();
</script>

Display YouTube videos as the alternate images on PDP

custom-script-bulk-product-videos

Question:

We are trying to get a youtube video to be in the alternate image spots on our products. We have 3 videos that we show for 3 separate categories. Is it possible to have these videos applied in bulk to the products in those categories?

Answer:

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function(vidsByCat, $) {
var css = document.createElement('style');
css.innerHTML = ''
+ '.productView-imageCarousel-main-item iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; max-height: 100%; margin: auto; pointer-events: none }'
+ '.productView-imageCarousel-nav-item svg { position: absolute; width: 40px; height: 40px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; fill: rgba(255,0,0,0.8) }';
document.head.appendChild(css);
var icon = '<svg viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M31.6634051,8.8527593 C31.6634051,8.8527593 31.3509198,6.64879843 30.3919217,5.67824658 C29.1757339,4.40441487 27.8125088,4.39809002 27.1873503,4.32353816 C22.7118278,4 15.9983092,4 15.9983092,4 L15.984407,4 C15.984407,4 9.27104501,4 4.79536595,4.32353816 C4.17017613,4.39809002 2.80745205,4.40441487 1.59082583,5.67824658 C0.631890411,6.64879843 0.319843444,8.8527593 0.319843444,8.8527593 C0.319843444,8.8527593 0,11.4409393 0,14.0290881 L0,16.4554834 C0,19.0436008 0.319843444,21.6317495 0.319843444,21.6317495 C0.319843444,21.6317495 0.631890411,23.8357417 1.59082583,24.8062935 C2.80745205,26.0801566 4.40557339,26.0398591 5.11736986,26.1733699 C7.67602348,26.4187241 15.9913894,26.4946536 15.9913894,26.4946536 C15.9913894,26.4946536 22.7118278,26.4845401 27.1873503,26.1610333 C27.8125088,26.0864501 29.1757339,26.0801566 30.3919217,24.8062935 C31.3509198,23.8357417 31.6634051,21.6317495 31.6634051,21.6317495 C31.6634051,21.6317495 31.9827789,19.0436008 31.9827789,16.4554834 L31.9827789,14.0290881 C31.9827789,11.4409393 31.6634051,8.8527593 31.6634051,8.8527593 Z M12.6895342,19.39582 L12.6880626,10.4095186 L21.3299413,14.9183249 L12.6895342,19.39582 Z" id="Imported-Layers"></path></svg>';
// Load Youtube API
(function() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})();
function YTAPIReady(callback) {
var i = 0;
var t = setInterval(function() {
if (window.YT && window.YT.Player) {
clearInterval(t);
return callback();
}
if (i++ > 100) {
clearInterval(t);
}
}, 100);
}
function process($scope, category, useJS) {
if (category && vidsByCat[category]) {
var $thumbs = $();
var $mains = $();
for (var i = 0; i < vidsByCat[category].length; i++) {
var vid = vidsByCat[category][i];
var thumbUrl = 'https://img.youtube.com/vi/' + vid + '/maxresdefault.jpg';
// var mainIframe = '<iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/' + vid + '?controls=0&enablejsapi=1&modestbranding=1&playsinline=1&iv_load_policy=3&showinfo=0&wmode=transparent&rel=0&fs=0" frameborder="0" allowfullscreen>';
var $slide = $('<li class="productView-imageCarousel-main-item"></li>');
var ytid = 'ytplayer_' + $scope.find('input[name=product_id]').val() + '_' + i;
$thumbs = $thumbs.add($('<li class="productView-imageCarousel-nav-item"><img src="' + thumbUrl + '" alt="" />' + icon + '</li>'));
$mains = $mains.add($slide);
YTAPIReady((function($slide, ytid) {
$slide.append('<div id="' + ytid + '"></div>');
var player = new YT.Player(ytid, {
height: '720',
width: '405',
videoId: vid,
wmode: 'transparent',
playerVars: {
controls: 1,
disablekb: 1,
enablejsapi: 1,
fs: 0,
rel: 0,
showinfo: 0,
iv_load_policy: 3,
modestbranding: 1,
wmode: 'transparent'
},
events: {
onStateChange: function(event) {
if (event.data == YT.PlayerState.PLAYING) {
$slide.css('pointer-events', 'none');
$(player.getIframe()).css('pointer-events', 'all');
} else if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) {
$slide.css('pointer-events', '');
$(player.getIframe()).css('pointer-events', '');
}
}
}
});
$slide.on('click', function(event) {
event.preventDefault();
if (player.getPlayerState() != YT.PlayerState.PLAYING) {
player.playVideo();
}
});
}).bind(null, $slide, ytid));
}
if (useJS) {
var $nav = $scope.find('[data-image-gallery-nav]');
var $main = $scope.find('[data-image-gallery-main]');
var idx = $nav.slick('slickCurrentSlide');
$thumbs.each(function(i, el) {
$nav.slick('slickAdd', el, idx + i);
});
$mains.each(function(i, el) {
$main.slick('slickAdd', el, idx + i);
});
} else {
$scope.find('[data-image-gallery-nav] .slick-current').after($thumbs);
$scope.find('[data-image-gallery-main] .slick-current').after($mains);
}
}
}
$(document).ready(function() {
var $scope = $('.productView [data-also-bought-parent-scope]');
if ($scope.length > 0) {
var category = {{{JSONstringify (first product.category)}}};
process($scope, category);
}
});
$('body').on('loaded.instantload', function(event, resp) {
var $scope = $('.productView [data-also-bought-parent-scope]');
if ($scope.length > 0) {
var category = $('.breadcrumbs .breadcrumb.is-active').prev().find('[itemprop="name"]').text();
process($scope, category);
}
});
$('body').on('loaded.quickview', function(event, product) {
var productId = product.$scope.find('[name=product_id]').val();
stencilUtils.api.product.getById(productId, { template: 'common/breadcrumbs' }, function(err, resp) {
if (err) {
return;
}
var category = $(resp).find('.breadcrumb.is-active').prev().find('[itemprop="name"]').text();
process(product.$scope, category, true);
});
});
})({
'Sports & Entertainment': [
'DF3saLvmGow',
'h27hXL5Pemg'
],
'Beauty & Health': [
'_m1Je_BYdrQ',
'l9Iug7n1uFA'
]
},
window.jQuerySupermarket || window.jQuery);
</script>

Configure the videos coresponding to each category:

Edit these lines in the script above:

'Sports & Entertainment': [
'DF3saLvmGow',
'h27hXL5Pemg'
],
'Beauty & Health': [
'_m1Je_BYdrQ',
'l9Iug7n1uFA'
]

Where Sports & Entertainment is the category name with case-sensity. DF3saLvmGow and h27hXL5Pemg are the YouTube videos code to display for this category.

Beauty & Health is a different category name. _m1Je_BYdrQ and l9Iug7n1uFA are other YouTube videos code for this category.

You can add more categories and videos if you want.

To find the YouTube video code, view the video, click Share button and copy the code next to https://youtu.be/, see this screenshot:

get-youtube-video-code

Display your custom social icons on the header

<script>
(function() {
document.querySelector('.navPages .navPages-socials').innerHTML = ''
+ '<a href="https://www.facebook.com/SupremeAudio" target="_blank"><img src="https://cdn10.bigcommerce.com/s-agur2fw3/content/images/facebook-40.png" alt="Facebook logo" width="40" height="40"></a>&nbsp;'
+ '<a href="https://www.instagram.com/SupremeAudioNH/" target="_blank"><img src="https://cdn10.bigcommerce.com/s-agur2fw3/content/images/instagram-40.png" alt="Instagram logo" width="40" height="40"></a>&nbsp;'
+ '<a href="https://www.pinterest.com/SupremeAudio/pins/" target="_blank"><img src="https://cdn10.bigcommerce.com/s-agur2fw3/content/images/pinterest-40.png" alt="Pinterest logo" width="40" height="40"></a>&nbsp;'
+ '<a href="https://www.twitter.com/supremeaudionh/" target="_blank"><img src="https://cdn10.bigcommerce.com/s-agur2fw3/content/images/twitter-40.png" alt="Twitter logo" width="40" height="40"></a>&nbsp;'
+ '<a href="https://www.linkedin.com/company/1010604/" target="_blank"><img src="https://cdn10.bigcommerce.com/s-agur2fw3/content/images/linkedin-40.png" alt="LinkedIn logo" width="40" height="40"></a>&nbsp;'
+ '<a href="https://www.youtube.com/user/SupremeAudioInc" target="_blank"><img src="https://cdn10.bigcommerce.com/s-agur2fw3/content/images/youtube-40.png" alt="YouTube logo" width="40" height="40"></a>';
})();
</script>
<script>
(function() {
document.querySelector('.footer .socialLinks').innerHTML += ''
+ '<li class="socialLinks-item"><a class="icon" style="width:70px" href="https://www.houzz.com/totalsportsolutions/" target="_blank" rel="noopener">'
+ '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 137.3" enable-background="new 0 0 600 137.3" xml:space="preserve"><polygon fill="#4DBC15" points="75.7,135.5 121.1,135.5 121.1,58.5 30.2,32.5 30.2,0 0,0 0,135.5 45.5,135.5 45.5,92.8 75.7,92.8 "/><path d="M336.8,69.2c-15.8-15.8-41.5-15.8-57.3,0c-3.6,3.6-6.6,7.9-8.6,12.7c-2.1,4.9-3.2,10.2-3.1,15.6c-0.1,10.6,4.2,20.8,11.7,28.3c3.7,3.6,8,6.5,12.8,8.5c10.2,4.2,21.6,4.2,31.7,0c4.8-2,9.1-4.9,12.8-8.5c7.6-7.5,11.8-17.7,11.7-28.3c0-5.3-1-10.6-3.1-15.6C343.4,77.1,340.5,72.8,336.8,69.2z M329.1,107.1c-1,2.8-2.5,5.4-4.5,7.5s-4.4,3.8-7.1,4.9c-6.1,2.4-12.8,2.4-18.9,0c-2.7-1.1-5.1-2.8-7.1-4.9c-2-2.2-3.5-4.7-4.5-7.5c-2.2-6.3-2.2-13.2,0-19.5c1-2.8,2.5-5.4,4.5-7.5s4.4-3.8,7.1-4.9c6.1-2.4,12.8-2.4,18.9,0c2.7,1.1,5.1,2.8,7.1,4.9c2,2.2,3.5,4.7,4.5,7.5C331.3,94,331.3,100.8,329.1,107.1z"/><polygon points="518.2,73.7 518.2,59.4 458.1,59.4 458.1,74.4 496.5,74.4 456.7,121 456.7,135.5 520.4,135.5 520.4,120.5 478.1,120.5 "/><polygon points="557.8,120.5 597.9,73.7 597.9,59.4 537.8,59.4 537.8,74.4 576.2,74.4 536.4,121 536.4,135.5 600,135.5 600,120.5 "/><path d="M232.3,60c-11.2-4.6-25-2.7-33.9,4.5v-32h-16.9v103h16.9V95c0-7.7,2.2-20.6,17-20.6c13.6,0,18.4,11.1,18.4,20.6v40.5h16.8v-46C250.7,75.6,244,64.9,232.3,60z"/><path d="M420.6,100.9c0,2.4-0.3,4.8-1,7c-0.6,2.3-1.7,4.5-3.2,6.5l0,0c-1.5,2-3.4,3.6-5.7,4.7c-5.6,2.4-11.9,2.4-17.5,0c-2.2-1.1-4.2-2.8-5.7-4.7c-1.5-1.9-2.5-4.1-3.2-6.5c-0.6-2.3-1-4.7-1-7V59.2h-16.7v43.4c0,16.1,7.1,26.9,21.5,32.3c9,3.3,18.9,3.2,27.8-0.1c17.6-6.7,21.3-21.2,21.3-32.3V59.4h-16.7v41.5H420.6z"/></svg>'
+ '</a></li>';
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var li = document.createElement('li');
li.innerHTML = '<i class="fa fa-li fa-phone"></i><a href="tel:01 1234 5678">Call us at 01 1234 5678</a>';
document.querySelector('.footer-info-col--about > ul:nth-child(2)').appendChild(li);
})();
</script>

Replace the sample phone number 01 1234 5678 by yours.

To display additional address and phone number in the footer, go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var ul = document.createElement('ul');
ul.setAttribute('class', 'fa-ul');
ul.innerHTML = ''
+ '<li><i class="fa fa-li fa-map-marker"></i><address>Your address line 1<br> Your address line 2</address></li>'
+ '<li><i class="fa fa-li fa-phone"></i><a href="tel:01 1234 5678">Call us at 01 1234 5678</a></li>';
var el = document.querySelector('.footer-info-col--about');
el.insertBefore(ul, el.querySelector('.socialLinks'));
})();
</script>

Replace Your address line 1<br> Your address line 2 and 01 1234 5678 by your address and phone number.

Move Bulk Discount Rates table to below the quantity box

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function process($scope) {
$scope.find('.productView-info-bulkPricing').insertBefore($scope.find('form[data-cart-item-add]').first().find('> .form-action'));
}
process($('.productView'));
$('body').on('loaded.quickview', function() {
process($('.productView--quickView'));
});
$('body').on('loaded.instantload', function() {
process($('.productView'));
});
})(window.jQuerySupermarket);
</script>

Collapse subcategories list on category pages on mobile by default

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('[data-collapsible="#categories-navList"]')
.removeClass('is-open')
.prop('aria-expanded', false);
$('#categories-navList')
.removeClass('is-open')
.prop('aria-hidden', true);
})(window.jQuerySupermarket);
</script>

Hide PayPal Express Checkout buttons

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.PayPalExpressCheckout { display: none !important }';
document.head.appendChild(css);
})();
</script>

Center the logo on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.header-logo--left .header-logo-image { right: 0 }';
document.head.appendChild(css);
})();
</script>

Make products pick list images bigger

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.productOptions-list-item-figure { width: 200px }'
+ '.productOptions-list-item-image { width: 100% }';
document.head.appendChild(css);
})();
</script>

You can change image width in width: 200px as you want.

Disable Lazy Load of the main product images on PDP

If you want to stop Lazy Load of the main product images on the product pages so that the images on the carousel display faster when changing slides.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function stopLazyLoadProductMainImages($scope) {
$scope.find('[data-image-gallery-main] img[data-lazy]').each(function(i, el) {
var $el = $(el);
$el.prop('src', $el.data('lazy')).removeAttr('data-lazy');
});
}
$(document).ready(function() {
stopLazyLoadProductMainImages($('body'));
});
$('body').on('loaded.quickview', function() {
stopLazyLoadProductMainImages($('.modal-body.quickView'));
});
$('body').on('loaded.instantload', function() {
stopLazyLoadProductMainImages($('body'));
});
})(window.jQuerySupermarket)
</script>

Hide Go to Top button

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '#scrollToTopFloatingButton { display: none }';
document.head.appendChild(css);
})();
</script>

Hide Sub-Categories column in Products by Category sections

hide-subcategories-in-products-by-category-block

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.emthemesModez-productsByCategoryTabs-details-sub { display: none !important }';
document.head.appendChild(css);
})();
</script>

Display your Instagram photo feeds on home page

The old Instagram API has been retired from Oct 15 2019. We've built another tool: https://papathemes.com/embed-instagram-photos-on-bigcommerce-shopify-wordpress/

Please use this tool to generate the custom code snippet. For example your generated code is:

<script>!function(){var e=document.createElement("script");e.defer=!0,e.src="https://papathemes.s3.amazonaws.com/instagramapp/assets/js/embed-1.0.1.js",e.onload=function(){PapathemesInstagramApp.init({account_id:"XXXXXXXXXXXXXXXXXXXX",element_id:"papainstagram-render",limit:"12",preset:"grid"})},document.body.appendChild(e)}();</script>

Copy the generated code without the begin <script> and the end </script> tags.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
{{#if page_type '==' 'default'}}
document.querySelector('#instafeed-carousel').innerHTML = '<div id="papainstagram-render"></div>';
// COPY YOUR GENERATED CODE HERE WITHOUT THE < SCRIPT > TAG
// END OF COPY.
{{/if}}
})();
</script>

Paste your generated code without <script> </script> between 2 lines:

// COPY YOUR GENERATED CODE HERE WITHOUT THE < SCRIPT > TAG
// END OF COPY.

The final example result should look like below:

<script>
(function() {
{{#if page_type '==' 'default'}}
document.querySelector('#instafeed-carousel').innerHTML = '<div id="papainstagram-render"></div>';
// COPY YOUR GENERATED CODE HERE WITHOUT THE < SCRIPT > TAG
!function(){var e=document.createElement("script");e.defer=!0,e.src="https://papathemes.s3.amazonaws.com/instagramapp/assets/js/embed-1.0.1.js",e.onload=function(){PapathemesInstagramApp.init({account_id:"XXXXXXXXXXXXXXXXXXXX",element_id:"papainstagram-render",limit:"12",preset:"grid"})},document.body.appendChild(e)}();
// ----------------------------------------------------------
{{/if}}
})();
</script>

Add Read More button on the category description and brand description

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
var $content = $('.papaSupermarket-categoryPage-description');
if ($content.length === 0) {
return;
}
if ($content.is('[data-emthemesmodez-mobile-collapse-content]')) {
return;
}
$content.addClass('emthemesModez-mobile-collapse-content')
.attr('data-emthemesmodez-mobile-collapse-content', true);
var $container = $('<div class="dts-more-container" data-emthemesmodez-mobile-collapse></div>')
.insertBefore($content)
.append($content);
var $toggler = $('<a href="#" class="emthemesModez-mobile-collapse-handle" data-emthemesmodez-mobile-collapse-handle=""><span class="on">Read More</span><span class="off">Close</span></a>')
.appendTo($container);
var $style = $('<style>'
+ '.dts-more-container { margin-bottom: 1.5rem }'
+ '.dts-more-container .emthemesModez-mobile-collapse-content { max-height: 150px; overflow: hidden }'
+ '.dts-more-container .emthemesModez-mobile-collapse-content.is-active { max-height: none; overflow: visible; overflow-y: auto }'
+ '.dts-more-container .emthemesModez-mobile-collapse-handle { display: flex }'
+ '</style>')
.appendTo('head');
}
main();
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket || window.jQuery);
</script>

Solution 2:

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = `
.papaSupermarket-categoryPage-description,
.papaSupermarket-brandPage-description,
.papaSupermarket-home-description { max-height: 300px !important; overflow: hidden !important; margin-bottom: 1.5rem !important }
._readMoreMod._opened { max-height: none !important }
._readMoreContainer { margin-bottom: 1.5rem; padding: 0 .75rem }
.papaSupermarket-home-description + ._readMoreContainer { padding: 0 }
._readMoreContainer ._readMore._hide { display: none }
`;
document.head.appendChild(style);
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function main(resized) {
document.querySelectorAll('.papaSupermarket-categoryPage-description, .papaSupermarket-brandPage-description, .papaSupermarket-home-description').forEach(function(el) {
var isNew = false;
if (!el.classList.contains('_readMoreMod')) {
var div = document.createElement('div');
div.className = '_readMoreContainer';
var a = document.createElement('a');
a.innerHTML = 'Read More';
a.className = '_readMore _hide';
a.addEventListener('click', function(event) {
event.preventDefault();
if (a.classList.contains('_opened')) {
a.innerHTML = 'Close';
a.classList.remove('_opened');
el.classList.remove('_opened');
} else {
a.innerHTML = 'Read More';
a.classList.add('_opened');
el.classList.add('_opened');
}
});
div.appendChild(a);
el.parentNode.insertBefore(div, el.nextSibling);
el.classList.add('_readMoreMod');
isNew = true;
}
if (isNew || resized) {
if (el.scrollHeight > el.clientHeight) {
el.nextSibling.querySelector('._readMore').classList.remove('_hide');
} else {
el.nextSibling.querySelector('._readMore').classList.add('_hide');
}
}
});
}
function ready() {
var mo = new MutationObserver(debounce(main, 300));
mo.observe(document.body, { childList: true, subtree: true });
window.addEventListener('resize', debounce(main.call(null, true), 300));
main();
}
document.addEventListener('DOMContentLoaded', ready);
ready();
})();
</script>

Hide number of products on the pagination bar on category pages

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.pagination-info { display: none }';
document.head.appendChild(css);
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var img = document.createElement('img');
img.src = 'data:image/gif;base64,R0lGODlhZAA8AOZvADMzM8zMzBAQELa2toODg1NTU+vr66urqwAAAKmpqURERPDw8P///3V1daenp2ZmZlhYWJmZmRUVFRsbGw8PD93d3YqKitvb21ZWVg4ODh8fH6+vr+jo6BkZGYaGhnh4eO/v73l5eUlJSX5+fhQUFBISEhEREePj40dHR3d3d4CAgCQkJISEhNra2urq6kZGRqqqqiIiIhYWFoKCgq6urt7e3nR0dLu7u1BQULy8vO3t7XZ2duXl5b6+vrKysqysrCEhIfHx8d/f37i4uL29vVVVVUhISBoaGkpKSre3t7S0tNzc3BwcHCAgIFJSUrOzsxMTE+7u7hcXF7q6uoGBgR4eHkNDQyMjI3p6euHh4U9PT+Li4lRUVHt7e+zs7K2trefn5+np6bCwsEVFRVdXV0FBQUtLS7GxsYWFhebm5uTk5IeHh6ioqODg4B0dHf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAG8ALAAAAABkADwAAAf/gG8XBRQIhoeIiYqLjI2Oj5CRCBQFS28VJZKam5ydmyUVGJ6jpKWbGAKmqqusGayvsLGys7S1tre4ubq7vL2+v8DBwoxuABAPyMhGAMO8EBEtDNLT1DoBFszNswARLtTf4NIBDdqv3OHo4S4p5aYs6BdKESPIIREwAfBI7Z0A+d8BHqxwJGBMhHAR+Gl6AC5CNkkUHlQAWEihoxDfiDzs1OBbDQ0WGY349kGVP2ocUoVExHDago2mDk6rsfLQC2pLJsRSQc1HTQTU1EiYZYHag5U0qIGkNYRaJlsSAABwpagJgBiJFFCDcCvMtDO1RPwTh+NQiLEclJAwNFYMLgDU/2CyavnNjKGk4AxxoabyVo5pN2TBBRfAUEdwRxGMXaNrArUjsQ5Q26GFQLYF0wIWiNABwWBpnXWNtRGrzbTEhz4zwIrISYDXCXd9LgwrbiIR06LwOzFNriOpAxlRY516WhpSGqT+9i11aCKZDFA3kvFgA2ZxHpwjwHBgA7UeCcKHH8vgQIIDaAyFMH+AzKEIB2BsQCDBuzSuBMx/GRohiLQWJRnywFgRXMHSNLExIsMO6eiQDXTpoMMBWwgeEpcQtvFwGnnS0ICAZOBUUZw4vhmSQoQMGGAIhCh+oyICA0xDwCH/uADCNxSiyOE0AxxCwTQniNCIYwyAYMEyANDFQP8RCKAQAYQJWPBkBBb4QM2UicUozYw5TpPFkz0q9k0EH+zYQwos6mRIDac54kESUDxXoYXTLDUiAxMmoiUDXIo5zQ+KkMdVlwzMtyI1KByyJzmbaDDWAYcIYBsiBUzzIiJ79jnWpYiMRZuA1ISGgKTTvPDeNCpEgkQESXDIRqSTHlKpNJwakimN08ywyFgjHCjNCYncKI0Cp0qjqyMRgJGOA7D2lsisKSpya5fS4SqNdHR9aoiwDBB7qDSpMgIEhpn9MMNYzBpCqjQwQVsrjDJaG92u05B2SLaJXNftIQlMgwUjTHiaqCF/SZPuqLEa4q608VJLrzSMgipOvtN46+f/vIu8Mw0ThxBpcLPsPmspw1vKW22XESOALyL6WmyANAsMqggM1MhgSAnkHbwuA+2OrGfDF598ccorH9KyIR1kVqKSAVARgRff6JwwAgv/XLLDgU5DdGYUD2vIZ1OoqUgGLErDgQfTQKouNWUkUsQ0QShywzQeHHJBm1lLE6DEDGgLVKl8J8gIEd9UYNU0TxxiAjUW881A3gwkqOG1DzPQ673TbJEINUIi0BTlj1jRRQQslIUACVIBAAQiqctlQuuKrJA6ZF+nvpYirUuBCOqpJ9I6VbD/JPzwxBdv/PHIJ6/88sz/UlHzrYgCPSsYVGDC9KqYUMEbLRSAPSkFXPBGASAAOw==';
img.alt = 'Affirm';
var span = document.createElement('span');
span.className = 'footer-payment-icon';
span.style = "display:inline-flex;align-items:center";
span.appendChild(img);
var el = document.querySelector('.footer-payment-icons');
el.appendChild(span);
})();
</script>

Hide "Subscribe to our newsletter" on the checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '#shouldSubscribe, #shouldSubscribe + label { display: none !important }';
document.head.appendChild(css);
})();
</script>

Move Warranty tab to the last

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function ready($scope) {
$('.productView-description .tab--warranty, .productView-description #tab-warranty', $scope).each(function(i, el) {
$(el).appendTo($(el).parent());
});
}
ready();
$('body').on('loaded.instantload', function() {
ready();
});
$('body').on('loaded.quickview', function(event, product) {
ready($(product.$scope));
});
})(window.jQuerySupermarket);
</script>

Use flyout menu for certain categories

If you are using the mega menu style but want to use the flyout menu for some categories, for example the second and third categories.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function ready() {
var $el = $('.navPages-list--categories').children(':nth-child(2), :nth-child(3)');
$el.find('.navPage-subMenu').addClass('navPage-subMenu--standard');
$el.find('.navPage-childList').addClass('navPage-childList--standard');
}
$(document).ready(ready);
$('body').on('loaded.instantload', ready);
})(window.jQuerySupermarket);
</script>

Edit :nth-child(2), :nth-child(3) for different categories.

Show Availability on the cart page and checkout page

  1. Go to Storefront > Script Manager, click Create a Script, choose:
  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script data="application/json" id="PAPATHEMESSHOWAVAILABILITY_cartId" data-instantload-body-dynamic>{{{JSONstringify cart_id}}}</script>
<script data="application/json" id="PAPATHEMESSHOWAVAILABILITY_cartItems" data-instantload-body-dynamic>{{{JSONstringify cart.items}}}</script>
<script src="//papathemes.com/content/supermarket/addon.show-availability.js" async></script>
  1. Create another script as the same but set:
  • Select pages where script will be added = Checkout Page

Display a custom message on the cart page

custom-message-on-cart-page

Display a custom message on the cart page for a specific customer group.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
{{#if customer.customer_group_name '===' 'YOUR CUSTOMER GROUP NAME'}}
(function($) {
var css = document.createElement('style');
css.innerHTML = '.cart-customMessage {}';
document.head.appendChild(css);
var el = document.createElement('div');
el.setAttribute('class', 'cart-customMessage');
el.innerHTML = 'ADD YOUR CUSTOM MESSAGE HERE';
document.querySelector('[data-cart-totals]').appendChild(el);
})();
{{/if}}
</script>

Edit:

  • YOUR CUSTOMER GROUP NAME: your customer group name
  • ADD YOUR CUSTOM MESSAGE HERE: your custom message

If you want to display the message for all customers, remove 2 lines:

{{#if customer.customer_group_name '===' 'YOUR CUSTOMER GROUP NAME'}}
...
{{/if}}

Disable quick search display search results popup

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('[data-search-quick]').removeAttr('data-search-quick');
})(window.jQuerySupermarket);
</script>

Improve web page's style for print

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = ''
+ '@media print {'
+ 'body { padding: 0 }'
+ '.header { position: static; box-shadow: none }'
+ '.header .navUser-action[href^="tel:"] { position: absolute; top: -45px; right: 100px }'
+ '.is-sticky { position: static }'
+ '.is-sticky + .papathemes-stickymenu-placeholder { display: none }'
+ '.emthemesModez-quickSearch--mobileOnly { display: none }'
+ '.emthemesModez-mobile-collapse-content { max-height: none }'
+ '.emthemesModez-mobile-collapse-handle { display: none }'
+ '#scrollToTopFloatingButton { display: none }'
+ '.productView-detailsWrapper:after { content: ""; display: block; clear:both }'
+ '.productView-detailsWrapper .productView-beforeAlsoBought { display: block; }'
+ '.productView-detailsWrapper .productView-images { width: 50%; }'
+ '.productView-detailsWrapper .productView-details { width: 50%; float: right; }'
+ '.productView-imageCarousel-main-item { max-width: 350px; max-height: 350px; margin: 0; }'
+ '.page-sidebar { display: none }'
+ '}';
document.head.appendChild(style);
})();
</script>

Increase the header height and logo height on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var height = '70px';
var style = document.createElement('style');
style.innerHTML = ''
+ '@media screen and (max-width: 800px) {'
+ 'body { padding-top: ' + height + ' }'
+ '.header { min-height: ' + height + ' }'
+ '.header-logo-image-container:after { padding-bottom: ' + height + '}'
+ '.header-logo-image, .header-logo-image-unknown-size { max-height: ' + height + ' }'
+ '.navPages-container.is-open { padding-top: ' + height + ' }'
+ '}';
document.head.appendChild(style);
})();
</script>

Edit line var height = '70px';, change 70px by your desired height.

Display Pay by PO payment method for certain customers on the checkout page

  1. Login to your admin page, go to Advanced Settings > Account Signup Form > in Account Signup Fields tab, click Create a New Field.

Enter Field Name = Pay by PO Allowed Allowed and List of Values = Yes.

add-customer-field-pay-by-po

  1. Go to Advanced Settings > Account Signup Form > in Address Fields tab, click Create a New Field.

Enter Field Name = PO Number.

create-po-number-custom-field

  1. Go to Store Setup > Payments > in Offline Payment Methods section, enable one of these offline payment methods.

enable-offline-payment-methods

Rename one of these offline payment methods to Pay by PO. For example, we will rename Money Order. Click on Money Order Settings tab, enter Pay by PO in Display Name field.

rename-money-order-to-pay-by-po

  1. Go to Storefront > Script Manager, click Create a Script, choose:
  • Location on page = Footer
  • Select pages where script will be added = Checkout
  • Script type = Script

Enter the script below to Scripts contents:

<script type="application/json" id="PAPATHEMESPAYBYPO_cartId">{{{JSONstringify cart_id}}}</script>
<script type="application/json" id="PAPATHEMESPAYBYPO_config">
{
"customerFieldPayByPOLabel": "Pay by PO Allowed",
"customerFieldPayByPOValue": "Yes",
"allowCustomerGroup": "",
"payByPOPaymentMethodName": "Pay by PO",
"poNumberField": "PO Number"
}
</script>
<script src="//cdn11.bigcommerce.com/s-c14n6tful3/content/paybypo/pay-by-po.public.js" async></script>

You can configure the field name and the payment method name but make sure it matches exactly and is case-sensitive:

/** Empty to display for everyone */
"customerFieldPayByPOLabel": "Pay by PO Allowed",
"customerFieldPayByPOValue": "Yes",
/** If customerFieldPayByPOLabel empty, check check customer groups from this parameter. Seperated by commas. */
"allowCustomerGroup": "",
"payByPOPaymentMethodName": "Pay by PO",
"poNumberField": "PO Number"
"paymentMethodItemSelector": ".checkout-form .form-checklist-item",
"paymentMethodNameSelector": ".paymentProviderHeader-name",
"displayFirst": true,
"selectByDefault": false,

Pay by PO should show up when your customer logged in and has Pay by PO Allowed checked:

pay-by-po-payment-method

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
$('[data-emthemesmodez-brand-carousel]')
.removeAttr('data-emthemesmodez-brand-carousel')
.slick({
dots: false,
infinite: false,
mobileFirst: true,
slidesToShow: 4,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1260,
settings: {
slidesToScroll: 2,
slidesToShow: 10
}
},
{
breakpoint: 800,
settings: {
slidesToScroll: 2,
slidesToShow: 8
}
},
{
breakpoint: 550,
settings: {
slidesToScroll: 2,
slidesToShow: 6
}
}
]
});
}
main();
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket);
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
$('[data-emthemesmodez-brand-carousel]')
.removeAttr('data-emthemesmodez-brand-carousel')
.slick({
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
mobileFirst: true,
slidesToShow: 4,
slidesToScroll: 2,
responsive: [
{
breakpoint: 1260,
settings: {
slidesToScroll: 2,
slidesToShow: 5
}
},
{
breakpoint: 800,
settings: {
slidesToScroll: 2,
slidesToShow: 5
}
},
{
breakpoint: 550,
settings: {
slidesToScroll: 2,
slidesToShow: 3
}
}
]
});
}
main();
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket);
</script>

Change Bulk Price table to Buy XX+ and Save $XX.XX each

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function main() {
$('.productView-bulkPricing-table').each(function(i, table) {
if (!$(table).data('modified')) {
$(table).data('modified', true);
$(table).find('tr').each(function(j, tr) {
var $td;
$td = $(tr).find('td').first();
$td.html($td.html().replace(/(Buy [^\s]+).+$/i, '$1+'));
$td = $(tr).find('td').last();
$td.html($td.html().replace(/and get (.+) off/i, 'and SAVE $1 each'))
});
}
});
$('#modal-bulk-pricing .modal-body ul').each(function(i, ul) {
if (!$(ul).data('modified')) {
$(ul).data('modified', true);
$(ul).find('li').each(function(j, li) {
var a = $(li).html().trim().split('\n');
var line1 = String(a[0]).trim().replace(/(Buy [^\s]+).+$/i, '$1+');
var line2 = String(a[1]).trim().replace(/and get (.+) off/i, 'and SAVE $1 each');
$(li).html(line1 + '\n' + line2);
});
}
});
}
main();
(new MutationObserver(debounce(main, 300))).observe(document.body, { childList: true, subtree: true });
})(window.jQuerySupermarket);
</script>

Improve Bulk Price table to display both price & percent and price changed when quantity updated

improve-bulk-price-table

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
var _uniqid = 1;
function uniqid() { return _uniqid++; }
function main() {
$('.productView-bulkPricing-table').each(function(i, table) {
var $table = $(table);
if ($table.data('modified')) {
return;
}
$table.data('modified', true);
var bulk = [{ min: 0, max: 0, percent: 0 }];
var $price = $table.closest('.productView').find('[data-product-price-without-tax]').first().hide();
$price.nextAll('._clone').remove();
var $priceClone = $price.clone().insertAfter($price).addClass('_clone').removeAttr('data-product-price-without-tax').show();
var $qty = $table.closest('.productView').find('[data-quantity-change] input').first();
$table.find('tr').each(function(j, tr) {
var $td;
$td = $(tr).find('td').first();
var item;
var m = $td.text().match(/([0-9]+)[^0-9]+([0-9]+|above)/);
if (m) {
item = {
min: Number(m[1]) || 0,
max: m[2] !== 'above' ? Number(m[2]) : null
};
}
$td.html($td.html().replace(/Buy ([0-9]+) - ([0-9]+)/i, '$1 - $2'));
$td.html($td.html().replace(/Buy ([0-9]+) or above/i, '$1+'));
$td = $(tr).find('td').last();
m = $td.text().match(/([0-9]+)%/)
if (m && item) {
item.percent = Number(m[1]);
bulk.push(item);
}
$td.html($td.html().replace(/and get ([0-9]+)% off/i, '<span class="_price" data-percent="$1"></span> ($1% of each)'));
});
var updateBulkPrice = function() {
var priceTxt = $price.text();
var price = Number(priceTxt.replace(/[^0-9,.]/g, ''));
$table.find('._price').each(function(j, el) {
var $el = $(el);
var bulkPrice = (price * (100 - Number($el.data('percent'))) / 100).toFixed(2);
var bulkPriceTxt = priceTxt.replace(/[0-9.,]+/, bulkPrice);
$el.html($price.text().replace(/[0-9.,]+/, bulkPrice));
});
};
var updatePrice = function() {
var qty = Number($qty.val());
for (var j = 0; j < bulk.length; j++) {
if (qty >= bulk[j].min && (qty <= bulk[j].max || !bulk[j].max)) {
var percent = bulk[j].percent;
var priceTxt = $price.text();
var price = Number(priceTxt.replace(/[^0-9,.]/g, ''));
var bulkPrice = (Number((price * (100 - percent) / 100).toFixed(2)) * qty).toFixed(2);
var bulkPriceTxt = priceTxt.replace(/[0-9.,]+/, bulkPrice);
$priceClone.html(bulkPriceTxt);
}
}
};
var showBulkOptions = function() {
var $field = $('<div class="form-field form-field--bulk"></div>');
$field.append('<label class="form-label form-label--alternate form-label--inlineSmall">Bulk savings</label>');
for (var j = 1; j < bulk.length; j++) {
var percent = bulk[j].percent;
var priceTxt = $price.text();
var price = Number(priceTxt.replace(/[^0-9,.]/g, ''));
var bulkPrice = (price * (100 - percent) / 100).toFixed(2);
var bulkPriceTxt = priceTxt.replace(/[0-9.,]+/, bulkPrice);
var uid = uniqid();
$field.append('<input class="form-radio" type="radio" id="_bulk_qty_' + uid + '" name="_bulk_qty" value="' + bulk[j].min + '">'
+ '<label class="form-option" for="_bulk_qty_' + uid + '"><span class="form-option-variant">Buy ' + bulk[j].min + '<span class="_price">' + bulkPriceTxt + '/ea</span></span></label>');
}
const $incField = $qty.closest('.form-field--increments');
$incField.prevAll('.form-field--bulk').remove();
$incField.before($field);
$field.find('input').on('change', function(event) {
$qty.val($(event.target).val()).trigger('change');
});
};
var priceEl = $price.get(0);
var mo = $price.data('bulkPricingMO');
if (mo) {
mo.disconnect();
}
mo = new MutationObserver(function() {
updatePrice();
updateBulkPrice();
showBulkOptions();
});
mo.observe(priceEl, { attributes: true, childList: true });
$price.data('bulkPricingMO', mo);
$qty.on('change', updatePrice);
$table.closest('.productView').find('[data-quantity-change] button').on('click', debounce(updatePrice, 300));
updatePrice();
updateBulkPrice();
showBulkOptions();
});
}
main();
(new MutationObserver(debounce(main, 300))).observe(document.body, { childList: true, subtree: true });
var style = document.createElement('style');
style.innerHTML = '.productView-options .form-field--bulk .form-option-variant { text-align: center }'
+ '.productView-options .form-field--bulk ._price { display: block; font-weight: bold }';
document.head.appendChild(style);
})(window.jQuerySupermarket);
</script>

Make all categories and subcategories expanded by default on the sidebar

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function main() {
$('.sidebarBlock .navPages-list [data-collapsible]').not('.is-open').trigger('click');
}
$(document).ready(main);
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket);
</script>

Hide the left sidebar for all static web pages

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function css() {
var style = document.createElement('style');
style.innerHTML = '.papaSupermarket-pageType--page .page-sidebar { display: none !important }';
document.head.appendChild(style);
}
function main() {
if ($('body').hasClass('papaSupermarket-pageType--page')) {
$('body').find('.page-sidebar').remove();
}
}
var debouncedMain = debounce(main, 200);
css();
$(document).ready(function() {
debouncedMain();
$('body').on('loaded.instantload', debouncedMain);
});
})(window.jQuerySupermarket);
</script>

Display content below product image

content-below-product-image

Edit your product, in Description field, click HTML button to open HTML Source Editor.

Input your custom content HTML to display under the product image, wrap the custom content HTML by a DIV tag as below:

<div data-below-image>
... Your custom HTML here ...
</div>

edit-product-description-below-image

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function css() {
var style = document.createElement('style');
style.innerHTML = '[data-below-image] { margin-top: 1.5rem }';
document.head.appendChild(style);
}
function main() {
$('.productView').each(function(i, el) {
$productView = $(el);
if (!$productView.data('descBelowImageLoaded')) {
$productView.data('descBelowImageLoaded', true);
$content = $productView.find('[data-below-image]');
$productView.find('.productView-images').first().append($content);
}
});
}
css();
$(document).ready(function() {
main();
$('body').on('loaded.instantload', main);
$('body').on('loaded.quickview', main);
});
})(window.jQuerySupermarket);
</script>

Display custom content above product description

content-above-description

Edit your product, in Description field, click HTML button to open HTML Source Editor.

Input your custom content HTML to display under the product image, wrap the custom content HTML by a DIV tag as below:

<div data-above-description>
Your custom HTML here ...<br/>
Example:<br/>
<div class="_row">
<div class="_col"><img src="//via.placeholder.com/200x200" alt="200x200" /></div>
<div class="_col"><img src="//via.placeholder.com/200x200" alt="200x200" /></div>
<div class="_col"><img src="//via.placeholder.com/200x200" alt="200x200" /></div>
<div class="_col"><img src="//via.placeholder.com/200x200" alt="200x200" /></div>
<div class="_col"><img src="//via.placeholder.com/200x200" alt="200x200" /></div>
</div>
</div>

edit-content-above-description

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function css() {
var style = document.createElement('style');
style.innerHTML = '[data-above-description] { margin-top: 1.5rem }'
+ '[data-above-description] ._row { display: flex; justify-content: center }'
+ '[data-above-description] ._col { padding: 0 .25rem }';
document.head.appendChild(style);
}
function main() {
$('.productView').each(function(i, el) {
$productView = $(el);
if (!$productView.data('contentAboveDescLoaded')) {
$productView.data('contentAboveDescLoaded', true);
$content = $productView.find('[data-above-description]').show();
$productView.find('.productView-description').first().before($content);
}
});
}
css();
$(document).ready(function() {
main();
$('body').on('loaded.instantload', main);
$('body').on('loaded.quickview', main);
});
})(window.jQuerySupermarket);
</script>

Display a banner at bottom of all pages

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var div = document.createElement('div');
div.className = 'container';
div.innerHTML = '<div data-emthemesmodez-remote-banner="emthemesModezBannersBlockBeforeFooter"></div>';
document.body.insertBefore(div, document.body.querySelector('footer.footer'));
})();
</script>

Then create a new banner in Marketing > Banners > click Create a Banner button.

In Banner Content field, click HTML button to open HTML Source Editor:

Enter a example content below:

<div class="emthemesModezBannersBlockBeforeFooter">
<p>Example banner before footer displays on all pages:</p>
<p><img src="//via.placeholder.com/800x80" alt="800x80" /></p>
</div>

Freely edit your custom content inside <div class="emthemesModezBannersBlockBeforeFooter"> ... </div>.

IMPORTANT: Other fields must be configured as below:

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

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
var categoryLinks = [
['Electronics', '/electronics/'],
['Electrical', '/electrical/'],
['Hardware', '/hardware/'],
['Hydraulic/Pneumatic', '/hydraulic-pneumatic/'],
['Instrumentation', '/instrumentation-1/'],
['Mechanical', '/mechanical/'],
['Motor', '/motor/']
];
var brandLinks = [
['ALLEN-BRADLEY (ROCKWELL AUTOMATION INC)', '/allen-bradley-rockwell-automation-inc/'],
['HONEYWELL INTERNATIONAL INC', '/honeywell-international-inc/'],
['GE (GENERAL ELECTRIC CO)', '/ge-general-electric-co/'],
['SIEMENS CORP', '/siemens-corp/'],
['FANUC AMERICA CORP', '/fanuc-america-corp/'],
['EATON', '/eaton/'],
['GENERAL ELECTRIC', '/general-electric/'],
['View All', '/brands/']
];
$('.footer-info-col[data-section-type="footer-categories"] .footer-info-list').empty()
.append(function() {
return categoryLinks.map(function(item) {
return $('<li/>').append($('<a/>').attr('href', item[1]).html(item[0]));
});
});
$('.footer-info-col[data-section-type="footer-brands"] .footer-info-list').empty()
.append(function() {
return brandLinks.map(function(item) {
return $('<li/>').append($('<a/>').attr('href', item[1]).html(item[0]));
});
});
})(window.jQuerySupermarket);
</script>

Edit the category links in this variable:

var categoryLinks = [
['Electronics', '/electronics/'],
['Electrical', '/electrical/'],
['Hardware', '/hardware/'],
['Hydraulic/Pneumatic', '/hydraulic-pneumatic/'],
['Instrumentation', '/instrumentation-1/'],
['Mechanical', '/mechanical/'],
['Motor', '/motor/']
];

Edit the brand links in this variable:

var brandLinks = [
['ALLEN-BRADLEY (ROCKWELL AUTOMATION INC)', '/allen-bradley-rockwell-automation-inc/'],
['HONEYWELL INTERNATIONAL INC', '/honeywell-international-inc/'],
['GE (GENERAL ELECTRIC CO)', '/ge-general-electric-co/'],
['SIEMENS CORP', '/siemens-corp/'],
['FANUC AMERICA CORP', '/fanuc-america-corp/'],
['EATON', '/eaton/'],
['GENERAL ELECTRIC', '/general-electric/'],
['View All', '/brands/']
];

Fix product image not sticky properly on small screen 1024px

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = ''
+ '@media (min-width: 801px) and (max-width: 1260px) {'
+ '.productView:after { display: none; }'
+ '.productView-descriptionWrapper { display: block; clear: both }'
+ '}';
document.head.appendChild(style);
})();
</script>

Limit sub-categories shown on the left sidebar

limit-subcategories-on-the-sidebar

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
var LIMIT = 10;
function css() {
var style = document.createElement('style');
style.innerHTML = '.navList-item._moreless:not(._active) ._less { display: none }'
+ '.navList-item._moreless._active ._more { display: none }';
document.head.appendChild(style);
}
function main() {
$('#categories-navList').each(function(i, navListEl) {
var $navList = $(navListEl);
if ($navList.data('limitCategorySidebar')) {
return;
}
$navList.data('limitCategorySidebar', true);
var $moreItems = $navList.children().eq(LIMIT).nextAll();
if ($moreItems.length > 0) {
var $a = $('<a class="navList-action" href="#"><span class="_more">Show More</span><span class="_less">Show Less</span></a>');
var $li = $('<li class="navList-item _moreless"></li>').append($a);
$navList.append($li);
$moreItems.hide();
$a.on('click', function(event) {
event.preventDefault();
$li.toggleClass('_active');
if ($li.hasClass('_active')) {
$moreItems.show();
} else {
$moreItems.hide();
}
});
}
})
}
css();
main();
$('body').on('loaded.instantload', main);
})(window.jQuerySupermarket);
</script>

You can change the number of subcategories shown by default by editing the number in line var LIMIT = 10;.

Replace On Sale product badge by image

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
var IMAGE_BADGE = '/product_images/uploaded_images/low-everyday-price.png';
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function main() {
$('.sale-flag-side')
.not('.sale-flag-side--custom, .sale-flag-side--outstock')
.not('.saleImageBadgeLoaded')
.each(function(i, el) {
var $el = $(el).html('').addClass('saleImageBadgeLoaded').css({ 'background-color': 'transparent', 'padding': '0' });
$('<img/>').attr('alt', $el.text()).attr('src', IMAGE_BADGE).appendTo($el);
});
}
main();
(new MutationObserver(debounce(main, 300))).observe(document.body, { childList: true, subtree: true });
})(window.jQuerySupermarket);
</script>

Upload your badge image in Storefront > Image Manager. Replace /product_images/uploaded_images/low-everyday-price.png by your badge image URL.

DNS Prefetch and custom CSS for Page Speed Optimization

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = '.emthemesModez-sections-group { display: block; min-height: 150px }'
+ '@media (max-width: 800px) { .heroCarousel-content { padding-top: 80px; padding-bottom: 100px } }';
document.head.appendChild(css);
function addLink(rel, href, as, crossOrigin) {
var link = document.createElement('link');
link.rel = rel;
link.href = href;
if (crossOrigin) {
link.crossOrigin = crossOrigin;
}
if (as) {
link.as = as;
}
document.head.appendChild(link);
}
addLink('https://staticw2.yotpo.com', 'dns-prefetch preconnect', '', true);
addLink('https://ssl.google-analytics.com', 'dns-prefetch preconnect', '', true);
addLink('https://stats.g.doubleclick.net', 'dns-prefetch preconnect', '', true);
addLink('https://www.facebook.com', 'dns-prefetch preconnect', '', true);
addLink('https://connect.facebook.net', 'dns-prefetch preconnect', '', true);
addLink('https://www.google-analytics.com', 'dns-prefetch preconnect', '', true);
// Edit and uncomment below lines to preload the carousel first image
// addLink('https://cdn11.bigcommerce.com/s-5neyv67my8/images/stencil/1920w/carousel/13/fire_extinguishers_1.png?c=1', 'preload', 'image');
// addLink('https://cdn11.bigcommerce.com/s-5neyv67my8/images/stencil/980w/carousel/13/fire_extinguishers_1.png?c=1', 'preload', 'image'); // addLink('https://cdn11.bigcommerce.com/s-5neyv67my8/images/stencil/640w/carousel/13/fire_extinguishers_1.png?c=1', 'preload', 'image');
})();
</script>

Align prices evenly on all product cards

Align product cards evenly

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = ''
+ '.card { display: grid; grid-template-columns: 100%; grid-template-rows: min-content auto }'
+ '.card-body { display: grid; grid-template-rows: auto min-content min-content min-content; }'
+ '.card-title { grid-row: 1 / 2; }'
+ '.card-text--brand { grid-row: 2 / 3; }'
+ '.card-text--price { grid-row: 3 / 4; }';
document.head.appendChild(style);
})();
</script>

Display asterisks (*) beside the required fields

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout Page
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function main() {
var els = document.querySelectorAll('.form-label.optimizedCheckout-form-label:first-child:not(._addedAsterisk)');
for (var i = 0; i < els.length; i++) {
var el = els[i];
el.classList.add('_addedAsterisk');
if (!el.querySelector('.optimizedCheckout-contentSecondary')) {
var span = document.createElement('span');
span.className = '_required';
span.innerHTML = '*';
span.title = 'Required';
el.appendChild(span);
}
}
}
main();
(new MutationObserver(debounce(main, 300))).observe(document.body, { childList: true, subtree: true });
var style = document.createElement('style');
style.innerHTML = '.form-label ._required { margin-left: .25rem; color: red }';
document.head.appendChild(style);
})();
</script>

Show "you save" price = regular price - sale price

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function main() {
$('.productView-price').each(function(i, el) {
var $el = $(el);
if ($el.hasClass('_fixedSavePrice')) {
return;
}
$el.addClass('_fixedSavePrice');
var $priceWithoutTax = $('[data-product-price-without-tax]', $el).first();
var $nonSalePriceWithoutTax = $('[data-product-non-sale-price-without-tax]', $el).first();
var $priceWithTax = $('[data-product-price-with-tax]', $el).first();
var $nonSalePriceWithTax = $('[data-product-non-sale-price-with-tax]', $el).first();
var $savingSection = $('.price-section--saving', $el);
var $saved = $('[data-product-price-saved]', $el);
const update = function() {
var priceWithoutTax = parseFloat($priceWithoutTax.text().replace(/[^0-9\.]/g, ''));
var nonSalePriceWithoutTax = parseFloat($nonSalePriceWithoutTax.text().replace(/[^0-9\.]/g, ''));
var savedPriceWithoutTax = (nonSalePriceWithoutTax - priceWithoutTax).toFixed(2);
var priceWithTax = parseFloat($priceWithTax.text().replace(/[^0-9\.]/g, ''));
var nonSalePriceWithTax = parseFloat($nonSalePriceWithTax.text().replace(/[^0-9\.]/g, ''));
var savedPriceWithTax = (nonSalePriceWithTax - priceWithTax).toFixed(2);
if (savedPriceWithoutTax && !isNaN(savedPriceWithoutTax)) {
$savingSection.show();
$saved.html('$' + savedPriceWithoutTax);
} else if (savedPriceWithTax && !isNaN(savedPriceWithTax)) {
$savingSection.show();
$saved.html('$' + savedPriceWithTax);
} else {
$savingSection.hide();
$saved.html('');
}
};
update();
if ($priceWithoutTax.length > 0) {
(new MutationObserver(update)).observe($priceWithoutTax.get(0), { childList: true });
}
if ($nonSalePriceWithoutTax.length > 0) {
(new MutationObserver(update)).observe($nonSalePriceWithoutTax.get(0), { childList: true });
}
if ($priceWithTax.length > 0) {
(new MutationObserver(update)).observe($priceWithTax.get(0), { childList: true });
}
if ($nonSalePriceWithTax.length > 0) {
(new MutationObserver(update)).observe($nonSalePriceWithTax.get(0), { childList: true });
}
});
}
main();
(new MutationObserver(debounce(main, 300))).observe(document.body, { childList: true, subtree: true });
})(window.jQueryTheme || window.jQuerySupermarket);
</script>

Make the search form sticky on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '@media (max-width: 800px) {'
+ 'body { padding-top: 115px }'
+ '.emthemesModez-quickSearch--mobileOnly { position: fixed; top: 55px; width: 100%; z-index: 45; border-bottom: 1px solid #ddd }'
+ '}';
document.head.appendChild(style);
})();
</script>

Display Bulk Pricing table on every product cards

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script src="//papathemes.com/content/supermarket/addon.product-card-bulk-price.js" async></script>

Hide Additional Information tab on PDP when it is empty

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var el = document.querySelector('.productView-addition-table');
if (el && el.innerText.trim() === '') {
document.querySelector('.tab-title[href="#tab-addition"]').style = 'display:none !important';
document.querySelector('#tab-addition').style = 'display:none !important';
}
})();
</script>

Install Google Survey Opt-In script to the order confirmation page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Order Confirmation
  • Script type = Script

Enter the script below to Scripts contents:

<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.5.0/dist/fetch.umd.min.js" defer></script>
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>
<script>
window.renderOptIn = function() {
window.gapi.load('surveyoptin', function() {
var orderId = '{{checkout.order.id}}';
fetch('/api/storefront/orders/' + orderId).then(function(resp) {
return resp.json();
}).then(function(data) {
var email = data.billingAddress.email;
var countryCode = data.billingAddress.countryCode;
var deliveryDate = (new Date((new Date()).getTime() + 86400000)).toISOString().split('T')[0];
window.gapi.surveyoptin.render(
{
"merchant_id": "123456789",
"order_id": orderId,
"email": email,
"delivery_country": countryCode,
"estimated_delivery_date": deliveryDate
});
});
});
}
</script>
<!-- END GCR Opt-in Module Code -->

Replace the Merchant ID in line "merchant_id": "123456789", by yours.

Install Pinterest Tag code to the checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Order Confirmation
  • Script type = Script

Enter the script below to Scripts contents:

<script>
!function(e){if(!window.pintrk){window.pintrk=function()
{window.pintrk.queue.push(Array.prototype.slice.call(arguments))};var
n=window.pintrk;n.queue=[],n.version="3.0";var
t=document.createElement("script");t.async=!0,t.src=e;var
r=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r)}} ("https://s.pinimg.com/ct/core.js");
</script>
<script>
window.initPintrkCheckout = function() {
var graphqlToken = '{{settings.storefront_api.token}}';
var orderId = '{{checkout.order.id}}';
fetch('/api/storefront/orders/' + orderId).then(function(resp) {
return resp.json();
}).then(function(data) {
var productIds = data.lineItems.physicalItems.map(function(item) {
return item.productId;
});
fetch('/graphql', {
method: 'POST',
body: JSON.stringify({
query: `
query {
site {
products (entityIds: ${JSON.stringify(productIds)}) {
edges {
node {
entityId
categories {
edges {
node {
entityId
name
}
}
}
}
}
}
}
}
`
}),
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${graphqlToken}`
}
}).then(function(resp) {
return resp.json();
}).then(function(productsData) {
var categoryByProductId = productsData.data.site.products.edges.reduce(function(_categoryByProductId, edge) {
if (edge.node.categories.edges.length > 0) {
_categoryByProductId[edge.node.entityId] = edge.node.categories.edges[0].node.name;
}
return _categoryByProductId;
}, {});
pintrk('load','INSTAGRAM_TAG_ID', { em: data.billingAddress.email });
pintrk('page');
pintrk('track', 'checkout',{
value: data.orderAmount,
order_quantity: data.lineItems.physicalItems.reduce(function(_total, item) {
return _total + item.quantity;
}, 0),
order_id: orderId,
currency: data.currency.code,
line_items: data.lineItems.physicalItems.map(function(item) {
return {
product_name: item.name,
product_id: String(item.productId),
product_price: item.salePrice, // or item.listPrice
product_quantity: item.quantity,
product_category: categoryByProductId[item.productId] || ''
}
})
});
});
});
};
</script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.5.0/dist/fetch.umd.min.js" defer onload="window.initPintrkCheckout()"></script>

Replace INSTAGRAM_TAG_ID by your own Instagram Tag ID.

Reference:

Fix page auto scrolled down when opened

Currently there is a problem with Facebook SDK which causes anonymous user cannot view your Facebook page for example: https://www.facebook.com/AlFlahertys/ screenshot: http://prntscr.com/vj2vko and the page automatically scrolled down to the Facebook Chat Box.

To fix this issue, please try to disable Facebook Chat Box in Theme Editor > Social Media Icons > Facebook page, Clear your facebook page name. Screenshot: http://prntscr.com/vj3gk2

Fix blog post alignment issue in version 4.8.0

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '@media (min-width: 551px) { .papaSupermarket-pageType--blog .blog + .blog { margin-top: 0; padding-top: 0 } .papaSupermarket-pageType--blog .blog + .blog + .blog { padding-top: 1.5rem } }';
document.head.appendChild(style);
})();
</script>

Display a search icon on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

Display search icon on mobile

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
$('<style></style>').html(''
+ '@media (max-width: 800px) {'
+ '.navUser-section { display: flex }'
+ '.navUser-item--search { display: block }'
+ '.navUser-item--search .navUser-action { font-size: 22px !important; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 10px; }'
+ '.emthemesModez-header-topSection .navUser:last-child { margin-right: 85px }'
+ '.emthemesModez-quickSearch--mobileOnly { position: fixed; left: 0; right: 0; top: 55px; z-index: 55 }'
+ '.emthemesModez-quickSearch--mobileOnly:not(.is-open) { display: none }'
+ '.header-logo { margin-right: 100px !important }'
+ '}'
+ '@media (min-width: 801px) {'
+ '.navUser-item--search { display: none }'
+ '}'
).appendTo('head');
$('.navUser-item--cart').before('<li class="navUser-item navUser-item--search"><a class="navUser-action" href="/search.php" title="Search"><i class="emthemesModez-icon-search3" aria-hidden="true"></i></a></li>');
$('.navUser-item--search .navUser-action').on('click', function(event) {
event.preventDefault();
var $el = $('.emthemesModez-quickSearch--mobileOnly');
$el.toggleClass('is-open');
if ($el.hasClass('is-open')) {
$el.find('input[name=search_query]').focus();
}
});
})(window.jQuerySupermarket);
</script>

Display GeoTrust, Norton, McAfee seals on the checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout Page
  • Script type = Script

Enter the script below to Scripts contents:

<script type="text/plain" id="checkout_seal_custom_css">
.supermarket-checkout-seal-geotrust,
.supermarket-checkout-seal-norton,
.supermarket-checkout-seal-mcafee {
display: block;
margin: 0 auto .75rem;
max-width: 150px;
}
.supermarket-checkout-seal-geotrust {
margin-top: 1.5rem;
}
</script>
<script>
(function() {
var GEOTRUST = 'https://cdn11.bigcommerce.com/s-ldjnqtv2io/product_images/uploaded_images/geotrust-250.png?t=1608291287';
var NORTON = 'https://cdn11.bigcommerce.com/s-ldjnqtv2io/product_images/uploaded_images/nortonseal-238.png?t=1608291287';
var MCAFEE = 'https://cdn11.bigcommerce.com/s-ldjnqtv2io/product_images/uploaded_images/mcafee-250.png?t=1608291288';
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function css() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('checkout_seal_custom_css').innerHTML;
document.head.appendChild(style);
}
function main() {
function observe() {
var asideEl = document.querySelector('.layout-cart:not(._checkoutSealLoaded)');
if (asideEl) {
asideEl.classList.add('_checkoutSealLoaded');
var img;
img = document.createElement('img');
img.src = GEOTRUST;
img.alt = 'GeoTrust';
img.classList.add('supermarket-checkout-seal-geotrust');
asideEl.appendChild(img);
img = document.createElement('img');
img.src = NORTON;
img.alt = 'Norton';
img.classList.add('supermarket-checkout-seal-norton');
asideEl.appendChild(img);
img = document.createElement('img');
img.src = MCAFEE;
img.alt = 'McAfee';
img.classList.add('supermarket-checkout-seal-mcafee');
asideEl.appendChild(img);
}
}
var mo = new MutationObserver(debounce(observe, 300));
mo.observe(document.body, { childList: true, subtree: true });
observe();
}
css();
main();
})();
</script>

Fix Search in Category form overlaps the widget banner on mobile

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script type="text/plain" id="theme_custom_css_7a2ebf16511edf48">
@media (max-width: 800px) {
.papaSupermarket-pageType--category .page-content { position: relative; }
.categoryPage-searchInCategory-form.noFaceted.noDesc { position: absolute; top: 0; width: calc(100vw - 60px); }
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_7a2ebf16511edf48').innerHTML;
document.head.appendChild(style);
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script type="text/plain" id="theme_custom_css_462afd41f4a3bc05">
#consent-manager {
left: 80px !important;
right: 80px !important;
bottom: 20px !important;
border-radius: 8px;
overflow: hidden;
box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
#consent-manager p {
font-size: 12px;
}
#consent-manager button {
height: auto;
padding: 8px;
font-size: 12px;
}
#consent-manager button:first-child {
margin-left: 0;
}
#consent-manager > div > div {
padding: 8px;
}
#consent-manager > div > div > div {
margin-top: -8px !important;
}
#consent-manager > div > div > div > div {
margin-top: 8px;
}
@media (min-width: 801px) {
#consent-manager {
left: 150px !important;
right: 150px !important;
}
#consent-manager > div > div {
padding-left: 16px;
}
}
#consent-manager-update-banner {
position: static !important;
height: auto !important;
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_462afd41f4a3bc05').innerHTML;
document.head.appendChild(style);
})();
</script>

Center and bigger popup on desktop:

Enter the script below to Scripts contents:

<script type="text/plain" id="theme_custom_css_6d3189e10293c9de">
#consent-manager {
left: 80px !important;
right: 80px !important;
bottom: 20px !important;
border-radius: 8px;
overflow: hidden;
box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}
#consent-manager p {
font-size: 12px;
}
#consent-manager button {
height: auto;
padding: 8px;
font-size: 12px;
}
#consent-manager button:first-child {
margin-left: 0;
}
#consent-manager > div > div {
padding: 8px;
}
#consent-manager > div > div > div {
margin-top: -8px !important;
}
#consent-manager > div > div > div > div {
margin-top: 8px;
}
#consent-manager-update-banner {
position: static !important;
height: auto !important;
}
@media (min-width: 801px) {
#consent-manager {
width: 650px;
margin: auto;
top: 50%;
bottom: auto !important;
transform: translateY(-50%);
}
#consent-manager p {
font-size: 16px
}
#consent-manager button {
font-size: 16px;
padding: 8px 16px;
}
#consent-manager > div > div {
padding: 8px 32px 32px;
}
#consent-manager > div > div > div > div {
margin-top: 24px;
}
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_6d3189e10293c9de').innerHTML;
document.head.appendChild(style);
})();
</script>

Display Coupon / Gift Certificate box and on the checkout page

<script type="text/plain" id="checkout_custom_css_fa54d0f8486ce216">
.optimizedCheckout-form-input[name="redeemableCode"] {
border: 2px solid #476bef;
}
</script>
<script>
(function() {
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function css() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('checkout_custom_css_fa54d0f8486ce216').innerHTML;
document.head.appendChild(style);
}
function main() {
function observe() {
var els = document.querySelectorAll('.redeemable-label:not(._checkoutCouponBoxLoaded)');
for (var i = 0; i < els.length; i++) {
var el = els[0];
el.classList.add('_checkoutCouponBoxLoaded');
if (!el.parentNode.querySelector('[data-test="redeemable-collapsable"]')) {
el.click();
}
}
}
var mo = new MutationObserver(debounce(observe, 300));
mo.observe(document.body, { childList: true, subtree: true });
debounce(observe, 1000)();
}
css();
main();
})();
</script>

Display AfterPay "or 4 interest-free installments" message

Folow this guide: https://developers.afterpay.com/afterpay-online/docs/javascript-library

Display Klarna "4 interest-free payments of" on-site message

Reference:

  1. Go to Storefront > Script Manager, click Create a Script, choose:
  • Location on page = Head
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script async src="https://na-library.klarnaservices.com/lib.js" data-client-id="YOUR_MERCHANT_ID"></script>
<script>
(function() {
// Element.closest polyfill
Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);
Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null});
function updateKlarna(el, priceEl) {
var value = Math.round(Number(String(priceEl.innerHTML).split(' - ')[0].replace(/[^0-9.]/g, '')) * 100);
el.setAttribute('data-purchase-amount', value);
window.KlarnaOnsiteService = window.KlarnaOnsiteService || [];
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });
}
window.addEventListener('DOMContentLoaded', () => {
var els = document.querySelectorAll('klarna-placement');
for (var el of els) {
var priceEl = el.closest('.productView').querySelector('[data-product-price-without-tax]') || el.closest('.productView').querySelector('[data-product-price-with-tax]');
if (priceEl) {
var mo = new MutationObserver(() => updateKlarna(el, priceEl));
mo.observe(priceEl, { childList: true, characterData: true, attributes: true });
updateKlarna(el, priceEl);
}
}
});
})();
</script>

Replace YOUR_MERCHANT_ID by your Merchant ID code.

  1. Edit a product page in Page Builder, add a HTML widget to a particular global region. Enter the content below to the HTML widget:
<!-- Placement v2 -->
<klarna-placement
data-key="credit-promotion-small"
data-locale="en-US"
data-purchase-amount=""
></klarna-placement>
<!-- end Placement -->

Display all cart items in the dropdown cart preview

Edit file templates/components/common/cart-preview.html, change line: {{#each (limit cart.items 4)}} to {{#each cart.items}}.

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '.previewCartList { display: block; max-height: calc(100vh - 200px); overflow: auto; }';
document.head.appendChild(style);
})();
</script>

Redirect customers to the login page if not logged in

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Header
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
{{#all (if page_type '===' 'default') (unless customer)}}
{{#if (merge theme_settings section1='' section2='' section3='' section4='' section5='' section6='' section7='' section8='' section9='')}}/*1*/{{/if}}
{{#if (merge this products=null carousel=null blog=null shop_by_brand=null)}}/*2*/{{/if}}
window.location = '/login.php';
{{/all}}
</script>

Add Image Cloud Zoom to product images on PDP

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function loadScript(src) {
return new Promise(function(resolve) {
var script = document.createElement('script');
script.src = src;
script.defer = true;
script.onload = function() {
resolve();
};
document.head.appendChild(script);
});
}
function init() {
$('.productView-imageCarousel-main-item img')
.not('[data-zoom-image]')
.each(function(i, img) {
var $img = $(img);
$img.attr('data-zoom-image', $img.closest('a').data('originalZoom'))
.ezPlus();
});
}
function observe() {
if ($.fn.ezPlus) {
init();
} else {
if (!window.jQuery) {
window.jQuery = $;
}
loadScript('https://cdn.jsdelivr.net/gh/igorlino/elevatezoom-plus@1.2.3/src/jquery.ez-plus.js')
.then(init);
}
}
if (document.body.clientWidth > 800) {
var mo = new MutationObserver(debounce(observe, 200));
mo.observe(document.body, { childList: true, subtree: true });
observe();
}
})(window.jQueryTheme || window.jQuerySupermarket || window.chiarajQuery || window.jQuery);
</script>

Add jQuery Zoom to product images on PDP

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function loadScript(src) {
return new Promise(function(resolve) {
var script = document.createElement('script');
script.src = src;
script.defer = true;
script.onload = function() {
resolve();
};
document.head.appendChild(script);
});
}
function init() {
$('.productView-imageCarousel-main-item a')
.not('[data-jquery-zoom-image]')
.each(function(i, a) {
var $a = $(a).attr('data-jquery-zoom-image', '');
var zoomImg = $a.data('originalZoom');
$a.on('mouseenter touchstart', function() {
$a.zoom({ url: zoomImg });
});
$a.on('mouseleave touchend', function() {
$a.trigger('zoom.destroy');
});
});
}
function observe() {
if ($.fn.zoom) {
init();
} else {
if (!window.jQuery) {
window.jQuery = $;
}
loadScript('https://cdn.jsdelivr.net/npm/jquery-zoom@1.7.21/jquery.zoom.min.js')
.then(init);
}
}
var style = document.createElement('style');
style.innerHTML = '[data-jquery-zoom-image] { position: absolute; top: 0; left: 0; right: 0; bottom: 0 }'
+ '[data-jquery-zoom-image] img + img { right: auto; bottom: auto; opacity: 1 !important }';
document.head.appendChild(style);
var mo = new MutationObserver(debounce(observe, 200));
mo.observe(document.body, { childList: true, subtree: true });
observe();
})(window.jQueryTheme || window.jQuerySupermarket || window.chiarajQuery || window.jQuery);
</script>

Display products by category image in GIF format

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
{{#if page_type '===' 'default'}}
(function($) {
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function observe() {
$('.emthemesModez-productsByCategoryTabs-details-image img').not('._gifMod').addClass('gifMod').each(function(i, el) {
var $el = $(el);
if ($el.attr('src') && $el.attr('src').match(/\.jpg/)) {
$el.attr('src', $el.attr('src').replace('.jpg', '.gif'));
}
if ($el.attr('data-src') && $el.attr('data-src').match(/\.jpg/)) {
$el.attr('data-src', $el.attr('data-src').replace('.jpg', '.gif'));
}
})
}
var mo = new MutationObserver(debounce(observe, 200));
mo.observe(document.body, { childList: true, subtree: true });
observe();
})(window.jQueryTheme || window.jQuerySupermarket || window.jQuery);
{{/if}}
</script>

Hide Shipping Nofitication on PDP when product is out of stock or not track

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
$('.productView-details').not('._hideShippingEstimatorMod').addClass('_hideShippingEstimatorMod').each(function(i, el) {
var $stock = $(el).find('[data-product-stock]');
if ($stock.length === 0) {
return;
}
var productId = $(el).find('input[name="product_id"]').val();
function observe() {
if (!Number($stock.text())) {
if ($('#theme_custom_bd91677cf8ae0f04_' + productId).length === 0) {
$('<style id="theme_custom_bd91677cf8ae0f04_' + productId + '">[data-blackout-dates] { display: none !important }</style>').appendTo('head');
}
} else {
$('#theme_custom_bd91677cf8ae0f04_' + productId).remove();
}
}
var mo = new MutationObserver(observe);
mo.observe($stock.get(0), { childList: true, subtree: true, attribute: true, characterData: true });
observe();
});
})(window.jQueryTheme || window.jQuerySupermarket || window.jQuery);
</script>

Display additional checkout buttons full width

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script type="text/plain" id="theme_custom_css_708c23ef6078">
@media (min-width: 551px) {
.cart-additionalCheckoutButtons { width: 75%; margin-left: auto; margin-right: 0 }
}
@media (min-width: 801px) {
.cart-additionalCheckoutButtons { width: 58.33333% }
}
@media (min-width: 1261px) {
.cart-additionalCheckoutButtons { width: 41.66667% }
}
.cart-additionalCheckoutButtons .FloatRight div { width: 100% }
.braintree-paypal-button.paypal-smart-buttons { max-width: none; width: 100% !important; }
div.paypal-buttons { width: 100% !important }
div.GooglePayCheckout button { width: 100% !important }
.or-use-label { display: none }
.cart-additionalCheckoutButtons .CheckoutButton { margin-bottom: 0 }
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_708c23ef6078').innerHTML;
document.head.appendChild(style);
})();
</script>

Display page content full width when the sidebar is empty

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script type="text/plain" id="theme_custom_css_79eafd1ca71f">
@media (min-width: 801px) {
.page--hideSidebarDesktop .page-sidebar {
display: none !important;
}
.page--hideSidebarDesktop .page-content {
width: 100%;
}
}
</script>
<script>
(function() {
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function main() {
if (Array.from(document.querySelectorAll('.page-sidebar')).filter(function(el) {
return el.clientHeight > 1;
}).length === 0) {
var page = document.querySelector('.page');
if (!page.classList.contains('page--hideSidebarDesktop')) {
page.classList.add('page--hideSidebarDesktop');
}
} else {
var page = document.querySelector('.page');
if (page.classList.contains('page--hideSidebarDesktop')) {
page.classList.remove('page--hideSidebarDesktop');
}
}
}
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_79eafd1ca71f').innerHTML;
document.head.appendChild(style);
var mo = new MutationObserver(debounce(main, 300));
mo.observe(document.querySelector('body'), { childList: true, subtree: true });
})();
</script>

Display level 3 sub-menu items of the standard-style menu in multiple columns

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script type="text/plain" id="theme_custom_css_82101f3ae9f77023">
@media (min-width: 801px) {
.navPage-subMenu--standard .navPage-childList.is-open {
display: grid;
grid-template-rows: repeat(10, auto);
width: auto;
grid-auto-flow: column;
grid-auto-columns: minmax(180px, max-content);
overflow: visible;
}
.navPage-subMenu--standard .navPage-subMenu-item:hover>.navPage-childList {
display: grid;
}
.navPage-subMenu--standard .navPage-childList.toLeft {
left: auto;
right: 100%;
}
}
</script>
<script>
(function() {
var style = document.createElement('style');
style.innerHTML = document.getElementById('theme_custom_css_82101f3ae9f77023').innerHTML;
document.head.appendChild(style);
})();
</script>

Fix an issue with the button icon in version 5.1.0

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = ".productCarousel .card-buttons .card-figcaption-button:before, .productGrid .card-buttons .card-figcaption-button:before { content: '\\f07a' }"
+ ".productCarousel .card-buttons .card-figcaption-button--compare:before, .productGrid .card-buttons .card-figcaption-button--compare:before { content: '\\f0ec' }"
+ ".productCarousel .card-buttons .card-figcaption-button.quickview:before, .productGrid .card-buttons .card-figcaption-button.quickview:before { content: '\\f002' }";
document.head.appendChild(style);
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function($) {
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function main() {
$('.productView-alsoBought-item-title:not(._modLink)')
.addClass('_modLink')
.each(function (i, el) {
var $el = $(el);
var id = $el.closest('[data-product-id]').data('productId');
$el.html('<a href="/products.php?productId=' + id + '" target="_blank">' + $el.html() + '</a>');
});
}
var mo = new MutationObserver(debounce(main, 300));
mo.observe(document.body, { childList: true, subtree: true });
main();
})(window.jQuerySupermarket || window.jQuery);
</script>

Display the quantity box on product cards

Kindly contact us for a quote on this customization.

Display Sticky Add to Cart bar

sticky add to cart

Kindly contact us for a quote on this customization.

Display the included VAT/Tax price below the excluded Tax price

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '[data-product-price-without-tax] ~ abbr { display: none }'
+ '.price-section.rrp-price--withTax,'
+ '.price-section.rrp-price--withoutTax { display: none }'
+ '[data-product-price-with-tax] { font-size: 16px !important; color: #666 !important }'
+ '[data-product-price-with-tax]:before { content: "(" }'
+ '[data-product-price-with-tax]:after { content: " incl VAT)" }'
+ '[data-product-price-with-tax] ~ abbr { display: none }'
+ '.productView-price { display: flex; flex-direction: column }'
+ '.productView-price .price-section { margin: 0 !important }'
+ '.productView-price .price-section--withoutTax { order: 1 }'
+ '.productView-price .price-section--withTax { order: 2 }'
+ '.productView-price .price-section--saving { order: 3; margin-top: .75rem !important }'
+ '.card-text--price [data-product-price-with-tax] { font-weight: normal !important }'
+ '.card-text--price { display: flex; flex-direction: column }'
+ '.card-text--price .price-section { margin: 0 !important }'
+ '.card-text--price .price-section--withoutTax { order: 1 }'
+ '.card-text--price .price-section--withTax { order: 2 }';
document.head.appendChild(style);
})();
</script>

Display an alert message after customer select a specific shipping country

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout Page
  • Script type = Script

Enter the script below to Scripts contents:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
(function($) {
var ALERT_MESSAGE = 'YOUR ALERT CONTENT';
var COUNTRY = 'Australia|United States';
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function observe() {
var $consignment = $('.checkout-step--shipping .stepHeader-body .staticConsignment');
var $countryName = $consignment.find('.country-name');
if ($countryName.length === 0) {
$('#ecblendAlert').remove();
} else {
$countryName.not('._checked').addClass('_checked').each(function(i, el) {
var $el = $(el);
var re = new RegExp(COUNTRY, 'ig');
if (re.test($el.text())) {
$('<div id="ecblendAlert" style="margin-top: 1.5rem"></div>').html('<div class="alertBox alertBox--warning">' + ALERT_MESSAGE + '</div>')
.appendTo($consignment)
.on('click', function(event) {
event.preventDefault();
event.stopPropagation();
});
} else {
$('#ecblendAlert').remove();
}
});
}
}
var mo = new MutationObserver(debounce(observe, 200));
mo.observe(document.body, { childList: true, subtree: true });
observe();
})(window.jQueryTheme || window.jQuerySupermarket || window.chiarajQuery || window.jQuery);
</script>

Display a custom message below the order number on the Order Confirmation page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Order Confirmation
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var YOUR_CONFIRM_MSG = 'An order confirmation has been sent to the email address <a href="mailto:%EMAIL%">%EMAIL%</a>';
var orderId = '{{checkout.order.id}}';
/** debounce(func, wait, immediate) */
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function observe() {
var el = document.querySelector('[data-test="order-confirmation-order-number-text"]');
if (!el || el.classList.contains('_jssMod'))
return;
el.classList.add('_jssMod');
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/whatwg-fetch@3.5.0/dist/fetch.umd.min.js';
script.onload = function() {
fetch('/api/storefront/orders/' + orderId).then(function(resp) {
return resp.json();
}).then(function(data) {
var email = data.billingAddress.email;
var msg = YOUR_CONFIRM_MSG.replace(/%EMAIL%/g, email);
var p = document.createElement('p');
p.innerHTML = msg;
el.parentNode.insertBefore(p, el.nextSibling);
});
};
document.head.appendChild(script);
}
var mo = new MutationObserver(debounce(observe, 200));
mo.observe(document.body, { childList: true, subtree: true });
observe();
})();
</script>

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Store Page
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var isAnchor = false;
document.addEventListener('DOMContentLoaded', function() {
var els = document.querySelectorAll('a[href*="#"]');
for (var i = 0; i < els.length; i++) {
els[i].addEventListener('click', function() {
isAnchor = true;
});
}
});
window.addEventListener('popstate', function(event) {
if (isAnchor) {
event.stopImmediatePropagation();
isAnchor = false;
}
});
})();
</script>

Customize Mega Menu Banners for each category menu item

custom mega menu banners

Kindly contact us for a quote on this customization.

Display recent blog posts on the homepage in 4 columns

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var el = document.querySelector('.emthemesModez-blogGrid--featured');
if (el) {
el.classList.remove('emthemesModez-blogGrid--featured');
var style = document.createElement('style');
style.innerHTML = '@media (min-width: 551px) {'
+ '.emthemesModez-blogGrid .emthemesModez-blogItem { width: 50% }'
+ '}'
+ '@media (min-width: 801px) {'
+ '.emthemesModez-blogGrid .emthemesModez-blogItem { width: 25% }'
+ '}';
document.head.appendChild(style);
}
})();
</script>

Display Phone Number mask on the checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout Page
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
function debounce(n,t,u){var e;return function(){var i=this,o=arguments,a=u&&!e;clearTimeout(e),e=setTimeout(function(){e=null,u||n.apply(i,o)},t),a&&n.apply(i,o)}}
function onload() {
var mo = new MutationObserver(debounce(domChanged, 200));
mo.observe(document.body, { childList: true, subtree: true });
}
function domChanged() {
var el = document.getElementById('phoneInput');
if (!el || el.classList.contains('_inputMaskAdded')) return;
el.classList.add('_inputMaskAdded');
var mask = new IMask(el, {
mask: '(000)000-0000',
})
}
var script = document.createElement('script');
script.src = 'https://unpkg.com/imask';
script.async = true;
script.onload = onload;
document.head.appendChild(script);
})();
</script>

Change color of the info alert message

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var css = document.createElement('style');
css.innerHTML = `
.alertBox--info {
color: #0000ff;
background-color: #f2f2f2;
}
.alertBox--info svg {
fill: #0000ff;
}
`;
document.head.appendChild(css);
})();
</script>

Where color: #0000ff is the text color, background-color: #f2f2f2 is the background color, fill: #0000ff is the icon color.

Always display shipping address form on the checkout page

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = Checkout Page
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
// minified lodash debounce function
function debounce(e,t,n){var r;return function(){var o=this,i=arguments,u=function(){r=null,n||e.apply(o,i)},a=n&&!r;clearTimeout(r),r=setTimeout(u,t),a&&e.apply(o,i)}}
var shippingAddressShown = false;
function main() {
if (document.querySelector('#checkout-shipping-options')) {
shippingAddressShown = true;
}
var btn = document.querySelector('.checkout-step--shipping button[data-test="step-edit-button"]');
if (btn && !shippingAddressShown) {
btn.click();
}
}
var mo = new MutationObserver(debounce(main, 200));
mo.observe(document.body, { childList: true, subtree: true });
main();
})();
</script>

Hide all additional checkout buttons on all pages

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '.previewCart-additionalCheckoutButtons, .previewCartCheckout-additionalCheckoutButtons, .cart-additionalCheckoutButtons, .checkoutRemote { display: none !important }';
document.head.appendChild(style);
})();
</script>

Fix the incorrect indent displayed by UL, OL, LI elements in the product description

The issue of incorrect indents in UL, OL, and LI elements in product descriptions arises due to an erroneous HTML structure, such as a P element nested within an LI element. To resolve this:

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '.productView-description-tabContent ul, .productView-description-tabContent ol { list-style-position: outside; margin-left: 1.5rem; }'
+ '.productView-description-tabContent ul p:not(:last-child), .productView-description-tabContent ol p:not(:last-child) { margin-bottom: 0 }';
document.head.appendChild(style);
})();
</script>

Adjust the mega menu to display columns that flow vertically from left to right

custom mega menu column

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = `
@media (min-width: 801px) {
.navPage-subMenu-list { display: block; column-count: 4; column-gap: 0 }
.navPage-subMenu-item { width: 100%; display: block; break-inside: avoid }
.navPage-childList { column-count: 2; column-gap: 0.75rem }
}
`;
document.head.appendChild(style);
})();
</script>

Hide Quick-View, Add to Cart and Compare icons on product cards

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = `
@media (min-width: 801px) {
.productCarousel .card-buttons .card-figcaption-button.quickview::before,
.productGrid .card-buttons .card-figcaption-button.quickview::before,
.productCarousel .card-buttons .card-figcaption-button::before,
.productGrid .card-buttons .card-figcaption-button::before{ display: none }
.productCarousel .card-buttons .card-figcaption-button--compare,
.productGrid .card-buttons .card-figcaption-button--compare { font-size: inherit !important; text-indent: 0 !important }
}
`;
document.head.appendChild(style);
})();
</script>

Hide brand on product cards

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Head
  • Select pages where script will be added = Store Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '.card-text--brand { display: none }';
document.head.appendChild(style);
})();
</script>

Fixing Quick Payment Button Sizing on Mobile

If you're encountering issues with the size of Quick Payment buttons on mobile devices during checkout, or within the cart preview popup on desktop, follow these steps to resolve the problem:

Go to Storefront > Script Manager, click Create a Script, choose:

  • Location on page = Footer
  • Select pages where script will be added = All Pages
  • Script type = Script

Enter the script below to Scripts contents:

<script>
(function() {
var style = document.createElement('style');
style.innerHTML = '@media (max-width: 550px) { #googlepaypaypalcommerceCheckoutButton { grid-column: span 12 } }'
+ '.previewCart-additionalCheckoutButtons { display: flex; flex-direction: column }';
document.head.appendChild(style);
})();
</script>