BigCommerce Integration Guide

[1WSCGomez]

Due to the large number of CMS platforms and versions available, we DO NOT provide support for BigCommerce but we do try to help by providing tips. For official BigCommerce questions or support, please contact BigCommerce Support. 

BigCommerce Help Center

Product Page Integration

Using Script Manager

1. Login to your BigCommerce store admin.

2. Click Storefront.

   

3. Click on Script Manager

   

4. Click Create Script

5. Use the following settings

   1. Enter the Name of your Script:  Ex: 1WorldSync Product Page Content

   2. Location on page: Footer

   3. Select pages where script will be added: Store Pages

   4. Script Category: Functional

   5. Script Type: Script

6. Paste the JavaScript Code from the Portal Get Code page. 

7. Replace the Variables to use the BigCommerce variable placeholders. Example:

   <script type='text/javascript'>
         var ccs_cc_args = ccs_cc_args || [];
         
         // 1ws Product Page Content
           ccs_cc_args.push(['mf', '{{product.brand.name}}']);
           ccs_cc_args.push(['pn', '{{product.mpn}}']);
           // UPC: {{product.upc}}
           // GTIN: {{product.GTIN}}
           ccs_cc_args.push(['upcean', '{{product.upc}}']);
           //ccs_cc_args.push(['ccid', 'CATALOG_CODE']);
           ccs_cc_args.push(['lang', 'EN']);
           ccs_cc_args.push(['market', 'US']);
         
         (function () {
            var o = ccs_cc_args; o.push(['_SKey', 'YOURSKEYHERE']); o.push(['_ZoneId', 'YOURSCRIPTZONEID']);
            var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true;
            sc.src=('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cs.1worldsync.com/jsc/h1ws.js';
            var n = document.getElementsByTagName('script')[0]; n.parentNode.insertBefore(sc, n);
         })();
   </script>

8. Go to Themes → Customize Theme

9. Click Theme Styles Icon (Paint Palette)

   

10. Click Edit Theme Files

11. Navigate to Products → product-view.html

12. Add the div container tags near the product gallery such as:
    <div id="ccs-feature-icons"></div>

    <div id="ccs-logos"></div>


13. Add the inline content container tag <div id=”ccs-inline-content”></div> where the inline content should appear.
    Example:
    Demo Store Product Page Link:
    https://1worldsync.mybigcommerce.com/surface-laptop-3-13-5-platinum-en-us/
    Download the example product-view.html template used

14. Click Save and Apply