BigCommerce Integration

Add Text2MySite™ SMS alerts to your BigCommerce store

Setup time: 5-10 minutes

Embedding code on BigCommerce websites is a common task, especially for adding third-party widgets like review displays, trust badges, or tracking scripts. BigCommerce provides a few ways to do this, ranging from a user-friendly drag-and-drop method to more advanced theme file editing.

1
Using the Page Builder (HTML Widget)
The simplest way to add a widget to a specific page or section of your site
Recommended for most users

This method is perfect for adding Text2MySite™ to specific pages like product pages, landing pages, or your homepage.

Step-by-Step Instructions:

  1. From your BigCommerce Admin, go to Storefront → Themes.
  2. On your current theme, click the Customize button to open the Page Builder.
  3. Navigate to the page where you want to add the widget (e.g., a specific product page, a landing page, or your homepage).
  4. In the left-hand sidebar, click on the HTML Widget and drag it to the desired location on your page.
  5. Click on the widget in the preview, and a text box will appear in the sidebar. Paste your embed code (HTML, CSS, or JavaScript) into this box.
  6. Click Save and then Publish to make the changes live on your store.
2
Using the Script Manager (for Sitewide Scripts)
Perfect for adding scripts that need to load on every page of your store
Best for sitewide widgets

This method is perfect for adding scripts that need to load on every page of your store, such as a Google Analytics tracking code or a Facebook Pixel.

Step-by-Step Instructions:

  1. From your BigCommerce Admin, go to Storefront → Script Manager.
  2. Click the Create a Script button.
  3. Give your script a name (e.g., "Google Analytics") and a description.
  4. Choose the script location (Head, Body, or Footer). For most tracking scripts, Head is the recommended location. For sitewide widgets like a chatbox, Footer is often the best choice.
  5. Choose the pages where the script will be active (e.g., All Pages, Specific Pages).
  6. Paste your script code into the "Script contents" box.
  7. Click Save. The script will now be active on your live storefront.
3
Editing Theme Files (Advanced)
Most flexible method for custom placement and advanced users
Advanced users only

This is the most flexible method and is required for more complex widgets that need to be in a very specific spot on a template that doesn't use the Page Builder.

Step-by-Step Instructions:

  1. Back Up Your Theme: This is a critical first step. From the Themes section in your Admin, click on Advanced on your current theme and then select Make a Copy.
  2. Access the Code Editor: On the duplicated theme, click the three dots and select Edit Theme Files.
  3. Find the Correct File: The files you need to edit will depend on the widget.
    • For a product page, you might edit a file in the templates/pages/products folder.
    • For a sitewide footer widget, you'd likely add code to the templates/layout/base.html or a similar file.
  4. Paste and Save: Paste your code in the appropriate location within the file. You will need to have a basic understanding of HTML and the BigCommerce Stencil framework to do this correctly.
  5. Once you're finished, click Save file. You can preview your changes on the duplicated theme. Once you're sure it works, you can Apply the theme to your storefront.
YouTube Tutorials
Watch step-by-step video guides for adding code to BigCommerce

BigCommerce Embed Code Screen Cast

Screen cast demonstration of embedding code in BigCommerce

From the channel Orderv • 2 minutes 59 seconds

Watch Tutorial

How to Add PDF Embed to BigCommerce

Guide for adding PDF embeds and custom content to BigCommerce

From the channel Elfsight • 3 minutes 10 seconds

Watch Tutorial