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
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
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:
Then click on Edit Theme Files. In the editor, edit file templates\components\papa-supermarket\category\ajax-products-by-category-sorting-tabs.html
:
Edit as screenshot:
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?
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:
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 HEREfunction 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.
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:
{{#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:
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:
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>
Fix product thumbnails carousel on product page for Supermarket version 1.5.4 and older
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
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>​
Make all product card items in carousel (Related Products, Customer Also Viewed) same height
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.
Please configure Advanced Settings > Inventory as showing below:
Edit your product, make sure you enable tracking 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 the main product image carousel show next image cropped
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 the popular brands not show enough items as configured in the footer
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.
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
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>
How to use animated GIF logo
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>
Use SVG logo
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>
Fix review link anchor jump to content hidden by the sticky header
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>
Fix the phone number link on the top header bar
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.
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>
Use animated GIF images on Home Page Carousel
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:
<scriptsrc="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>
Make Homepage Carousel fade in/out instead of sliding right to left
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 orOrder 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 }'+