Created: 2011-07-13 16:34
Updated: 2014-04-27 10:11


  • 360/ - is 360 html/css/js, jQuery reel plugin + a bunch of frames
  • Animation/ - is an After Effects file...playing around with bubbles
  • Shopify/ - is the Shopify theme
  • bubbles/ - is html/css/js of bubble effect (HTML5, canvas, paperjs)
  • whatever/ - is just a dump of whatever...

General Theme Management

  • Use TextMate + Shopify TextMate Bundle to edit and reupload theme files (
  • The current theme is a customized version of the Couture theme:
  • Assets are stored on the Shopify CDN, so be careful about uploading images/css/js, it might take a while for changes to show up on the live site (unless you upload using different file names)
  • Theme settings can be managed in the Shopify admin. Theme settings are controlled in the Shopify/config/settings.html file, see Shopify documentation for more info: Theme settings are stored in Shopify/config/settings_data.json
  • Most changes can be found in the main layout file /layouts/theme.liquid


  • Logo should be 980px wide. A div with id=grayness is set and positioned via coordinates to make gray background the full page width - try not to play around with the header too much, if so, use the current logo image as a starting template and try to avoid big changes


  • By default, footer is divided into four columns, each column is a link list.
    • Link lists can be managed via the 'Navigation' tab in the Shopify admin area.
    • Footer link lists are set under the 'Theme Settings' tab in the Shopify admin (under General Theme Options)

Slider Images

  • Currently there are 3 sliders on the site: home, slider1, and slider2
  • Slider images can be uploaded via the theme settings page in the Shopify admin area:
    • See "Home Page" tab and "Slider 1" and "Slider 2" tabs
  • Sliders are fixed width (images are cropped to 952px on upload) and flexible height - the slider height will be the height of the tallest image in the slideshow
  • Currently, each slider can hold 5 images and the time setting (time per slide) of slider 1 and slider 2 are the time setting used by the home slider (see "Home Page tab")
  • Sliders are displayed on a page via a page template. There are two page templates for the two extra sliders: page.slider1.liquid and page.slider2.liquid. To get a slider on a page, just set the page template in the Shopify admin panel.

Product Management

  • Individual products are organized into collections (smart collections and custom collections). The 3 apiqe machines are in the smart collection "apiqe machines" which searches for the keyword "machine" in the product "type"
  • As more images are added to a product, thumbnails appear on the product-page, clicking each thumbnail will bring up the full-size image in the "gallery view"
    • Be sure to upload images that are the same width for product pages, it looks funny (jumps) when the gallery switches between different size (mainly diff width) images

Product 360

  • The "VIEW 3D" link for 360 products is in the product description along with the image that gets replaced by the jQuery reel plugin with the 360. The jQuery that handles the 360 has two parts: the lightbox (fancybox plugin: and the actual 360 frame loader (reel plugin: All the markup (HTML) for the 360 is in the product description (accessible via Shopify admin).

  • The jQuery which executes the lightbox and 3D is in the theme file 'layout/theme.liquid'

  • The frames for the 360 are currently located at (in the WP theme of the old site). This should be updated at some point!

    • The name of each frame is generated through a for loop for each product, like so:
     for(i=373;i<=422;i++) {
     	var name = "560-crp-25june11_apiqe_01." + i + ".jpg";

    and links are generated to each image and stored in an array. The array is then accessed by the jQuery reel plugin to fetch all the frames.

Useful Links

  1. Shopify Wikie:
  2. jQuery Reel Plugin (360):
  3. jQuery FancyBox:
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more