Component reference
All 28 components in the library, grouped the way the plugin groups them. Every component is added the same way: drag it from the plugin onto the canvas.
Product
| Component | What it does |
|---|---|
| Product Card | Complete product card with image, title, price and CTA — the building block for grids |
| Add to Cart | Pill-shaped purchase button with state-aware label |
| Quick Add Button | Compact add-to-cart for collection pages — auto-hides when out of stock, shows Select size / Max quantity / Adding states |
| Gallery (Auto) | Pulls product images from Shopify into a gallery — thumbnails left, main image right |
| Product image variant | Single image or thumbnail with Auto/Set modes, gallery navigation and variant-aware visibility |
| Product Variants | Unified variant selector — buttons, dropdown and color swatches |
| Variant Status | Prompt shown while no variant is selected — e.g. Select size |
| Product Price | Price with formatting, varying-price modes and variant snap |
| Price Compare | Original compare-at price with optional strikethrough |
| Price Discount | Discount amount or percentage — Save $20 or 30% off |
| Quantity Selector | Increment / decrement quantity control |
| Stock Status | In stock, only N left or out of stock, based on a threshold |
| Product Title | Dynamic title with optional vendor/brand line |
| Product Description | Expandable description with a Read more toggle |
| Product Accordion | Expandable info sections — description, shipping, size guide |
| Product Badge | Sale, New or Hot badge |
| Star Rating | Star display with an optional review count |
| Wishlist Button | Heart icon toggle, shared across pages |
| Social Share | Share the product on social platforms |
| Trust Badges | Row or grid of reassurance badges — free shipping, secure checkout, money-back, support |
Cart
| Component | What it does |
|---|---|
| Order Attribute Input | Collects order attributes (notes, personalization) and sends them to the Shopify cart |
Navigation
| Component | What it does |
|---|---|
| Search & Filter | Unified catalog toolbar — search, sort and collection filter; drives Product Card grids and native CMS lists live |
| Cart Icon | Cart icon with dropdown — item list plus View Cart and Checkout buttons, linked to Shopify |
| Breadcrumb Nav | Breadcrumb navigation trail |
| Back Button | Back link to the previous page or a custom URL |
| Info Link | Inline info link with an info, question or document icon |
Collection
| Component | What it does |
|---|---|
| Collection Titles | Animated collection title list with hover scroll — click a title to filter products; fonts, colors, animation and alignment are customizable |
Checkout
| Component | What it does |
|---|---|
| Shop Pay Button | Shopify's express checkout button for shoppers with saved Shop Pay details |
More on the way
Prebuilt Sections, full Pages and complete store Templates appear in the plugin as coming soon — they'll ship as ready-made layouts built from these components.