Build your store

One guide per page of a real store, built with Astro components.

On this page

Components

Write components with Smootify elements: Build .astro components with Smootify's elements and attributes, and the plain-HTML markup that replaces dropdowns, sliders, tabs and form messages.

Build the product page: The Shopify product on the product page of your Astro site. Covers title, price, gallery, options, add to cart and stock, and says what Smootify needs and what is up to your design.
Product gallery and media: The product's images, videos and 3D models in depth. Covers how the gallery parts work together, galleries that follow the variant, videos outside the gallery, single images by position and image sizes.
Swatch colours and images: Where the colour and image of a swatch come from, Shopify's native swatches and the option metaobject, how to set each one up in Shopify, and how to show swatches in pickers and on product cards.
Metafields on the page: Show the Shopify metafields of a product and its variants. Covers what each type shows, lists, values written into attributes, colours, JSON, references, ratings, and elements shown or hidden by a metafield.
Gift cards: Sell Shopify gift cards on the product page, with the optional fields that send the card to someone else by email, on a chosen day, with a message.
List the variants: Repeat a block once per variant of a product with smootify-variant. Covers variant cards in a list of products, what a card shows, one card per colour, and the variant's swatches.

Build the collection page: The page of each collection in your store. Covers the page URL, the collection details, and the two ways to list its products, cards rendered by Astro or search & discovery.
Product cards: A product card is a smootify-product that shows one product in a list. Covers what a card needs, what it can show (price ranges, option values, badges), adding to cart from a card, cards in a slider and placeholder cards.
Filters, sorting and pagination: Search & discovery lists products live from Shopify, with the filters of Shopify's Search & Discovery app, sorting and pagination written in your components. Covers the block, every filter type, sorting, the count and active filters, pagination with page numbers and links that keep the filters.
Product lists from Shopify: Best sellers, newest products, related and complementary products, a custom query, one collection or the products in a metafield, filled straight from Shopify with one attribute on smootify-product.
Vendor pages: One page for each Shopify vendor (brand), from the vendors content collection. Covers the page and its URL, listing the vendor's products, and linking to the page from a product.

Build the cart: The cart as a page or as a mini cart that opens over the page. Covers the line template, totals, quantity and remove, the empty state, errors, checkout, and the ways a cart can open.
Discounts, notes and progress bars: The parts you add to a cart - discount code and gift card fields, the list of discounts, a note and other fields saved on the order, a free shipping progress bar and a countdown.
Cart upsells: Product suggestions based on what the visitor just added to the cart, shown in the mini cart, on the cart page or anywhere on the page.

Customer accounts: Let customers log in on your site with Shopify's customer accounts. Covers the Shopify set-up, the key Smootify needs, login and logout, the customer's details, the customer conditions and the pages only logged-in customers can open.
Addresses: Show the logged-in customer's saved addresses and let them add, edit and delete them. Covers the address list, the field names of the address forms, and the country and province selects.
Orders and buy again: Show the logged-in customer's orders and quotes. Covers the order list and its pages, the order page with its products and shipments, status labels, printing, the Buy again button, return and removal requests, and the list of quotes.
Subscriptions in the account: Let customers see and manage their subscriptions on your site. Covers the subscription list, the subscription page with its products, status labels, and the forms that pause, resume and cancel a subscription.
Customer data and newsletter: Let logged-in customers see and change their own data, and collect newsletter sign-ups from any visitor. Covers the name form, customer metafields shown and edited, the email subscription, store credit and the newsletter form.

Predictive search: A search field that shows products and search suggestions as the visitor types, in a popover or right on the page. Covers smootify-search, its regions, the result template and the link to the search page.
Search results page: A page that lists every product matching a search, from the words in its address or typed in its field, with a count, pagination and an empty state. Covers smootify-search-page and how visitors reach it.

"Navbar: cart, search and account": Where the store parts go in a navbar - the cart and its count, the search, the login and account links, and the country switcher - and what each one must be inside.
Popovers: Which Smootify parts can open in a popover, how to build one with two attributes, and the rules for option pickers in a popover.
Toasts: Short messages you write in your components that appear for a few seconds when something happens - a product added to the cart, a wishlist change, a form sent, a link copied, an error from the cart.