Outlier v3

Introduction

This guide outlines the authoring and editing of content for the custom Shopify theme “Outlier v3”, designed and developed by PTOH.

The following is a guide and reference to the website outlier.nyc through the sales channels Hydrogen and Online Store within Outlier’s Shopify Plus account. All other sales channels are outside of the scope of this documentation.

The Outlier web shop is authored in two locations, the “Shopify admin” and the “Sanity studio”. The Shopify Admin is where the main product and collection data lives while the Sanity Studio is where settings, pages, products, and collections can be customized.

General usage of the Shopify admin is covered in Shopify’s own docs.

General usage of the Sanity studio is covered in Sanity’s user guides.

Getting Started

  1. Open the relevant links and sign in if necessary.

Note on WYSIWYGs in the Shopify Admin

When using the wysiwyg (What You See Is What You Get) editing fields in a page editor’s content or description field, it is important to use the correct formatting and double check the HTML using the <> toggle button at the top of the “Content” or “Description” fields. When possible try to avoid pasting from other documents into the non-html field. Pasting usually introduces incorrect HTML markup. When pasting is necessary, use shift + command + v instead of command + v, or switch to HTML view and paste the text between the appropriate tags. When switching to HTML view using thtre <> button, you will see your edits as HTML. Make sure there are no extra or incorrect tags. The tags surrounding the texts will correspond with the formatting options in the regular editing view, i.e. Highlighting a sentence and selecting Blockquote from the options will equate to <blockquote>Here is the sentence you highlighted</blockquote> in HTML view. Examples: You’ve created a paragraph…

Good:

<p>Paragraph text is the only thing within the paragraph tags</p>

Bad:

<p>
<meta><span>Paragraph text has a bunch of tags you may be unaware of because the text was pasted with outside formatting. There may also be empty tags like the following empty paragraph tags.</span>
<p></p>
</p>

Using the HTML View

When using a wysiwyg, it may be easier to cut and paste the HTML tags directly into the HTML view. The included tag references which are styled like this signify code that can be highlighted and copied easily.

To use HTML view to format content:

  1. Select the “<>” button.
  2. Copy a tag or group of tags from this guide.
  3. Add or paste the text between the opening and closing tags, e.g. <p>Text goes here.</p>.
  4. Switch back to the default view to review the formatting.
  5. Select Save.

Media

Note On Images

When adding editorial images, always add an alt text by selecting “Edit” and “Edit alt text” when in Shopify or use the alt text field in Sanity. For product images, if no alt text is entered, the theme will automatically use the product title as an alt text for assistive technologies and SEO. In all other cases, always add a text describing the image to the visually impaired.

Icons

Icons use basic text fields to store SVG code. Colors are controlled automatically by the theme and SVGs should be prepared with no stroke, a black fill, no background, and no embedded fonts.

SVGs in Sanity Studio

SVGs are stored as their own documents in the Sanity Studio. This allows icons to be shared across datapoints. They can be created in the Sanity Studio > SVG directory or when creating an SVG anywhere in the Sanity Studio where a field requires an SVG. The created SVG can always be found in the SVG directory and selected by fields using an SVG.

Creating SVGs with Adobe Illustrator for use in the Sanity Studio

  1. Select File > Save As to create new version in case of mistakes.
  2. Select any text.
  3. Select Type > Create Outlines (shift + command + O)
  4. Select all of the graphics on the canvas. (command + a)
  5. Select Object > Expand... and make sure only Fill and Stroke are checked. Choose Ok.
  6. With everything still selected, in the Fill and Stroke section of the tool panel, the stroke should be empty and the background should be black. If the background is a question mark, double click it and select black. All graphics should now have no outline and a black fill.
  7. With everything selected, open the pathfinder window in Window > Pathfinder and select the Unite option under Shape Modes. This will create a single object from all graphics on the artboard.
  8. Select File > Export > Export As...
  9. Make sure the format is set to SVG and check the Use Artboards checkbox in the dialog. Select Export.
  10. In the SVG Options dialog, use the following settings:
  1. Select Ok.
  2. Find the file that was exported in your Finder and open it with any text editor by using right click > Open With. The TextEdit app for Mac will work.
  3. Once the file is open, select everything starting with <svg and ending with </svg>. Copy the selection (command + c) and paste it into the SVG field where you’d like to use the SVG. (command + v)

SVG Example

<svg xmlns="http://www.w3.org/2000/svg" width="667" height="119.9" viewBox="0 0 667 119.9"><path d="M523.9,2.4v46h22.3V2.4h25V117.5h-25V67H523.9v50.5H499.5V2.4Z" fill="#000000"/><path d="M0,2.4H30.4c18.8,0,37.7,12.7,37.7,36.3,0,22.8-18.3,36.9-37.7,36.9H25v41.9H0ZM24.7,57.6l4.8-.2c6.8-.2,13.2-6.5,13.2-18.5,0-12.4-6.5-17.5-12.6-17.8l-5.4-.3Z" fill="#000000"/><path d="M80.4,2.4h32.5c17.4,0,36.5,11,36.5,31.7,0,15-8.6,24.4-20.2,29.9l24.5,53.5H126.6L106.4,68.2h-1.3l.2,49.3H80.4Zm24.7,51.4,5.7-.2c7.6-.2,12.9-6.7,12.9-16.9,0-9.7-5.9-16.2-12.7-16.4l-5.9-.2Z" fill="#000000"/><path d="M165.6,2.4h53V21.2H189.8V48.6h26.6V67.4H189.8v31h29.9v19.1H165.6Z" fill="#000000"/><path d="M230.4,48.6H330.7V66.9H230.4Z" fill="#000000"/><path d="M344.6,2.4h53V21.2H368.8V48.6h26.6V67.4H368.8v31h29.9v19.1H344.6Z" fill="#000000"/><path d="M458.6,38.5c-.2-10.2-2.5-18.9-9.1-18.9-10.2,0-14,18.3-14,41.7,0,20.7,3.5,40.6,14,40.6,7,0,9.4-9.6,9.6-19.4H486c-3.5,22.8-19.3,37.4-36.5,37.4-29.6,0-41.2-32.2-41.2-58.3,0-28.7,12.7-60,41.2-60,17.2,0,32.6,14.5,35.7,36.9Z" fill="#000000"/><path d="M625.1,0C649.2,0,667,23.4,667,60.7c0,31.2-15.1,59.2-42,59.2-26.4,0-41.9-26.6-41.9-59.9C583.1,22.3,601.2,0,625.1,0Zm0,102.5c12.7,0,16.3-19.7,16.3-42.2,0-24-3.8-43.6-16.3-43.6-13.1,0-16.4,20.5-16.4,43.5C608.7,85.3,612.9,102.5,625.1,102.5Z" fill="#000000"/></svg>

Videos

There are two types of video fields available in the Sanity Studio: video files, and streaming videos. Video files can be used as a substitute for GIFs, but are restricted to a 5mb file size. Most of the time, a streaming video is the way to go, and will also autoplay and loop.

Video Files

Videos files used in the Sanity Studio must be MP4 filetypes using h.264 codec. Sizes must be kept as small as possible (less than 5mb for larger sizes/lengths, but prefereably under 1mb). To achieve small file sizes, use the free application “Handbrake”.

Target Specifications
Handbrake Settings

The preset called Outlier Web Video should be downloaded and imported into Handbrake by selecting Import... in Handbrake’s “Presets” dropdown menu. For reference, the settings are based on the following:

Streaming Videos

When adding a streaming video, use the high res original of any size, the streaming service “Mux” will take care of all of the formatting and sizing.

Guide to determining which video format to use

When to use video files

All of the following conditions are met

When to use streaming video

Any of the following conditions are met

Working in the Sanity Studio

The content in the Studio consists of “documents”. One document can reference another document, linking multiple documents together, but at the heart of all content is a document.

There are two ways to approach document editing, under the Structure tab or under the Presentation tab. In both contexts, each document can be worked on as a draft, previewed, and finally published.

Drafts

A document is a draft if it not yet published, and as soon as a change is made to it if it is already published. When a change is made to a published document, it will automatically be saved as a draft and an indicator on the bottom left of the document will change from displaying “Saving…” to “Saved” and finally to “Published on… Edited at…”.

Is it a draft?

Discarding changes

Drafts content is only visible on the front end site if it is in preview mode. It may be necessary to discard drafts when previewing the site if you would rather see that particular content as it is published when previewing other content. After a draft of a document is created, it can be returned to its currently published state:

  1. Using the ... menu to the right of the Publish button, select Discard draft.

Draft Review

To quickly review, edit, or discard and or all current drafts:

  1. Open the Draft Review tab.
  2. Each draft will show its specific changes and give you an option to Publish, Discard, or Edit any of the changes for that individual document. Data highlighted in red means it was deleted, while data highlighted in green means it was added.
  3. To take action on all of the documents listed, scroll to the bottom and select Publish ALL or Discard ALL. Be extremely cautious when selecting Publish ALL. Most of the time Discard ALL will be the only option to use here.

Previewing

A draft document can be previewed on the front end by putting the production site in preview mode.

UNDER CONSTRUCTION: Note that there is currently an issue with any page that has a Scanner element, usually the homepage. It fails to update when changes are made in the side panel or when using the preview window’s refresh button. To work around this, open the site in preview mode in a separate tab. To open the site in a new tab in preview mode, follow the steps in the following “Option 1” or “Option 2” and the select Open preview from the sharing button to the right of the preview window’s address bar. The separate tab will then have to be refreshed to see new changes.

Option 1

  1. Open the Presentation tab. This will put the production site into preview mode, both within the presentation’s preview window, and if the production site is opened in another tab. Note: once the Presentation tab is opened, from any sanity draft document, the entire site will be in preview mode. As you navigate the site in preview mode, you will see all draft content if any of the documents that are drafts are being used on the page.
  2. Navigate to the content you are currently editing.

The sidebar will show you all of the documents with content that is displayed on the current page. You can select any of the documents there to preview draft changes.

Option 2

  1. From the document being edited, under the title, there is a pulldown menu that will say something like Used on 2 pages. This will list the places on the site where the content within document is being displayed. Pick the context in which you’d like to preview the draft. The Presentation tab will open and show you the draft content with the document open in a sidebar, enabling you to continue editing while previewing the changes.

The sidebar will show you the current document being edited. You can close the document with the x button to see all of the documents with content being shown on that page.

Preview mode

After the Presentation tab is opened once, the front end site will be in preview mode even in another browser tab or window. This is important to know because:

In preview mode, blue outlines will show up giving you the option to directly edit elements on the page.

Stop previewing

When the front end is in preview mode and being viewed in its own tab or window, a highlighted Stop previewing button will be visible to indicate that you are previewing and allowing you to turn off previewing mode. Clicking it will refresh the site and show only published content (what visitors see).

Viewing the published site while in preview mode

When previewing draft content, it may be necessary to view the site as visitors see it for reference. To view the published site without disabling preview mode, simply open the site in a private browser window. This will always show you how visitors see the site. You can have the published site open in one window and the site in preview mode in another.

Sharing a preview

It is possible to share a link to the site in preview mode.

  1. Navigate to Presentation to put the site in preview mode.
  2. Select Copy link from the share button to the right of the preview window’s address bar.
  3. Send the url to anyone within the organization.

Collaborating

In the top right of each document are options for commenting on and assigning document related tasks to the containing document. Tasks can also be assigned at the global level on the top right of the entire studio.

Settings

Global settings for the site are located in the Sanity studio under Structure > Settings. Settings control:

Styles

Product options

Signup

Social

Language and labels

The labels and messaging across the site can be edited in the Sanity studio under Structure > Settings > Language. note: All fields are used in the theme but some may be used for accessibility and are not visible. It is important to fill enter a value even if it doesn’t seem to appear on the site.

SEO

Homepage

The homepage is created and edited in the Sanity studio under Structure > Home.

Previewing the Homepage

Pages

Pages are created and edited in the Sanity studio under Structure > Pages. Pages will only appear on the site if they are included in either the Main menu or the Secondary menu within Settings.

Products

The following is a basic guide to authoring products. See the section Product Reference to reference to all product possibilities.

Getting Started

  1. Open the relevant links and sign in if necessary.

Creating a Fabric

Fabrics are at the heart of Outlier’s offerings and should be authored before products and collections.

Creating a fabric is a 3-part process: creating a fabric product in the Shopify admin, creating a fabric collection in the Shopify admin, and authoring the fabric’s details in the Sanity studio.

A fabric product is necessary to show up in collection grids and search results.

A fabric collection is necessary to show a collection of products on the fabric’s page.

A fabric details page is necessary to host the fabric’s details.

Create the fabric product

  1. Add a new product to Shopify by navigating to Shopify Admin > Products and selecting Add Product.
  2. In the Title field, add the fabric’s title. This is the title that appears:
    • on the fabric’s details page
    • in the collection’s heading, e.g. “Made with Fabric Title”
    • as the heading of the “Fabric” section on any product that uses the fabric
  3. In the Media field, add a Featured image. This is the image that appears:
    • in collection and search results grids on the fabric’s card
  4. Under Product organization, set the Product type to fabric (all lowercase). The product type controls:
    • the product’s details page will always have the url structure outlier.nyc/fabric/handle
    • a collection grid’s product card will display a “Fabric” badge
    • the product’s search result will be in a separate section of predictive search results
    • the product will have fabric-specific set of fields in the Sanity studio
    • fabrics will be listed separately in the Sanity studio
    • (DEPRECATED v2) when combined with the Tag feature will exclude the product from searches
  5. Under Product organization, set the Vendor to OUTLIER or Outlier Inc.. This is necessary for analytics.
  6. (DEPRECATED: this step is only necessary for the v2 theme) Set the theme template to fabric in the Online store > Theme template field.
  7. Under Publishing, add the product the the Hydrogen sales channel. The fabric must be accessible to the website.
  8. Under Product status, set the product status to Active. Active fabrics will appear:
    • in search results for ‘*’
    • on any product page that lists the fabric in its details page sections
    • at the URL outlier.nyc/fabrics
    • at its own direct URL outlier.nyc/fabrics/handle
    • available to use within the site’s navigation menus
  9. Select Save. The product will be automatically synced with the Sanity studio and should appear in the Sanity Studio > Structure > Fabrics list momentarily.
  10. Copy the title that you entered in the Title field (command + c). Take a note of the product’s “handle” within the Shopify admin by selecting Search engine listing preview > Edit website SEO. It is the located in the URL handle field.

Create the fabric collection

  1. Navigate to Shopify Admin > Products > Collections and select Create collection. Collection data will be used for:
    • Analytics when someone views the Fabric’s detail page
    • Group products
  2. Paste the product title you copied from the fabric product in the Title field. The collection SEO title or title will be used:
    • As the SEO and sharing title for the details page
  3. Check the collection’s handle in the Search engine listing preview > URL handle field and make sure it is identical to the fabric product’s handle. If it is not, change it to match. The handle is used to:
    • Match the collection to the product to bring it all together
  4. Add a description to the Description field. The collection SEO description or description is used:
    • As the SEO and sharing description for the details page
  5. In the Media field, add a featured image. The image is used:
    • As the SEO and sharing image for the details page
  6. Set the collection’s conditions to show products tagged with the fabric’s title. NOTE: If a product meets any of the conditions in the section Hiding a Product, the product will not appear on the site within this collection, unless this collection is in the site’s navigation menus.
  7. (DEPRECATED: this step is only necessary for the v2 theme) Change the collection’s template to fabric in the Online store > Theme template field.
  8. Select Save.
  9. Tag any pre-existing products using this fabric with the fabric’s title to include them in the collection.

Create the fabric details page

  1. Open the product in the Sanity Studio by navigating to Sanity Studio > Structure > Fabrics and selecting the fabric product.
  2. Fill out each field. The description and details here is used for:
    • The description and details sections on the details page
  3. Select Publish. The published details page will automatically show the fabric collection at the bottom.

You now have a Fabric that can be shared between products and has its own page in the shop located at outlier.nyc/fabrics/fabric-handle. To include a product in this fabric’s collection simply add the fabric’s title to the product’s Tags. NOTE: this does not automatically put a fabric section on the product’s details page. A product’s details page is created manually in the Sanity studio when creating a product.

Creating a Product

Create the Shopify product in the Shopify admin

  1. Create any Fabrics that the product uses by following the steps in Creating a Fabric section.
  2. Add a new product to Shopify by navigating to Shopify Admin > Products and selecting Add Product.
  3. In the Title field add the official title. The SEO Title and URL handle is automatically generated from this title and those should usually be unchanged.
  4. In the Description field, add a description. If the description formatting doesn’t look correct when previewing the product’s page, check the HTML view in the editor to make sure there is no unwanted HTML. This can happen if copying and pasting from another document or website, see Note on WYSIWYGs in the Shopify Admin. It is always best to type out the official description here. The description appears:
    • In quick buy forms within the collection grid’s product card, truncated
    • On the product’s details page
    • The SEO and sharing description, truncated to 150 characters
    • As a default text option when linking to the product from a page module
  5. In the Media field, add a featured image. Please refer to the Product Media section for important image specs. The featured image will be shown:
    • on collection and search results grids on the the product’s card
    • as a default on the homepage if featured and no custom image is used
    • the SEO and sharing image as a fallback to the Sanity details page image

STOP here and reference the Previewing a product section for creating a draft product.

  1. In Product organization > Type set the product’s type. Refer to the Product Type Reference for the official types and their purposes.
  2. In Product organization > Vendor set the vendor to OUTLIER or Outlier Inc.. This is used for:
    • Analytics
  3. In the Product organization > Collections field add the product to any collections if necessary.
  4. Use tags to add a product to one of the menu or fabric collections, like pants, shirts, objects, layers, Fabric Title. See the Tags section for details.
  5. (DEPRECATED: this step is only necessary for the v2 theme) Set the theme template to sanity in the Online store > Theme template field if you would like to customize the page beyond the basic template using the Sanity Studio.
  6. In the Variants field, create the variants. When creating variants with colors and sizes, the options must be titled Size and Color respectively. Color titles are used:
    • To find a swatch in Sanity studio > Structure > Settings > Product options by matching titles exactly
    • To hide a color using the title in the Hidden Colors metafield.
  7. (DEPRECATED: this step is only necessary for the v2 theme) Open a tab to preview the product by selecting Preview. note: This only works for published themes. When working with an unpublished theme in the Shopify Admin (Development), you can set the Product status to Active and view the product in a preview of the theme. When working with an unpublished theme in the Shopify Admin (Production), remove any collections set in step 8 to prevent it from appearing on the live shop, then set the Product status to Active.
  8. In the Metafields section enter any necessary values. Please refer to the Product Metafields Reference section for details about using one of the following:
    • Custom Out Of Stock Message
    • Hidden Colors
    • Mailchimp List URL
    • Gift card is upfront?
  9. Select Save.
  10. The product will be automatically synced with and appear in the Sanity studio shortly.

Create the product’s details page in the Sanity studio

  1. Open the product in the Sanity studio by navigating to Sanity Studio > Structure > Products and selecting the product.
  2. In the Main Image field, add an image. This image appears:
    • As the main image on the product’s details page
    • As the SEO and sharing image for the product’s details page
  3. In the Sections field, add the sections that will form the product’s details page.
  4. You can open the Presentation panel and edit your page visually. NOTE: see the Previewing a Product section to work without the product being public facing.
  5. Select Publish. NOTE: published products that are still hidden from within the Shopify admin will still be hidden from visitors

Creating a Gift Card Product

Gift card products allow customers to buy a gift card with a personalized message to the recipient from a product details page.

Shopify Admin

  1. Navigate to Products > Gift cards and select Add gift card product.
  2. Fill out the necessary fields.
  3. There should be two images in the Media field which follow the same guidelines as other products, see the Product Media section.
  4. Set the type in Product organization > Product type to Gift Card if not already set.
  5. (DEPRECATED V2) Set the theme template to gift-card in the Online store > Theme template field.
  6. (DEPRECATED V2) Make sure gift_card is selected under Online store > Theme > Gift card template suffix.

Upfront Gift Cards

  1. To create an “Upfront” gift card, which does not include a “from” and “message” field, and does not allow other products in the cart, set the Gift card is upfront? metafield to true.

Back In Stock Notifications

Variant Level Notifications

Variants level notifications are handled automatically by the Back In Stock app.

Product Level Notifications

Product level notifications are handled by using a Mailchimp audience (list) for the product and including the signup form’s URL in the Mailchimp List URL metafield.

  1. Create a Mailchimp Audience in Audience > Manage Audiences > View Audiences > Create Audience.
  2. Title the audience using the product name prefixed with something like “Update:” to keep them nicely organized in the audience list, e.g. “Update: Slim Dungarees”. The title of the list will be seen by customers who subscribe. Under Campaign URL settings choose the first option which sets the URL’s slug to [xxxxxx](generate randomly).
  3. View the audience and go to Signup forms > Form builder.
  4. Find the URL in Signup form URL and visit the URL in another tab or window.
  5. Select the URL from the address bar in the tab or window.
  6. Navigate back to the product in the Shopify admin and paste the URL in Metafields > Mailchimp List URL.
  7. Select Save.

Hidden Colors

To hide an in-stock color, e.g. when preparing to show it a specific date/time, you can add them by name to the Hidden Colors metafield.

Hidden colors will not show up on the site at all. They will not be available to sign up for back in stock notifications either. If the only variants that are available for a product are hidden, the product will be considered unavailable on every page of the site, but will still appear in any collections that depend on the product being available. That is because the product is technically available if there is stock.

Hiding a Product

The following are criteria that prevent a product from showing up in the Hydrogen store when any have been met.

The following are criteria will hide a product from “Recommended products” sections.

Previewing a product

In the Shopify admin, the Preview button currently does not work. Instead follow these steps to preview a product before it is shown on the site:

  1. Either add the tag draft to Product organization -> Tags (recommended) or make sure the product meets one or more of the requirements from Hiding a Product.
  2. (DEPRECATED: this step is no longer necessary when using the draft tag or the product is hidden) Obfuscate the URL by adding - followed by any miscellaneous text to the URL handle, e.g. handle-preview or handle-9874587942389. This must be changed back to just handle when ready to go live.
  3. Copy the URL handle.
  4. Under Publishing, publish the product to the Hydrogen channel only.
  5. Set the Status to Active. The product is now visible on the website at outlier.nyc/products/url-handle. It will be hidden to visitors even if they navigate directly to that URL.
  6. Open the Sanity studio and find the product under Structure > Products. Make your edits and either preview them in the Presentation tab or in another tab at the preview URL copied from Open preview in Presentation -> Share button to the right of the preview window address bar when the product’s details page is open in the Presentation preview window.
  7. Draft and hidden products are visible when the site is in preview mode. The only people who can see the site in preview mode are users who are signed in Sanity Studio and have activated preview mode, and anyone with the preview share link. This allows you to share a draft product’s page with other team members.

Going Live

After the product has been edited in both the Shopify admin and the Sanity studio, previewed and approved, it can go live from the Shopify admin.

  1. Remove the draft and/or hidden tag from Product orgainization -> Tags.
  2. (DEPRECATED) Under Search engine listing > URL handle make sure the handle is returned to it’s original form, e.g. without any miscellaneous text added to the end for previewing.
  3. Under Product organization, make sure Product type, Collections, and Tags have the appropriate values for the product to be included in the correct collections and not be hidden according to the conditions in Hiding a Product. Including the product in any collections that appear in the shop’s menu in the Sanity studio’s Structure > Settings > Navigation, or adding it itself to the menus makes the product visible. A product with the Product type of fabric does not need to be in the navigation to appear in search results or on the site.
  4. Under Publishing, select Hydrogen, Online Store, and all other channels that the product is sold on.
  5. Make sure the product’s Product status is set to Active and select Save.
  6. Open a private browser window and navigate to the product’s product details page to confirm that the product is visible. If you are done previewing you can do this in a normal browser window and select “Stop previewing” at the bottom left of the page.

Product Media

The media field is used to store the featured image. For legacy products and products that aren’t customized in the Sanity Studio, all media is stored here.

Shopify Admin Setup:

The main image appears on the product page as the hero. If no main image is set, the featured image will be used in its place.

Sanity Studio Setup:

Shopify Admin Setup (when not using the Sanity template):

Variant Images (at least one required)

It’s important to include at least one variant image to be used for the color slideshow on the product’s page. Because the variant images are used in the color slideshows and are zoomable, they image should be as large as other product page images.

Setup (Shopify Admin and Sanity Studio override):

Color Slideshow Buttons

By default the color slideshow buttons will take their color from the averaged color found in the first variant image found representing the color. To override this color, or to use an image for a pattern, add a new swatch with an identical color title in the Sanity studio under Structure > Settings > Product options.

Setup for pattern images:

Tags

Tags Reference

Product Type

The type of product.

Product Type Reference

Below is a list of the product types that effect the appearance and functionality of a product within the theme.

fabric
Gift Card

Product Metafields

Product Metafields Reference

Custom Out Of Stock Message

Text: Use this field to override the default Out of Stock messaging. e.g. “Expected in July”.

Hidden Colors

List of single-line texts: Add colors by name to hide them from visitors even if they are in-stock, e.g. a color that is scheduled to be released at a specific time.

Mailchimp List URL

URL: Use this field to let customers sign up for updates about this product. See Product Level Notifications.

(DEPRECATED v2) Additional Variants Products

List of References: Use this field to select products that hold additional variants when exceeding the maximum allowed variants in the Shopify Admin. See Exceeding 100 Variants.

Details

Details are the attributes of a product. These are special attributes that can be categorized and shared between products. Sharing details allows a product’s attributes to be datapoints for searching, sorting, filtering and other useful functionality. Importantly, a shared attribute creates a single source of truth and allows attributes to have associated content such as icons.

Details are stored in Sanity studio > Structure > Details. While detail categories, types, and items can be created here, it is better to create them from the product fields where they are set.

How Details Work

Details are essentially tiny documents broken up in to “Categories”, “Types”, and “Items”. Their hiearchy is as follows:

Category
|
|_Type
| |
| |_Item
| |
| |_Item
| |
| |_Item
|
|_Type
  |
  |_Item
  |
  |_Item
  |
  |_Item

Example:

Care <---category

washing <---type

dry cleaning <---type

A “Category” can be thought of as the sections of a product’s details page, e.g. Fit, Form, Care, etc., and function as families for Types. Categories are symbolized by a triangle throughout the Sanity studio.

A “Type” can belong to one Category. This allows a similar type to be distinct for different categories, such as weight. A weight type can be specific to a Fabric or to a Form category. Types are symbolized by a square throughout the Sanity studio.

An “Item” can belong to a single Type. A type can use different inputs, such as “Text”, “Icon & Text”, and “Measurement”. A measurement has a “Part” field which can be used to specify what the measurement is for. If a measurement is for a particular option for the product, such as a size or color, you can use this field to specify that, e.g. “1000G (size M)”, or a material after a percents, like “50% Merino”. Items are symbolized by a circle throughout the Sanity studio.

Exception: For the type of “Revision History”, there are no shareable items. Each revision is unique and therefor will be created for each product. Revision History types are symbolized with a calendar icon and revision history items are symbolized by a clock icon throughout the Sanity studio.

(DEPRECATED) Exceeding 100 Variants

Exceeding 100 variants is no longer possible in v3.

(DEPRECATED v1.0)

(DEPRECATED v2)

(DEPRECATED v3)

Gift Cards

Gift cards can be purchased by customers with a personalized message in various denominations, or issued by Outlier directly and through returns.

Gift Card Products

To create a gift card product for customers to purchase, follow the guide in the Creating a Gift Card Product section.

Gift Card Design

Customization of the generated gift card design that appears in email notifications and when a recipient views their gift card on the site is limited to the logo and image used. Any other customizations should be made by PTOH.

Changing the Gift Card Notification Image

When a customer purchases a gift card, the featured image for the Gift Card Product will automatically be used in the issued gift card’s design.

To change the image used for gift cards issued by Outlier:

Shopify Admin
  1. Upload the Outlier wordmark logo image to Settings > Files:
    • The image must be at least 600px wide.
    • The image must have black text and either white or transparent background.
    • The file type must be PNG.
    • The file must be titled outlier-logo-wordmark.png.
  2. Upload the Gift Card image to Settings > Files:
    • The image must be at least 600px wide.
    • The file type must be JPG.
    • The file must be titled outlier-gift-card.jpg.

Migrating from v2 to v3

Support

For questions or help, contact Peter.