Loading...
Blueprint

Use WinGrep To Locate The BigCommerce Templates You Need To Change

Manuel C. Published on 15 August, 2012

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.

Methodology

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.
BigCommerce Template designs - download template files to your pc and extract the archive

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:
Bigcommerce templates design - go to the page and element you want to edit

Using Inspect Tool we can see that the link for Estimate Shipping and Tax has a class named : EstimateShippingLink.
BigCommerce templates design - inspect tool shows which class an html element has

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.

Bigcommerce templates design - wingrep shows the location and the code in the files

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.
Bigcommerce Templates design - hide the code you want using html comments

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 - table row - in them.
BigCommerce Templates designs - use html comments to hide a piece of code

After I save the file and refresh the cart page I can see this:
BigCommerce templates design - estimate shipping link is gone.enjoy

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?

Manuel C. Published on 15 August, 2012