FAQs

Change text of BUY button on the product page on mobile

Add this custom code below into your Storefront > Footer Scripts:

<style>
.productView-options-toggle { width: 110px; border-radius: 3px; }
.productView-options-toggle .on { font-size: 0; }
.productView-options-toggle .on:before { font-size: 12px; content: 'Customize'; }
</style>

Where Customize is an example text to change.

Display the product options on the product page on mobile

To display the product options on the product page on mobile instead of having to click BUY button, add the code below into Storefont > Footer Scripts:

<style>
@media (max-width: 800px) {
.productView-options-toggle { display: none }
.productView-options-content { position: static; right: 0; opacity: 1; box-shadow: none; border-top: 1px solid #ddd}
.productView-options-panel-body { position: static; padding-bottom: 0px; }
.productView-options-panel-heading ~ .mobile-panel-close { display: none; }
.productView-options-content .form-action { position: static; right: auto; }
.productView-options-panel-heading { display: none }
.productView-options { order: 6; }
}
</style>

Add the custom code below into Storefront > Footer Scripts:

<style>
#navPages-main > .navPages-item:first-child { display: none }
</style>

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: Store pages.
  • Script type: Script.
  • Script contents:
<script>
window.chiarajQuery(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