Paragon documentation · Version 1.0.0
Paragon theme guide
Everything you need to set up and customize Paragon. Unless a step says otherwise, the features here are built into the theme and don't need an app.
Getting started
Add Paragon from the Theme Store. It appears in Online Store > Themes in your Shopify admin. Click Customize to open the theme editor, where you change sections, blocks and theme settings and see the result as you go. Your live store doesn't change until you click Publish.
- Add your products and collections first, so the editor shows your own content instead of placeholders.
- Set up your menus in Content > Menus. The main menu supports three levels. The footer shows your main menu and a second menu of your choice.
- Choose your colors and fonts in Theme settings (the gear icon in the editor).
- Build your home page from the sections in the sections reference.
- Preview on mobile with the device toggle at the top of the editor, then publish.
Image sizes. Use photos at least 2000px wide for full-width sections such as the hero slideshow, split hero and collection header. For product photos, keep one aspect ratio across your catalog (square or portrait) so product grids line up.
Theme settings
Open the theme editor and click the gear icon. Each group below matches a heading in that panel.
| Group | What it controls |
|---|---|
| Colors | Primary, Secondary, Accent, Background, Text, Text (light), Border, Sale price, Error and Success colors. Text on accent-colored buttons and badges switches between light and dark automatically to stay readable on the accent you pick. |
| Typography | Heading font and Body font from Shopify's font library, plus base sizes and line heights. |
| Layout | Page width, Spacing unit, Border radius and Button border radius. |
| Animations | Enable scroll reveal animations fades sections in as shoppers scroll. Animations turn off automatically for visitors whose device is set to reduce motion. |
| Product features | Turn the wishlist, quick view, color swatches on product cards, recently viewed products and the sticky add to cart bar on or off. |
| Favicon | The small icon in browser tabs. Use a square image, at least 32×32px. |
| Social media | Links to your social profiles (shown as icons), and sharing buttons on product pages. |
| Cart | Cart type: Drawer (a slide-out cart) or Page. Show order note in cart drawer lets shoppers leave a note. |
| Currency format | Show currency codes adds codes such as USD to product prices, useful when you sell in several currencies. |
Header and navigation
Paragon's header is the Mega menu section. It holds your logo, menu, search, account, wishlist and cart icons, and can stay fixed to the top as shoppers scroll.
Dropdowns and mega menu panels
- Any top-level menu item with child links gets a dropdown automatically.
- For a wider panel, add a Mega column block to the Mega menu section. Set Parent link to the top-level menu item's title exactly as it appears in your menu (for example
Shop). - The panel shows the item's child links as columns. It can also show featured products from a collection and a promo image with a heading, text and link.
Announcement bar
Add up to five messages, each with its own link and colors. They rotate on a timer you set, and shoppers can dismiss the bar.
Country, currency and language selectors
The selectors appear in the header and footer when your store sells in more than one market or language. Manage those in Settings > Markets and Settings > Languages.
Product pages
The product page is built from blocks in the Product information section. Drag blocks to reorder them, or remove the ones you don't need.
| Block | What it does |
|---|---|
| Title, Price, Vendor, Description, SKU | Product details. Price shows the sale price and unit price when set. |
| Variant picker | Options such as color and size. If you assign an image to each variant in Shopify admin, choosing that variant shows its photo. Price, SKU and stock update instantly. |
| Quantity selector, Buy buttons | Add to cart, plus the Buy it now button when you turn on accelerated checkout. |
| Selling plan picker | Subscription and purchase options, when your products have selling plans from a subscription app. |
| Inventory status | In stock, low stock and sold out messages for the selected variant. |
| Pickup availability | Shows whether the variant can be picked up at your locations that offer local pickup. |
| Shop Pay Installments | The installments message, when Shop Pay Installments is available on your store. |
| Complementary products | "Pairs well with" products. Set them up in Shopify's free Search & Discovery app under Product recommendations. |
| Related products | Products Shopify recommends automatically. |
| Collapsible tab | A heading that opens to show text or a page, for details such as materials or care. |
| Size guide | A link that opens your size guide in a popup. See Size guide. |
| Back in stock form | Shows on sold-out variants. See Back-in-stock requests. |
| Wishlist button | Save this product to the wishlist. See Wishlist. |
| Share, Custom Liquid | Sharing links, and a place for your own code. |
| Apps | App blocks, for example a reviews app's star rating. |
Product pages can also include these sections: Product tabs, Bought together, Product recommendations, Recently viewed and Sticky add to cart. Details are in the sections reference.
Size guide
- Create a page with your measurements in Online Store > Pages, for example "Size Guide". Tables work well.
- In the theme editor, open a product template and add the Size guide block.
- Choose your page in the block, or type the content into the block itself.
The guide opens in a popup, so shoppers stay on the product page.
Back-in-stock requests
Add the Back in stock form block. When the selected variant is sold out, shoppers can leave their email address. Each request is sent through Shopify's contact form to your store's contact email (Settings > Store details), with the product and variant included. Paragon doesn't send restock emails automatically: reply to the shopper when the item is back, or use a restock app if you need automated alerts.
Sticky add to cart
Add the Sticky add to cart section to your product template and make sure Enable sticky add to cart bar is on in Theme settings > Product features. The bar appears once shoppers scroll past the main add to cart button, and follows the options they choose.
Collection pages
The Collection section shows your products with filters and sorting. Its settings: Show collection title, Show collection image, Show collection description, Products per page, Columns, Enable filtering and Enable sorting.
Filters
Filters come from Shopify's free Search & Discovery app, where you choose which ones to show: availability, price, product type, vendor, options such as size and color, and more. Paragon displays whatever you set up there, on collection pages and on search results (Search results section: Enable filtering and Enable sorting).
Collection header
The default collection template opens with the Collection header section: the collection's image as a banner, with the title, description and product count over it. The image scrolls at a slower speed than the page (parallax). If you use the header, turn off Show collection title and Show collection image in the Collection section so they don't appear twice.
Cart
- Cart drawer (the default): adding a product opens a slide-out cart where shoppers change quantities, remove items and add an order note without leaving the page.
- Cart page: set Cart type to Page in Theme settings > Cart. The cart page has its own settings for notes, accelerated checkout buttons and a discount code field.
Shopping tools
Quick view
Product cards get a quick view button that opens the product's photo, price, options and add to cart button in a popup. Turn it off with Enable quick view on product cards in Theme settings > Product features.
Wishlist
Shoppers save products with the heart on product cards, or with the Wishlist button block on product pages. The header shows a count, and the heart icon opens a drawer listing everything saved. To show the header icon, turn on Show wishlist icon in the Mega menu section.
The wishlist is saved in the shopper's browser, so it works without customer accounts or apps. It doesn't sync between devices.
Color swatches
Products with more than one color show swatches on product cards. Choosing a swatch swaps the card's photo to that color's variant image.
- Swatches appear for the product option named Color.
- Paragon uses the color or image you set for each option value in Shopify admin (the color swatches Shopify offers when an option is linked to the Color category metafield).
- If none is set, Paragon recognizes about 50 common color names, such as Navy, Olive, Heather Grey, Sand and Charcoal. A color it doesn't recognize shows the first letter of its name instead.
Recently viewed
Turn on Track recently viewed products in Theme settings > Product features, then add the Recently viewed section to a template. Products are remembered in each shopper's browser.
Alternate templates
Paragon includes extra templates you can assign to individual products, collections and pages. In Shopify admin, open the item and choose the template under Theme template.
| Template | Use it for |
|---|---|
product.spotlight | Hero products. Opens with a large feature panel before the product details. |
product.with-tabs | Products with a lot of detail. Description, shipping and size information sit in tabs. |
collection.minimal | Collections that should go straight to the products, with no banner. |
collection.with-parallax | Feature collections. A taller parallax image header, and a newsletter signup below the products. |
page.about | Your About page, with a split hero, brand timeline and testimonials. |
page.faq | An FAQ page: your page text followed by the FAQ section, which adds question markup for search engines. |
Languages and theme text
- Change any theme text, such as button labels or "Sold out", in Online Store > Themes > ⋯ > Edit default theme content.
- Sell in other languages by adding them in Settings > Languages and translating your content with Shopify's Translate & Adapt app. All of Paragon's text, including screen reader labels, can be translated.
Accessibility and performance
- Paragon supports keyboard navigation, visible focus states, labeled controls and reduced motion. Keep it that way by adding alt text to your images in Shopify admin, and choosing text colors with enough contrast against your backgrounds.
- Images are served in sizes that fit each screen. Upload high-quality originals and Shopify handles the rest.
- Every app you install can add scripts to your store. Paragon's wishlist, quick view, swatches, size guide and back-in-stock form replace apps you might otherwise need.
Updating Paragon
When a new version is released, Shopify shows an update notice in Online Store > Themes. Updating adds the new version to your theme library with your theme editor settings and content. Changes you made to the theme's code aren't carried over, so keep a note of them. Before editing code, duplicate your theme so you have a copy to go back to.
Release notes
1.0.0: First release
- 34 sections, including hero slideshow, video and split heroes, image hotspots, shoppable gallery, before/after slider, product comparison, collection tabs, countdown timer, brand timeline and testimonials.
- Built-in shopping tools: cart drawer, quick view, wishlist, color swatches on product cards, size guide popup, back-in-stock requests, sticky add to cart, bought together and recently viewed products.
- Mega menu with featured products and promo images.
- Six alternate templates: product Spotlight and With tabs, collection Minimal and With parallax, and About and FAQ pages.
- Filtering and sorting on collection and search pages with Shopify's Search & Discovery app, predictive search, multi-currency and multi-language support.
- Every section heading can carry an optional label and description.
- All shopper-visible text, including screen reader labels, can be translated.