Sell online
Sell from your own pages
Your storefront is your website. Collection pages, product pages, search, the cart, checkout and customer accounts all run on pages you publish, filled with your live products.
On this page
The pages your store runs on
Your storefront is not a separate shop template. Store pages are pages on your own site, designed with your theme’s store sections in the visual editor and published like any other page. When a shopper opens one, Mirin fills it with your live products.
Low Tide Wine Co.
Staff Picks
| Page | Address on your site | What it does |
|---|---|---|
| Collection pages | /collections/staff-picks | Show the products in one collection, with the filters and sort orders you set in Search & filters. |
| Product pages | /products/bordeaux-rouge-2021 | Show one product with its price, stock and details. |
| Search results | /search | Show the products that match what the shopper typed. |
| Checkout | /checkout | Collects contact, delivery and card details, then takes payment. |
| Order confirmation | /checkout/confirmation | Opens only from the private link checkout sends the shopper to. |
Publish the checkout page before you sell
Checkout needs a published page at /checkout. Until one exists, that address shows a page not found, so shoppers cannot pay.
Design store pages with your own products
One Product page design serves every product, and one Collection page design serves every collection. While you design them, the editor fills them the way your live site does, so you arrange a real product, a real collection and your real checkout form instead of placeholder values.
Open the address to choose what a store page is shown with, or add this wine to the cart.
Low Tide Wine Co.
Bordeaux Rouge 2021
$28.00was $34.00
In stock
Dark cherry, soft tannins, made for a weeknight dinner.
- Product page
- Shows one of your products with its picture, price and stock. It starts with a product that is in stock, newest first, until you choose another.
- Collection page
- Shows one of your published collections with its products, filters and sort orders. It starts with the collection that holds the most products.
- Checkout
- Runs your real checkout form with a sample cart, so you see the steps a shopper takes. See checkout in the editor.
- Nothing is saved into the page
- Your store’s data is laid over the page only while it is drawn. The design stays one design for every product, and the live page is still filled from its own address.
Choose the product or collection you design with
- Open the page switcher. It is the address above the preview, and its search box reads “Find page or enter path”.
- Choose a product or a collection. Your products are listed under Product page and your collections under Collection page, by name and address. Search finds them too.
- Design with it. The page is shown with your choice, and the address above the preview becomes its real one, such as
/products/bordeaux-rouge-2021. Open this page in a new tab opens that same address.
Your choice is remembered for that page in the browser you are using, so the page opens with it next time. The switcher offers up to 100 products and 100 collections, and only ones a shopper can open.
Shop your store the way a shopper does
In Preview, your store pages work the way they do on your live site. Add a product to the cart, open the cart, change quantities and go on to checkout without leaving the editor, so you walk every step a shopper takes before you publish.
- Add to cartOn your Product page, as a shopper would.
- Open the cartThe cart drawer or your Cart page.
- Change quantitiesThe totals follow.
- Go on to checkoutWith the same cart.
One cart follows you. What you add on a product page is still there on the cart page and at checkout as you move between pages.
Links stay in the editor too. In Preview, a link to one of your site’s own pages opens that page in the editor.
- The cart and checkout. Open your Cart page and your Checkout page in the editor.
- A product card. Opens your Product page design, shown with that product.
- A collection link. Opens your Collection page design, shown with that collection.
- A link to anywhere else. Opens your live site in a new tab.
Nothing can be paid for in the editor
Any cart that begins in the editor is a sample cart, so you can press Pay without a card being charged or an order being made. See checkout in the editor.
Which products a page shows
You do not add products to pages one by one. Each store section reads from your catalog, so a change in Products or Collections reaches every page that shows it.
- A collection page
- Shows the products in that collection when a shopper opens it. Choose products by hand or with rules in Collections.
- A featured products section
- Shows live names, prices and pictures for the products it features, wherever you place it.
- Search results
- Show the products that match. Synonyms and redirects in Search & filters change what a search finds.
- Every list
- Skips the products your visibility checks hide, such as sold out bottles.
Group products the way shoppers browse in Collections, then point a page at the collection.
A product missing from every list
A check under Product visibility is hiding it, such as a missing image or a bottle with no weight. See what your checks hide and which check it is.
A collection page loads more products as shoppers scroll, and its address keeps up, so a refresh or a shared link returns to the same spot. Opening that link shows every product from the top of the collection down to that point, with the count beside Load more to match.
Filters imported from Shopify show readable labels, such as a country name, for linked values. Selecting a label finds the same products included in its count. Empty values and unresolved Shopify references do not appear as filter choices.
A text field gives each product one choice, written as you entered it, so a region such as Régnié, Beaujolais, France stays a single choice. A list field gives one choice for each item in it. To offer each grape in a blend as its own choice, turn on Each comma starts a new option for that filter in Search & filters.
The cart
Add to cart puts the bottle in the shopper’s cart and updates the count in the header.
Low Tide Wine Co.
Bordeaux Rouge 2021
$28.00was $34.00
In stock
Dark cherry, soft tannins, made for a weeknight dinner.
It stays on the shopper’s device, so it is still there when they come back to the site.
When a discount code cannot apply
Shoppers enter discount codes in the cart. When a code cannot apply, they see the reason:
- Code is not valid
- Discount has expired
- Discount usage limit reached
- Cart does not contain items eligible for this discount
After too many wrong codes in a row, the shopper is asked to wait a moment before trying again. A free shipping code takes the shipping charge off rather than lowering prices. You create codes in Discounts.
Checkout
Checkout collects the shopper’s email, how the order reaches them and their card. Cards are charged through the Stripe account you connected in Store setup.
Low Tide Wine Co.
Secure checkout- Contact and deliveryTheir email, and how the order reaches them.
- Pay by cardCharged through your Stripe account.
- The order appearsUnder Orders.
- Confirmation goes outWith a private link to the confirmation page.
The confirmation page opens only from the private link checkout sends them to, so nobody can look up someone else’s order.
Tax is added from the state in the shipping address. For a pickup order, the state of the pickup location is used instead. Delivery options come from Shipping and delivery.
Checkout pages are never cached, so every shopper always sees their own cart and totals.
Checkout in the editor uses a sample cart
Your Checkout page and your cart page are never empty to design against. Open Checkout in the visual editor and it shows its real steps, such as Contact, Delivery and Payment, with at least one product from your store in the order summary. A cart page gets the same sample cart. If you have been shopping in the editor, both show what you added. The page switcher figure above has one to try.
- At least one product from your store
- The sample cart starts with one product a shopper could buy right now, and holds whatever you add while you shop in the editor. If you emptied it, opening checkout puts the sample product back in the same cart. A store with nothing to sell yet shows the page with an empty cart instead.
- Your real delivery and tax
- Delivery options, shipping rates and tax are your store’s own, because the sample cart goes through the same checkout a shopper’s cart does.
- Nothing can be paid for
- Any cart that begins in the editor is a sample cart. Press Pay and your store refuses and says so: “This is the page builder, so nothing can be paid for here. Open your live site to place a real order.” No card is charged and no order is made. A subscription or wine club sign up tried in the editor gets the same answer.
- It is not a shopper
- A sample cart is never counted among your shoppers’ carts. One is kept for the browser you are using, follows you from page to page, and is reused each time you open the editor.
Search and filters
Open Website settings, then Store, then Search & filters. Store defaults apply to every list. Per collection lets one collection follow the store or decide each check for itself. Search results tunes what a search reads and finds. Every change saves as you make it.
Website settings
Low Tide Wine Co.Search & filters
How shoppers search and narrow your catalog: the filters they see, the sort orders, and what stays hidden.
Product visibility
Checks that run on every storefront list. Turn one off to stop hiding products that fail it. 2 of 3 on.
| Rule | On |
|---|---|
Has a product image Hide products that don’t have at least one image attached. | |
In stock or allows backorder Hide products that are both out of stock and don’t allow backorders. Products with inventory tracking disabled are always shown. | |
Has a price greater than zero Hide products with no price or a price of 0. These are usually unfinished imports or placeholders. |
Sort orders
The orders shoppers can pick, and the one a list opens in. 3 of 4 offered.
| Order | Offered | Sort | Source | Opens in |
|---|---|---|---|---|
Newest Arrivals | Built in | Default | ||
Price Low to high | Built in | |||
Price High to low | Built in | |||
Name A to Z | Built in |
On the storefront
Staff Picks
- Bordeaux Rouge 2021$28.00
was $34.00 - Riesling Eola-Amity Hills$24.00
- Sparkling Brut$36.00
- Product visibility
- Five checks, such as Has a product image and Has a shippable variant. Each runs on every storefront list, and Hides counts what it keeps off your store. See what your checks hide.
- Sort orders
- The sorts shoppers can pick, in the order they appear. Make default sets the one a list opens in.
- Filters
- What shoppers can narrow a list by. Add filter adds one from your product details and custom fields.
- Synonyms and redirects
- Under Search results. A synonym group makes words find the same products. A redirect sends a word straight to a page.
A filter on a text custom field offers each product’s value as one choice, commas and all, so a region such as Régnié, Beaujolais, France stays whole. When one field lists several values, such as grapes, edit the filter and turn on Each comma starts a new option. Chardonnay, Pinot Noir then becomes two choices, and shoppers who pick Pinot Noir find every wine that lists it. List fields already give one choice per item.
A Producer filter on your producer custom field counts each maker once, however the name was typed. Mae's Cidery and Mae’s Cidery, or Ridge Line Wines and Ridge-Line Wines, show as one choice with every bottle under it. A link that leaves off a final period, Harbor Wine Co for Harbor Wine Co., still opens the same bottles. Turn a filter off and a link that still uses it opens the whole list, never an empty page.
Size and price filters apply to the same variant. If a 375 mL bottle costs $22 and a 750 mL bottle costs $42, a $30 maximum shows the $22 bottle and quick add uses that size. Selecting 750 mL with that maximum excludes the product. Price sorting follows the price shown on each result. Your stock visibility settings still apply, including variants that allow backorders.
How a search finds and orders products
A search finds a product when every word typed starts a word in its title, vendor, product type, tags, collections or description, with or without accents. So gin finds your gins but never a wine whose notes say original. Product details reads the grape, region, appellation, producer, farming and style fields your products carry, and the collections they are in, so regnie finds a bottle whose region says Régnié. Turn it off under Search results if those fields do not describe your products. Shoppers can pick any other sort and come back to Relevance.
- Best matches first
- A search opens in Relevance. A word in the product name ranks highest, then the maker in vendor or a producer field, then the product type, tags, product details and collections, then the description. The weight beside each field under Search results moves it up or down.
- Wine names
- A grape also finds the wines named for it. A search for gamay shows your Fleurie, Morgon and Beaujolais, and syrah finds Shiraz. A bottle with the grape in its name still comes first.
- In stock before sold out
- Among equally good matches, products that can ship now come first, then your best sellers of the last 90 days.
- Typos forgiven
- When nothing or almost nothing matches, each word is checked against the words in your own catalog. A search for beaujolias shows your Beaujolais wines, and sancere finds your Sancerres even when one bottle’s own name is spelled that way.
- Suggestions as they type
- The suggestions under the search box rank products the same way. They never offer cart, checkout, account or sign in pages, and they only offer a collection that has products to show, with the count its page shows.
The search box on your site can find pages and collections too. Choose what it searches, and in what order, in Global search.
Customer accounts
Shoppers never make up or forget a password. They enter their email, receive a code and type it in to sign in.
Low Tide Wine Co.
Creating an account with an email that already has one shows Account already exists. Log in instead. A wrong or old code shows Invalid or expired verification code. What a signed in shopper sees next comes from your theme’s account pages.
Codes need your email connection
Sign in codes are sent through your own email connection. Connect it under Website settings, then Email, and finish its checks. Until then, shoppers do not receive a code.
The people behind the accounts are in Customers.
Found in search
Search engines only see the catalog you actually show. Products your visibility checks hide stay out of the sitemap.
- Your sitemap
- Published at
/sitemap.xml. It lists your pages, your collections and every product shoppers can reach. - Product details
- Product pages carry structured details that search engines read, such as the name, price and availability.
How your published pages reach visitors is covered in Preview and publish.