Components
Every Shop Canvas component, what it does, and which ones bind to the Products CMS fields.
Components are ordinary Framer code files in your project. The plugin installs and updates them, and you can edit them. Edit protection (review, keep my file, back up and replace, recovery) is in the current development plugin and is still an open release check; before using Components → Install on an edited project, duplicate the project or back up your code files, because the delivered installer can overwrite edits (see Plugin → Components and Release status). All of them read the runtime; only the product page components bind to CMS fields.
Bindings
| Page | Components | Binding |
|---|---|---|
| Home | Related Products (Newest) | none — self-renders |
| Shop | Catalog, Catalog Controls, Catalog Filter, Related Products | none — self-renders |
Product /products/:slug | Product Gallery, Product Price, Product Variants, Quantity, Stock Status, Add to Cart, Related Products | yes — bind to the item's CMS fields |
| Cart | Cart Lines, Cart Controls, Cart State, Cart Modal | none — reads the live cart |
On the product page, bind each control to the matching Products field: Product ID → Product ID, Variants → Variants, Product Gallery Image 1…8 → Image 1…8, Product Price → Price / Compare Price, Stock Status and Quantity → Product ID, and text layers → Title / Description. On a freshly remixed starter these bindings are already in place.
Catalog
Catalog
Loads products from the Storefront API and renders a filterable, sortable, paginated grid with search and favourites.
Catalog Controls
A search box, sort dropdown and result count that drive a Catalog’s state.
Catalog Filter
Price, option, tag and availability facets for a Catalog, as buttons, checkboxes or swatches.
Favorite Button
A favourite toggle that persists in the browser and syncs with the Catalog’s favourites filter.
Product Strips
Compact product rows to sit under a video, a lookbook or an editorial block.
Related Products
Newest, best-selling or related-by-collection products; it reads the runtime directly, so it needs no CMS binding.
Size Picker
One product card, several pack sizes: pills switch the price and what the button adds, without a trip to a product page.
Product page
Product Gallery
Main image and thumbnails from the item’s Image 1…8 fields, bound on the product page.
Product Price
Price and compare-at price for a product or its selected variant, formatted per market and currency.
Product Variants
Option pills for size, colour and more that update the price, availability and the add-to-cart target.
Quantity
A quantity stepper that feeds the add-to-cart action, with inventory-aware limits.
Stock Status
A live in-stock, low-stock or sold-out badge from the Storefront API.
Add to Cart
Adds the selected variant and quantity to a real Shopify cart through the runtime, with adding, added and sold-out states.
Size Guide
Renders a size chart as a real table from a compact string, rather than as a flat image.
Accordion
One question, one answer, one toggle. A CMS-friendly accordion for FAQs and product details.
Product Page starter
One selected product, wired by the plugin from Insert. Canvas snapshots are never used to authorize purchases; live Shopify data supplies options and prices.
Cart
Cart Lines
Image, title, variant, quantity stepper and remove for each line, bound to the live cart.
Cart Controls
Subtotal, discount code and checkout button. The button opens the real Shopify checkout.
Cart State
Shows the Empty slot or the Populated slot depending on whether the cart has anything in it.
Cart Modal
A self-contained cart drawer. It opens whenever anything on the page adds to the cart and reads the live cart from the runtime.
SEO and utility
Product JSON-LD
Emits Product structured data with an Offer (price, availability, rating) for the product page. Whether a search engine shows a rich result is its decision.
FAQ JSON-LD
Emits FAQPage structured data for the questions on this page. Whether a search engine shows a rich result is its decision.
Modal
One component with three roles — the modal, its trigger and its close control — used for the discount popup.
See them on a live store
Explore the live demo store to see product, variant, cart and checkout behaviour in a published storefront. It is a demo of the storefront, not an item-by-item inventory of every component.