Guide

Image Specs

Site Background- 2000 x 1120px

 

Homepage Story - 2000 x 1120px

 

Collection Background - 2000 x 1120px

 

Collection Lookbook Images - 1600px wide (any height)

 

Product Images - 1100 x 660px

 

Text Page Images - 1600px wide (any height)

 

404 Textbox Image - 1000 x 666px

 

 

 

 

 

Site Background

Edited under Theme Settings > Site Background

 

 

The ‘Background Color’ is displayed as the sites's default background color, and is shown if a background image is loading.

 

 

The ‘Background Image’ is displayed as the background for the entire site. You are able to override this image for collections (see Collections section below).

 

 

 

 

 

 

Homepage Story

Edited under Theme Settings > Homepage Story

 

 

The homepage story allows the user to click through a series of animated images. When clicking the finial image, the user is directed to a collection of your choice.

 

 

The ‘Story Collection’ setting determines which collection the final image will lead to.

 

 

The ‘Background Color’ setting adjusts the background color displayed while the images are loading.

It is best to use a color taken from the background of the first image.

 

 

Up to 20 images can be added to the homepage story. Each image can be added by clicking either the ‘Choose file’ or the ‘Replace’ button.

To enable an image, check the ‘Show Image’ Checkbox.

 

 

 

 

 

 

 

Collection Pages

Edited under Products > Collections

 

 

To show a specific background image on a collection ( and override the site background image ), upload an image to the ‘Collection Image’ option. This image will also display as the background for all products within that collection.

 

 

 

 

Supplemental Collection Lookbook Images edited under Theme Settings > Collections

 

 

Each collection can have up to 12 Lookbook Images which are displayed between products on the collection page. If there are fewer images than needed for a collection, the available images will be repeated to fill all the lookbook spaces.

 

 

To add images to a collection, first navigate to one of the ten available collection sections and select the appropriate collection using the ‘Collection’ dropdown. This will associate the images with your collection.

 

 

Then, upload up to 12 images to the ‘Lookbook Image’ slots. Check the ‘Show Lookbook Image’ checkbox to enable an image.

 

 

Each of these images should be .png files, with transparent backgrounds. To create a collage effect, many of the images should be composites of multiple images on top of, or next to each other.

 

 

 

 

 

 

Product Animation

Edited under Theme Settings > Product Animation

 

 

By default, each product has animation enabled. When the user scrolls on a collection page, each product will spin showing a 360 degree view.

 

 

 

The ‘Animation Speed’ dropdown can be used to make the animations faster or slower. This can be changed at any time.

 

 

 

The ‘Number of Animation Frames’ determines how many frames are used for the animation. It is IMPORTANT to note that changing this value MUST be accompanied by updating the number of all product animation images.

 

Unless animation is disable on a product (see more below) the first X images (X is your selected number of frames) are used for the animation only, and will not be displayed on the product page. Every image after X can be displayed on the product page.

 

 

 

To disable animation on a product and show a static image instead, add the tag ‘static-image’ to the product. This will show the first image on the collection page, and allow any of the images to be displayed on the product page.

 

 

 

 

 

 

Product Colors

Edited under Products

 

Adding color variants (and an image for each) will allow the user to change the product color by hovering left to right, over the product image. Clicking the image allows the user to select the current color and will open a secondary variant options (e.g. Size).

 

Start by creating color variants and uploading an image for each color.

 

Hover over each color image, and click the ‘Alt’ button. Enter the name of the appropriate color EXACTLY as it is entered for the variant.

 

e.g. if a color variant is named ‘light blue’, the alt tag must also be ‘light blue’. Be sure any capitalization or spaces are the same as well.

 

 

 

 

 

 

Text Pages

Edited under > Online Store > Pages

 

 

The page title is automatically displayed at the top of the page. You can use the ‘A’ (formatting) button above the content editor to create a heading with any of the Heading 1-6 options.

 

 

 

 

 

 

Newsletter Signup

Edited under > Theme Settings > Newsletter Signup

 

The action url for a Mailchimp list can be added here. ( Follow the link below the setting for detailed instructions )

 

 

 

 

 

 

404

Edited under Theme Settings > 404 Error Page

 

 

This page is displayed when the user navigates to a page that doesn’t exist.

 

You can edit the message and redirection link here.

 

The ’Text Box Background’ image must be uploaded, and will display behind the message and back to shop button.