Components
Galleries
Components for displaying product images.| Component | Description |
|---|---|
| Vertical Media Carousel | Scrollable vertical (or horizontal) image gallery with sticky floating thumbnails and zoom on hover. |
| Slider Media Carousel | Single-image slider with arrow navigation, thumbnail strip, and zoom on hover. |
Variant Selection
Components for letting users choose product variants.| Component | Description |
|---|---|
| Universal Variant Picker | Text-based option buttons (Size, Frame Style, etc.) for any Shopify option type. Place one per option. |
| Color Variant Picker | Circular color swatch buttons filled with each variant’s hex color. Hardcoded to the Color option. |
Filtering & Sorting
Components for filtering and sorting product listings.| Component | Description |
|---|---|
| Variant-Based Filter | Fetches all variants across your catalog and renders them as filter buttons. Stores the active filter in localStorage for a product grid to consume. |
| Price Sort Controller | Dropdown for sorting products by Recommended, Price Low → High, or Price High → Low. Stores the active sort in sessionStorage. |
Pricing
Components for displaying product prices.| Component | Description |
|---|---|
| Dynamic Product Price | Displays either the lowest variant price (Card mode) or the currently selected variant’s price (Product mode). |
Cart
Components for managing and displaying the cart.| Component | Description |
|---|---|
| Add to Cart Button | Adds the currently selected variant to the cart. Supports toast notifications and increments quantity if the item already exists. |
| Cart Product List | Renders all cart items as cards with product image, title, variant options, price, quantity stepper, and remove button. |
| Cart Item Counter | Displays the number of line items in the cart. Updates in real time via the cartUpdated event. |
| Cart State Controller | Switches between two child components depending on whether the cart is empty or has items. |
| Cart Total Price | Displays the total cost of all items in the cart with optional currency symbol and code. |
| Clear Cart Button | Wraps any element and clears the entire cart on click. |
Navigation
Components for navigating to Shopify pages.| Component | Description |
|---|---|
| Checkout Button | Reads the cart from localStorage, creates a Shopify cart via the Storefront API, and redirects to the Shopify checkout URL. |
| Shopify Profile Redirect Button | Wraps any element and redirects the user to their Shopify account page on click. |