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.
There are a couple different ways to add HTML to your BigCommerce store — you can either use the Page Builder or the WYSIWYG editor.
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.
Step 2. 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.
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”.
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”.
Step 2. From here, 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.
With this feature, you can edit the HTML code of a BigCommerce page as needed.
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.
Step 2. 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:
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”.
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.
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.
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).
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.
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.
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.
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.
Step 2. 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.
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.
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.
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.
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.