Notification Bar

To edit the Notifcation Bar, go to Online Store > Themes > Customize Theme > Notification Bar.

From there, the notification bar can be configured as one of two ways:

Session

The notification bar can be dismissed by the user, but will reappear when they come back to the store.

Campaign

The notification bar is setup with a specific campaign ID and when the user closes the bar they will never see the notification bar for this given campaign ID again. When the campaign ID is updated, the user will then see the notification bar again.

You can set the following: + Show or hide the notification bar + Type: session or cookie (campaign) + Campaign ID: only used for Cookie type + Text: Copy shown in the notification bar + Link: Destination for user after clicking the bar

The homepage is managed through the Customize theme section of Shopify.

How to get to customize theme section

1. Login to the Shopify admin
2. Click on Themes in the left sidebar
3. Click on Customise theme

Add Collection Campaign Feature

The collection campaign feature shows the collection listings module for the chosen collection. It will use the image from the collection product (that also appears on the collections landing page)

1. Select Collection Campaign from type
2. Enter the handle for the campaign you want to feature ex. f-w-2016
3. Click Publish changes

Add Collection Campaign Image

The collection campaign Image lets you update your own image for the specified collection

1. Select Collection Campaign from type
2. Enter the handle for the campaign you want to feature ex. f-w-2016
3. Upload an image to the Files section of the admin and copy the url
4. Paste the url into the Attribute 1 Field
5. Click Publish changes

Add Collection Video feature

The collection video feature shows a full size video and links through to the chosen collection.

1. Select Collection Video from type
2. Enter the handle for the campaign you want to link to
3. Enter the URL for the different video types in the marked attribute fields (See how to upload files)
4. Click Publish changes

Product grid

The product grid feature shows three product images in a loose grid from the chosen filter.

1. Select Product grid from type
2. Enter the handle to filter the product grid by (the handle must be in the Filter Collections link list)
3. Click Publish changes

Add Product Video feature

The product video feature shows a full size video with a call to action for the chosen product filter.

1. Select Product Video from type
2. Enter the handle for the product filter you want to link to (the handle must be in the Filter Collections link list)
3. Enter the URL for the different video types in the marked attribute fields (See how to upload files)
4. Click Publish changes

Product filter

The product filter feature shows an image for each product filter in the Filter Collections link list. The image from the first product in each filter will be shown with a rule to ensure the same product is not shown twice.

1. Select Product filter from type
2. Enter the handle for the initial filter (the handle must be in the Filter Collections link list)
3. Click Publish changes

To set the initial filter to display: 1. go to theme options -> homepage 2. on the right side go to the feature called “Product Filter” 3. set Handle to match the Product filter from the link list

Artist feature

The artist feature shows the artist listing module for the chosen artist.

1. Select Artist from type
2. Enter the handle for the artist to feature
3. Click Publish changes

The look and feel of an Artist on the Artist Page page is done via the Artist Product.

Title color

The title color is the same as that set for the listings page.

Feature image

The feature image is the same as that set for the listings page.

Background color

The background color can be set by creating a tag with the prefix feature-bg- followed by the color value.
e.g. #feature-bg-#000000

Shop

The shop section will automatically pull 9 images from the shop page to display.

Look

The collection used to find an image for the Look section is set in under CTA Look. Choose a collection and then the image will be found using the logic described below.

Look image

The image shown can be set by uploading an image to a Collection Product and setting the alt as index-cta-look.

If no image is found, then the first image will be shown.

Campaign

Campaign image

The image shown can be set by uploading an image to a Collection Product and setting the alt as index-cta-campaign.

If no image is found, then the first image will be shown.

Controlling what filters appear

1. Go to Online Store
2. Go to Navigation
3. In the Filter Collections section, you can reorder the categories. It will save automatically.
4. To add or remove cateogories, click Edit Link List
5. Click save

The majority of the content for the About page has been configured in code. You can however update the title, introductory text, page title and page meta description via the Shopify admin.

Due to restrictions with Shopify Collections, in order to customise the look and feel for each Collection we match a Product to the Collection (what we refer to as a Collection Product) and use the Collection Product attributes to customise the look and feel of the Collection.

IMPORTANT

The Collection Product must be the first Product in the Collection.

Creating a new Collection and Collection Product

1. Create a Collection
2. Take note of the handle e.g. f-w-2014
3. Save the Collection
4. Create a Product
5. Ensure the Product has the same handle as the Collection e.g. f-w-2014
6. Set the template of the Product to product.collection
7. Add the Product to the Collection

Make Collection ‘Not for Sale’

You can prevent all items within a collection from being for sale by creating a metafield for the collection with the following attributes:

• namesapce: shop
• key: not_for_sale
• value: true

To make the items within the Collection for sale, just delete the metafield.

The look and feel of a Collection on the Collection Listing page is done via the Collection Product.

Title

The title can be set by updating the Collection Product title.

Collection Listing

The look and feel of a Collection on the Collection Listing page is done via the Collection Product.

Lookbook background color

The background color can be set by creating a tag with the prefix listing-bg- followed by the color value.
e.g. #listing-bg-#000000

Lookbook background image

The background image can be set by uploading an image and setting the alt as listing-bg.

A mobile specific background image can be set by uploading an image and setting the alt as listing-bg-mobile.

Lookbook image

The feature image can be set by uploading an image and setting the alt as listing-image.

Collection title Color

The title color can be set by creating a tag with the prefix listing-color- followed by the color value.
e.g. #listing-color-#ffffff

Show Campaign

If you have a campaign setup then you can show it on the Collection Listing page by adding the metafield: listing-campaign.show = true.

Campaign background color

The background color can be set by creating a tag with the prefix listing-campaign-bg- followed by the color value.
e.g. #listing-campaign-bg-#000000

Campaign background image

The background image can be set by uploading an image and setting the alt as listing-campaign-bg.

A mobile specific background image can be set by uploading an image and setting the alt as listing-campaign-bg-mobile.

Campaign image

The feature image can be set by uploading an image and setting the alt as listing-campaign-image.

Campaign title Color

The title color can be set by creating a tag with the prefix listing-campaign-color- followed by the color value.
e.g. #listing-color-#ffffff

Show Video

If you have a video setup then you can show it on the Collection Listing page by adding the following metafields:

• video.title: Title shown on the bottom of the video
• video.cover: Image URL for the video cover image
• video.webm: URL for webm format of the video
• video.ogv: URL for ogv format of the video
• video.mp4: URL for mp4 format of the video

Video title color

The title color can be set by creating a tag with the prefix listing-video-color- followed by the color value.
e.g. #listing-video-color-#000000

Order of Collections

Shopify does not provide a way to easily order Collections shown, so we have to use a Link List to define the order we want the collections displayed in.

To update, remove or add a new Collection to the Listings page, once the Collection has been created go to Navigation and then edit the Collections link list.

Collection Page

The look and feel of a Collection on the Collection Page page is done via the Collection Product.

Layout

The layout is determined by the template and can be set to one of the following: + collection: Only Products + collection.split: Split view: Campaign and Products + collection.all: Special layout used for the Shop Page showing only Products

Invert Navigation/Cart

If you choose a dark background color for the Campaign/Products you might want to invert the navigation and cart so they are white instead of black.

The navigation/cart can be inverted by creating the tag layout-invert.

Products background color

The background color can be set by creating a tag with the prefix products-bg- followed by the color value.
e.g. #products-bg-#000000

Products text color

The text color of the product description can be set by creating a tag with the prefix products-text- followed by the color value.
e.g. #products-text-#000000

Only products

Sidebar background color

The background color can be set by creating a tag with the prefix campaign-bg- followed by the color value.
e.g. #campaign-bg-#000000

Split Campaign

Campaign background color

The background color can be set by creating a tag with the prefix campaign-bg- followed by the color value.
e.g. #campaign-bg-#000000

The split campaign shows the Campaign Collection and the Collection Products side by side.

To control the about of the campaign images, they are grouped together. Below, I will show an example of images in the same group.

Campaign title color

The title color can be set by creating a tag with the prefix campaign-title- followed by the color value.
e.g. #campaign-title-#000000

Campaign images

Images are grouped in rows which are configured by setting the alt as campaign—n where n is the row number the image should appear in. e.g. campaign-1

Each row is an independent 12 column grid which is used to place and size the images.

List of tags

• #products-bg-# background color (right, collection page)
• #campaign-bg-# background color (left, collection page)
• #products-text# text color (above products on collection page)

Image position

Images can be positioned by appending any of the following class names after the row number, separating each class name with an asterisk *. https://cdn.shopify.com/s/files/1/0743/8111/products/ss15-lookbook_01.jpg?v=1427381196 e.g. campaign-1-bottom*left or campaign-1-bg*bgCover

• back: Sets the z-index to 0.
• front: Set the z-index to 10.
• bottom: Align to the very bottom of the column, minus the vertical padding.
• top: Align to the very top of the column, minus the vertical padding.
• • left: Align to the very left of the column, minus the gutter width.
• right: Align to the very right of the column, minus the gutter width.https://cdn.shopify.com/s/files/1/0743/8111/products/ss15-lookbook_01.jpg?v=1427381992
• up: Pull the image up 25%.
• down: Push the image down 25%.
• bg: Set for all images to be used as background images (set position: absolute).
• bgCover: Full-size background image to cover entire row
• bgContain: Full-size background image keeping proportions
• bgBottom: Background image aligned to bottom of column, minus vertical padding.
• bgTop: Background image aligned to very top of column, minus vertical padding.
• bgLeft: Align to the left of the row, minus the gutter width.
• bgRight: Align to the right of the row, minus the gutter width.

Image size and placement

Images can be sized and placed by setting the final string in the alt tag (after campaign-n) to x+y where x is the number of columns wide the image should be, and y is the number of columns to offset from the left. e.g. campaign-1 8+2

Images are set to fill the entire width of the columns they are placed in.

Campaign Feature Image

The feature image for a set of images can be set by uploading an image and setting the alt as campaign—n-feature where nhttps://cdn.shopify.com/s/files/1/0743/8111/products/ss15-lookbook_02_2x.jpg?v=1427461627 is the block number.
e.g. campaign-1-feature

The size and position of the image is based on a 12x12 grid and can be configured by appending the desired grid widths and offset after the campaign alt tag.
e.g. campaign-1-feature 11+1 will span 11 grid withs and be offset by 1 grid width.

Campaign Inset Image

The inset image for a set of images can be set by uploading an image and setting the alt as campaign—n-inset where n is the block number.
e.g. campaign-1-feature

The size and position of the image is based on a 12x12 grid and can be configured by appending the desired grid widths and offset after the campaign alt tag.
e.g. campaign-1-inset 3 will span 3 grid withs and be offset by 0 grid widths.

Campaign trigger color switcher

You can trigger colors to switch by attaching trigger to the alt tag of a campaign image. This image should be the first in a row. e.g. campaign-5 8+2 trigger

Campaign trigger background color

The trigger background color can be set by creating a tag with the prefix campaign-trigger-bg- followed by the color value.
e.g. #campaign-bg-#000000

Products trigger background color

The trigger background color can be set by creating a tag with the prefix products-trigger-bg- followed by the color value.
e.g. #products-trigger-bg-#000000

Products trigger text color

The trigger text color of the product description can be set by creating a tag with the prefix products-trigger-text- followed by the color value.
e.g. #products-trigger-text-#000000

Adding a new product checklist

Main Product details

1. Add Title
2. Add Description
3. Add Images
4. Add variants for sizing/price/SKUS

Product Metadata (right sidebar info)

1. Mark visibility checkbox
2. Select a product type (dresses, coats, skirts, etc.)
3. Set vendor - read below about how type and vendor interact for sizing guides)
4. Select the collection the product belongs to
5. Add tags (see below)

Product Listing

Product detail images background color should be: #f4f4f4 If other background colors are used the background color of the prodcut page will use the color on the left and right of the image.

Featured image

The first image for the Product will be used as the Featured image on all listings pages such as Shop.

Tags

Be sure to tag the image with the proper collection and year, this helps out with the ease of sorting images in the Shopify Admin. Ex. a product from the Fall-Winter 2015 collection should be tagged with “FW15”

Hiding an image

To hide an image from the shop and product page, but still show it as the featured image on a collection page, add the alt tag product-hide.

Alternate featured image

You can set an alternate featured image which will be flipped at random when a user is on a listing page. The alternate image can be set by setting the alt as featured-alt.

Sale Pricing

In the variants section of the product where the sizes and pricing live click the “edit” button. You will be taken to more in depth variant page. From here you can set the new price which will be the sale price and the compare at price which will the old price which will now appear with a strikethrough.

Product page

Creating a new Collection and Collection Product

…

Product buy button background color

The background color can be set by creating a tag with the prefix buy-bg- followed by the color value.
e.g. #listing-bg-#000000

Product Sizing Guide

The sizing guide is set by the Product type and the Product vendor.

The Product type refers to the type of Product

Types incude: Pants,Skirts,Coats, T-Shirts, and Sweaters

The Product vendor is used for an extra level of sizing which is usually for a specific material or style. The two current cases for this are:

T-Shirts come in - Long & Short

Skirts come in - Wovens & Knits

Product Short Description

This is defined by creating a metafield with the namespace info and the key description.

Due to restrictions with Shopify, in order to customise the look and feel and upload images for each Artist we create a Product (what we refer to as an Artist Product) and use the Artist Product attributes to customise the look and feel of the Artist.

Creating a new Artist Product

1. Create a Product
2. Add the Product to the Artists collection
3. Set the template of the Product to product.artist
4. Save the Product

Artist Contribution Collection

An Artist can link to the collection they contributed to by adding the Artist Product to the Collection.

e.g. If Jean Moran contributed to the F/W 2014 Collection you would add the Product with the handle jean-moran to two Collections: artists, and f-w-2014.

Artist Listing

The look and feel of an Artist on the Artists Listing page is done via the Artist Product.

Listing title

The title for the listing page can be set by updating the title of the Collection artists.

Listing description

The description for the listing page can be set by updating the description of the Collection artists.

Artist Listing image

The listing image can be set by uploading an image and setting it as the feature image (the first image).

Artist Listing title

The title shown for an Artist can be set by updating the Artist Product title.

Artist Listing title color

The title color can be set by creating a tag with the prefix listing-color- followed by the color value.
e.g. #listing-color-#ffffff

Artist Page

The look and feel of an Artist on the Artist Page page is done via the Artist Product.

Header image

The main image can be set by uploading an image and setting the alt as header-image.

Header background color

The background color can be set by creating a tag with the prefix header-bg- followed by the color value.
e.g. #header-bg-#000000

Bio image

The bio image can be set by uploading an image and setting the alt as bio-image.

Bio title

The title can be set by updating the Product title.

Bio description

The title can be set by updating the Product description.

Images

Any images that do not have the alt tag listing-image, header-image or bio-image will be shown below the author bio.

Featured Collection products

Two products are selected and are shown at the bottom of the Artist page, these are selected from Products in the Artist Contribution Collection with a tag that matches the handle for the Artist Collection. e.g. jean-moran

Homepage

The look and feel of an Artist on the Artist Page page is done via the Artist Product.

Title color

The title color is the same as that set for the listings page.

Feature image

The feature image is the same as that set for the listings page.

Background color

The background color can be set by creating a tag with the prefix feature-bg- followed by the color value.
e.g. #feature-bg-#000000

The Press section of the website is managed through the Shopify Admin in the Blog section.

Create a new press post

1. Login to the Shopify Admin
2. Go to Online Store -> Blog Posts in the left sidebar
3. Click Add a blog post
4. Enter a title
5. Add an image to the content area (choose Original for Size to insert)
6. Click Add an excerpt and enter the URL in this area (ensure there is no formatting or line breaks)
7. Click Set a specific publish date… under Visibility and enter the date of the press article
8. Set blog to press
9. Click Save blog post

The links in the footer are managed through the Shopify Admin and can be safely updated at any time.

Updating Footer links

1. Login to the Shopify Admin
2. Go to Navigation
3. On Footer module click Edit link list
4. Edit the links
5. Click Save

Updating Social Footer links

1. Login to the Shopify Admin
2. Go to Navigation
3. On Footer Social module click Edit link list
4. Edit the links
5. Click Save

How to upload files

1. Login to Shopify admin
2. Click on Settings in the left sidebar
3. Click Files
4. Click Upload files
5. Choose your file and click Open

These are some guidelines for creating assets for the Ohlin/d website.

Product detail images

Use the product_detail PSD files. They have sizing and alignment guides built in.

Best practices: - it’s best to use Smart Objects - never upsize images