Getting Started

Product Story is a Shopify admin app that lets you build rich, below-the-fold product story sections — the kind you see on Apple, Allbirds, and Cowboy Bikes product pages — without writing a line of code.

Installation

1. 1Find Product Story in the Shopify App Store and click Add app.
2. 2Review and accept the requested permissions: metaobjects, products, files, and theme access.
3. 3After install, you'll be taken directly into the Product Story editor.
4. 4A sample template is pre-loaded so you can start exploring immediately.

Your First Product Story

A product story is a collection of section blocks that you assemble, customize, and link to a product. Each story is saved as a Shopify metaobject.

Creating a new template

1. 1Click New Template in the top-left panel.
2. 2The template gallery opens — choose a preset layout or start blank.
3. 3Give your template a name (e.g. 'Ridge Wallet Pro Story').
4. 4Optionally, link it to a product right away using the product dropdown.
5. 5The editor opens with your chosen template loaded on the canvas.

Editing content

Click directly on any text element in the canvas to edit it inline. Click on any image to replace it with an image from your Shopify Files library. Use the right panel to adjust styles, spacing, borders, animations, and more.

Changes are saved automatically every few seconds. You'll see a "Saved" indicator in the top bar when your work is persisted.

Section Blocks

Product Story ships with 18 pre-built, conversion-tested section blocks. Each one is designed to tell a specific part of a product's story.

To add a block, open the Blocks panel on the left sidebar and click any block to insert it into the canvas at the bottom of the current template.

Theme Customization

Every template inherits a theme — a set of colors and fonts that apply to all section blocks automatically. You never need to style individual elements to match your brand.

Theme settings

Open the Theme tab in the left sidebar. Available settings:

Theme changes apply instantly to the canvas preview. Settings are saved per-template, so each product story can have its own visual identity.

Connecting to a Product

Each template can be linked to a Shopify product. This creates a metafield on the product that points to the template's metaobject — making it accessible from your theme's Liquid code.

1. 1Open the Template tab in the left sidebar.
2. 2Use the Product dropdown to search and select a product from your store.
3. 3Click Save. Product Story writes a metafield on the product linking it to this story.
4. 4The link is visible in Shopify Admin under the product's Metafields section.

Publishing to Your Store

Product Story uses a Shopify app theme extension to render your product stories. Once installed, a Product Story block is available in your theme editor — no code changes required.

How to add the block

1. 1In Shopify Admin, go to Online Store → Themes and click Customize on your active theme.
2. 2Use the page picker at the top to navigate to a Product page template.
3. 3In the section list, click Add block and search for Product Story.
4. 4Add the block where you want the story to appear on the product page.
5. 5Save the theme. The block automatically reads the story linked to that product.

Performance

Because the HTML and CSS are stored directly in Shopify metaobjects, they render server-side with your theme. There is no JavaScript required, no external fetch, and no layout shift. Story content is indexed by search engines the same as any other product page content.

AI Content Generation

Product Story includes an AI content generator powered by Google Gemini. It writes product-specific copy — headlines, descriptions, feature bullets, and FAQ entries — based on your product's title, description, and category.

How to use it

1. 1Make sure your template is linked to a product (see Connecting to a Product).
2. 2Click the Generate Content button in the editor toolbar.
3. 3Choose what to generate: hero headline, feature description, FAQ, or full section copy.
4. 4Review the generated content directly in the canvas.
5. 5Click any text to edit further before saving.

AI generation works best when your product has a detailed description in Shopify. The more context the product has, the more accurate and on-brand the copy will be.

FAQ