Locating which BigCommerce template you need to edit in order to create your own design is easy with WinGrep, a tool that lets you search variables and any HTML/CSS code.
The simplest way we can locate an element in the BigCommerce templates is to use Inspect Tool from Chrome (Firebug in Firefox) and look at the surrounding HTML tags and at their CSS classes and IDs.
In the .css file a class is referenced with .classname (there is a point before the classname) and an ID with #idname.
Usually, I look at the class or ID of a div tag, then copy that class (ID) name in WinGrep and let it search through all the template files until it finds all the templates with the matching code. It is easy to do something like this and it will save you time from searching the BigCommerce support knowledge base.
What is WinGrep?
It is called Windows Grep, and the name Grep comes from an Unix command g/re/p which basically means to search for a string (text) in a file and then print the lines where that is located.
This program lets you search for a text in any type of text file. BigCommerce templates are .html and .css file so it will be a simple task for WinGrep to locate and ID or class in these.
Steps to locate the BigCommerce template
Anyone can follow these steps and locate any of the templates needed to be customized. Before continuing you need to know that the templates can be reverted anytime by clicking Revert, from top right corner of the template editor.
Step 1. Make sure you know how to work with the Inspect Tool
Inspect Tool is a powerful tool from Chrome that shows you how the HTML elements are connected to the CSS rules and lets you edit the rendered page directly in browser and see the changes live.
You can learn how to use Inspect Tool by reading this tutorial written in the BigCommerce Support portal.
Step 2. Download and install WinGrep
WinGrep can be downloaded from here. Installation is straightforward and it will add an option in the popup menu, when you do a right click.
Step 3. Download and extract your template files to the PC
Log into your store's Control Panel, then go to Design - Store design tab and then click on Download Template files.
After this you need to extract the archive to a folder on your Desktop. Name that folder anything you want.
Step 4. Go to the element on page that you want to change
Let's say you want to remove the Estimate shipping and Tax link from the cart page. You need to add an item to the cart and then select to view the cart. You will see something like this:
Using Inspect Tool we can see that the link for Estimate Shipping and Tax has a class named : EstimateShippingLink.
Step 5. Locate the template and the code surrounding that HTML/CSS element
After we select the class (or ID) name of that HTML element we go to our template folder, right click the folder and then select Windows Grep. After inserting EstimateShippingLink in the search box we will see that it has located the template where we need to do the changes.
Step 6. Go to the place indicated by WinGrep and edit the template
WinGrep showed me that EstimateShippingLink is referenced in Panels\CartContent.html. That means that I need to go to Design - Template files - Panels - CartContent.html, at line 43 to see that piece of code.
Once you locate the code you need to make sure that you hide or delete only the code related to Estimate Shipping and Tax. As you can see in the image above that bit of code is really big and it is in a table row
We will use HTML comments in order to hide a piece of code. Html comments have this formatting: <!-- code here -->
Step 7. Do the changes you need and enjoy your day
Since we need to hide a whole bunch of code we will use HTML comments to enclose the
After I save the file and refresh the cart page I can see this:
Note: you may find out that WinGrep sometimes locates very many templates while doing the search. In that case you need to use some logic and see on what page you want to do the changes and then find the most relevant templates to edit.
Example: if I am on the category page and want to edit the category title/heading I will look only at the templates with category in their name. That will shorten the time it takes to locate the template.
Did you find what you needed with WinGrep?