August 14, 2024

How To Add Custom HTML and JavaScript to Your BigCommerce Store

Arrow pointing left
back to blog

about

Adding custom-coded elements to your BigCommerce store can help you create a differentiated shopping experience for your customers. Learn how to do it in this guide.

the author

Adam Ritchie
Ecommerce Contributor

share this post

With HTML, you can customize the structure of your web pages. JavaScript is more advanced, allowing you to create dynamic, interactive features for your site. 

Together, these two programming languages enable you to craft truly unique ecommerce experiences for your customers. 

Using custom-coding features and design elements for your BigCommerce store can help set your brand apart from the competition, and cater to any needs or preferences that are not currently being addressed for your particular customer base. 

There are several ways to add BigCommerce HTML and BigCommerce JavaScript to your store — we’ll go over each of these methods below. 

Create custom designs for your BigCommerce storeShogun’s Custom Elements feature enables development teams to create their own reusable elements using HTML, CSS, and JavaScript.Get started now

Adding HTML to BigCommerce

There are a couple different ways to add HTML to your BigCommerce store — you can either use the Page Builder or the WYSIWYG editor. 

Page Builder

Adding HTML with BigCommerce’s Page Builder is ideal for when you want a new element to be repeated across a certain type of page template in your theme:

Step 1. Log in to your BigCommerce account and select the “Storefront” option in the left sidebar of the control panel. 

Select the “Storefront” option in the left sidebar of the control panel. 

Step 2. Select “Customize Update”. 

Select “Customize Update”. 

Step 3. This will open up BigCommerce’s Page Builder tool. In the left sidebar of the Page Builder dashboard, you’ll find an “HTML” element that you can drag and drop into whichever page template you’re editing.

In the left sidebar of the Page Builder dashboard, you’ll find an “HTML” element that you can drag and drop into whichever page template you’re editing.

Step 4. Once the “HTML” element has been dropped into the page, all you need to do is add your code and then select “Save HTML”.

Add your code and select “Save HTML”.

WYSIWYG Editor 

If you want to add HTML to only one page on your BigCommerce store, you can use the WYSIWYG (what you see is what you get) Editor:

Step 1. In the “Storefront” section of the BigCommerce control panel, select “Web Pages”. 

In the “Storefront” section of the BigCommerce control panel, select “Web Pages”. 

Step 2. From here, you can choose to either edit an existing page or create a new page with the WYSIWYG Editor. 

You can choose to either edit an existing page or create a new page with the WYSIWYG Editor. 

Step 3. In the “Page Content” section of the WYSIWYG Editor, click on the “Edit HTML Source” icon. 

Click on the “Edit HTML Source” icon. 

With this feature, you can edit the HTML code of a BigCommerce page as needed.

With this feature, you can edit the HTML code of a BigCommerce page as needed.

Adding JavaScript to BigCommerce

To add JavaScript to your store, use BigCommerce’s Script Manager:

Step 1. In the “Storefront” section of the BigCommerce control panel, select the “Script Manager” option.

Select “Script Manager”.

Step 2. Select “Create a script”. 

Select “Create a script”. 

Step 3. You’ll find that there are a variety of settings that you can customize for your new script, including:

  • Which pages will feature the script (checkout, order confirmation, all pages except checkout and order confirmation, or all pages including checkout and order confirmation)
  • Whether the script is categorized as essential, analytics, functional, or targeting/advertising (visitors can opt out of everything but essential scripts — these settings can help you comply with privacy regulations)
  • Whether the script is placed in the header or footer (in most cases, you’ll want to put your JavaScript in the footer, as this improves page load speeds)

Furthermore, you can either link to a URL that contains your JavaScript code or enter the code manually. 

Once you’re finished setting all this up, select “Save”.

Select “Save”.
Create custom designs for your BigCommerce storeShogun’s Custom Elements feature enables development teams to create their own reusable elements using HTML, CSS, and JavaScript.Get started now

Using Shogun to Add HTML and JavaScript

Right out of the box, Shogun gives BigCommerce users everything they need to create their own custom homepages, product pages, landing pages, and just about any other kind of ecommerce content. You can choose from a vast library of elements when setting up your pages and fully customize each element as needed — no coding required. 

But just because you’re not required to write your own code doesn’t mean you’re not able to. 

Indeed, within Shogun’s elements library you’ll find an “HTML” option, and you can also create your own elements using HTML, CSS, and JavaScript. 

HTML Element

To add custom HTML code to one of your BigCommerce pages in Shogun:

Step 1. After opening the Shogun app, select the page that you would like to customize. 

Select the page that you would like to customize. 

Step 2. This will open Shogun’s visual editor. To open the elements library, select the “Elements” icon in the left sidebar of the visual editor (it’s the one that looks like a plus sign inside of a circle). 

Select the “Elements” icon. 

Step 3. Click and hold on the “Html” icon in the elements library, then drag the HTML element to wherever you would like to place it on the page. 

Click and hold on the “Html” icon in the elements library, then drag the HTML element to wherever you would like to place it on the page. 

Step 4. In this example, we’ll use the following HTML code to add a custom sizing chart to the page:

<h1>Size Chart</h1>
<table class="sizeChart" border="0" cellpadding="10" cellspacing="0" width="100%">
<thead>
  <tr>
    <td>Mens</td>
    <td>Small</td>
    <td>Medium</td>
    <td>Large</td>
    <td>X-Large</td>
    <td>XX-Large</td>
  </tr>
</thead>
<tbody>
<tr>
<td>Neck</td>
<td>14-14.5</td>
<td>15-15.5</td>
<td>16-16.5</td>
<td>17-17.5</td>
<td>18-18.5</td>
</tr>
<tr>
<td>Chest</td>
<td>35-37</td>
<td>38-40</td>
<td>41-43</td>
<td>44-46</td>
<td>47-49</td>  
</tr>
<tr>
<td>Sleeve</td>
<td>32-33</td>
<td>33-34</td>
<td>34-35</td>
<td>35-36</td>
<td>36-36.5</td>
</tr>
<tr>
<td>Waist</td>
<td>29-31</td>
<td>32-34</td>
<td>35-37</td>
<td>38-40</td>
<td>41-43</td>
</tr>
</tbody>
</table>

Once your code has been added, save your changes and publish the update. 

Save your changes and publish the update.

The feature that you custom-coded will now be displayed on the live version of your BigCommerce store. 

The feature that you custom-coded will now be displayed on the live version of your BigCommerce store. 

It’s also worth noting that integrating a third-party tool onto one of your pages often involves injecting custom HTML code — the HTML element in Shogun is helpful for this task as well. 

Custom Elements

Finally, to create your own custom-coded elements for repeat use in Shogun’s visual editor:

Step 1. Open Shogun and select the “Developer tools” option in the left sidebar of the main dashboard. 

Select the “Developer tools” option in the left sidebar of the main dashboard. 

Step 2. Select “Create new…”. 

Select “Create new…”. 

Step 3. In this example, we’ll create a custom element for a slider that visitors can interact with. This will require adding HTML/Liquid, CSS, and JavaScript code. 

You can use HTML, CSS, and JavaScript to build your own custom elements. 

Add the following HTML code:

<div class="slider-container">
  <input type="range" min="0" max="100" value="50" class="slider" id="mySlider">
  <p>Value: <span id="sliderValue"></span></p>
</div>

Add the following CSS code:

.slider-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

And add the following JavaScript code:

var slider = document.getElementById("mySlider");
var output = document.getElementById("sliderValue");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

Once all the code has been added, give your custom element a name (in this case, we’re using “Interactive Slider”) and save your changes. 

Save your changes.

Step 4. Now, in Shogun’s visual builder, you’ll see the element you just created listed in the “Custom” section of the elements library. 

You’ll see the element you just created listed in the “Custom” section of the elements library. 

As with any other element in the visual builder, you can place your custom element anywhere you want on the page and then adjust the styling details as needed. 

You can place your custom element anywhere you want on the page and then adjust the styling details as needed. 

With Shogun, you get the best of both worlds. The user-friendly features available in the visual builder allow you to quickly design and publish pages for your BigCommerce store, and yet you still have the ability to custom-code content whenever it may be necessary. Ultimately, this can lead to benefits such as more conversions, a higher customer retention rate, and much more.

Create custom designs for your BigCommerce storeShogun’s Custom Elements feature enables development teams to create their own reusable elements using HTML, CSS, and JavaScript.Get started now

You might also enjoy

Get started for free

Get hands on with everything you need to grow your business with a comprehensive suite of tools.
Start now
Arrow pointing up and to the right Arrow pointing up and to the right