Content Solutions DocumentationPublished Date: 2022-09-28 Downloaded: December 22, 2024, 12:28 pm |
Content Solutions Documentation |
BigCommerce Integration Guide
2022-09-28
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.
Product Page Integration
Using Script Manager
-
Login to your BigCommerce store admin.
-
Click Storefront.
-
Click on Script Manager
-
Click Create Script
-
Use the following settings
-
Enter the Name of your Script: Ex: 1WorldSync Product Page Content
-
Location on page: Footer
-
Select pages where script will be added: Store Pages
-
Script Category: Functional
-
Script Type: Script
-
-
Paste the JavaScript Code from the Portal Get Code page.
-
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>
-
Go to Themes → Customize Theme
-
Click Theme Styles Icon (Paint Palette)
-
Click Edit Theme Files
-
Navigate to Products → product-view.html
-
Add the div container tags near the product gallery such as:
<div id="ccs-feature-icons"></div>
<div id="ccs-logos"></div>
-
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 -
Click Save and Apply