Aarfie custom web development and maintenance services are discontinued – read more

Looking for our new Big Cartel themes – visit Aarcade



How do I use the light box viewer with custom content?

If you purchased or upgraded your Big Cartel theme after 29th November 2011, please refer to Aarcade Support instead of the following article.

close message

Aarfie’s Big Cartel themes use the more powerful and robust ColorBox, rather than Big Cartel’s default Fancy Zoom, light box viewer. By default, ColorBox is enabled only for your product images on the Product page.

This article explains how to load ColorBox globally, throughout your shop, and how to then use it with your own custom content.

1. Load Global ColorBox

Navigate to the Design > Pages section of your shop admin and click the page titleĀ Layout.

Accessing the Layout page code

Accessing the Layout page code

On the following page, scroll through the text box content until you find the opening <body> tag. If necessary, use your web browser’s find text function, typically located in your Edit > Find browser menu, and search for “<body“.

Body Tag

Locating the body tag - your body tag may look slightly different, depending upon your theme

Once you have located the opening body tag, create a space at the END of the tag (but within the end >)

<body id="{{ page.permalink }}-page" class="{{ page.permalink | escape }} {{ page.category | escape }} in_the_store"  >

copy the code in the following box


and paste it into the space

<body id="{{ page.permalink }}-page" class="{{ page.permalink | escape }} {{ page.category | escape }} in_the_store" onload="setupColorBox()">

Within the Layout code it should look similar to this:

Adding ColorBox Loading Code

Click the Save button once you have finished editing your Layout page code. You have now enabled ColorBox globally.

2. Using Global ColorBox

The ColorBox function will now be applied to any link you create with the class colorbox. The simplest example is a text link that will launch an image. Don’t forget the class=”colorbox”. For example:

<a href="http://preview.aarfiesx.com/bc/uptown/images/slide1.jpg" class="colorbox">Slide 1</a>

Resulting in:

Slide 1

You can create your own link using the same format, i.e.

<a href="[YOUR IMAGE URL]" class="colorbox">[YOUR LINK TEXT]</a>

Creating a Gallery

You can tie a number of image links together as a gallery. This will allow previous/next navigation through all gallery images once the light box is launched. To do this you must add a matching rel attribute to all links. For example:

<a href="http://preview.aarfiesx.com/bc/uptown/images/slide1.jpg" class="colorbox" rel="testslides">Slide 1</a>
<a href="http://preview.aarfiesx.com/bc/uptown/images/slide2.jpg" class="colorbox" rel="testslides">Slide 2</a>
<a href="http://preview.aarfiesx.com/bc/uptown/images/slide3.jpg" class="colorbox" rel="testslides">Slide 3</a>
<a href="http://preview.aarfiesx.com/bc/uptown/images/slide4.jpg" class="colorbox" rel="testslides">Slide 4</a>

Here we have used the rel value “testslides” to tie all links together, resulting in:

Slide 1
Slide 2
Slide 3
Slide 4

Using Thumbnails

In some cases you may wish to use an image thumbnail for the original link, rather than text. For example:

<a href="http://preview.aarfiesx.com/bc/uptown/images/slide1.jpg" class="colorbox"><img src="http://preview.aarfiesx.com/bc/uptown/images/slide1.jpg" alt="slide1" width="200" height="100" /></a>

Here we have used the image we are launching for the thumbnail as well, applying width and height attributes to shrink it down to 200px by 100px, resulting in:


If you have a number of images on your page, it is recommended that you create smaller thumbnail images, rather than using the method above. Using the following format will improve your page loading speed as well as improve the appearance of your thumbnails:

<a href="[YOUR LARGE IMAGE URL]" class="colorbox"><img src="[YOUR THUMBNAIL IMAGE URL]" alt="" /></a>

Using a Web Page

In some cases you may wish to launch a web page in your light box. To achieve this you must add the attribute data-type="webpage" to your colorbox class link. For example:

<a href="http://google.com/" class="colorbox" data-type="webpage">Google</a>

Resulting in:


The default width and height are set to 80% of the browser window width and height.

In some cases, you may wish to control the width and height of the of the light box. To do so, you must add the additional attributes data-width="X" and data-height="Y". Width and height values must be entered in pixels, e.g. “500px”, or as a percentage e.g. “60%”.

For example, we may want to make use of American Apparel‘s Men’s T-Shirt size chart located at http://www.americanapparel.net/sizing/default.asp?chart=mu.shirts. This chart will look neat within a 580 pixel wide by 620 pixel high light box:

<a href="http://www.americanapparel.net/sizing/default.asp?chart=mu.shirts" class="colorbox" data-type="webpage" data-width="580px" data-height="620px">Men's T-Shirt Sizing Chart</a>

Resulting in:

Men’s T-Shirt Sizing Chart

Note that the “close window” link within the light box does not work, since this is located at American Apparel’s server and coded to work with their own pop-up window. The normal close functionality of the light box (i.e. clicking X or clicking outside of the light box) will still close the light box however.

Last Modified: 1st June, 2011

Other ‘Big Cartel’ Articles...

Big Cartel support articles generally relate to Aarfie-developed Big Cartel themes purchased from the shop or created for a custom project.