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 pageSupportChiara

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 }'
+