Compress photo-realistic images to JPG for use on the web


Select ‘Save for Web’ and adjust the tab for the ‘2-Up’ display.

Set the compression method to JPEG.

Select the ‘Progressive’ option.

Photoshop Save-for-web


Click on the drop-down to the right of ‘Quality’ so that the slider appears.  Then move the slider all the way to the left so that ‘Quality: 0.’

The image will likely look bad at this point which is expected.

Start moving the slider to the right in small increments.  If the image is large then also use the ‘hand tool’ to inspect different areas of the image.  Try to find areas where the compression is most evident.

Repeat the process of gradually moving the slider to the right and inspecting the image.  Stop when the image is sufficiently beautiful!

In general, starting from maximum compression and then reducing the compression almost always results in a smaller file size than starting with no compression.

Google Tag Manager for BigCommerce




Now for the gory details:


Create a new file /template/Panel/GoogleTagManagerTag.html


 <!-- Google Tag Manager -->
<noscript><iframe src="//"
<!-- End Google Tag Manager -->




Option 1:


Option 2:


Review your template files.


Locate the opening <body> tag.



Option 1 Example:

<body id="home">
    <div class="page">


<body id="home">
    <div class="page">

Option 2 Example:

<body id="home">
    <div class="page">




<div id="DrawerMenu">
    <div class="inner">


<div id="DrawerMenu">
    <div class="inner">


The next big hurdle is to accommodate Ecommerce Transaction reporting.


Ecommerce Transaction Tracking



<script type="text/javascript">
var dataLayer = new Array();
// console.log(dataLayer);
function trackGTMEcommerce() {
    this._addTrans = addTrans;
    this._addItem = addItems;
    this._trackTrans = trackTrans;

var transaction = {};
transaction.transactionProducts = [];

    transaction.transactionId = orderID;
    transaction.transactionAffiliation = store;
    transaction.transactionTotal = total;
    transaction.transactionTax = tax;
    transaction.transactionShipping = shipping;
    // console.log(11)

        'id': orderID,
            'sku': sku,
            'name': product,
            'category': variation,
            'price': price,
            'quantity': quantity
    // console.log('a')

function trackTrans() {
    transaction.event = 'bcTransactionComplete';
    // console.log(transaction);

var pageTracker = new trackGTMEcommerce();

For an easy setup:

Go to Settings => Web Analytics and enable Google Analytics.

For a more precise setup:


A comment works fine.



transaction.event = 'bcTransactionComplete';


Update the “hosts” file on Win7

First, some prep work

Since it’s likely that you’ll use this technique more than once some preparation will ensure things go more smoothly the NEXT time you have to edit your hosts file.

If you pin the Notepad application to your taskbar it will be much easier to locate & run as ‘Administrator.’

Just find the Notepad application & run it normally. Searching for ‘notepad’ in the Start Menu is an easy way to locate the Notepad application.


Once Notepad is running right-click on the Notepad icon in the taskbar.Â  Then select ‘Pin this program to the taskbar’ from the menu.Â  The Notepad icon should then remain on the taskbar even when Notepad is closed.


Exit Notepad to confirm that the icon stays in place.Â  And then we can get on with editing the hosts file.

Opening Notepad as administrator

The key issue with editing the hosts file is that you need to have Administrator rights in order to ‘Save’ the changes that you’ll make to the file.

To run Notepad as Administrator right-click on the taskbar item. This will display a pop-up menu that has a smaller Notepad icon. Right-click on the smaller Notepad icon and then choose ‘Run as administrator’ from the menu.


If everything goes well you’ll see a Windows dialog box asking you to confirm.Â  Choose ‘Yes’ and Notepad should open.

Opening the hosts file in Notepad

The hosts file is a hidden file in Windows and is not typically visible. There are ways to make it visible but this typically isn’t necessary.

The hosts file is at the location below on most all Windows machines. Go to ‘File => Open’ and copy paste the following line; then click the ‘Open’ button.


Editing the hosts file

Make sure to use a plain text editor like Notepad when editing the hosts file. (i.e. not Word)

In the hosts file any line that begins with the pound sign (#) is considered blank. You can use this to turn an override on or off easily.

Add the IP address and host name to the file with each on a single line. The IP and name can be separated by spaces and/or tabs.

Edits to the hosts file are active as soon as the file is saved. There’s no need to reboot your computer. Though you may need to refresh your browser and/or clear your browser cache to make sure you get the correct domain resolution.


That’s it!

One final tip: If you only use Notepad for editing your hosts file it should always start in the correct folder.Â  (If you’re using Notepad for anything else then you should probably look into a more serious text editor like Notepad++ or UltraEdit.)