> This is part 1 of 3 of the full documentation (pages 1–100 of 248). > The content is paginated: fetch every part to see all of it. > Next part: https://story.groupthought.com/llms-full.txt/1 > Page index: https://story.groupthought.com/llms.txt # Story theme documentation Welcome to Story theme by Groupthought. Story theme brings a fresh new approach to theme setup for Shopify stores. You'll find the best approach methods in our documentation. We've learned the best ways to work with Shopify and built Story to take advantage of the platform. Story is about bringing the best experience to your customers and enjoying their shopping experience with your products and brand. ## Demonstration stores
BrightSTO-demo-Bright.jpghttps://themes.shopify.com/themes/story/styles/bright/preview
ModernSTO-demo-Modern.jpghttps://themes.shopify.com/themes/story/styles/modern/preview
BoldSTO-demo-Bold.jpghttps://themes.shopify.com/themes/story/styles/bold/preview
CleanSTO-demo-Clean-fixed.jpghttps://themes.shopify.com/themes/story/styles/clean/preview
## Explore sections in Story Explore the rich sections included in Story: {% content-ref url="/pages/-MUv7\_sVYEbBukXamLc7" %} [Sections](/sections/story-sections) {% endcontent-ref %} ## Discover our latest release {% content-ref url="/pages/-MIKtzSoATFcKdwOY293" %} [Story Releases](/updates/whats-new-in-story/story-releases) {% endcontent-ref %} > **Update**: **Story 4.2** is now out in the Shopify Theme Store. Download the latest version of Pipeline from the [Shopify theme store >](https://themes.shopify.com/themes/story) > > All licensed customers can download the latest version for free to their store. Continue running your current version and publish only when you've set up the latest. ## Try Story for Free Welcome to Story! If you're new to the theme, we offer a free, unlimited trial version from the Shopify Theme Store. Discover how Story can help you build the store that's right for your brand, products, and services. Use it as a draft theme for as long as you like, and pay only when you publish. [Free Unlimited trial from the Shopify Theme store >](https://themes.shopify.com/themes/story) ## Support If you have questions or need additional assistance setting up your theme, using theme features, our support staff is here to help you: {% content-ref url="/pages/ysUMaszWpLrgGcTX3U83" %} [Contacting support](/support/contacting-support) {% endcontent-ref %} # What's new in Story # Story Releases Story theme changelog and release notes ## Version 4.2.2 (January 2, 2025) Version 4.2.2 removes Shopify deprecated fonts from presets ## Version 4.2.1 (September 9, 2024) Adds support for Shopify's upgraded accelerated checkout buttons. ## Version 4.2 Version 4.2.0 adds support for collection swatches built using Shopify's Search and Discovery app. #### Added * Support swatch colors and swatch images powered by Search & Discovery #### Fixes and other improvements * Fix predictive search scroll lock issues on mobile safari * Fix accordion double-click ## Version 4.1.0 Version 4.1.0 adds new product page blocks and a sticky header option. #### Added: * Product page - New product image layouts * Product page - Added a block called “Icon row” * Product page - Added a block called “Tag” * Header - New “sticky” option #### Changed: * Accordion group design update; added image options * Greater control over product page content, introduced blocks and individual padding options #### Fixes and other improvements * Fixed a currency issue that was causing problems with Shopify Markets for some merchants ## Version 4.0.1 Minor update to Story to support Shopify's updates to the Gift card feature and also to include Shopify's new Shop Pay link to the footer. #### Added: * Gift card - Send directly to the recipient and include a message * Added the Shop Pay app link into the Footer ## Version 4.0 Version 4.0.0 adds support for predictive search suggestions and section groups. You can now add your own sections to the footer. #### Added: * Predictive search suggestions * Updated the design of the search page * Section group support #### Fixes and other improvements: * Switch to Shopify built-in error handling for "stockout" cart increase case ## Version 3.3 Version 3.3.0 adds support for image focal points and complimentary products from the Search & Discovery app. #### Added: * Adjust image cropping in the theme editor on desktop and mobile by using the new focal point feature * Add a "complimentary product" block to your product form > January 24, 2023 ## Version 3.2 Version 3.2 fine-tunes the functionality from the previous release — adding support for color-based product siblings and expanding Story's support for clothing merchants. #### Added: * Adds support for color-matched product siblings on the product page * Adds support for grouped variant images * New collection section for side-by-side image and product layout * Adds a font size slider to the product page and large image sections #### Changed: * Increased font size range on banner images #### Fixes and other improvements: * Fixes line width in transparent header with full width sections > June 8, 2022 ## Version 3.1 #### Added: * New width and padding settings have been added to each section. * Global settings have been added for page width and grid spacing. * New Custom Content section including images, products, newsletters, videos, and more. * New collection mosaic section. * New video player section with fast-loading video options. * New collection marbles section for large stores. * Block options added to banner and videos sections for multiple buttons on banner sections. * Support for boolean metafield filters. * New products-per-page setting to the collection section. * The ability to highlight sale links in the header. * A global setting for money\_with\_currency. * An option for custom social icons. #### Changed: * Changed upsell popup to support subscription selectors. * Improved the layout options for images in meganav. #### Fixes and improvements * Fixed animation flicker in the mobile menu on older devices. * Fixed slideshow layout shift on mobile load. * Fixed press section block select issue in theme editor. > May 16, 2022 ## Version 3.0 #### Added: * We have added all the latest and greatest features related to popups. Story now has newsletter popups, standard announcements, and cookie warnings which are integrated with Shopify's compliance APIs. Our marketing popups can be triggered by timers, scroll position, or fired immediately. * We added an announcement bar in the header, an overdue feature that required some planning around a new design that also allows for currency/language switchers in the header toolbar. * Press section * Icons section #### Changed: * We changed the filters toolbar on mobile to have sticky buttons for "sort" and "filter". * We changed the variant upsell feature interaction for products with multiple variants. In V2 this feature would add the default variant to the cart. Now, if the upsell product has variants, a popup will open to allow customers to choose a variant. #### Fixes and improvements * Changes text settings to richtext where possible to allow for bold and italic text * Fixed spacing on mobile slideshows > March 16, 2022 ## Version 2.0 * **New** Supports Shopify Online Store 2.0 (OS2) platform 🎉 * **New** Support for Shopify's Collection Filtering - Add collection filters in your Navigation admin * **New** Includes support for sections everywhere - Place sections on all page types including Products, Collections, Blogs, Pages, Cart and more. * **New** Improvements, layout options and features for Product templates and collections. > November, 18, 2021 ## Version 1.3.1 * Adds support for [Shop Pay Installments](https://help.shopify.com/en/manual/payments/shop-pay-installments). * Option added to align slideshow dots in different positions. * TikTok and LinkedIn social icon options added. * Option added to hide author from article sidebar links. * Fixes issue where new Theme Editor shows a broken HTML error in related product section. * Fixes image height issue on cart that can cause images to overlap when using tall images. * Fixes issue where circle image for team profile was a square in Safari browsers. * Fixes article tag setting for blog posts. > April, 27, 2021 ## Version 1.3 * Adds support for [Shopify Payments multi-currency checkout](https://help.shopify.com/en/manual/payments/shopify-payments/multi-currency) * Adds support for [Store Languages apps](https://apps.shopify.com/collections/apps-for-store-languages) > April 6, 2020 ## Version 1.2 * Support for Shopify's new product media formats. * Instagram feed decommission. [Learn more](https://help.shopify.com/en/manual/using-themes/instagram-feed-changes) > March 3, 2020 ## Version 1.1.2 * SCSS updates to font and color variable names > October 10, 2019 ## Version 1.1 * Switch related products to use the new [Recommended product algorithm from Shopify](https://developers.shopify.com/changelog/product-recommendations-apis-now-available-on-all-plan-types-with-added-support-in-liquid-and-storefront-apis). * Add support for automatic discounts and buy-one-get-one discounts in the cart. > June 6, 2019 ## Version 1.0 * Initial release 🎉 > November 27, 2018 # Story sections # Accordion group Styled accordions that can be utilized throughout your shop The Accordion group section in Story uses blocks to create individual accordions that are grouped together in one section:
Add this to any page or template when you need an FAQ-style section with questions and answers or to promote product details and features. > ***Tip:*** When using this section outside of the homepage. For example on a Product page, Collection page, Blog posts or Shopify pages. Use the dynamic source icon with a defined metafield to have unique block content. ### Accordion group section and block settings Video overview: {% embed url="" %} # Blog posts Feature your latest articles with a horizontal scrolling slider and a wide rage of customization settings Fully customizable section to display the latest blog posts. Manage the number of articles for different device types, image scaling, layout, and more:
Video overview of Blog post settings and options: {% embed url="" %} # Collection list Animated tiles to promote your featured collections Promote collections in a grid or slider format to help shoppers find your featured products:
Story includes several options to customize the design and layout of this section. This video covers the Section and Block settings and style options: {% embed url="" %} # Collection marbles Circular list of collections with a wide range of customization Promote your collections with a modern marble-styled list of collections:
Marbles can be customized to be displayed in various formats:
### Section settings * Marbles can be stacked or displayed in a slider. * Customize how many per row for desktop, tablet, and mobile. * Adjust the image width setting for smaller to larger marbles. * The shape can be toggled between circles and rounded corners. * Adjust the section spacing to add padding above and below and section width. ### Block settings Each marble is a collection block. Customize each block with: * Collection to promote. * Override the collection name. Use a different name for the marble. * Override the collection image. Choose any image for the marble. * Override the collection link. Link to any page.
# Collection split Promote a collection with a poster and a group of products Story's Collection Split Section divides a section with product cards and a collection poster to highlight your featured collection.

Collection split

This powerful section can display a scrolling list of products from a collection or a custom product list. The main image poster can be positioned on the left or right side. An MP4 video can be displayed and much more. ### Video Learn about the section and layout options in this video: {% embed url="" %} ### Tip When the **Product limit** is set to a value greater than **4** products, check the "**Enable sticky title**" to keep the poster image height sized equally. If the setting is unchecked, the poster image will grow based on how many rows of products you've chosen.
# Contact form Add a full-featured contact form with integrated FAQ questions Build a simple or completely custom contact form with this section that includes blocks of many types of form elements. Include frequently asked questions with the accordion feature:

FAQ question are added the right column

### Add anywhere Add the section to the homepage, page templates, Product detail pages, blog posts, search pages, the 404 page, the cart page, and even context-specific sections. ### Mobile Accordions are placed below the main contact for mobile devices:

Mobile view

### Section settings Use the section settings to configure: * Heading for the form * Heading for the accordion section * Section background color: Uses Story's color pallets in the Theme settings. * Section padding: Width, top, and bottom

Section settings

### Blocks Story includes a wide range of form blocks to fully customize your contact form. Use the accordion block to add the FAQ-style questions and answers:

Contact section blocks

### Form requirements The email and message information is required for sending a Shopify contact form. All other form blocks are optional. Remember, you can add as many form blocks as needed like multiple checkboxes and blocks, and be positioned by sorting the block order. # Custom liquid Add custom Liquid code or CSS to your theme without editing the theme code When your theme requires some custom Liquid code to be added like an App Snippet, or custom-written functionality, this section allows you to inject the Liquid code right into your theme.

Example of checking if customer has wholesale tag associated with account

# Custom content A powerful all-in-one flexible section with all the tools you need to design a custom section Story's most customizable section which includes the most commonly used features, all together in one section. This is a great starting point for many merchants to build a custom look on their homepage and on other pages and templates throughout the store. Start by adding the section and then choosing either one or two blocks to build your design:
Choosing one block will create a full-width style section. Choosing two blocks builds a two-column layout. ### Block types Customize with our widest range of rich block types:
ImageAdd one or two image blocks for image columns. Includes overlayed headings, text, and button options
TextAdd a custom text column with heading, text, and button options. Each block is a column
NewsletterNewsletter sign-up form, couple with an image block to build a rich sign-up section
VideoDisplay a full-featured background MP4 video with support for popup steaming videos
ProductPromote any product in your store, includes easy-to-use custom badge option
ArticleShowcase any blog articles with options to display an excerpt, author, author image, date, and more.
> ***Tip:*** Choosing one block will create a full-width style section. Choosing two blocks builds a two-column layout. # Featured collection Display a featured collection of products with slider and grid variations Place the Featured collection section on various areas and pages of your site. For a compact list, enable the slider:
For a full grid-style listing, uncheck the slider option and choose the number of products per row and adjust the product limit to customize the section:
> ***Tip:*** This section is ideal for lookbooks and promoting other products on the default product template. Use the dynamic source option when using on the default product template or page and block templates for unique content. # Featured product A complete product form section to feature a product on any page Promote any product with a full product form for easy purchasing:
Use blocks to fully customize the product section and the additional section settings are to adjust the layout:

Section blocks

Choose the product in the section settings:
# Gallery Elegant image gallery section for lookbooks and more Quickly build an image gallery utilizing Story's design language. The Gallery section is an easy-to-build section that includes many features to customize the layout. Use multiple gallery sections to combine different layout styles:

Combination of two gallery sections: 3 images, 2 images

Create different layouts by choosing the number of images shown in each section:

Combination: 2 images, 1 image

## Section settings * The "Scale images" option will evenly size images in the row:

Scale images checkbox

* The "Space images" checkbox can be used to toggle spacing **between** images on the same row:

Space images checkbox

* Use section top and bottom padding to adjust the padding between sections. ## Block settings The gallery images are interactive. When a shopper clicks on a gallery image, a fully zoomed version of the image can be displayed or alternatively, a YouTube or Vimeo video can be shown:

Example of image zoom

### Zoom * Keep the "Link" field blank to use the image zoom feature:
### Video * To display a popup **YouTube or Vimeo video**, add the URL address for the video in the "Link" field:
# Icon columns Build icon-based sections with a full set of included SVG commerce icons Promote your business advantages with easy-to-build high-resolution SVG icons:
### Lots of icons Choose and customize from a rich set of commerce icons or use your own images for a custom icon:

Icon is selected in the block settings

### Mobile Shoppers on mobile devices can scroll through the icon blocks:
### Section settings Use the section settings to configure the section including the size of the icon for all the blocks:

Icon size to configured in the Section settings

### Block settings Each block can be configured with an individual icon, color, and message:

Block settings include color and messaging

# Image banner Story's powerful block-based hero style image banner section Fully customizable image banner section with options for mobile and desktop devices including support for multiple buttons, and text options:

Image banner blocks let you fully customize the message and call to action buttons

### Modern design elements Creative design options built-in. Simply add section padding to the top and width for a modern rounded style banner:

Wide range of secton controls

{% hint style="success" %} ***Tip:*** Set "Image corners" to "Rounded" in the Theme settings -> Layout {% endhint %} ### Mobile banner Choose a custom image for mobile devices to simplify mobile messaging:
{% hint style="success" %} ***Pro tip***: To remove image cropping on your banner images: 1. Set the "Section height" to: "Image height". 2. In the Theme settings -> Layout, uncheck "Parallax images" under animations. *** Combining both, no parallax image animation and image height for the section height settings will ensure there is no image cropping with your banner image. {% endhint %} ### Transparent header Turn on transparency in the header to integrate the header and banner image section together:
#### How to 1. In the Header settings, activate the transparent header option and also add an "Alternate logo" for your brand that best appears over the banner (our regular logo is black, and the alternate is white):
2. In the section settings for the Image banner, set the section width to "Full width" and remove any "Padding top", set that to zero:
# Image with text Classic two-column promotion section Story's original and favorite section that's quick and easy to set up. There are no blocks, simply choose an image, add the text and call-to-action information, and it's done.
### Section settings All options are included in the section settings. To swap the image location, use the Image placement option to switch sides:
### Further customization This section is designed to be very simple to use and quick to set up. If you require more customization options, use the ***Custom Content*** section which comes with many flexible blocks and configuration options: {% content-ref url="/pages/cKNlfVLsi2eGn0ZBpxMl" %} [Custom content](/sections/story-sections/custom-content) {% endcontent-ref %} ### Custom CSS The Custom CSS feature can also be used for customization within sections. Here's an example of centering the text content area for this section only:
CSS snippet from example: ``` .overlap__content__wrapper { display: grid; place-items: center; } p { text-align: center; } ``` # Logo list Promotion logos and links with an animated marquee feature With Story's Logo list, you can easily build a section with brand logos or promotional images and add them to your shop:
### Section settings Configure the section with the following options: * Optional heading * Background color * Text alignment for the heading * Spacing: Section width, top and bottom padding
### Block settings Each block can contain a logo and an optional link address for internal or external URL address:
# Map Add location and map information to your storefront This easy-to-use section enables you to build rich map sections to help your shoppers locate your stores and services. The two-column section can display your store or service information, plus an interactive map or a custom static image:
### Interactive map The Google Maps API feature lets shoppers interact with your location map:
Once you've added a valid API key, extra features will be available: * Google will automatically create the interactive map based on the address you provide. * The map style can be changed:
* The default map zoom level can be set. Shoppers will have the ability to zoom in and out while interacting with the map. * A location correction feature is available where you can provide a Latitude and Longitude for overriding the map address. * Add a static image for fallback. If the Google API isn't working, the static image will be used in place of the interactive map. Shopify provides information on how to obtain a Google API key: {% embed url="" %} ### Static map A custom image option is available to display a map without having to use a Google API. Any image can be used here for a quick and simple map:
> ***Tip:*** Take a screenshot from your favorite map app and upload that to your Shopify Files library. Edit the screenshot for best results. # Mosaic Promote collections with a mosaic style layout Build a beautiful mosaic layout with this quick and easy-to-use section. Promote collections with this easy mosaic builder with up to three collections per section:
With two collection blocks, the section will be displayed in a two-column pattern:
### Section settings Use the section settings to configure: * Heading and text. * Section background color. * Block style, including image ratio size, text placement, text alignment, and font. * Section spacing with top and bottom padding plus section width. Experiment with different text positions:
### Block settings Each collection block can be configured individually: * Collection to promote. * Override the name to display, image, and link. * Choose the background and foreground colors for the text area:
# Newsletter Add a quick and simple newsletter sign-up form to any page Story includes a few different methods to add a newsletter sign-up option to your shop. The newsletter form collects the customer's email address and tags them in your customer base with Accepts Marketing. When linked with Newsletter apps, you can target these customers with updates. When you need a simple newsletter sign-up section, this is an ideal option with very little to configure. The design can be used to break up sections on long pages or to simply have a minimal option:
### Section settings Use the Section settings to customize: * Heading for the section * Main text information * A success message for signing up. You can include a coupon code here. * Section colors * Button color and style ### Additional settings You can use the Content Editor to update the default text for the Newsletter:

Filter by the term "newsletter" to quickly find the options under General

Change the default text for any of the following: * Placeholder email address () * The submit button text (Join) * The success response message (used only if the section setting is left blank) * The error response message ### How to access the content editor To open the Content Editor, you can click on the ellipsis icon at the top in the Theme Customizer and then choose **Edit default theme content**:

How to open the Content Editor

# Overlapping images Display two images with an overlapping effect With Story, you can create visually stunning lookbooks. The Overlapping Images feature adds a unique touch to make your pages stand out.
### Section settings All the configuration options are available in the section settings including: * Heading and text * Image choices * Individual image scaling options * Optional button * Section width and padding Each image can be sized differently and scaled:
# Page Add a Shopify Page as content and then style it to match your site design Quickly create a custom section by simply adding a Shopify Page that you've already created in your Shopify Admin's Page editor:
After adding the section, you can Create a new page or choose from an existing page that's been created:
To edit or view your Pages, you can find them under Online Store in the main Shopify Admin:
After selecting a page, use the Section settings to make adjustments like: * Show or hide the page title * Align text * Background color * Spacing and padding

Example of centred text and Dark accent color palette

# Policy links Card-style information content to help shoppers Story includes a quick and simple way to include information with links in this card-stye section. Add policy blocks to help customers find key information about your services and present them on contact pages, product pages, and more:

Card-style Policy links followed by Icon columns section

### Section settings Use the section settings to configure: * Heading for the section. * The icon size for all blocks. * The background color for the section. * Section width and padding.
### Block settings Each policy block can be configured to have: * Card heading. * Card text, the main information. * Heading link, which is activated when the shopper hovers over the card. * Card icon. Select from a large list of professionally made icons or use your own custom image. * Icon color.
### Tip Story will balance the height of the row automatically to fit the content of the largest card:
You can use the background color option to hide the shape of the card by matching that with the card color:
* This will remove the shape of the cards as they blend with the background. # Press Animated quotes and associated logos in a stylish section Make your press quotes stand out with this section. Shoppers can cycle through the highlighted quotes by clicking on the logos. Each quote block is easy to build and customize:
### Section settings Use the section settings to configure: * Section background color * Color of the quotes, configure under palettes in the Theme settings -> Colors * Text size of all the quotes * Font style for the quotes, configure these in the Theme settings -> Typography * Section width and padding
### Customize quotes The block settings for each individual quote: * Quote * Logo * Custom spacing for the quote
# Rich text More than just text, loaded with icons, lists, and image blocks Build beautiful text-based headings or quickly create sections with icons, lists, or images. The Rich text section is a Story's powerful multipurpose section with a wide range of blocks:
Multi-functional blocks can be used to design custom messages:
Choose from a range of block types:
### Section settings Use the section settings to configure the entire section including: * Text alignment * The background color of the section * Spacing width and padding
### Block settings Each block contains individual settings. Configure each one independently: * Icon block contains icon chooser and color:

Example of Icon block settings

* The button block has button text, link, button size, button style, and color options:

Example of Button block settings

* The heading block has the text field and text size options:
Use the options in each block type for a custom design. # Slideshow Story's hero-style slideshow section with support for mobile and desktop devices Showcase your brand and products with Story's powerful slideshow section. Customize your slides to promote products on both mobile and desktop devices.
### Mobile image Portrait images can be used for mobile devices. Each slide can have a different mobile image:
### Modern design elements Creative design options built-in. Simply add section padding to the top and width for a modern rounded style banner:

Slideshow Section settings

For the modern rounded effect: 1. Set the slideshow section spacing width to **Full width padding**. 2. Use the **Rounded** option under Rounded images in the Theme settings -> Layout

Theme settings

For images without rounding, set the section width option to **Full width**:
### Transparent header Blend your slideshow images into the header area with the transparent header feature:

Header settings

1. Enable with the checkbox in the Header settings under Transparent header. 2. Add an alternate logo that works best for the transparent header effect. In our example, we have a white Alternate logo and the standard header logo is black (header settings). 3. In the Slideshow section settings, use the **Full width** option for the transparent effect to work.

Slideshow Section settings

# Tabs Compact tabs for displaying information to your customers Using tabs is a convenient way to display concise and condensed information. This is a great option to consider when you want to conserve vertical space, as it is an alternative to accordions.
### Create a heading Combine the **Tabs** section with a **Rich Text** section to build a custom heading:
### Adjust spacing Unique styles can be created by adjusting the Width option in the Section settings:
### Blocks Add a plain **Text** block or a **Page** block for the tab content and tab title:
Use the block settings to customize the content:
### Images When using the **Page** block, rich text and images can be displayed:
Page blocks can increase the height of the tab section based on the content in the Shopify Page selected. ### Mobile The tab headings become scrollable on mobile when the tab titles are too long to fit the device width:
Page block content appears compressed to fit the width of the device. No cropping is used for the images:
# Team Present your team members with social links and bio information Story's Team section helps you quickly build card-style profiles of your staff or team members. Each team block has a series of elements to build custom profiles easily and quickly:
### Profiles Add team blocks and configure the team member profile with any of the following: * Profile image * Name in heading format * Job title or sub-heading * Bio text * Social links with auto-generated icons and links

Team Block

### Social networks A wide range of social links are included. These will automatically generate an icon for the social network. You can add up to three additional custom social networks with icons with links:
### Section settings Add an optional heading and text introduction. Customize additional section features like: * Team cards per row. There are scroll arrows when the slider is enabled. * Section background color * Enable slider or display by grid * Section width and padding
# Testimonials Promote reviews and ratings from your customers Story's card-styled testimonials section lets you promote feedback and reviews by your customers. Each entry is added as a block promotion without the need for an app:
### Reviews Customize each testimonial block with any of the following features: * Profile image * Name * Context, like their job, role, or position * Review stars from 1 to 5. Set to 0 to hide. * Testimonial review
### Section settings Configure the section with the following options: * Optional heading * Optional introduction text * Choose the number of testimonials to display per row * The background color of the section * Section width and padding
### Mobile Shoppers can swipe through each of the testimonial cards on mobile devices:

A progress bar at the bottom shows current position

# Text columns with images Flexible content in columns Quickly and easily build column-based rich content with evenly sized rows. Add images, video popups, headings, text, and call-to-action buttons. Each column is designed at the block level to give you full control of the content.
Example of text-only style:
### How to Video overview with layout examples and using the section and block settings: {% embed url="" %} # Timeline tree Add a beautiful timeline tree to showcase key dates and events Story makes it simple to build a visually stunning timeline tree. Tell your shoppers about your key product dates and events. Add timeline blocks to build the tree.
### Create a heading Combine the **Timeline tree** section with a **Rich Text** section to build a custom heading:
### Timeline events Customize the timeline blocks for each event. Options include: * Event heading * Optional thumbnail image. A timeline dot will be used if no image is selected. * Date or subheading * Event details, rich text information * Link options if needed
Timeline tree without images:
### Section settings Configure the section settings to customize the style and layout of the entire timeline:

Page width narrow for centered timeline

Changing the Width from **Page width narrow** to **Page width** will align the timeline to the left providing more room for details:

Page width for left alignment

### Mobile The timeline tree is scrollable on mobile devices and uses the entire width to display the tree:
# Timeline with banner Compact timeline strip to showcase key dates and events Add a compact horizontal timeline that includes an optional overlay effect with an image banner:
Each timeline episode is added as a timeline block:
### Mobile An optional mobile image can be used with the same overlay effect. The timeline episodes can be scrolled with touch swipes.
### Choose colors The section settings include color options for: * Background color for the banner and timeline * Color of the dates which are overlayed over the banner. Or when used without a banner. * Text color of the timeline episodes
### Standalone timeline The horizontal timeline strip can be used without the banner image and added anywhere on your page to create a different style:
In this example, we've used a different image banner section and added the timeline strip below. This removes the overlay effect and adds spacing. The strip can be combined with any of the sections in Story.
To use separately, uncheck "Enable image overlay" option in the section settings. # Video banner Story's powerful all-in-one hero style video banner section Fully customizable video banner section with mobile and desktop device options including support for multiple buttons, heading styles, and text options. Display a branded promotional MP4 video to your shoppers that loops:

Looping MP4 video in banner-style format

### Overlay blocks Add and arrange blocks which will be displayed over the looping MP4 video:
Customize with a range of optional blocks:
HeadingsMain style and Kicker subheading
TextBody text format
Video popupFor longer YouTube or Vimeo videos
ButtonCall-to-action buttons
IconProfessionally made icons to choose from
ImageSmaller sized logo-style
### Customization Use the section settings to configure the main section components:
Each block will also have its own custom options and settings to configure:
### Video Overview Let's review the settings for sections and blocks in the Video Banner section: {% embed url="" %} # Video player Watch inline full-sized videos with sound and playback controls The inline video player in Pipeline lets you quickly embed a video from YouTube, Vimeo, or even an MP4 video right into the page, ***without a popup***. Allow your customers to watch extended videos that showcase your brand, products, and services. The videos are conveniently located within the section. ### Play inline Videos are displayed and played inside the section. Including YouTube, Vimeo, and MP4 videos. Add a Rich text section to create a heading:

Combined with a Rich Text section to create a heading

### Customize Choose a video to play and use the options in the section settings to fine-tune the section:
You can adjust the video aspect ratio to match the style of video you're using:
### Add a placeholder image To brand the video player, you can add a placeholder image. When shoppers click on the play button, the video will still play inline ***without a popup***:
### Block content Blocks that you add to the Video Player section have individual settings. You can also control the following section settings to configure how all the blocks appear over the section placeholder and video: * Alinement over the section * Text color * Background color, for a solid background or transparency
# Theme settings # Global theme settings Configure Story's site-wide settings and options under the Theme Settings To customize the appearance of your online store, you can utilize the Theme settings. This feature allows you to modify the typography, colors, social media links, and checkout settings. Any changes you make in the Theme settings will be applied to your entire online store. ## How to When in the Theme Editor, click on the settings icon to view all the various global settings in Story:
Take advantage of the various global settings and options to personalize your online store to your liking. These settings will aid you in accessing options available in Sections and Blocks and other features in Story. # Typography Overview of typography options under the Theme settings With the Typography settings, you have the freedom to personalize the font styles, sizes, and letter casing for your entire store. ## Headings In this section, you can configure the font type and size for the headings used in the theme:
## Body text The theme primarily utilizes the body font as the main font type. Configure the font type and size here:
## Accents & Numbers Used primarily for product prices and sale prices:
## Navigation The navigation section contains options to configure the font type, size, and style for the menu items in the navigation. The optional toolbar when used, is positioned above the navigation. The toolbar shares the same font type and font size settings. * Choose a font type for the menu items in the navigation and also toolbar. * Adjust the font size for the menu items and toolbar text.
* The "Capitalize" checkbox can convert all menu items into uppercase when checked. * The toolbar text is not affected by this setting, only the menu items are changed. # Colors Overview of color options under the Theme settings You can customize all theme elements, including the navigation, toolbar, buttons, links, text, and more, using the color controls. By utilizing the color palettes, you have the option to select from a variety of colors and apply them as presets throughout the theme. ## Color changes In this video, you will learn about various color options available for the header area, such as the toolbar, and other options in the theme settings: {% embed url="" %} ## Add-to-cart button color The Primary accents color option is used to highlight the purchase path. In this short video, we'll look at how to change the main Call-to-action buttons based on which color pallet is being used: {% embed url="" %} # Layout Overview of layout options under the Theme settings The layout settings offer the ability to adjust multiple layout aspects including: * Page width, spacing within the sections, and how far sections extend on a page. * Column spacing, the padding between columns * Page spacing, padding at the start and end of sections * Container, wrapping the entire site inside a set-width container * Rounded corners for images, and buttons * Tile decoration, an element style in Story for certain sections * Animations This video reviews these layout elements within Story: {% embed url="" %} # Social Overview of the social media options under the Theme settings Story will automatically generate social media icons when you add URL addresses in the Social settings. Choose which social accounts to display on your header and footer by entering the full URL address in the fields. If a field is blank, no icon is displayed for that social network:
## Header social icons To display the social icons in the header, choose "**Logo above menu**" as the Header style under the Header settings:
The mobile-drawer menu style will also display the social icons at the bottom of the drawer:
## Footer social icons Social icons can be displayed at the bottom of the footer. Use the **subfooter** settings to toggle displaying social icons:
## Custom social icons If you have a custom social media network icon you'd like to display, Story provides you with three additional link and image options:
# Cart Overview of the cart options under the Theme settings In the cart settings, you can manage how your cart is displayed, functions, and behaves with the help of various controls. This video covers the Cart types, options that can be toggled, free shipping message and how it works, using the cart message for promotions, cart color styles, and more: {% embed url="" %} # Search Overview of search options under the Theme settings To customize the search feature for your store, you can switch between a predictive search version which includes search suggestions, and a non-predictive version. This video shows examples of both options: {% embed url="" %} ### How to customize predictive search results For custom search results, we recommend you use the official (free) Shopify app: {% embed url="" %} Once you have the app installed, use the Search settings to build Product boots and Synonyms:
Using the app is simple, here is a video demonstrating how to build a sample Product boost and how to create a Synonym group: ### Video demonstrating Product boosts and Synonyms {% embed url="" %} # Product grid Overview of the product grid options under the Theme settings Each item in a collection is represented by a product card. Story offers a variety of options to customize the appearance and behavior of these cards in the Product grid. This video covers the settings and toggle options for the Product grid: {% embed url="" %} # Currency format Overview of the currency options under the Theme settings With Story, you can exhibit the conversion rates of various currencies to your customers. After setting up the currencies on your Shopify Admin, you can utilize the Currency settings in the Theme settings to customize the display preferences. ### Product card (Product grid) You can toggle displaying the currency code for the Product card and other pages like the Product detail page with this setting:

Currency symbol shown next to price

* Viewing the price and currency code can be ideal for shoppers that are from different countries. ### Product detail page (Product template) The same setting is used for pages like the Product detail page or search results:

Example on the Product detail page

## Toolbar and Footer The country/region selector in the toolbar and subfooter contain their own setting to display the full country name or smaller currency code. ### Toolbar settings The toolbar and subfooter language selectors use different settings. These have their own individual settings which are separate from the above global options:

Toolbar Language selector

### Subfooter settings

Subfooter Country/Region selector

## Currency setup To configure your store to use multiple currencies, use the Shopify Admin -> Settings -> Markets to set up which currencies your store will support. Conversions are done by Shopify and not the theme.

Shopify Admin -> Settings

{% hint style="success" %} Note: Only stores using **Shopify Payments** can make **Full** use of this feature. {% endhint %} To learn more about currency markets, Shopify provides an article on their support site about their Markets feature: {% embed url="" %} # Favicon Overview of the favicon option under the Theme settings To personalize the appearance of your desktop browser tabs, you have the option to upload an icon image that will be displayed as an icon. ### Step 1 The first step is to create a square PNG image with your brand logo. The size can be 512x512, 192x192, or even as small as 32x32. A larger size like 512x512 will display better on phones and desktops. ### Step 2 Upload the PNG image to your Shopify Files library:
### Step 3 In the Theme Editor -> Theme settings -> Favicon, choose the image:
**Save** your settings to complete. # Advanced Overview of the advanced options under the Theme settings Within the advanced settings, it is possible to personalize which collections will remain hidden from the search function. ### Exclude collections Enter the collection handle of a collection you wish to exclude from searches. These can be special collections created for demonstration, wholesale, etc. The collection handle is found in the Search engine listing section of the Collection (bottom) set up in the Shopify admin:
You can exclude multiple collections, and separate each one by a comma and space:
### Exclude collections if they contain Wildcard exclusion. Use this for autogenerated collections, Siblings, etc. This setting also uses the collection handle. However, only a portion of the handle. For example, if your sibling collections all begin with `siblings--` followed by unique names, then you can add `siblings--` or even `sibling` here.
# Checkout Overview of the checkout options under the Theme settings When customizing the Checkout stage, Shopify only offers a few basic branding features. This is because Shopify places strict limitations on the level of customization that can be done in order to ensure a secure, private, reliable, and high-performance shopping experience for all customers on the platform. Story includes the settings available to you by Shopify to brand and customizes the look of the Checkout page. Customers using Shopify Plus can access advanced tools for modifying the checkout process, whereas other plans have certain limitations. ### Available customizations: * A custom banner image at the top of the Checkout page. * Brand logo, with position and size options:

Checkout banner and logo

* Main content area background image or * Background color:

Main content area

* Order summary background image or * Background color:

Order summary area

* Font selection for headings in the Checkout, * Font selection for the body text:

Checkout typeography

{% hint style="info" %} Font options are limited to Shopify's set font library for checkout. There is no option to upload your own checkout fonts {% endhint %} * Color setting for Accents (links, highlights, and checkmarks) * Buttons

Color settings

# Custom CSS Overview of Custom CSS usage in the Theme settings Easily customize your store's overall appearance by utilizing the Custom CSS entry form. By adding valid CSS entries, you can successfully modify the default styles of your chosen theme. Example of a CSS entry made in the Theme settings:
{% hint style="info" %} Please note, this is different from the section-level options. {% endhint %} If you need to target CSS for individual sections only, use the entry form that's included at the section level. ### Video - How to use Custom CSS {% embed url="" %} ### Learn more about Custom CSS Click the link below to view Shopify's official documentation about customer CSS: {% embed url="" %} # Header # Header styles Story includes several header styles and configuration options Flexible layout options allow you to easily configure your brand logo, menu items, and links.
![Example layouts with logo in the middle or left-side](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FUOFpIuQoFtioXUBhNp2E%2FStory-Headers-1.png?alt=media\&token=2469ab3a-21e2-487c-8f9a-9b74203d0e55) Adding an optional toolbar block on top provides additional options to hold language and currency drop-downs, also additional navigation: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FfwXFwXSTKm0H4ZXQsFSY%2FStory-Headers-B.png?alt=media\&token=ba5b6b26-28d0-4d8b-bca3-899e02ce27b9) Using a transparent header provides even more design options. Explore with the Header settings to find additional flexible layouts and icon options. {% hint style="success" %} Mobile devices will be served with the Mobile drawer menu version. {% endhint %} ## Logo above menu Places the brand logo centered and above the navigation. Allows space on the left for social icons. Cart and optional search and account icons are placed on the right-side: ![Example with transparent header setting on](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FvHynd5Mp0MFAFNY6KUnj%2Fheader-large-logo-above.jpg?alt=media\&token=5b698769-6a55-4cd7-b7bb-5f50c8a7db5e) > **Tip**: Ideal when using a larger top-level navigation menu ## Logo beside menu Moves the brand logo to the left side. This option provides a more compact header as all items are placed in one row. When the logo is placed above the menu, two rows are used and additional space is required. Logo beside menu is a good option when your top-level navigation is compact: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FB5jO8Al4YiJ0rWlxfbIA%2Fheaders-logo-left.jpg?alt=media\&token=93924b9a-d037-49b7-b1bd-5aef8248d470) Social icons are not displayed with this menu style. ## Mobile drawer menu Adapted from the popularity of mobile design, this option provides the most compact and minimal header style. This style is also consistent between both desktop and mobile devices. Animations are used to make the experience fluid: ![Minimal design with easy access to all menu options](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FAM7t4g3etPukuth7nag7%2FKapture%202022-01-01%20at%2013.41.34.gif?alt=media\&token=419503cb-4e90-47f9-bde3-92a331026510) Social icons are placed at the bottom of the menu drawer. ## How to setup Click on the Header section to view all settings and options. Header styles appear first in the setting options: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FwI4VyzyVQyYiRTgIZBkq%2FScreen%20Shot%202022-01-01%20at%2012.08.50%20PM.png?alt=media\&token=cf300102-2b9b-42ce-a6d9-5053ecba1e92) Experiment with icon toggles, transparent header, and sticky header options to find the right header design for your brand. # Toolbar Add an additional navigation bar above the header for language, currency and custom menu Add the toolbar block in the header settings to provide easy access to for language and currency drop-downs. You can also add a custom secondary menu into the toolbar: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FkWGg6sjHQNvvQ9Ywjipg%2FKapture%202021-12-16%20at%2009.13.22.gif?alt=media\&token=1e7cb919-cd5c-4d89-9a6e-db9bf5224e29) Customize the second menu in your Shopify Navigation editor: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FjDTRCYqQLaG2kI7MqDKT%2FScreen%20Shot%202021-12-16%20at%209.22.10%20AM.png?alt=media\&token=ddeb74ec-c1e4-4ee3-b5b1-9558d02d5102) ### Mobile The toolbar is displayed inside the mobile navigation drawer which keeps your main header clean and doesn't occupy screen space. The second menu is displayed below the main navigation menu: ![Toolbar features can be toggled for desktop and mobile](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FrcIrFa2Ia9KoAF1EjDu5%2FKapture%202021-12-16%20at%2009.27.55.gif?alt=media\&token=5fcbe3c2-e414-4b91-8af3-65b69838310a) Language and currency drop-downs are placed at the bottom of the mobile navigation drawer: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F8xDqVsn4lvjreARO5FB2%2FScreen%20Shot%202021-12-16%20at%209.32.17%20AM-a.jpg?alt=media\&token=aa02a809-48c8-4a38-a38c-08e80a3cd4ed) # Navigation images Add images into any style drop-down menu or build image based drop-downs Easily add promotional or featured images right into any drop-down or mega-menu nested navigation: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F5e9NjgxRuFWQ9pmiYOrT%2FScreen%20Shot%202021-12-16%20at%209.45.53%20AM.png?alt=media\&token=5953c5fc-c430-4be3-bfc6-39a565521d82) Add an image block in the header section and choose an item number. The item number is the order in your navigation. For example Item 1 is Shop in the example below: ![Shop is Item 1](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F8iHEQtZi5sCZQR6XwhAY%2FKapture%202021-12-16%20at%2010.07.21.gif?alt=media\&token=526a28e5-8280-4248-aafa-522688a5d4d9) Example mapping of above navigation menu and item numbers: | Item Number | Menu Name | | ----------- | --------- | | Item 1 | Shop | | Item 2 | Our Story | | Item 3 | Lookbook | | Item 4 | Updates | Configure the settings for each image block with call to action information: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FW9mPO68agdKPuNguuQnD%2FScreen%20Shot%202021-12-16%20at%209.46.03%20AM.png?alt=media\&token=8566dd65-390f-4d88-ae24-c7858cef187c) # Image menus Create drop-down menus completely built by images Beautiful image based menus are simple to create in Story. Easily convert any top-level menus that have no nested items into an image-based drop-down: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fh62zcF29LguEnCHpzRYc%2FKapture%202021-12-18%20at%2013.03.08.gif?alt=media\&token=eebf67b9-db7f-4e72-97d7-3ebd2e834560) ### How to Begin first by building your main header navigation with the Shopify Navigation editor. Next, choose a top-level menu that does not have any nested menu items. Example: ![Our Story does not contain any nested menu items like Shop](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FgS2dDp7PEUmWEyGTSJjk%2FScreen%20Shot%202021-12-18%20at%201.45.51%20PM.png?alt=media\&token=d9daf5ea-8f58-49f0-947a-61d087632b16) Next, in the Theme Editor under Heading, choose add block. Add as many image blocks as disired for your menu. We will add three image blocks: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fqw3AnD00SZQBFYt6rNNR%2FKapture%202021-12-18%20at%2013.49.21.gif?alt=media\&token=5cfdf3b3-593a-4efc-9205-d6d62d947074) Configure each image block by mapping the item number to the navigation menu position. In our example, "Our Story" is Item 2. ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FmNOndpkpEGftQInsPKsy%2FScreen%20Shot%202021-12-18%20at%201.55.36%20PM.png?alt=media\&token=d184337d-c994-4543-b266-24756c20960c) After choosing the Link position in main menu, choose an image and configure the size using the Image scaling ratio slider and fine tune the image with the Wide image toggle and Position settings: ![Image scaling ratio adjusts the size of the images from wide to tall](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FscuRqaoIgPhgmBAZFYTh%2FScreen%20Shot%202021-12-18%20at%202.04.59%20PM.png?alt=media\&token=9b008e1a-8f29-48ac-a720-f3deaf5e8fa6) Complete the call-to-action settings by adding a header, text (optional) and link. Configure the link color by choosing an option from the Text color drop-down. Complete all settings for each image block. ### Sorting and hiding Use drag-and-drop to rearrange the image blocks: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fc6t7C24RRpWD2x5MNQ4P%2FKapture%202021-12-18%20at%2014.20.12b.gif?alt=media\&token=08bba47d-061a-4284-a9b6-e1406af4ef81) The eye icon can be used to toggle image blocks. ### Mobile The mobile drawer will display each image block menu items in a stacked format: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FHMiibDfCLUebXy2kcJQb%2FKapture%202021-12-18%20at%2015.08.40.gif?alt=media\&token=812ed165-0706-4d48-b1e9-596eea1a1493) # Transparent header Blend the main header and navigation with your hero or slideshow section Activating the transparent header is Story is one from the Header section setting: ![Enable in the Header settings](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FX0jUUoiPA0L8epzknA6S%2FKapture%202021-12-18%20at%2019.01.16.gif?alt=media\&token=e62b7fc4-e64a-4aa9-a5ce-609ef5fb1f68) #### Alternate logo Use the Alternate logo option to provide an image that works best with your transparent header. #### Enable on pages Choose which type of pages to display the transparent header. Most stores will display on the home page. You have to ability to also display on collection pages and blog post pages (article pages). ### Sticky header When using the sticky header feature, your customers will always have access to the header area while scrolling down the page. When you combine the transparent header feature with a sticky header, you can use two different logo images. The alternate logo image is used in the transparent header and the main primary logo image is used in the sticky header while your customer is scrolling: ![Darker logo appears when scrolling down the page](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FeYpeIbTtf207AmDxrM2x%2FKapture%202021-12-18%20at%2019.11.03.gif?alt=media\&token=1cf87929-14a3-4838-bac5-a319bffa3f05) In the above example, the main logo is dark and appears in the sticky header: ![Primary logo - Used while scrolling down](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FbuwJizo0QbFPtJNWK5Bs%2FScreen%20Shot%202021-12-18%20at%207.13.45%20PM.png?alt=media\&token=a0c2c9e3-d654-49bc-a622-b6e587841ff7) The alternate logo which is white, appears in the transparent header: ![Alternate logo - Used in the transparent header](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FIV7HLkIseWR5dz4dRHTz%2FScreen%20Shot%202021-12-18%20at%207.13.37%20PM.png?alt=media\&token=29d4d909-616f-4e12-95da-dcaacde3ce9c) Additional tips when using a dark background as the header color: {% embed url="" %} Video: Dark headers with light hero images {% endembed %} # Mega-menu navigation Create a full width drop-down menu with multiple columns Shopify allows you to nest menus and menu items in the Online Store Navigation Editor. By nesting menu items, you can visually build multi-level menus like the following: **3-level nested navigation** (mega-menu style): ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MVxiZv2KVa5jrAqx3hY%2F-MW-iK7iFTJpCPG0YDBo%2Ffile-Wz3XdB97VB.jpg.png?alt=media\&token=4e122fcb-2e9e-4cbf-8f83-e9c42b73ce9d) **2-level nested navigation** (drop-down style): ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MVxiZv2KVa5jrAqx3hY%2F-MW-iVpw4ytkmMsNXcIm%2Ffile-kAmV9F6n3n.jpg.png?alt=media\&token=6b1f0c24-67c7-40b0-8b79-5ccca5c0394a) These examples are built using the Navigation Editor for the Online Store: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-rzdAHWZ7DAHwubKx%2F-MW-uDCEVt2Wsavd8Pbm%2FScreen%20Shot%202021-03-17%20at%208.50.50%20AM.png?alt=media\&token=0cbf523f-bd49-4592-82a3-1f105103a997) ## Setup example **3-level mega-menu version** To generate a mega-menu style navigation, you'll need three levels of menus. The top menu or parent menu will contain another level of menus, child menus. These children menus are your second level menu items which will be displayed as column headings. They will contain another level of menu-items, grand-children. These are displayed as menu items in each column. Here are the three layers outlined: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MVxiZv2KVa5jrAqx3hY%2F-MW-jBXDeUSyS5PO8iy1%2Ffile-Wz3XdB97VB.jpg-2.png?alt=media\&token=0eb18240-0d75-4637-a810-9bed5249dc0e) With the Online Store Navigation Editor, you can use drag and drop to nest these menus. Here's how a portion of the above navigation is setup: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MVxiZv2KVa5jrAqx3hY%2F-MW-jJZuyPl6aVPsVk9C%2Ffile-bi20xnxXSj.jpg.png?alt=media\&token=cab26b07-d3b6-4c42-a1f9-2c3cb1e53cea) The top level menu "Wines" has 4 second level menus - "Pinot Noir", "Travel Rosé", "Pinot Gris" and "Chardonnay". In the above example for "Chardonnay", we then nest another level of menus which are the vintages for that product. ![Wines (1), Chardonnay (2), Vintage items (3)](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MVxiZv2KVa5jrAqx3hY%2F-MW-mcFGm9yxkFpZE-tn%2FKapture%202021-03-17%20at%2008.24.53.gif?alt=media\&token=4c103594-5d5b-4601-81a3-efd6f54e4bbb) You can drag an entire menu below another menu to create a new layer. ![Clearance and Under $100 become items under Sale](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MVxiZv2KVa5jrAqx3hY%2F-MW-nJnuFQGwgL9sP8PF%2Ffile-CUAEEoyRdX.gif?alt=media\&token=f7315bdc-788d-4de8-b875-cd1c3c5ead12) {% hint style="success" %} To learn more about how nesting is done in the Online Store Navigation Editor, follow Shopify's support articles: \ \ {% endhint %} **Tips for creating your mega-menu:** For best results, your top-level menu drop-down should have 3-4 columns. If you need additional columns, consider a second top-level mega-menu or drop-down. > Example: Wine (top-level) -> 4 columns (Pinot Noir, Travel Rosé, Pinot Gris, Chardonnay). Each of these will have menu items within (like vintage years). Balance the number of items in each column to help reduce white-space in your columns. If one column as less items than the others, consider placing that column first or last. ![4 columns with a balanced number of items reduces white-space](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MVxiZv2KVa5jrAqx3hY%2F-MW-rd_deU-_YWBzgRuQ%2FKapture%202021-03-17%20at%2008.46.58.gif?alt=media\&token=d32d446f-877b-4692-bf5b-b94b7fa1f715) Columns can be reordered using drag-and-drop: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-rzdAHWZ7DAHwubKx%2F-MW-vAa-5CDLmSorUBlu%2FKapture%202021-03-17%20at%2009.01.01.gif?alt=media\&token=9e065d63-345e-420d-bc3e-557dc101731a) Example with Chardonnay moved to the left and Travel Rosé moved up as well to keep second postion in the mega-menu: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-rzdAHWZ7DAHwubKx%2F-MW-vEq-PROH-V9gEfaU%2FScreen%20Shot%202021-03-17%20at%209.02.18%20AM.png?alt=media\&token=5addec01-ef3e-4bfe-bd66-23fd79ac6949) # Drop-down navigation Create a single-column drop-down menu in your navigation Shopify allows you to nest menus and menu items in the Online Store Navigation Editor. A drop-down menu can be created easily by nesting menu items under one main top-level menu. ![Drop-downs are ideal for easy to find items](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-ypDGHTUCdvuMYY2-%2F-MW-zREqW0Nd0HMh50XI%2FKapture%202021-03-17%20at%2009.20.58.gif?alt=media\&token=26bb234b-72b3-42a4-bde1-2bbc33131011) ## Setup example To create a drop-down style menu in your navigation, you'll only need two levels; the main top-level menu and then menu-items below. ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW0-LIr6dbrRbc7bFFT%2Ffile-kAmV9F6n3n.jpg-2.png?alt=media\&token=5f56d94e-cff8-4e59-873c-0927d20359df) ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW0-QCtMNF4vugumaXu%2Ffile-vFx0MbzSpD.jpg.png?alt=media\&token=498b4c4c-8371-40ed-ad41-fcfc20a833bd) Begin using the Navigation editor for the Online Store in your Shopify Admin: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-rzdAHWZ7DAHwubKx%2F-MW-uDCEVt2Wsavd8Pbm%2FScreen%20Shot%202021-03-17%20at%208.50.50%20AM.png?alt=media\&token=0cbf523f-bd49-4592-82a3-1f105103a997) In this example, we will convert Vineyard into a drop-down menu and move Contact Us, Our Family, Our History and Our Vineyard as children of Vineyard: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW01z6bIKtlq66A_RTT%2FScreen%20Shot%202021-03-17%20at%209.29.21%20AM.png?alt=media\&token=3834f557-7851-46fc-984f-eae7fa65013e) > Tip: If you have another nested menu like "Wines", open or expand them to simplify the drag-and-drop process. Use drag-and-drop to move menu items under the parent, Vineyard: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW044ZsI5wAaiHKTdMd%2FKapture%202021-03-17%20at%2009.45.23.gif?alt=media\&token=5b233991-e916-4347-852e-99c3215e374d) If you have at least one nested menu item, creating additional menu items are simple, use the "Add menu to Vineyard" option as shown in the above example. Example of Vineyard with child menu items including the extra "Additional Menu" manually created at the end: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW-zgr5Z9xUy7txh95u%2F-MW04mJC85Wnjs0NmTei%2FScreen%20Shot%202021-03-17%20at%209.36.09%20AM.png?alt=media\&token=bd13b87d-0616-439a-bba0-c08c8fd635d4) {% hint style="success" %} To learn more about how nesting is done in the Online Store Navigation Editor, follow Shopify's support articles: \ \ {% endhint %} # Product pages # Static product tabs Display store-wide information instantly on all product pages using tabs or accordions When you want to display information quickly on all your product pages, static product tabs/accordions are ideal and simple to add. A good example might be a return or warranty policy, shipping information, or payment options. ### How to setup If needed, expand the **Product page** section to view all the blocks. Click on **Product description** to view Tab style options: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fb29uxoIP9Z4b6ElvZ7ci%2FKapture%202021-12-30%20at%2013.13.59.gif?alt=media\&token=0419900a-7a49-441a-9a90-586882f21fc2) Use the Tab style drop-down and choose Tabs or Accordions: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FhbtKJIYuHA7K2VsJZhFM%2FScreen%20Shot%202021-12-30%20at%201.15.30%20PM.png?alt=media\&token=40d0b3b9-6e76-4149-83ac-5f84a59d7327) {% hint style="info" %} Choose **None** to deactivate tabs or accordions {% endhint %} Static tabs or accordions are simply created by filling out the Tab heading and Tab text fields. You can add up to five additional tabs or accordions in addition to the main description tab which appears first: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FOMGr8mjiNPflq3XuRDaH%2FScreen%20Shot%202021-12-30%20at%201.16.05%20PM.png?alt=media\&token=cd469328-b27c-4f6d-8be9-b1e5f1cdc49f) {% hint style="info" %} Leave the Tab heading blank to hide a tab or to mark it as unused. {% endhint %} Save the changes and now all your products will display the new tab content you've entered. If you're using multiple product templates, each template can store different tab styles and content. For unique content on each product page: {% content-ref url="/pages/ZaZTFW7G02bZiRjmoDVT" %} [Unique product tabs](/products/product-pages/unique-product-tabs) {% endcontent-ref %} # Unique product tabs Display custom unique product tabs or accordions on individual product pages With unique product tabs, you can display custom content for each product in your store. The basic steps are: * Create a product metafield for the tab text. * Add unique content to individual products in the metafield area. * in the Product description connect the tab text to the metafield as the dynamic source. ### How to setup Begin by creating a basic product metafield in your Shopify Settings: Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom): ![Create new Product metafield](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fc2ON7jxNhNfxI3p4QOdF%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM%20\(1\).png?alt=media\&token=ded139b8-e606-4af6-9467-7df5631a4956) ![Choose Add definition](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJw9dCj6QvkVADh2kjQpi%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f) * Provide a **Name** for your metafield. In our example, we'll use ***Water rating***, this will be our tab content. Each watch will have a unique water rating. You can define metafield that relates to your products. * The default Namespace and key can be used. No modifications are needed. * Choose **Text**, **Multi-line text** for the Content type. * No validation is required. ![Multi-line text is recommended for tab content](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJEpvPPRN3NJqcMfpHAYB%2FScreen%20Shot%202021-12-30%20at%203.15.06%20PM.png?alt=media\&token=006be646-ba2b-4450-9e38-fbb3788484b9) **Save** the metafield definition. ### Product setup {% hint style="success" %} Now that we've created a product text metafield, we can **easily** add custom tab content to any of our products that require unique information. {% endhint %} The next step is performed in the Shopify Admin -> Products. Choose a product and scroll to the bottom where you'll find all the metafields. There will be a new Water rating option where we can add unique details to: ![Metafields are located at the bottom on the product setup pages](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FHDslFFNB8eN8qtjr6dL8%2FKapture%202021-12-30%20at%2015.36.41.gif?alt=media\&token=f97319f9-0add-4491-9f98-9e0eefbd5ac1) {% hint style="info" %} Add unique content to products that require that information. For products that don't have any information entered, the tab won't appear when viewing online. {% endhint %} ### Theme editor setup The final step is to configure the Product page settings in Story, using the Theme editor. Click on Product description under Product page: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FPuB4uPduM9y0iKYQBQcJ%2FScreen%20Shot%202021-12-30%20at%203.49.56%20PM.png?alt=media\&token=770b68e7-8ac4-4437-b921-57411f6f8db1) Next, under the **Tab heading**, add a title for the tab. We will use "*Waterproof rating*". In the **Tab text** area, click on the **Insert dynamic source** icon: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F2U0VE3lGNcqamC46Bn2u%2FScreen%20Shot%202021-12-30%20at%203.52.10%20PM.png?alt=media\&token=a7a5f943-0569-4b0f-8d30-746940229c93) Choose the metafield created, we'll use Water rating: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F4p546UZi2rO28mwfoidZ%2FKapture%202021-12-30%20at%2015.54.04.gif?alt=media\&token=9dda8dcf-e40c-4b13-b6e9-09388ab0f3c4) Use the **Insert** button at the bottom to connect and **Save** your changes. ### Final result {% hint style="success" %} The tab or accordion will only appear on products that have metafield content. Other products won't show a tab. Also, each product that has content populated will be unique. {% endhint %} ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FgnVlARIbITiR4MGdQusq%2FScreen%20Shot%202021-12-30%20at%204.08.05%20PM.png?alt=media\&token=c29c3494-337b-4fee-86f2-7c00336dcd4c) Experiment with multiple tabs by creating metafields for each one. If you need more than five tabs/accordions, you can create metafields for the Tab title as well. That will allow you to assign a tab title in the product setup. # Product tabs Organize your product description with easy to use tabs Story includes product tabs and accordions to help organize your product description content. You can easily display tabbed or accordion content on all product pages or add unique content for each individual product using Shopify's Dynamic source metafields. ![Example of Tabs](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F2LP3GbuDmVuBHlr8isyb%2FScreen%20Shot%202021-12-30%20at%2012.51.00%20PM.png?alt=media\&token=d4c0327f-c4d5-48a7-a62f-87c414288522) ![Example of Accordions](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FUZOXMM4ZSCtMKnaj3gs7%2FScreen%20Shot%202021-12-30%20at%2012.51.16%20PM.png?alt=media\&token=3786d89e-a336-4dee-bc66-910fcecb63d0) {% hint style="success" %} When tabs or accordions are used, the main product description is automatically added to the first tab or accordion and labeled as Description {% endhint %} ## How to setup Learn how to setup static product tabs: {% content-ref url="/pages/fjwiD9zEWt6AyOwtvyNl" %} [Static product tabs](/products/product-pages/static-product-tabs) {% endcontent-ref %} Learn how to set up unique content product tabs: {% content-ref url="/pages/ZaZTFW7G02bZiRjmoDVT" %} [Unique product tabs](/products/product-pages/unique-product-tabs) {% endcontent-ref %} # Color swatches Add visually appealing color and color swatches Story can display color variants as swatches on product pages and collections: ![Color swatches can be used when product variants have colors ](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F2TxCHOdOIOiyN4pM9Kz6%2FKapture%202022-01-13%20at%2011.01.27.gif?alt=media\&token=bc7b26d1-18d3-40eb-961a-a3c466863805) Collection filtering helps customers find items by color: ![Product grid listing on Collection page](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F8sEcvqGVeOIfMg90oZq1%2FKapture%202022-01-13%20at%2011.06.34.gif?alt=media\&token=6c89b9bb-4f71-494a-9942-f199ec4ee2d5) {% hint style="success" %} Multiple swatches can be selected for greater control. For example, clicking on both red and blue in the filters would show all products that match the colors red and blue. {% endhint %} ## How to use Manage color swatch settings under the Theme settings -> Product grid. By default, swatches are enabled: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FhhhyFPtebgAq7VFxiueQ%2FScreen%20Shot%202022-01-13%20at%2011.15.08%20AM.png?alt=media\&token=843227ee-886f-46fc-99bf-482e44c7979d) {% hint style="success" %} When enabled, Story will detect if your variant label is **`Color`** or **`Colour`** and automatically display swatches {% endhint %} When unchecked or disabled, the swatches turn into variant option boxes: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FQvi4XVHmiYP05bljJKX9%2FScreen%20Shot%202022-01-13%20at%2011.13.46%20AM.png?alt=media\&token=d8dcad30-9d40-4514-9650-9a2299e3d3c0) ### Customize the trigger words To customize the trigger words which activate swatches, use the Language Editor (Edit languages) and add or modify the values: ![Open the Languge Editor (Edit languages)](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FR70Rz6uWnZQ4EpwN3PSr%2FScreen%20Shot%202022-01-13%20at%2011.29.45%20AM.png?alt=media\&token=d4b9df87-9bcb-4832-acfd-3697969d4b40) ![Change the trigger words under General -> Swatches](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FtUZOGixXWiFSQTNcLDED%2FScreen%20Shot%202022-01-13%20at%2011.27.28%20AM.png?alt=media\&token=2886ab5f-2319-4cf6-8e9f-282593bd326f) Trigger words are the variant label names in your product setup, these are matched with the Language editor: ![Tip: Products that have two color variants like "Top" and "Bottom" can be added to this list.](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FLgLKhe05BKOhmONFgSEm%2Fcolor-match.jpg?alt=media\&token=83454627-0e06-40ca-b337-9276ab5698f9) ### Swatch color names Story can easily detect simple color names and convert them to swatches. There are a total of 140 color names Pipeline can detect, all other more complex names will be represented by a default grey color swatch. You can upload your own custom color names and graphics as described below. Here is a full list of color names that will automatically be converted to swatches: {% embed url="" %} Click to view list of supported default color names {% endembed %} Swatches are generated using the variant color names. If you have simple color names or color names that are listed in the above list, Story will display that color on the product page as a swatch: ![Swatches are generated using these variant color names](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FyGVfBGpfJDFXt5I6pvKm%2FScreen%20Shot%202022-01-13%20at%2011.59.51%20AM.png?alt=media\&token=a4f24376-c0fa-4117-aef4-052915b15fe2) If your variant color name is not listed in the above list, a default grey color swatch will be used: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FOB7Rhw4s7eJ8BJQ8JbRP%2Fcolor-not-detected.jpg?alt=media\&token=725f61e9-3d49-4a96-b6a2-b35d7d68eb78) ## Customizing If your products have color names other than the listed colors in the [Color names list](https://groupthought.com/pages/swatch-color-names), you can add your own color names and values or upload images to the Assets folder: ### Add custom color names and values to swatches.json Use the `swatches.json` file located in the **Assets** folder to add your own custom names and HEX color values: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FeU6D0HthWKVAtYq4s8Wa%2FScreen%20Shot%202022-01-13%20at%2012.23.57%20PM.png?alt=media\&token=6950b3fb-4a15-4f18-9fa0-21f8fb9b341c) For example, to change the color displayed for Ink, we can change the HEX value of `#696969`: ``` { "ink": "#696969" }, ``` Change to a darker black: ``` { "ink": "#323232" }, ``` To find additional HEX color codes, visit: {% embed url="" %} ### Adding custom swatch images With Story, you can add your custom images to represent swatch colors. We have a full tutorial on how to add custom images and display them as swatches on our Pipeline theme support page:\ The process is exactly the same when using with Story theme. Learn how to add custom images: {% embed url="" %} There is a 3-minuite video with full walk-through on how to add custom images {% endembed %} # Inventory countdown Display an animated inventory status indicator in the product form Build a sense of urgency when inventory is low or simply inform customers supply is available. Story's pulsing inventory countdown is an elegant way to help your customer make decisions on buying. ![Low inventory indicator](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fn2UqeaLxhX6BBWGX1NNs%2FScreen%20Shot%202021-12-30%20at%206.46.15%20PM.png?alt=media\&token=40bfc58d-dcbd-4564-85c5-3d3de3fdd38d) ![Item is in stock (click image to zoom)](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FsTtOEbbWvAXX8XipFTDL%2FScreen%20Shot%202021-12-30%20at%206.46.07%20PM.png?alt=media\&token=923106f4-fde0-423a-8b4a-d948f1468df8) ![Item is sold out (click image to zoom)](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FkgmERJkCJ8juuDBhW1Tq%2FScreen%20Shot%202021-12-30%20at%206.45.25%20PM.png?alt=media\&token=0f526341-6794-4d6c-9033-41449c1feef4) ### How to setup Toggle the inventory countdown message in the **Form** block of the **Product page** settings: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FfqBtd1v3LXujjuic5CN7%2FKapture%202021-12-30%20at%2018.52.40.gif?alt=media\&token=3b0c54aa-6cc1-436e-9de4-7142ff6448b4) If your store is using multiple product templates, update each template's settings. # Pre-order products Story has built-in support to help with products that are sold as pre-orders Story can modify the add-to-cart button to let your customers know they are purchasing a pre-order item: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlftnMmoStA3NZjtWYU4a%2FScreen%20Shot%202021-12-30%20at%208.35.19%20PM.png?alt=media\&token=4e2ae08e-711a-403b-9b3c-cfa82662e376) ## Quick setup for experienced users The most important part of setting up this metafield is to use the namespace and key of: ```json theme.preorder ``` See the example here: ![Namespace and key should changed to theme.preorder](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FpYJG2vSHGtAKYa2bhWG7%2FScreen%20Shot%202021-12-30%20at%207.21.25%20PM.png?alt=media\&token=b5033e3b-cf33-4499-97dd-cb71fb3ba444) The **Content type** should be set to **True or false**. ## Full detailed step-by-step setup The first step is to define a custom metafield that Story theme supports. Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom): ![Under Metafields, click on Products ](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlJGIdluKKSVnxybn3ks1%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM.png?alt=media\&token=4ddd5df6-ba20-4cf0-98de-a29121d523c7) ![Use the Add definition button to begin](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJw9dCj6QvkVADh2kjQpi%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f) Next, * Click the Add definition button * type-in "preorder" for the Name * Change the Namespace and key from `my_fields` to `theme`. The namespace and key should now be: **theme.preorder** ![Change from my\_fields to theme](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FDQQNxvtwPeoHO4eyM56L%2FKapture%202021-12-30%20at%2019.32.40.gif?alt=media\&token=be1fd34e-819b-44cc-96ec-c025cb71e57d) Change to: {% hint style="success" %} theme.preorder {% endhint %} Example: ![Don't skip this step](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FpYJG2vSHGtAKYa2bhWG7%2FScreen%20Shot%202021-12-30%20at%207.21.25%20PM.png?alt=media\&token=b5033e3b-cf33-4499-97dd-cb71fb3ba444) Add a description and choose **Select content type**. Choose **True or False**: ![Choose True or False for the Content type](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FSZFjhnSWEfgqR59KFQYv%2FKapture%202021-12-30%20at%2019.35.52.gif?alt=media\&token=c54ea1a4-0b30-4320-8d9a-2da53ac349af) **Save** your new product metafield. Now we can use this custom theme.preorder metafield with any of our products. ### Product setup {% hint style="success" %} Now that our custom metafield has been defined, we can **easily** configure any of our products to be set as a pre-order product. {% endhint %} The next and final step is to edit any of your products in the Shopify Admin -> Products and toggle the new preorder true or false metafield. Scroll to the bottom of the product setup page: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FUjZv7tspnnVoDAx4gW8p%2FKapture%202021-12-30%20at%2020.04.54.gif?alt=media\&token=fa49fd16-4bbb-4ae2-b61a-9f568aba53b0) Products that are set to True will display a pre-order button on the product page: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlftnMmoStA3NZjtWYU4a%2FScreen%20Shot%202021-12-30%20at%208.35.19%20PM.png?alt=media\&token=4e2ae08e-711a-403b-9b3c-cfa82662e376) ### Manually capture payments Shopify recommends merchants manually capture payments for pre-orders. Here is an article from Shopify to help:\ Please contact Shopify Support regarding payment capture options and settings. # Static size chart Display a pop-up size chart for all your products Story can add a size chart link in the product form which helps customers easily find the right size or fit. When using a static size chart, the link will appear on all of your product pages using the same product template. ![Chosen page becomes title of size chart link in the product form](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FVlQ6BLqfbAFZyuGrYKgL%2FScreen%20Shot%202021-12-31%20at%207.04.48%20AM.png?alt=media\&token=ab49d6d9-bb4c-4877-add6-e67960f8bdf1) ### How to setup If needed, expand the **Product page** section to view all the blocks. Click on **Form** to view Size Chart options: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F9es3mfTWv0fci4YPcPPc%2FKapture%202021-12-31%20at%2007.11.26.gif?alt=media\&token=d8ae5cb8-b1fa-4597-9516-694605fd399c) The size chart popup feature in Story uses a page that's been created in the Shopify Pages editor. If you have already created a Shopify Page with your size chart information, simply choose that file by using the Select page button. {% hint style="success" %} The title of your page becomes the link name in the product form. Customize the title in the Shopify Pages editor to reflect a change in the link name. {% endhint %} **Save** your changes after choosing a file. All products in your store using the same product template will now display a link to the pop-up size chart. Note: The Form block is renamed to the title of the page selected when using static size charts. # Unique size charts Display a custom unique pop-up size chart for individual products Story can display a custom pop-up size chart for individual products and also not display a link if a size chart is not required. This is the most flexible option when using multiple charts. ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FQs1kComHFXNQyrZU1kOP%2FKapture%202021-12-31%20at%2008.07.15B.gif?alt=media\&token=09b0df17-242e-43d5-90d8-3c0834d4840b) ![Size chart link for Women (click image to zoom)](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FrwcOo8o2vm8vWpzyLQ0n%2FScreen%20Shot%202021-12-31%20at%207.57.17%20AM.png?alt=media\&token=5f054382-a0f2-478c-9e14-b34026bf8c61) ![Size chart link for Men (click image to zoom)](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FvxtwBv18tUrjJighuDA0%2FScreen%20Shot%202021-12-31%20at%207.57.08%20AM.png?alt=media\&token=9f3ade5a-f859-4074-a47f-4289fe67a392) {% hint style="success" %} Each product can have a different size chart associated with the Shopify Product admin {% endhint %} ### How to setup Begin by creating a basic product metafield in your Shopify Settings: Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom): ![Create new Product metafield](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fc2ON7jxNhNfxI3p4QOdF%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM%20\(1\).png?alt=media\&token=ded139b8-e606-4af6-9467-7df5631a4956) ![Choose Add definition](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJw9dCj6QvkVADh2kjQpi%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f) * Provide a **Name** for your metafield. In our example, we'll use **Size Chart**. * The default Namespace and key can be used. No modifications are needed. * Choose **Reference**, **Page** for the Content type. ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FAAgf8h7WUak6Mw4qmgmD%2FScreen%20Shot%202021-12-31%20at%208.17.42%20AM.png?alt=media\&token=f2bbaaf8-7a48-43cf-8503-7e0bf9af46d3) **Save** the metafield definition. ### Product setup {% hint style="success" %} Now that we've created a product reference metafield, we can **easily** choose custom size charts for any of our products that require a size chart displayed. {% endhint %} The next step is performed in the Shopify Admin -> Products. Choose a product and scroll to the bottom where you'll find all the metafields. There will be a new Size Chart option where we can choose a unique Page created in the Shopify Pages editor: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FUsvlLnrvBNuiwJkXbT4Y%2FKapture%202021-12-31%20at%2008.22.42.gif?alt=media\&token=cf96ad22-da30-4bbe-a02c-176fb75ffaaa) {% hint style="success" %} Choose a unique size chart page for each product. For example, all Women's watches can use one file and all Men's watches can use another. For products that don't require a size chart, leave blank and no link will appear. {% endhint %} ### Theme editor setup The final step is to configure the Product page settings in Story, using the Theme editor. Click on **Form** under Product page: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FGNkGhZpK42OMmQU4lysd%2FScreen%20Shot%202021-12-31%20at%208.30.43%20AM.png?alt=media\&token=da1f1cb7-53ba-4c06-8d04-48c008250257) > **Tip**: If you've already assigned a static size chart page for all products, Form won't appear, the title of the size chart file will be displayed. Simply click on that instead. Next,\ Click on the **Connect dynamic source** icon: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FndY4DLzniSjSzgThLpLA%2FScreen%20Shot%202021-12-31%20at%208.33.15%20AM.png?alt=media\&token=b6e7c5a0-19a3-4b02-8b03-dc1cfcdd4da9) Choose the metafield you created earlier, Size Chart: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FYVMZ9Kaq3ct3qW65M04Y%2FKapture%202021-12-31%20at%2008.36.21C.gif?alt=media\&token=e3bf68ed-4b3f-4df7-9ac8-2077b94c8b37) Press the **Connect** button at the bottom to complete and then **Save** your changes. {% hint style="success" %} Products that have a Size Chart file associated with a Size Chart metafield in the product setup will now have a unique and custom link based on the title of the Page. You can update the Page title to modify the link label. {% endhint %} # Creating pages Links to learn about Shopify Pages Size chart pages are created using the Shopify Pages editor: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fv6s0cLeZ5ym4os5OH9Bg%2FScreen%20Shot%202021-12-31%20at%209.24.54%20AM.png?alt=media\&token=b3d9b318-6a02-432e-bb86-fec417f216fe) Shopify provides a rich text editor to help you build content pages throughout your site. Story can use these pages that you've built to display the content on your store. ![Example size chart page created in the Shopify Pages editor](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FEJAXuKbbOHgOLq30HvOX%2FScreen%20Shot%202021-12-31%20at%209.25.20%20AM.png?alt=media\&token=78c214a0-d486-4cae-b07d-c6cd7e785fe7) If you are new to Shopify and building pages, use this link from Shopify Support to learn more: {% embed url="" %} You can also contact Shopify Support for help on platform basics:\ [https://help.shopify.com](https://help.shopify.com/) # Size Charts Story can display custom size charts for each of your products or one chart for all products Story includes a feature to display a pop-up size chart to help customers find the right size or fit. The styled link appears in the Product form above the add to cart button, making it easy for them to find and use before buying. The pop-up window can be dismissed easily by clicking outside or the close button. ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F6LdCdN889sfCHbahV7Fc%2Fsize-pop-wide.gif?alt=media\&token=007a5352-a1d4-4a32-b262-7faffdaabda9) To help you get started, there are two options when using the Size Chart feature in Story. The easiest is a static size chart, you simply choose one file as the pop-up page and that will instantly appear as a link on all your products using the same product template. This method is ideal if you want to quickly add a link and have products that can share one size chart page with various information. The second option is to use custom or unique size chart pages for individual products. This method allows customers to see a different link on each product page. Ideal for splitting up Women's and Men's sizes or products are that different and require completely different sizing details. How to set up a static size chart: {% content-ref url="/pages/jg06axHEQ4xkCBjDlM80" %} [Static size chart](/products/product-pages/static-size-chart) {% endcontent-ref %} How to set up unique or custom size charts for individual products: {% content-ref url="/pages/ezakgdnPZ7zTDGR0gCf4" %} [Unique size charts](/products/product-pages/unique-size-charts) {% endcontent-ref %} # Product image sizes Size recommendations for your product images Story will work with images of any size and dimension, but it is recommended that you use product images with consistent dimensions, preferably squares. We recommend square dimensions like 2048 x 2048 pixels or 2236 x 2236 pixels. Shopify has increased the size recommendation to meet the needs for 4k displays. To support higher resolution monitors try to use images that are 4472 x 4472 pixels. High resolution photos will look more polished and professional to your customers. For square product images, a size of 2048 x 2048 pixels or 2236 x 2236 pixels usually looks best. {% hint style="success" %} 2048 x 2048 pixels or 2236 x 2236 pixels 4472 x 4472 pixels (for higher resolution screens) {% endhint %} When your product images are consistent sizes, they will help with overall merchandizing of your store including collection page, product recommendations and viewing through individual product pages. > When downscaling from 4472 x 4472 to 50%, the correct size is 2236 x 2236 **Image format** Save your images in .JPG format without any compression. Use 100% quality with sRGB. When you use .PNG images, Shopify won't be able to handle compression to serve the right version for the shopper's device. The result is a very slow loading site especially on collection and product pages. The result will also have a negative experience for mobile customers. Using large .JPG images will allow Shopify to handle the compression and display high quality images for your customers. {% hint style="success" %} .jpg or .JPG 100% quality with sRGB {% endhint %} > sRGB - Prevent color stripping ![Photoshop Export As settings](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW1uBKe-LdF1ptt2ME_%2F-MW1y9zlBANcDNPKBtSD%2FScreen%20Shot%202021-03-17%20at%206.29.02%20PM.png?alt=media\&token=241b7303-ae69-4d4b-9e14-ef1100cc5c0c) ![Photoshop export for lower resolution - Canvas size matches Image size](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MI6cK8SrstUdE_nxQrW%2F-MW1uBKe-LdF1ptt2ME_%2F-MW1z09A1pGJS-Ro5Vqe%2FScreen%20Shot%202021-03-17%20at%206.30.52%20PM.png?alt=media\&token=68b8f2f2-7281-419c-b60d-5873f3eb9c73) > For a smooth look, use non-white background-isolated images, this will allow your product images to bleed into the background. #### Product videos Shopify now supports .MP4 and .MOV video file formats for use on product pages. Embedded streaming videos are also support from YouTube and Vimeo. Here are some guidelines from Shopify regarding video formats: * Video length: Up to 60 seconds * Video size: Up to 1 GB * Video resolution: Up to 4K - 4096 x 2160 pixels * Video file type: .mp4 or .mov For embedded videos, the only requirements are: * YouTube or Vimeo * Videos must be set to public or unlisted (not private). #### 3D Models Shopify supports 3D models in .GLB format which are virtual representations of an object in three dimensions. 3D models can provide your customers with a better sense of the size, scale, and the details of your products. Learn more about product formats supported on the Shopify platform: {% embed url="" %} # Collection pages # Product badges Promote products with your own custom badges or pre-built savings, and sold-out badges that are displayed on products in your collection listings or any product grid-style listing. Story theme includes a set of pre-built badges to help you promote products and inform your customers when a product is out-of-stock. Story theme also provides you the capability to create your own custom product pages that you can assign to any individual product. Explore the different types of product badges in Story and how to create your own custom versions: ### Sale badge Displays a Sale badge when items in a collection or product grid are currently discounted: ![Sale badge](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FgeCx5F8vvKqSZcr4VZ6H%2FScreen%20Shot%202021-12-29%20at%2012.04.29%20PM.png?alt=media\&token=7961aa57-6a59-4fe0-b06d-63119bd8ac47) Learn more: {% content-ref url="/pages/pzmXYZlUzjGMzTSSpq1y" %} [Sale badge](/collections/collection-pages/sale-badge) {% endcontent-ref %} ### Savings badge with discounted value or percent saved Displays how much the customer is saving by dollar amount or savings by percent discounted. Amount saved version: ![Savings amount badge](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlWtmZEfzHSamCQYylf8O%2FScreen%20Shot%202021-12-29%20at%2012.03.58%20PM.png?alt=media\&token=26edc26a-65a7-477a-a4c4-e4b4c9236723) Discount percent version: ![Savings % badge](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FNoBwTPTCgnw0K0XZ9muJ%2FScreen%20Shot%202021-12-29%20at%2012.04.16%20PM.png?alt=media\&token=3e30b97b-5f1d-4812-866a-597bab8d19c1) Learn more: {% content-ref url="/pages/NIDDtZdSy1IBw3S3afU1" %} [Savings badge](/collections/collection-pages/savings-badge) {% endcontent-ref %} ### Sold-out badge Displays a sold-out badge for products that have zero value in inventory: ![Sold out badge](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FptVXxUywYI3kSRpYofla%2FScreen%20Shot%202021-12-29%20at%2012.14.10%20PM.png?alt=media\&token=209d1618-bf7e-4c9b-85d0-3bc2cc5cb75d) Learn more: {% content-ref url="/pages/RQlnXBRLKMNXsrbb0dbp" %} [Sold-out badge](/collections/collection-pages/sold-out-badge) {% endcontent-ref %} ### Custom badges Displays custom text, build your own badges, and assign to different products: ![Custom made "Best Seller" badge](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FTpoxkTlOgsjlTNl7kNVH%2FScreen%20Shot%202021-11-19%20at%206.54.17%20PM%20\(1\).png?alt=media\&token=8393ec9e-9cca-434e-986c-5e73e61fef8a) Learn more: {% content-ref url="/pages/Pwn9vDHf7aIMietbX9iY" %} [Custom badges](/collections/collection-pages/custom-badges) {% endcontent-ref %} ### Badge settings and options Find settings for all badges: {% content-ref url="/pages/Pcak3JXwFudOlRFNVNV8" %} [Badge settings](/collections/collection-pages/badge-settings) {% endcontent-ref %} # Sale badge Pre-built badge for displaying products that are on-sale on collection pages Story theme can display a styled sale badge for all items that are on sale in a collection or any product grid listing: ![Sale badge](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FgeCx5F8vvKqSZcr4VZ6H%2FScreen%20Shot%202021-12-29%20at%2012.04.29%20PM.png?alt=media\&token=7961aa57-6a59-4fe0-b06d-63119bd8ac47) ### Customize badge label To change or modify the Sale badge text, use the Language Editor (Edit language) for the theme: ![Language editor is found under "Edit languages"](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fub4dKKeACCPuqBEcIufF%2FScreen%20Shot%202021-12-29%20at%202.33.00%20PM.png?alt=media\&token=88e575cb-bcde-4c8d-a2b2-9ab1145774bb) > Tip: Search for "sale" in the Language editor and modify under Products -> Sale # Savings badge Display a dynamic savings value or percent styled badge on collection pages Story theme includes a discount or savings value badge that can display how much the customer is saving by the amount or by percentage. Example of Savings badge with percent-off value automatically calculated: ![Percent off is calculated from price and compare at price](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FNoBwTPTCgnw0K0XZ9muJ%2FScreen%20Shot%202021-12-29%20at%2012.04.16%20PM.png?alt=media\&token=3e30b97b-5f1d-4812-866a-597bab8d19c1) Optionally, you can display the amount saved on the sale item: ![Amount off is calculated from price and compare at price](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlWtmZEfzHSamCQYylf8O%2FScreen%20Shot%202021-12-29%20at%2012.03.58%20PM.png?alt=media\&token=26edc26a-65a7-477a-a4c4-e4b4c9236723) # Sold-out badge Display a sold-out badge for items that are out of stock Story theme includes a pre-built badge that will display a styled sold-out message for items that are out of stock: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FptVXxUywYI3kSRpYofla%2FScreen%20Shot%202021-12-29%20at%2012.14.10%20PM.png?alt=media\&token=209d1618-bf7e-4c9b-85d0-3bc2cc5cb75d) ### Customize badge label To change or modify the Sale badge text, use the Language Editor (Edit language) for the theme: ![Language editor is found under "Edit languages"](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F4haKu9jsXhWZaA0MdSox%2FScreen%20Shot%202021-12-29%20at%2012.23.56%20PM.png?alt=media\&token=9d4a26c4-d9c3-4858-9863-d7a3fe512d9d) > Tip: Search for "sold" in the Language editor and modify under Products # Custom badges Promote products with your own custom badges that you create and assign to individual products Story theme allows you to create your own unique product badges to associate with any of your products. When using Shopify's dynamic source feature (also known as metafields), you can create individual product badges for any of your products. ![Example of custom badge call "Best Seller" assinged to a product](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FBJ9j2Mfc2NuFQcNEVU1O%2FScreen%20Shot%202021-11-19%20at%206.54.17%20PM.png?alt=media\&token=6c9d1562-0eec-4cf7-9c79-a423eef3f8cc) Once a badge metafield is defined (see instructions below), any of your products can display a custom badge. There are no limits to the number of badges you can create and use. All your products will be able to display a custom badge or use the built-in badges for sales and out-of-stock inventory. ## How to setup ### Quick setup for experienced users The most important part of setting up this metafield is to use the namespace and key of: ```json theme.badge ``` See the example here: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fz8HyV7BPMQaF9HMJ4Jvr%2FScreen%20Shot%202021-11-19%20at%206.50.05%20PM.png?alt=media\&token=f355b4eb-11be-42ff-bf46-bab0e2a25bd7) ### Full detailed step-by-step setup The first step is to define a custom metafield that Story theme supports. Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom): ![Under Metafields, click on Products ](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlJGIdluKKSVnxybn3ks1%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM.png?alt=media\&token=4ddd5df6-ba20-4cf0-98de-a29121d523c7) ![Use the Add definition button to begin](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJw9dCj6QvkVADh2kjQpi%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f) Choose the **Add definition** button to begin. Choose a name, we'll use badge. Next, we will use a custom namespace. This is **required** for custom badges. Change the default namespace from `my_fields` to **`theme`** ![Change from my\_fields to theme](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlnPtH7MS7PFQ6Uedqm7c%2FKapture%202021-12-30%20at%2011.10.05.gif?alt=media\&token=661a4197-344b-4b79-a641-18ad7f897cb6) Change to: {% hint style="success" %} theme.badge {% endhint %} Example: ![Don't skip this step](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fz8HyV7BPMQaF9HMJ4Jvr%2FScreen%20Shot%202021-11-19%20at%206.50.05%20PM.png?alt=media\&token=f355b4eb-11be-42ff-bf46-bab0e2a25bd7) Add a description and choose **Select content type**. Choose **Text** and we will use **Single line text** which is the default choice: ![Choose Text for the Content type](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F8lU5LNW5zu4WJvOkJxJM%2FKapture%202021-12-30%20at%2011.22.31.gif?alt=media\&token=c7652139-24c1-465d-afbb-6e3351bc58a9) **Save** your new product metafield. Now we can use this custom theme.badge metafield with any of our products. ### Product setup {% hint style="success" %} Now that our custom metafield has been defined, we can **easily** add a custom badge to any of our products. {% endhint %} The next and final step is to edit any of your products in the Shopify Admin -> Products and update the new badge metafield. Scroll to the bottom of the product setup page: ![Product metafields are located at the bottom of the page](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FW06yrMZA2gzeJJPSHn5C%2FKapture%202021-12-30%20at%2020.47.13.gif?alt=media\&token=e00f220b-ddc7-4bee-815a-1d2f8b248c8d) Update the Product badge metafield with the custom badge name: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FZGKbaHH6UmhNHxMWfckl%2FScreen%20Shot%202021-11-19%20at%207.38.52%20PM.png?alt=media\&token=012b52a7-9071-4edb-880c-b51e751b2ed7) Save your product and preview on any product grid view like Collection pages: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FTpoxkTlOgsjlTNl7kNVH%2FScreen%20Shot%202021-11-19%20at%206.54.17%20PM%20\(1\).png?alt=media\&token=8393ec9e-9cca-434e-986c-5e73e61fef8a) # Badge settings Badge settings and options Under Theme settings -> PRODUCT GRID, you can configure all options for Product badges: ![All badge options are found in the Theme settings under PRODUCT GRID](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FnFxmHU6tlTSyzEofg1ZV%2FScreen%20Shot%202021-12-29%20at%2012.07.31%20PM.png?alt=media\&token=4970f8ed-8a33-4403-adfe-ff32038a5223) To find these options, locate Theme settings at the bottom of the Theme Editor and then choose PRODUCT GRID: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FFabHdkGqVamWtc4g8ueN%2FKapture%202021-12-29%20at%2011.57.13B.gif?alt=media\&token=06a56e39-f2a6-4e79-a48c-5c67634143c1) # Custom filter options Using metafields, Story theme can display custom filter types Build your own custom filter options and assign them to various products. If your custom filters are colors, Story theme will automatically create color swatches for customers to filter by: ![Band color and Face color are custom filter options](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FGLlITkrm2x7zjid7DmSZ%2FScreen%20Shot%202021-12-29%20at%206.54.32%20PM.png?alt=media\&token=e325ebfa-eb5c-42d4-996b-74abef8c7049) ### How to setup Begin by creating a basic text metafield in your Shopify Settings: Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom): ![Create new Product metafield](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fc2ON7jxNhNfxI3p4QOdF%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM%20\(1\).png?alt=media\&token=ded139b8-e606-4af6-9467-7df5631a4956) ![Choose Add definition](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJw9dCj6QvkVADh2kjQpi%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f) * Provide a **Name** for your metafield. In our example, we've used ***Band color***. * The default Namespace and key can be used. No modifications are needed. * Choose **Text**, **Single line text** for the Content type. * No validation is required. ![Example of Band color metafield definition](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FMLdsLZERupxxbDykJZLC%2FScreen%20Shot%202021-12-29%20at%207.02.02%20PM.png?alt=media\&token=f7cfa437-f67b-4b42-a29a-985f5f48e928) **Save** your new definition. ### Product setup {% hint style="success" %} Now that your metafield has been defined, we simply start adding Band colors to each of our products. {% endhint %} The next step is to edit any of your products in the Shopify Admin -> Products and add a color to the Band color option under Metafields. Scroll to the bottom of the product setup page: ![Coffee has been assigned as the color for this product's Band color](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FVNOoQPF0KsEk0PquAJp1%2FScreen%20Shot%202021-12-29%20at%207.17.12%20PM.png?alt=media\&token=15f8c853-a0a0-4c77-8672-7a26c7caa355) ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FlmgiFv8i20BzqHduKXwi%2FKapture%202021-12-29%20at%2019.16.10.gif?alt=media\&token=3692aecf-61eb-4967-8daa-57180af07933) {% hint style="success" %} Populate the Band color metafield option for all products that apply with their color. {% endhint %} ### Add metafield as a filter option The final step is to ensure your metafield has been added to the **Collection and search filters** in the Navigation admin. Use the **Add filters** option and select your metafield(s) to include as filter options: ![Shopify Admin under Navigaiton](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FtUCZ3oCMNVr7PhCgzt8b%2FScreen%20Shot%202021-12-29%20at%206.28.49%20PM.png?alt=media\&token=813d3c55-b42e-45c3-bd89-7c6cbf25cce4) When the pop-up appears, check your metafields: ![Band color is checked and will appear in the Collection sidebar as a filter option](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FOwS0rabHzhqw0R5GWaIm%2FScreen%20Shot%202021-12-29%20at%206.31.55%20PM.png?alt=media\&token=49cfca2c-1627-415f-84e1-5fdddd6c410f) # Collection filtering Powerful collection sidebar filtering tools with price ranges, color swatches, inventory, and more Story theme supports Shopify's Online Store 2.0 Product filtering for fast, customizable, and reliable collection filtering: ![Collection sidebar](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FnNRg5TFenGGmAZsl5s5r%2FScreen%20Shot%202021-12-29%20at%206.03.58%20PM.png?alt=media\&token=6b32a782-eea1-4fd4-b5dc-4aca6edee8f0) ### How to setup Setup is fast and simple. Using the Theme Editor, navigate to any collection page (or choose the default collection template) and click on **Collection page** to view the settings. Scroll towards the bottom and view the **Collection Sidebar** settings: ![Collection sidebar settings](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FLe8IEcKMCWQsAffpwDDN%2FKapture%202021-12-29%20at%2018.17.30.gif?alt=media\&token=8458a0b9-ee33-4a4d-8632-1912c26e7289) Ensure the checkbox for ***Enable filters*** is checked. ### Customizing filter options Filter choices can be added from your store's Navigation admin: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FtUCZ3oCMNVr7PhCgzt8b%2FScreen%20Shot%202021-12-29%20at%206.28.49%20PM.png?alt=media\&token=813d3c55-b42e-45c3-bd89-7c6cbf25cce4) Use Add filters to add available filter options: ![Choose from available filter options or create your own custom opitons](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FOwS0rabHzhqw0R5GWaIm%2FScreen%20Shot%202021-12-29%20at%206.31.55%20PM.png?alt=media\&token=49cfca2c-1627-415f-84e1-5fdddd6c410f) For custom filter options like Band color and Face color, create a metafield and values to each of your products that apply. Learn more: {% content-ref url="/pages/8HbgCuT4A78oR3O3LXaH" %} [Custom filter options](/collections/collection-pages/custom-filter-options) {% endcontent-ref %} # Collection sorting Display options to sort products in the current collection When activated, a drop-down list of sort options is displayed in the collections sidebar. Customers can choose to view products with various sort options including Featured, Best Selling, ascending and descending options for Alphabetically, by Date and Price. ### Default sort order The default sort order for each collection is set in your Shopify Admin under Collections. You can set the default sort order by using the drop-down and setting your preference: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FtMePpvakp5ut9JpInquX%2FKapture%202021-12-29%20at%2020.41.19.gif?alt=media\&token=0fa3700b-9ef2-4e44-b0b3-d8351e3a3d76) ### Custom sort order To customize the order in which products are displayed when viewing a collection, simply change the default sort order to **Manually**: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fi7GwgZXgrf13cCg403ms%2FKapture%202021-12-29%20at%2020.32.43.gif?alt=media\&token=61f69b39-1a63-408d-8edc-d3b6be66c9bc) Manually sort is displayed as **Featured** in the theme, the word ***Manually*** is not shown to customers. Customers can enable or disable collection sorting in the theme settings: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FAO6wM0UJm1jb4UctEt08%2FKapture%202021-12-29%20at%2020.29.33.gif?alt=media\&token=6352f95e-5c67-42c9-b111-82e21a08a6ae) # Collection navigation Add a secondary navigation for your collection pages to help customers find more products ![Collection navigation helps customers find additional products](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FSqbum6nLOGwdNntlInzX%2FKapture%202021-12-29%20at%2020.55.59C.gif?alt=media\&token=73f81a2a-e109-4cbd-8ba9-b52ca35b7913) Activate using the **Show collection navigation** checkbox under **Collection page**. ### How to setup Create a new menu in your Navigation admin that will be used as your Collection navigation. Assure that the new menu only has one level of menu items, nested menu items will not appear. ![Example of one level menu items, without nested menu items](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fj5VIUJGeLpMrPYmprenY%2FScreen%20Shot%202021-12-29%20at%209.04.41%20PM.png?alt=media\&token=3667187a-9ab2-4bb6-8b5c-b7ab78229e6f) # Feature image Display the collection feature image as a banner on collection pages ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F6vGBFQSfOECE34LFdcdO%2FKapture%202021-12-29%20at%2021.08.56.gif?alt=media\&token=d4c41635-702c-4933-83a4-738a40f51b01) Settings to assist with image display include: * Position * Image height * Image overlay opacity and color The position drop-down helps you adjust the image position when the subject is not centered. Image height adjusts the amount of space the banner image uses on the page. The image overlay options help you add color effects to your banner image: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F4qH2mhqEXONSbSd5yQ5l%2FKapture%202021-12-29%20at%2021.16.33.gif?alt=media\&token=327feb3b-c55a-4a51-a63b-e4c4ebd3e1f8) # Story cart # Cart styles Story includes a set of modern cart designs which have powerful functionality Story's high functionality cart designs include features like a free shipping progress bar to encourage shoppers to add more items to the cart, an upsell promotion, available stock messaging, clean and easy-to-use quantity options, and removing items from the cart. Explore the different styles and features included with Story: ### Drawer style ![Modern slide-out design, activates when item is aded to the cart](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Ff30unjgLJEXyKOitlZBl%2Fdrawer-watch.gif?alt=media\&token=ffffe018-6441-4923-8eef-82e073563675) ### Popup style ![Center of screen popup design, activates when item is added to cart](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FA1ycDcE6BYj8Isj925Yk%2Fpopup.gif?alt=media\&token=86257603-02ce-459f-94f0-488257712ad3) #### Drawer and Popup carts {% hint style="success" %} Supported: * Free shipping message with dynamic value and progress bar * Upsell promotions * Dynamic values for quantity changes and item removal * Estimate shipping calculator * Cart notes, message to seller * Activated when each item is added to the cart (slideout or popup) {% endhint %} {% hint style="info" %} Not suitable for: * When using third-party cart-related apps that conflict with functionality * Displaying quick checkout buttons like Apple Pay, Amazon Pay, PayPal (these buttons by default appear in the next screen, the main checkout) {% endhint %} ### Page style The page style cart is ideal for a full-screen cart and is not automatically activated when items are added to the cart. This can be useful for customers who are adding multiple items to the cart without the distraction of the cart appearing each time. ![Full page cart with dynamic functionality](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fcxfnt3x5VugZ5g2HJGQh%2Fpage2.gif?alt=media\&token=11f24459-03ea-405a-9922-f2c4bbfbd343) #### Page style cart {% hint style="success" %} Supported: * Free shipping message with dynamic value (located above subtotal) * Dynamic values for quantity changes and item removal * Estimate shipping calculator * Cart notes, message to seller * Can display quick checkout buttons like Apple Pay, Amazon Pay, PayPal (removes from the next Checkout screen) {% endhint %} {% hint style="warning" %} Not supported: * Upsell promotions {% endhint %} {% hint style="info" %} Cart is manually activated by clicking the cart icon. Does not automatically activate each time an item is added to the cart. A checkmark is used to inform the customer that an item has been successfully added to the cart. {% endhint %} ### App compatible page This option is designed to be used with other third-party apps that take control of the cart or have special code used in the cart and cannot use dynamic features of the Story cart. Use this cart style for the most compatibility with apps or custom coding done by developers. ![Most compatible with third-party apps and custom coding](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FhiRqxx36p7WQAeaEFa4f%2Fapp.gif?alt=media\&token=663f01cb-559f-4e05-838a-a264ea62685e) #### App compatible cart {% hint style="success" %} Supported: * Cart notes, message to seller * The best option for stores that use cart-related apps or custom code {% endhint %} {% hint style="warning" %} Not supported * Free shipping message with dynamic value and progress bar * Upsell promotions * Estimate shipping calculator {% endhint %} {% hint style="info" %} * Uses an Update cart link to refresh quantity and removal of items in the cart * Cart is manually activated by clicking the cart icon. Does not automatically activate each time an item is added to the cart. A checkmark is used to inform the customer that an item has been successfully added to the cart. {% endhint %} # Shipping message Set a threshold to qualify for free shipping and display the progress in the Cart Story can display a dynamic free shipping message which alerts the customer how close they are to qualify for free shipping. Customers are congratulated with an animation and custom message when they reach their goal: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FwxkMF3oruJEhRc6UYqvP%2FKapture%202021-12-31%20at%2012.49.08.gif?alt=media\&token=048e9311-b7c1-4da0-8574-a23a8b458dc2) As items are added to the cart, the progress bar and total required value is automatically calculated and updated in the cart. ### How to setup The free shipping progress indicator is configured in the **Theme settings** -> **Cart**: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FA9zV6sJXgY9QVOgXLBx9%2FKapture%202021-12-31%20at%2013.18.26.gif?alt=media\&token=fb08a7d8-a923-4ea1-ba2a-fa58cc29ebcb) 1. The message text can be updated here. The `|| amount ||` portion is needed to display the dynamic value needed to reach the free shipping quota. Please don't modify this unless you wish to remove the dynamic number count. 2. Update this value to set the minimum spend required for free shipping. Use round numbers, exclude any currency symbols, letters, or special characters. Example: `200` ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fhx84PUVpGvBxvdLVIiCg%2FScreen%20Shot%202021-12-31%20at%201.20.15%20PM.png?alt=media\&token=63542372-b22d-4ada-98bf-365480a3a305) # Estimate shipping calculator Allow customers to estimate shipping fees from the cart Story includes a shipping calculator to help estimate shipping charges. The calculator is displayed at the bottom of the cart: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FBcOwAvWGzkHRANRqc96l%2Festimate.gif?alt=media\&token=8e24dc43-8200-4da4-b251-44c241459c0e) ### How to setup Toggle the setting in under **Theme settings** -> **Cart**: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FeuTOCaKXOyzzQRWsscgx%2FScreen%20Shot%202021-12-31%20at%201.36.45%20PM.png?alt=media\&token=cb1808ef-23cc-4537-b2ec-687c80b0bc2b) Learn more about shipping rates and setup: {% embed url="" %} # Cart settings How to locate settings and options for the cart Cart settings and options are located under **Theme settings** -> **Cart**: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FjDnp3nBIz35QnR7vTrQu%2Fsettings.gif?alt=media\&token=fffc893e-7a90-43ba-b245-d84c94dfe99c) ### Cart page If you've chosen to use the Cart page as the cart style, there are some additional customizations you can make here. For example, adding sections. The theme settings can also be found on the cart page: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F4bypblz6tInoq3uauSJY%2FKapture%202021-12-31%20at%2014.04.09.gif?alt=media\&token=7da5b10e-c87d-4f02-81c8-380818dd42ec) # Upselling # Upsell promotions Story includes powerful upselling features to help increase your items per transaction ### Product page upsell promotion ​Story theme will display an upsell promotion with a one-click Add to Cart button. Use this feature on all your product pages or individual products with custom product pairings. ![Product page upsell promotion](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FEICnU1NLwOXKB9NG2L68%2FScreen%20Shot%202021-12-30%20at%207.27.55%20AM.png?alt=media\&token=a493f280-770c-41ce-91f1-a8f49258207e) ### Cart upsell promotion When pairing with custom products, Story will also show an upsell promotion in the cart drawer or popup cart: ![Second upsell opportunity, the Cart](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F591LbRBaIgRMbKJEKRMx%2FKapture%202021-12-30%20at%2007.31.49.gif?alt=media\&token=a5384ce4-c2f2-4f38-bc2d-b75c5de3c191) Story will also stack promotions. For example, after the customer added the promotional item to the cart, a new promotion appears which is paired with the promoted item added to the cart.
# How to setup Helpful tips on how to setup static product promotions and custom pairing products Story theme includes two types of upselling promotions: * Static product upsell promotion * Custom paired upsell promotion A static promotion is very simple to activate and start using. One product is chosen and will be the promoted product for all product pages (using the same product template), and also when an item is added to the cart. For greater flexibility, custom paired promotions can allow you to selectively match products with other products. Story theme uses the power of metafields to match products with each other. ### Static product upsell promotion Learn how to quickly set up a static product upsell promotion: {% content-ref url="/pages/pkblsSxXkAV5b5w6FDlr" %} [Static upsell promotion](/promotions/upselling/static-upsell-promotion) {% endcontent-ref %} ### Custom paired upsell promotion Learn how to set up custom pairing products using metafields: {% content-ref url="/pages/ahuZtciwx4KglcV6vTnV" %} [Custom upsell promotion](/promotions/upselling/custom-upsell-promotion) {% endcontent-ref %} # Static upsell promotion Pair one product with all your products Instantly add a static product upsell promotion to all your product pages. This is the easiest method to set up and provides a promotion on all product pages when using the same product template. ### Add Upsell block to Product page Start by adding the Upsell theme block on the default product template: ![Add Upsell block to Product page](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FIOWilXnfOdC190B5k3nj%2FKapture%202021-12-30%20at%2008.14.05.gif?alt=media\&token=b8f6dfb6-0261-4076-b467-f0740e333290) ### Choose a product Next, choose one product that will be promoted on all product pages and in the cart drawer: ![Select a product that will be promoted on all product pages that use the same product template](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FyfSYLYyBt7e4ti6Ukiv8%2FKapture%202021-12-30%20at%2008.19.02.gif?alt=media\&token=7a1f0817-cf6e-4cca-b629-1a3bc58edb74) The chosen product will appear as an upsell promotion on all product pages that use the same product template. A second product template can be created and assigned to various products if you need to show a different product. In most cases, if you need custom pairing for your promotions, we suggest you use Custom upsell promotions: {% content-ref url="/pages/ahuZtciwx4KglcV6vTnV" %} [Custom upsell promotion](/promotions/upselling/custom-upsell-promotion) {% endcontent-ref %} # Custom upsell promotion Pair products individually with different product Story can be customized to match any product with another when using metafields. This allows you to customize which product is displayed as the upsell promotion on each individual product page. ### Unique promotions for each product Pair products with specific products to display custom upsell promotions: ![Ang watch promotion shown for Silver Mesh band](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F8zAzA8cKacbyf6o95HHh%2FScreen%20Shot%202021-12-30%20at%208.46.06%20AM.png?alt=media\&token=8db93dd8-1359-48e6-8372-9f0da7e850a4) ![Shackleton watch promotion shown for Gold Mesh band](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F4KXXPWGFWd87ALlgbxaE%2FScreen%20Shot%202021-12-30%20at%208.46.58%20AM.png?alt=media\&token=c257d257-69e7-4480-8a3a-8a0a44f29214) ### How to configure There are three initial steps involved when setting up custom paired products: 1. Create an upsell product reference metafield called **`theme.upsell`** 2. Go to each product that should have an upsell and select the product you want to upsell 3. Connect the metafield in the Theme Editor using the "upsell" block on the product form After the initial setup, each product can easily be paired with other products using your Shopify Admin under Product setup.
## Quick setup for experienced users The most important part of setting up this metafield is to use the namespace and key of: ```json theme.upsell ``` See the examples here (click on images to zoom): ![Custom namespace and key](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FiLeEExEOk1g2Zg0BkPtM%2FScreen%20Shot%202021-12-30%20at%209.05.04%20AM.png?alt=media\&token=23d27384-9293-4276-83da-62402cb3617c) ![Content type is Reference -> Product](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FHvuJdKZ0kwIZWncCJ7ZG%2FScreen%20Shot%202021-12-30%20at%209.08.02%20AM.png?alt=media\&token=43b7aa4d-f915-403a-a775-eb44531b4283) The **Content type** must also be "**Reference**" and choose "**Product**". {% hint style="success" %} Verify: * The namespace begins with **theme*****.*** Example: **theme.**upsell. This custom namespace allows Story to display a custom promotion. * The metafield type is **Reference** -> **Product** {% endhint %} See below for detailed animations. ## Full detailed step-by-step setup The first step is to define a custom metafield that Story theme supports. Start in your Shopify Admin -> Settings and choose Metafields from the left panel and then click on **Products** (click images to zoom): ![Click on Products](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FcRfiOdkX3eUmRY26Clkk%2FScreen%20Shot%202021-11-19%20at%207.04.54%20PM%20\(2\).png?alt=media\&token=063fda8e-f9e5-451f-a8f6-d37c65b70425) ![Choose Add definition](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FJw9dCj6QvkVADh2kjQpi%2FScreen%20Shot%202021-11-19%20at%207.26.03%20PM%20\(1\).png?alt=media\&token=4279b446-4060-4c41-ae38-1ed389fc302f) Next, * Click the Add definition button * type-in "upsell" for the Name * Change the Namespace and key from `my_fields` to `theme`. The namespace and key should now be: **theme.upsell** ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FEKt3dnr9JtOwwJvlAOQZ%2FKapture%202021-12-30%20at%2009.24.58.gif?alt=media\&token=6fd2aaaf-52c0-4014-9b04-2b4a70d1a357) Use the Select content type button and choose **Reference** and then **Product**: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FqXroF5cBkqVv1WvRZzmr%2FKapture%202021-12-30%20at%2009.30.57.gif?alt=media\&token=bf6123f5-26c1-4f04-9a75-abc211abdbba) Use the **Save** button to finish. Your upsell metafield is now complete and ready to use. ### Product setup {% hint style="success" %} Now that our custom metafield has been defined, we can **easily** associate another product as our upsell product. {% endhint %} The next step is performed in the Shopify Admin -> Products. Choose a product and scroll to the bottom where you'll find all the metafields. There will be a new upsell option where you can pick another product to pair with: ![Pair with another product](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FL7oAGeaetspEjoIXmVWM%2FKapture%202021-12-30%20at%2009.46.24B.gif?alt=media\&token=b7971cae-15a6-4612-b03b-7b92fadce431) Story will use the chosen product to create an upsell promotion for the product page and the cart drawer or popup cart. ### Configure upsell block The final step is to configure the upsell block in the Theme Editor for the current product template. Be sure to add the **Upsell** block under **Product page**. Next, click on the ***Connect*** ***dynamic source*** icon and choose the upsell metafield we created earlier as your source: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FeRvsGZP3NxMk0cLtMOLv%2FScreen%20Shot%202021-12-30%20at%2010.05.36%20AM.png?alt=media\&token=a2ae5949-19f3-4caa-a7d3-02566ce8f9da) ![Connect to the upsell metafield](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FUOvaJzBQowFhElAc0pnO%2FKapture%202021-12-30%20at%2009.58.37.gif?alt=media\&token=4ea74c98-8cf8-4a87-bb41-dcdd36d8384c) This step is only required once for the current product template. If you have multiple product templates, connect to the upsell source for each template. All steps are complete, you can now pair any of your products with unique products. These will appear as upsell promotions on product pages and in the cart drawer or popup cart. # Popups # Cookies consent message How to add a cookies consent message > Feature added in Story 3.0 Story includes a Cookies consent popup that allows you to display a message an accept button and a link to your Privacy Policy page: ![Example of Cookies consent message, left positioned](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F6ODU416Xi7mHA6f8Xeoe%2Fcookies-new-1.png?alt=media\&token=fc90f75d-9f22-47b2-bae7-2d3a4b8a5866) ### Adding a popup Add the Cookie consent popup block under the Popups section which is located after Footer in the Theme editor: ![Add the Cookies Consent popup block under Popups](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FzxlSqLHoZQGbzx9SAhRb%2FKapture%202022-03-31%20at%2018.43.17.gif?alt=media\&token=5c603373-3c41-4006-9241-cac3c234b2b1) ### Position and style Popups can be positioned and styled differently. When using left or right, the popup message appears as a common mini-popup box with buttons/links and a close option. When the bottom position is selected, the popup message is styled as a bottom bar. ![Bottom positioned message remains sticky when customers scroll upwards](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FM98Wd4BTnqvMlJTLtu2Z%2Fcookies-bottom-1.png?alt=media\&token=908c561e-235a-428f-9952-4bbae73fa8b2) Use the color options to modify the background, text color, and button style: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FY4SbQpJRFBxvIt1P6fwD%2Fcookies-bottom-2.png?alt=media\&token=66fa43f7-396d-4f68-be3e-c91f66f60c96) ![Left positioned](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F769lCPvnV9iMWobHp8Fl%2Fcookies-left.png?alt=media\&token=fbad94da-6b3e-448f-aeac-db5947e03c2b) ![Right positioned](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FiHeyGYYfEJFSq3neU2mZ%2Fcookies-right.png?alt=media\&token=aed8a4a0-89b0-457c-ab88-e14fcc91040d) ![Bottom positioned](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FmCeEa9mGYgUZkKGsXfQT%2Fcookies-bottom.png?alt=media\&token=93574fb2-1135-49f7-a3a2-f658a7a4262f) # Newsletter popup Powerful and interactive popup feature with ability to target different pages, sources and behavior Display a customized newsletter popup message which can display a discount code or reward the customer with a discount code after subscribing. The newsletter popup can appear after a set period of time, can be displayed only on certain pages, and can also only be displayed if the customer arrives from a certain site (like a targeted ad on social media). Popup messages can also be targeted to display only on desktop or mobile devices. ![Highly customizable popup settings](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F6JOPb7IjrlLYiQK76Evx%2Fnewsletter-settings%20\(1\).png?alt=media\&token=f0f3c5ca-af13-4502-91be-c2c2d02aeddf) ### Reward your customers with a discount code after signup Provide a custom discount code for those who signup using the newsletter popup: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FrTqAZui50ZIh8Ux4uCE9%2Fnewsletter-popup2.png?alt=media\&token=bd513549-d558-46e9-a1eb-c6a42a808808) {% hint style="success" %} Add multiple newsletter theme blocks with different messages, different coupon codes, and also custom target behaviors {% endhint %} ### Popup Behaviour Popups can appear based on time or other behavior. Setting options include: * Show immediately * Show 10 seconds after page load * Show after user scrolls to the page bottom * Show after the user has been idle for 1 minute ![Each popup block can have different trigger settings](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FIfLyl0AQqTSGnTwpbZXu%2Fnewsletter-popup-3.png?alt=media\&token=59ca2617-d191-47eb-a324-52f9e46beda0) # Product siblings # About product siblings Products as swatches > Feature introduced in Story 3.2.0 Story includes the ability to group multiple products into one product. The result is beautiful product detail pages that include swatches with images that represent each variant option. Clicking on a swatch, displays only the images associated to that variant option and also the product details and prices for the variant: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FBnXMfxQYfpE82VkAZ2qj%2FScreen%20Shot%202022-05-31%20at%204.40.25%20PM.png?alt=media\&token=97adc4d6-6d4a-428a-9c54-09668488287b) Each product sibling appears automatically as a swatch: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FNcUqDhdIjm0YFBsAumuL%2FScreen%20Shot%202022-06-01%20at%206.46.05%20PM.png?alt=media\&token=96e41599-3761-4b05-bd86-a035d29076bc) Each sibling is an individual product. Using custom metafields, Story will connect these products together and auto generate the swatch images. Example of individual products in product admin: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F0XHuCrwNnmYBNFZp5uAw%2FScreen%20Shot%202022-06-01%20at%207.02.41%20PM.png?alt=media\&token=75e7118f-c2f2-4d2f-a261-f7555c0486e7) # Multiple images per variant How to manage products that have multiple photos for each variant > Feature introduced in Story 3.2.0 Story can help you group multiple images and associate to individual product variants or sometimes known as variant image sets. The theme includes two different methods for you to manage and display multiple images per variant: ### 1. Product Siblings With product siblings, you can group multiple products into one product which creates beautiful product detail pages that include image-based swatches for each variant and displays only the images for that variant. This method uses metafields and is our most robust solution. Examples: ![Example turquoise color variant - Grouped images and image-based swatches](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FBnXMfxQYfpE82VkAZ2qj%2FScreen%20Shot%202022-05-31%20at%204.40.25%20PM.png?alt=media\&token=97adc4d6-6d4a-428a-9c54-09668488287b) ![Example bubblegum color variant - Grouped images and image-based swatches](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FdWigXngylm3xdS6EwOyj%2Fsibs-bubblegum-edit.png?alt=media\&token=0e05af3d-70b0-41cb-b398-099c4e8f9f22) ### 2. Grouped image sets using alt-tags Another option is to use Alt-tags with your product images. This method lets you group images by adding an alt-tag to each of the photos in your product setup that are associated to a variant. ![Standard color swatches and grouped images for each variant](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FkdNLoTyJngIaKuCCP5bs%2FScreen%20Shot%202022-06-01%20at%208.31.28%20AM.png?alt=media\&token=50e27d79-ea25-4bc2-8da1-2b2b734a8ce3) ### How to use Each method is covered in detail with the following pages: {% content-ref url="/pages/9e37F00dK3rzx2alZKgI" %} [About product siblings](/siblings/product-siblings/about-product-siblings) {% endcontent-ref %} {% content-ref url="/pages/4y63pl6UR3SmfNhu2EFn" %} [Variant image sets with alt-tags](/siblings/product-siblings/variant-image-sets-with-alt-tags) {% endcontent-ref %} # How to setup siblings > Feature introduced in Story 3.2.0 There are four main components to setting up product siblings: 1. Creating individual products. Each product can have variants like sizes. 2. Group the siblings products into a collection. 3. Define two custom metafields to link each product together which will automatically create linked product swatches. 4. Update the metafield information for each product. ### Individual products Create individual products that are similar. Use the same name for the product title with each product: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F0XHuCrwNnmYBNFZp5uAw%2FScreen%20Shot%202022-06-01%20at%207.02.41%20PM.png?alt=media\&token=75e7118f-c2f2-4d2f-a261-f7555c0486e7) Once connected to each other as siblings, they will appear with linked swatches to each other: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FhWk56Zvn0wbCUphCdyTL%2FScreen%20Shot%202022-06-01%20at%206.45.19%20PM.png?alt=media\&token=17bca314-4ffa-483e-8411-ee34a3ac86a6) Each product can have its own images, inventory, prices, description, variants like Size: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FizTJivbzTiL0tugauPuh%2FScreen%20Shot%202022-06-01%20at%207.06.10%20PM.png?alt=media\&token=14038d79-9ac5-4511-b4ac-bd68e59516c4) A **Color** variant isn't required as that will be replaced by image swatches and a metafield is used to display the color. {% hint style="success" %} Tip: Create the first product with sizes and prices, then duplicate that product and add new images for each variation and adjust the description, inventory, and prices. Only the product name needs to be the same for all products. {% endhint %} ### Collection for siblings After creating the products, place them all in one collection. The collection does not need to be used for any other purpose: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FmlcDsTjrkBLgEZoMTLVT%2FScreen%20Shot%202022-06-01%20at%207.16.03%20PM.png?alt=media\&token=08d4931c-528d-41ec-beec-e255dd22d927) The collection is not displayed in the store like other collections, you can keep the collection details very simple: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FfZHWryNQaKmQEORG1YQE%2FScreen%20Shot%202022-06-01%20at%207.17.38%20PM.png?alt=media\&token=1fe475ea-6663-4116-94c0-21dc04d5f920) {% hint style="success" %} We recommend you use the word "**Siblings**" in the title of the the collection. This will help in the next step where we can hide collections globally that contain a keyword. {% endhint %} ### Theme settings Story includes a new feature where you can hide collections to customers when viewing your site. Open **Theme settings** from the Theme Editor - **Located at the bottom left**: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fz1bzeko0LyQZxfVUudub%2FScreen%20Shot%202022-06-03%20at%201.14.35%20PM.png?alt=media\&token=b59bd08e-9df8-4b0d-a4f5-10072aa58910) Next, open the **Advanced** section: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Ft7VtH9qp4D4uRMJUMyMo%2FScreen%20Shot%202022-06-03%20at%201.14.52%20PM.png?alt=media\&token=5ee7eaa3-c0d8-4dff-b95c-a6deac89092b) Add the keyword "sibling" or "siblings" (lowercase is fine) to the second section - **Exclude collections if they contain**. **Save** your changes. ### Metafields The next step is to create two product metafields which are used to connect all the products and information together: {% content-ref url="/pages/tRI5Qs1bkzlMma2Cw989" %} [Cutline](/siblings/product-siblings/cutline) {% endcontent-ref %} {% content-ref url="/pages/ujg62BwEKsyoKNaLtA7Z" %} [Siblings collection](/siblings/product-siblings/siblings-collection) {% endcontent-ref %} # Siblings metafields > Feature introduced in Story 3.2.0 There are two product metafields definitions required to connect each of the products together and generate linked swatches. Use the metafields editor under **Settings** in the Shopify Admin: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FltN6e8eUK8q6DxB4QqLw%2FScreen%20Shot%202022-04-05%20at%207.19.27%20PM.png?alt=media\&token=ea1b234b-d2c4-4d3b-814f-f425f942cfdd) Both metafields will be defined under the category of Products: ![](https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F1RqRObIEDsarjpSTvmGP%2FScreen%20Shot%202022-04-06%20at%208.31.43%20AM.png?alt=media\&token=5e92eabb-dc47-4db4-a0ad-3ca93770c382) Next, create these two metafields: {% content-ref url="/pages/tRI5Qs1bkzlMma2Cw989" %} [Cutline](/siblings/product-siblings/cutline) {% endcontent-ref %} {% content-ref url="/pages/ujg62BwEKsyoKNaLtA7Z" %} [Siblings collection](/siblings/product-siblings/siblings-collection) {% endcontent-ref %} --- [Next Page](https://story.groupthought.com/llms-full.txt/1)