Conviction documentation · v1.0.0

Everything the theme can do,
and how to set it up.

Conviction is a Shopify theme for brands that teach and sell on the same page. Its product page tells a story section by section, and the Adaptive Conviction Rail keeps an Add to cart button on screen with a message that changes as shoppers read. This guide covers setup, every section, and the questions merchants ask most. Need help? Contact support. We reply within 2 business days.

Guides

1. Getting started#

Install and choose a preset#

Conviction comes with two presets. Each one sets the colors, fonts, home page and product page layout to match its demo store.

  • Conviction. Graphite and steel blue, clean sans-serif headings. Built for devices, hardware and technical products.
  • Verity. Warm sand tones, editorial serif headings. Built for supplements, wellness and ingredient-led products.

Pick the one closest to your brand. You can change any color, font or section afterwards.

Where things live#

  • Theme settings (the gear icon in the theme editor): logo, colors, fonts, layout, cart, search, social links and the rail defaults.
  • Sections and blocks (the left sidebar): everything on each page. Click a section to edit it, drag to reorder, or use the eye icon to hide it.
  • Templates (the page selector at the top of the editor): Home page, Products, Collections and so on.

First steps checklist#

  1. Upload your logo in Theme settings > Logo.
  2. Set your colors and fonts (see section 2).
  3. Set the rail's default message in Theme settings > Conviction Rail.
  4. Open a product in the editor and fill in the product story (see sections 3 to 5).
  5. Set up your menus in Online Store > Navigation.

2. Theme settings#

Colors#

Every background color has a matching text color, so text stays readable.

SettingUsed forPaired text color
BackgroundPage backgroundText
Borders and tintsDividers, cards, tinted sectionsText
Buttons and rail backgroundPrimary buttons, the rail, the cart badgeButtons and rail text
Secondary textCaptions, labels, small printShown on Background
AccentDecorative details, such as the accent dividerDecorative only

Buttons and rail text can stay empty. Conviction then picks Text or Background automatically, whichever reads better on your button color.

Tip: keep strong contrast between Text and Background. Low contrast makes the store harder to read for many shoppers.

Typography#

  • Heading and Body use Shopify's font library. The style you pick (for example Light or Semibold) sets the weight.
  • Type scale makes all headings tighter or more generous.

Layout#

  • Page width sets the maximum content width.
  • Section spacing sets the default space between sections.

Cart#

  • Cart type: a drawer that slides in, or the cart page.
  • Enable cart note: lets customers leave a note.
  • Free shipping threshold: shows a progress bar in the cart drawer. It is in your store currency, and the bar hides for shoppers paying in another currency. Set it to 0 to hide the bar. Make sure it matches your real shipping rates.

Predictive search shows products, articles and pages as customers type. You can show or hide vendor and price in the suggestions.

Social media#

Add your profile links. They appear in the footer.

Conviction Rail#

What the rail shows when no story section has its own message. Leave the headline empty to show the product's name. See section 4.

3. The product page#

The default product template is built from two parts:

  1. Product hero: the gallery and the buy box.
  2. Product story: a run of story sections below the hero.

Product hero blocks#

The info column is made of blocks you can reorder, hide or remove:

  • Eyebrow: a small line above the title. Shows the vendor or your own text.
  • Title: the product title, in display or standard style.
  • Price: updates with the selected variant, including sale and unit prices. Under it, a note says whether tax is included (from your Shopify tax settings) and links your shipping policy if you have written one.
  • Short text: a one-line benefit. Connect it to a product metafield to show different text per product (see section 5).
  • Buy buttons: variant picker, quantity, Add to cart, Shop Pay Installments, accelerated checkout, pickup availability and gift card fields.
  • Trust strip: icon and text items, such as "Free shipping" or "60-day guarantee".
  • Description: the full product description.

You can also add Text, Group, Custom Liquid and app blocks here.

Buy buttons settings#

Variant picker style:

  • Dropdown: one dropdown per option.
  • Buttons: one button per value.
  • Swatches: color or image circles for options that have swatch data. Other options show as buttons.
  • Bundle tiers: cards for pack sizes. See "Bundle tiers" below.

Other settings: Show quantity selector, Show accelerated checkout buttons (on by default) and Show pickup availability.

Color swatches#

Swatches come from Shopify's product category metafields.

  1. Open the product in Products and set its Category (for example Apparel & Accessories > Clothing > Clothing Tops > Shirts). Save.
  2. In Variants, add or edit the Color option and connect it to the Color category metafield.
  3. Choose your colors. Each one already has a swatch color. You can edit colors or add an image in Content > Metaobjects.
  4. Set Variant picker style to Swatches. Options without a color show as buttons, so Swatches is safe on every product.

Swatches not showing? Open each color under Content > Metaobjects, make a small edit (for example retype the last character of its color) and save. Shopify sometimes only publishes a swatch to your store after the color is saved.

Wrong colors in the collection filter? The filter groups colors by each entry's Base color. Check that every color has the right base color, and only one.

Bundle tiers (multipacks)#

Show pack sizes as cards with the price, savings and per-unit price.

  1. Give the product an option such as Pack with values like 1, 3 and 6.
  2. Set each variant's price.
  3. To show a saving, set each variant's compare-at price (for example the price of 3 single units). Conviction shows "Save $X" only when the compare-at price is higher, so the page always matches what the cart charges.
  4. Optional: set a unit price on each variant to show the price per item.
  5. In Buy buttons, choose Bundle tiers. Enter the option name in Option shown as tiers (default "Pack"). Use Highlight tier and Highlight label to mark one card, for example "Most popular".

For mix-and-match bundles, use a bundles app and add its app block to the product page.

Subscriptions and purchase options#

Conviction supports any app that uses Shopify selling plans, including Shopify Subscriptions, Recharge, Skio and Smartrr. Pre-order and try-before-you-buy apps that use selling plans work too.

  • Once the app is set up on a product, Purchase options appear in the buy box automatically.
  • One-time purchase is selected by default.
  • Each plan shows its real price and saving, taken from your app's settings.

Pickup availability#

Turn on local pickup for a location in Settings > Shipping and delivery > Local pickup. The buy box then shows pickup status for the selected variant, with a list of pickup locations.

Gift cards#

The gift card page a customer receives shows your logo, the balance, the code, a QR code for in-store redemption, Add to Apple Wallet and a print button.

On gift card products, the buy box shows a "send as a gift" option with the recipient's email, name, a message and a send date. Accelerated checkout buttons are hidden on gift cards, because Shopify doesn't support recipient details there.

Standard product template#

Prefer a simpler product page? Assign the standard product template to a product (in the product's Theme template setting). It uses a classic layout without the product story or the rail.

4. The Adaptive Conviction Rail#

The rail is a slim bar at the bottom of the product page with a message and an Add to cart button.

How it behaves#

  • It appears once the buy box scrolls out of view, and hides when the buy box is back on screen.
  • As shoppers read, its message changes to match the story section in the middle of the screen.
  • Its button adds the exact variant, quantity and purchase option chosen in the buy box. If that choice isn't available, the button takes shoppers back to the buy box instead.
  • It shows the product's price next to its button, and the price follows the shopper's variant and purchase option.
  • It only appears on product pages that use the Product hero section.

Setting the messages#

  • Default message: Theme settings > Conviction Rail (headline, optional supporting text, button text). Leave the headline empty and the rail shows the product's name.
  • Per section: each story section on a product page has a Rail message block at the top of its block list. Set a Headline, optional Supporting text and a Button label. Leave it blank to use the default message.

Button labels:

  • Add to cart: the default.
  • Subscribe and save: shows only when the product has subscription plans. If no plan is chosen yet, the button takes shoppers to the plans instead of adding a one-time purchase.
  • Build a bundle: shows only when Buy buttons uses Bundle tiers. It takes shoppers to the tier cards.
  • Reserve yours: use it only when there's a real deadline or stock limit.

Tip: select a Rail message in the theme editor to preview it in the rail.

Colors#

The rail uses Buttons and rail background and Buttons and rail text from Theme settings > Colors.

5. Story sections#

Story sections work in two ways:

  • Inside a Product story section, where several run one after another on the product page.
  • As their own sections, on any page. Find them in the Story category when you add a section.

Every story section on a product page carries a Rail message, except Founder note and Manifesto.

SectionWhat it's for
Story chapterOne storytelling moment: eyebrow, headline, text, image (left, right or above) and an optional link.
Story sequenceNumbered steps, such as "How it works". A row, a scrolling strip for longer sequences, or Pinned: the section holds still on desktop while scrolling moves through the steps, one photo each. Phones and shoppers who prefer reduced motion see the steps stacked. Numbers update when you reorder steps.
IngredientsOne card per ingredient or component: name, role, amount, benefit, image and source. Grid or list. Includes a footnote for disclaimers.
Difference"The usual way" next to "Our way", one row per pair. You can rename both column labels.
Why gridIcon, heading and text items in 2 to 4 columns. Use a theme icon or upload your own.
Why for youAudience cards: "If you're... then this is for you."
StatsLarge numbers with labels and optional sources.
TestimonialCustomer reviews as cards that rotate, with neighbors peeking in at the sides. Each review is its own block (quote, name, detail, photo, verified badge, stars). Autoplay is optional, shows a pause button and never runs for shoppers who prefer reduced motion.
PressA row of press logos with optional short quotes.
Customer photosA photo grid that opens in a lightbox, with a credit and an optional "Shop the look" product.
Comparison tableYour product against 1 to 3 competitors, with check, cross or text in each cell. Scrolls sideways on phones with the first column pinned.
FAQQuestions and answers in accordions, with optional topic filters and an optional link back to the buy box.
Reverse riskYour guarantee, returns and shipping promises.
Founder notePortrait, pull quote, letter, video and signature. On desktop the shorter column stays in view beside the taller one.
ManifestoOne large statement on a plain, tinted or dark background.

Section buttons#

Every story section (except Story chapter, which has its own link) has a Button group in its settings:

  • Button label: leave it empty for no button.
  • Button action: Link (any page), Add to cart or Buy it now (goes straight to checkout).
  • Product: for Add to cart and Buy it now. On a product page, leave it empty to use the product shown, with the variant, quantity and purchase option the shopper picked.
  • Button style: Filled or Outline.

Starter stories#

The Product story section has three presets: Product story, Supplement story and Tech story. Each one adds a full set of modules with rail messages filled in. Replace the copy with your own.

A different story for each product#

Text and image settings in story sections can connect to product metafields. Click the dynamic source icon next to a setting and choose a metafield. One product template can then show a different story for each product.

Keep claims honest#

  • Use real customer quotes and real numbers.
  • Add sources to ingredient claims and stats.
  • Use the Ingredients footnote for any disclaimer your products need.
  • Keep comparisons with competitors accurate and current.

Block limits#

Shopify allows 50 blocks per section, including the items inside story sections. On long product pages, put large modules (a long FAQ or a big comparison table) in their own section instead of inside the Product story.

6. Other sections#

Heroes (in the Hero category):

  • Hero, editorial: a full-width image or video with a headline and up to two buttons. Videos play muted and loop, with a pause button. They don't autoplay for shoppers who prefer reduced motion.
  • Hero, split: image on one side, text on the other. Set Image ratio to Fit to screen to fill the first screen below the header, so the whole hero sits above the fold. Set a focal point on the image (Content > Files) to keep the subject in frame.
  • Hero, statement: a large text-first opening.

Editorial (in the Editorial category): Quote, Pull quote, Editorial articles and Editorial newsletter.

Utility (in the Utility category): Spacer (separate heights for phones and desktop) and Divider (line, dotted, double or accent, with an optional symbol in the middle).

Commerce: Featured product, Featured collection, Collection list, Product related (complementary or related products from Shopify, or products you choose), and Product recommendations.

Content: Image banner, Image with text, Multicolumn, Collage, Rich text, Newsletter, Contact form and Custom Liquid.

7. Collections, search and filters#

  • Filters on collection and search pages come from Shopify's Search & Discovery app. Set which filters to show there: availability, price, product type, vendor, variant options and more.
  • On phones, filters sit behind a Filter button so products show right away. It opens a panel with Apply and Clear all; active filters appear as small chips above the products. On desktop, filters are a sidebar.
  • The product count shows under the collection title.
  • For complementary products (used by Product related), also use Search & Discovery.

8. Apps#

  • Product hero and Product story accept app blocks. Add them from the Apps tab when adding a block.
  • Use the Custom Liquid block or section for app snippets that don't come as app blocks.
  • Follow on Shop: shows in the footer when your store is set up for it in Shopify. You can turn it off in the footer settings.

9. Languages#

All theme text is translatable. Add languages in Settings > Languages and edit the theme's wording with Edit translations or the Translate & Adapt app.

10. FAQ#

The rail doesn't appear on my product page.

Check that the product uses the default product template with the Product hero section. The rail appears only after the buy box scrolls out of view, so scroll down past it. It doesn't appear on the standard product template.

The rail message doesn't change as I scroll.

Each story section needs its own Rail message. Blank messages fall back to the default in Theme settings > Conviction Rail.

The rail says "Add to cart" even though I chose "Subscribe and save".

That label shows only when the product has subscription plans. Check your subscription app is set up for this product.

Swatches don't show.

Set the product's Category, connect the Color option to the Color category metafield, and set Variant picker style to Swatches. See "Color swatches" in section 3.

Bundle tiers don't show a saving.

Savings come from the compare-at price. Set a compare-at price higher than the variant price on each pack variant.

I don't see Purchase options.

They appear once a subscription app has added a selling plan to the product. One-time purchase is always the default.

Can I use my own fonts?

Conviction uses Shopify's font library, which works on every device and loads fast. Choose any font there in Theme settings > Typography.

How do I show a different story on each product?

Connect story text and images to product metafields with the dynamic source icon. See section 5.

Can I add apps like reviews?

Yes. Add their app block to the Product hero or Product story, or use a Custom Liquid block.

The free shipping bar shows the wrong amount.

Set Free shipping threshold in Theme settings > Cart to match your shipping rates, or set it to 0 to hide the bar. The threshold is in your store currency, so the bar stays hidden for shoppers paying in another currency.

Discounts in the cart.

Discount codes and automatic discounts show on the line they apply to, and order-level discounts show between the subtotal and the total. Nothing to set up.

How do I get help?

Contact support. Include your store URL and screenshots. We reply within 2 business days.

Version history#

1.0.0: First release. Adaptive Conviction Rail; 26 story, proof and editorial sections built on theme blocks; story presets; Pinned story sequence; rotating reviews; section buttons (link, add to cart, buy it now); selling plan picker and bundle tiers; swatches and swatch filters; quick buy; image zoom; mega menu that falls back to the menu button when it doesn't fit; phone filter panel; Fit to screen hero; French, German, Spanish and Italian.

Still stuck?

The person who built Conviction answers, within 2 business days.

Contact support