How to change content in BigCommerce.com templates: guide for a complete newbie.

I clearly remember those days in early 2000s when one after another new online services started to offer complete DIY solutions for non-programmers. They started with 'do-your-own-site' (e.g. geocities.com), but eventually transformed to blogging platforms. E-commerce which is the same big thing as simple web presence has been back then is no exception.

There are a number of online platforms to build online store knowing literally nothing about IT: no programming, HTML or CSS knowledge. One of the most popular services is BigCommerce.com, which I was asked to help with. 

BigCommerce is not designed to be extremely flexible or developer friendly. Users choose one of the supplied templates and then add products, prices and pictures. Unlike functionality, which is difficult and in many time just not possible to change, content changes in HTML are usually possible. But for a developer, not familiar with the platform (like me), this changing process involves a lot of guesswork. 

BigCommerce templates contain a lot of files, such as panels and snippets. The layout, content and internal variables (such as %%GLOBAL_xxx%% and %%LNG_xxx%%) are spreaded across those files and it's not always clear where a certain piece of text is located (although the files are named properly and in general provide some hint). 

One of the things I needed to make was to replace all 'Add to cart' buttons to 'Add to basket' buttons to reflect the difference between American and British English (remember that BigCommerce is an American site). How'd I do that? I used Google Developer Tools to help me with my guesswork. 

First of all let's open the list of the template files - this is the place where you should be looking for things to change. Login to BigCommerce and click Design link in the upper right corner. Then in the More drop down list select Template Files.   

 

Click on Template Files will open the full list of files under the current template: 

Now take for example the product page. I had a requirement to change the text of the button from 'Add to Cart' to 'Add to Basket'. So in essence I needed to find HTML code of that button (something like <input type="submit"> and change the content. 

Let's make our little investigation. This is the page: 

In the debugger we clearly see the naming of the <DIV> blocks and their hierarchy. Even if we didn't realise that the main product template is named Product and contain the link to the panel named ProductDetails, which in turn contains the link to the ProductAddToCartRight, which finally leads us to ProductAddToCart panel, we could have guessed it from the DiV block with class ProductAddToCart.

The rest will be more straightforward. Just open this ProductAddToCart panel and find the submit button: 

In many cases the content is presented by a %%LNG_xxx%% placeholder in which case the easiest solution is to comment this placeholder out and put some permanent hard coded text. It's not perfect, but as far as I am aware of, BigCommerce does not offer any better way, at least for the non-programmer. 

Overall the platform makes positive impression. It is not flexible enough for me, but I am not the target audience. If I were to recommend a quick way to establish online store without significant investment in infrastructure and development services, I would recommend BigCommerce (which does not mean that there's nothing better - I just haven't seen any other).