Customizing BigCommerce and Shopify

BigCommerce and Shopify are probably two of the most well-known SaaS (Software as a Service) e-commerce solutions out there today. The main selling point of these services is they make it quick for sellers to have their stores up and running. Anyway I’m not going talk about the features they have to offer. To be specific, I’m going to share my experience working with both platforms from the perspective of template customization.

Real quick, both services offer a wide array of base themes to get user started. It’s also worth mentioning that half of the themes on Shopify are premium themes.

The Common Traits

Both platforms use a system where the template HTML files are organized into views such as layout or snippets. They use different naming conventions but the general idea is layouts are the skeleton of the whole page and snippets are the bits of content loaded into the page. For example, a layout file could be for homepage or product category page, while a snippet is another file controlling the product loop that can be called from both layout files. Each platform has its own syntax for invoking these files and user can add new layouts and snippets. This system makes it easy to reuse repetitive codes and keeping your code tidy. Making little modifications like adding an FB Like box or a Mailchimp signup form is a piece of cake.

Both platforms also has a built-in HTLM/CSS code editor with basic key features such as a file browser and list of recently opened file. However, the BigCommerce editor has an extra handy feature which lists all the files dependent to the currently viewed file for quick access.

Now we shall compare them.

BigCommerce (BC) vs Shopify

Before we go any further, let me just break the news that Shopify hit a home run with this one. The winning formula is Shopify themes are made to be customized in the first place. Two key features that stood out are Theme Settings extension and Liquid programming language.

Theme Settings extension is fairly interesting. It allows the theme developer to tweak the settings or configuration fields of any themes. As an example, if the shop owner decided he needs to use an alternative logo when the website is viewed on a mobile phone, the theme developer can simply add a new upload field into the settings page in addition to the default logo upload field. The new variable will automatically be accessible in the template and the alternative logo can be output and controlled using CSS.

While BC templates only contain static calls to other template files, Shopify has its own template programming language called Liquid. Liquid comes with basic programming functions such as variables assignments, for-loops, conditional statements as well as a handful of cool helper functions. The code can be used both in HTML and CSS files. Here is a very nice cheat sheet.

With Liquid, a certain degree of logic can be implemented into the template such as giving different CSS class to elements based on the page currently in view. A little more advanced example is using product tags to put ribbon/sash on products in category pages. In my recent project, I tagged products with bestseller and used the following code to produce a Bestseller sash. While this can be implemented in BC using clever Javacsript tricks, I found that the tags system in BC to be a bit limited.

{% for mytag in product.tags %}
   {% if mytag == 'bestseller' %} 
      <span class="circle sd-bestseller">Bestseller</span>
   {% endif %}
{% endfor %}

The next thing I love about Shopify is the dedicated manager for Menus or Navigation in the admin panel. Admins can create as many menu groups as they like in addition to the default Main Menu. Then simply use the Liquid for-loop in the appropriate template file to render the menu (also in any way they like). This is how it looks in its simplest form. Of course, with a little bit more code you can also highlight the active menu item.

<ul>
   {% for link in linklists['footermenu1'].links %}
      <li><a href="{{ link.url }}">{{ link.title }}</a></li>
   {% endfor %}
</ul>

Once the menu structures are implemented in the template this way, it will be very easy for store admins to add or remove menu links without having to alter the template file directly.

Another feature that works very well with the menu manager is Smart Collection. A collection is Shopify’s way of saying category. A smart collection is somewhat a dynamic category where products are automatically assigned based on the rules defined to the category for example, if a product has a specific tag or if it falls between a specific price range. A menu can be made to link to the smart collection which gives a “product filter” sense of interaction when it is placed strategically on the page.

The next exciting feature Shopify has to offer is Apps to extend the functionality of your online store. There are hundreds of them but a particular one that has proved to be essential is the meta fields app, which allows the user to define additional generic text fields to products. Outputting these extra text can be done effortlessly using simple template tags. With custom meta fields, designers would have far more design flexibility when customizing the theme.

BC’s Redeeming Features

The one limitation of Shopify that I noticed is the checkout pages are off-limits to HTML modifications. Therefore, you won’t be able to place any special text or move the layout around. This could be due to the fact that a code mistake can cause the whole checkout process to break. CSS changes is still permitted though. BC on the other hand allows their checkout pages HTML structure to be modified.

One little bonus feature of BC is the template files can be accessed via FTPS or WebDAV. This can be really useful in circumstances where you need to make a directory-wide search or batch search and replace task using your local IDE.

Final Words

Working with BC and Shopify have been a great learning experience. But if I had to choose which one I enjoyed more, it has to be Shopify!