Auto update quantity of products bought together according to the main product qty in Supermarket theme
Insert the code below to Storefront > Script Manager:<script>(function($) { $('body').on('change', '[data-also-bought-parent-scope] [data-quantity-change] input', function(event) { var qty = $(event.currentTarget).val(); $('[data-also-bought] [data-quantity-change] input').val(qty); }); $('body').on('click', '[data-also-bought-parent-scope] [data-quantity-change] [data-action]', function(event) { $(event.currentTarget).closest('[data-quantity-change]').find
…
9th Sep 2019
Identify which products bought together belong to the main product in Supermarket theme
Solution:Create a product option named Parent SKU:Edit the option set of your also bought together products and add Parent SKU option to option set. Set Required = No:Make sure your also bought together products has Parent SKU field:Now, view a product which has the also bought together products from store front. Verify it has Parent SKU option:Create a new script in Storefront > Script Manager, insert the code below:<script>(function($) { $('body').on('change', '[data-also-bought-ch
…
9th Sep 2019
How to upgrade reCAPTCHA v2 for Stencil BigCommerce themes
As March 31, Google will no longer support reCAPTCHA v1. If your BigCommerce store is still use v1, Captcha box simply disappears, preventing spammers, bots no longer work.If you using Blueprint BigCommerce theme, please follow instruction here to upgrade to reCAPTCHA v2: https://developer.bigcommerce.com/themes/blueprint/#please-add-recaptcha-v2If you use BigCommerce themes bought on BigCommerce marketplace, simply upgrade in Theme Store.If you use customized Stencil BigCommerce theme but
…
24th Mar 2018
Insert Google Tag Manager code into BigCommerce Stencil theme
Find your Google Tag Manager code in your GTM Workspace > Admin tab > click menu Insert Google Tag Manager. Copy the code an insert in to your BigCommerce Stencil template file templates/layout/base.html as showing below:
16th Feb 2018
[BigCommerce] Make product image always centered on product details page
Add the code below in your Storefront > Footer Script:<style>
@media (min-width: 801px) { .productView-imageCarousel-main-item > a { position: relative; display: block; height: 0; padding-top: 100%; } .productView-imageCarousel-main-item > a img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
}
</style>This code
…
19th Jan 2018