Chapter 03
Content and products in the CMS
Everything that repeats lives in the CMS: products, categories, journal posts. You change it in one place and every page follows.
Where your content lives
Open "CMS" on the left side of the editor. A shop template comes with several collections, for example:
| Collection | Contents | Where it appears |
|---|---|---|
| Products | one item per product | shop, product page, home |
| Categories | categories or collections | shop filter, collection pages |
| Journal | posts, recipes, news | journal and home |
The exact names depend on the template.
Add a product
The quickest way is to copy an existing demo product and change it. That way every field stays filled in correctly.
- Open the Products collection and select a demo product.
- Duplicate it (right-click the item).
- Change the name, description and price.
- Replace the images. Use the same format as the demo images to keep the grid calm.
- Check the slug. It sets the address of the product page, for example
/shop/mango-chews. Lowercase letters, numbers and hyphens only. - Pick the right category if the template has one.
- Publish the site ("Publish", then "Update").
Prices: display and checkout
The price field in the CMS is what visitors see on the page. At checkout, however, customers pay the price stored in your Stripe account. To keep both the same, the checkout plugin copies your CMS prices to Stripe (update products).
While doing so, the plugin fills the Stripe Price ID field (values like price_1Q…). Never edit this field by hand. The same goes for Stripe Variant IDs.
Variants, subscriptions and sold out
The Products collection has its own fields for this. How to fill them in is explained in update products:
- Variants: sizes or pack sizes with their own price, for example
1 Bag = 4.90; 3 Bags = 13.50. - Billing Interval: One-time, Week, Month or Year. Anything but One-time makes the product a subscription.
- Sold Out: a switch for products that are unavailable.
- Stripe Variant IDs: filled in by the plugin, like Stripe Price ID.
Images
- Good product photos make the biggest difference in a shop. Shoot against a calm background in the same light.
- Framer resizes and compresses images for you. Upload them in good quality (around 2000 px on the long side is plenty).
- Fill in the alt text for every image: a short description of what it shows. It helps people using screen readers and helps Google understand your page.
Journal and other pages
Journal posts work just like products. Copy on fixed pages (About, Shipping, FAQ) is edited directly in the editor: double-click the text.