Building An SEO Opitmized Custom Widget in Shogun Page Builder for BigCommerce
In an ongoing project I needed to be able to design sleek, SEO optimized landing page galleries for BrandLighting.com. As a developer I am used to designing templates to be used over and over but that lacked the personalization that the client required. We landed on using Shogun Page Builder in our BigCommerce eCommerce store for our brand, homepage, blog posts and some categories so far. It is has been one of the best apps fro BigCommerce in the last 2 years!
If you work in the world of eCommerce then you most likely know the BigCommerce platform. Since 2016 I have been a BigCommerce developer partner and have built sites powered by BigCommerce and their APIs. The robustness, performance and price make it an excellent choice for mid-market brands. However, the platform is developer centered and lacks a native page builder like many users are used to in CMS platforms such as wordpress. This is where Shogun Comes in! (Please note that BigCommerce also now offers a headless eCommerce option for wordpress CMS. This is out of Beta as of Jan 2019. If you would like to learn more about Wordpress powered by BigCommerce sites please feel free to contact me.)
Shogun is a relatively new Page Builder App for BigCommerce. With the page builder you can create blog posts, static and dynamic pages as well as reuse the code generated from the page builder in category templates easily (feel free to ask me how!). If you are on a Team plan or above you qualify for the “Custom Elements” developer tool. Here you can add your own HTML, CSS and Javscript to create a widget for the page builder.
The “Custom Elements” allows you nearly unlimited flexibility in design and optimization options. For example on the homepage of BrandLighting.com the main slider is another custom widget! In this article we are going to work through the steps in create a Javascript powered SEO optimized image gallery custom element for use on any page we want!
First off, if you are developer this will seem trivial and easy. However if you are not it may take some patience to understand what exactly each component is doing. I am attempting to write this for non-developers so please feel free to send me feedback! For developers I encourage you to fork my repo and contribute to the TODOs !
We are going to build a gallery like the one found on our live site: https://brandlighting.com/modern-kitchen-island-lighting-ideas
Or find my pen you can fiddle with at https://codepen.io/JBerkowitzDesigns/pen/dEooQR
We are going to be using my source code from a fork of zoomwall.js: https://github.com/jdberkowitz/zoomwall.js
My fork of this gallery adds SEO support, CSS animations, and title/description/link to each image. Since my client is not a developer I created a spreadsheet that sets up the HTML for the widget easily. We will explain this later.
First off we need to install Shogun from the BigCommerce App store on our BigCommerce store via the control panel. Once your account is setup and you subscribe to the correct plan, we can create a custom element by navigating to Advanced > Custom Elements > New Template
Inside of the New template we will name our widget for easy access in the Page Builder widgets. I am naming mine Masonary Gallery SEO (Dropzone)
Inside the “Liquid” section is where we can enter plain HTML, JS Script tags, and Liquid Variables that can be used for dynamic content. Liquid variables are beyond the scope of this article but are a very useful feature that extends the functionality of the Custom Elements by allowing you to create areas that the Page Builder can drop content into.
First we are going to enter the basic HTML that we need to set up this gallery.
<link href='https://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'><div id="zoomwall" class="zoomwall">
{{dropzone}}
</div>
The link to the styled font I am using is not required if you want to use your theme fonts. The next part is the <div> (container) that will hold the gallery images. This needs a class and id of “zoomwall” in the code we use. If you are developer this is simple to change to create multiple instances of the gallery on a single page however we will only be using a single gallery. See documentation for instrucitons on GitHub.
Next we need to define the {{dropzone}} as “User Input” with Value Type of “HTML” and Input Type of “Inline”.
Next we have to install the CSS and Javascript that powers the gallery.
Go to my GitHub account https://github.com/jdberkowitz/zoomwall.js
We are going to use just 2 files from this repo, the zoomwall.js and zoomwall.css. Please note the original zoomwall is not SEO optimized but my fork is. If you are a developer that would like to contribute please do!
Simply click on the zoomwall.css file to see the contents. Copy and paste the contents of this file into the “CSS” section on the Edit Template screen as shown below
Next we need to add the Javascript (JS) file content to the “JS” section. Copy and paste it into the Edit Template section as shown below.
Lastly we add the code to create the gallery to the en of the JS code we copied above.
window.onload = function() {
zoomwall.create(document.getElementById('zoomwall'),true);
};This simply executes the Javascript that creates the gallery layout when the browser window loads.
Creating the widget is nwo complete. However we still need to generate the HTML image content for the the dropzone.
Each image inside the gallery will be enclosed in a <figure> tag and supplemented with additional information including ALT tag, product link, heading, and description. Below is the syntax of each image tag.
<figure class="view view-tenth" >
<img class="gallery-image" src="./image_1_small.jpg" data-highres="./image_1_large.jpg" alt="#">
<div class="mask"><h2>TitleS</h2>
<p>Description</p>
<a href="#" class="info">LEARN MORE</a></div>
</figure>Let’s break this down quickly. An HTML5<figure> tag element encloses the image tag which is comprised of the source image URL, a “data-highres” attribute in which you place URL of the large version of your image, and an alt tag for SEO.
Next we have the desktop overlay information (this is currently not hidden on mobile but will be in a future revision) This overlay information is handled within a masked <div> and controlled purely by CSS. It includes the heading, description and link entered by the user for this image.
When the HTML is complete it will be copied and pasted into the dropzone HTML of the widget. It will look something like this
So how will a non-technical person generate the HTML? Well to facilitate the creation of the HTML and efficiently setup the copy of the gallery I designed a simple worksheet to generate everything from our input.
You can find a public version you can copy to your GSheets account here: https://docs.google.com/spreadsheets/d/1d4lpsVFUW4bcTTAPaxXNr-dfbA-drfjkRJqn9kAf87g/edit?usp=sharing. I left some live urls on the workbook as examples. You could also use the formulas here in desktop excel but who uses that anymore? :)
In the spreadsheet we simply need to enter the image information including the filename. I use Python to generate a CSV of all the file names of images in a folder. This is beyond this article but the code below will generate the image names into a csv file which you can then use to paste into the “IMAGE NAME” column. If you would like to learn how to use this read my article here.
import os
import csv
f = open("C:\Pathto\document.csv",'r+')
w = csv.writer(f)
for path, dirs, files in os.walk("C:\PathTo\ImageFolder"):
for filename in files:
w.writerow([filename])Once we entered all our image information we simply go to the “CONTENT WITH HOVER” tab and copy the first column.
You should have a column that has generated content similar to below:
<figure class="view view-tenth"><img class="gallery-image" src="https://brandlighting.comtech-lighting-gallery/Tech-Lighting-LED-lightis-Home-Decor-ideasContemporary-Pendant-Lighting-Collection-aragon.jpg" data-highres="https://brandlighting.comtech-lighting-gallery/Tech-Lighting-LED-lightis-Home-Decor-ideasContemporary-Pendant-Lighting-Collection-aragon.jpg" alt="Your alt tag information "/><div class="mask"><h2>Short Title of your image</h2><p>Short description</p><a href="https://brandlighting.com/tech-lighting-collections" class="info">LEARN MORE</a></div></figure><figure class="view view-tenth"><img class="gallery-image" src="https://brandlighting.comtech-lighting-gallery/Tech-Lighting-LED-lightis-Home-Decor-ideasContemporary-Pendant-Lighting-Collection-aragon2.jpg" data-highres="https://brandlighting.comtech-lighting-gallery/Tech-Lighting-LED-lightis-Home-Decor-ideasContemporary-Pendant-Lighting-Collection-aragon2.jpg" alt="Your alt tag information "/><div class="mask"><h2>Short Title of your image</h2><p>Short description</p><a href="https://brandlighting.com/tech-lighting-collections" class="info">LEARN MORE</a></div></figure>
Finally inside of Shogun we create our Page, Blog Post or Product Page then add our Custom Element we created from the sidebar. Clicking the widget after you drop it onto your page will open the HTML box where we enter the content from the spreadsheet.
You can now see the images appear! Keep in mind the Javascript is not running inside the page builder so the layout may look funky. Also it is very good practice to compress your image files to reduce page load time. I use a desktop software to quickly generate thumbnails and compress images. It would be helpful to convert into .webp format if you are so inclined for further optimization.
Now you are done with your first SEO optimized Gallery Widget for Shogun! Just publish your page to see your results live on your website. Don’t forget to submit the page to your Search Console!
I will add some notes to developers here when my time allows however if you would like to learn more about why I choose this structure or the use case that precipitated it please feel free to contact me or comment!