Build your store

One guide per page of a real store, built with the component library and the starter.

On this page

Product page

Build the product page: The Shopify product on the template page of your Products collection. 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 Collection list, what a card shows, one card per colour, and the variant's swatches.

Build the collection page: The template page of your Collections collection. Covers the page URL, the collection details, and the two ways to list its products, a Collection list of product cards 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 designed in Webflow. Covers the block, every filter type, sorting, the count and active filters, pagination with page numbers and links that keep the filters.
Product lists without the CMS: 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 Webflow page per Shopify vendor (brand), from the Vendors collection the sync fills. Covers the template 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 five 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 Webflow 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. Covers the order list and its pages, the order page with its products and shipments, status labels, printing, and the Buy again button that puts an order back in the cart.
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 Webflow Dropdown, 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 Webflow's Popover element or two custom attributes, and the rules for option pickers in a popover.
Toasts: Short messages you design in Webflow 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.