Browsing Products & Search

Filtering, sorting, searching, quick view, and everything on a product detail page — image gallery, variants, stock, reviews, and related products.

Every store's homepage links out to its full catalog. This page covers the product listing (grid), search, and the individual product detail page.

The product listing

Go to All Products (or a category link from the store's navigation menu). Products load in a grid. Depending on the store's published listing template, the next batch can load from a Load more button, load automatically as you scroll, or stop after the initial batch.

Filters

Open the filter panel — a sidebar on desktop, a slide-in drawer on mobile (tap Filter). You can filter by:

Filter	How it works
Category	One category at a time, or "All categories"
Color	Multi-select swatches; matches products whose name or description mentions that color
Price range	A short list of preset bands (e.g. under $50, $50–$100)

Selected filters appear as removable chips above the grid. Clear all resets every filter and the search term together.

Sorting

Use the Sort by dropdown above the grid: Price (low to high / high to low), Popularity, Newest, or Rating.

When the store uses Maison

Maison listings use a warm editorial design with a desktop filter rail and applied-filter chips. The supported filters are Category, Price, and Colour, and Clear all resets them. Sorting offers Featured, Newest, Popularity, both price directions, and Rating.

On mobile, products appear in two columns and Filter / Sort open a bottom sheet. Use CLEAR to reset or SHOW N results to apply and return to the grid. Desktop product cards can show quick add on hover, but sold-out items do not. Where a card shows a quick-add control all the time (for example the plus button on a shop-page card), a sold-out product's control is disabled and reads Out of stock, so it cannot add the item to the cart (a pre-order product stays purchasable). A product sold by weight or measure counts as sold out here when its stock is below its minimum quantity, because the smallest allowed amount cannot be fulfilled. A product with more than one variant cannot be added straight from a card, so its quick-add control reads Select options (SELECT OPTIONS on Maison desktop) instead of a bare plus sign or Add; choose it to pick a size or colour first. Products with a single variant keep their usual quick add. The same rule applies to product cards in the home-page product sections (featured collection, new arrivals, best selling, trending, flash sale, recently viewed, and tabbed products): a multi-variant product shows Select options and takes you to its product page, while a single-variant product shows Add to cart. If an image cannot load, the card shows a designed Image unavailable placeholder instead of a broken image.

When filters return no products, the page doesn't leave you stuck. Your active filters stay on screen as removable chips (a colour swatch, or a price range such as Price 500 - 2000); tap a chip to remove just that filter. Clear filters drops every filter but keeps your category and search term. Back to previous results undoes your last change and takes you back to the listing you saw before it. All Products resets everything, including the category and search.

Search

Use the search bar in the header. What happens next depends on which header the store is using.

On the newer premium header templates: typing shows a live dropdown of matching categories and products as you type (desktop) or a full-screen overlay (mobile), each capped to a short preview list with a "Show more" option. Picking a category or product from that list goes straight to it. Pressing Enter, or choosing "Show more," instead takes you to a dedicated search results page at a URL like /search?q=your-term — the same grid layout as the product listing, with an empty-state message if nothing matches. Once you land on the results (or any other page), the mobile search panel and menu close on their own and the search box clears, so the results aren't hidden behind the open panel.

Search Style: Takeover

Some premium header templates offer a Takeover search style — see Search Style in the merchant-facing template guide. On those stores, opening search expands it into a full-screen overlay with a row of trending-search chips below the search field. Below the field, a preview grid follows what you type:

Nothing typed, or a single character — the preview grid shows "Popular right now": products for the store's single most-searched term over the trailing 30 days. This is the same fallback shown before you start typing.
Two or more characters — after a brief pause in typing, the preview grid re-queries and shows live results for what you've typed so far, with a heading such as Results for "shoe". The quoted word follows your search text. Keep typing. Live results for what you've typed so far, with a "Results for '{your text}'" heading. Keep typing and it keeps re-querying; each keystroke's result is discarded if you type again before it comes back, so you never see results for an outdated search.
Two or more characters, but nothing matches — the preview grid shows a "No matches found" message instead of an empty grid.

Clicking a trending chip takes you to that term's /search?q= results page, the same as pressing Enter after typing it yourself.

Why don't I see any trending searches?

Trending terms come from the store's own search activity over the trailing 30 days; a newer store with little search history yet may show no trending chips (or a smaller list) until enough customers have searched. The store falls back to recently added products in that case, so the "Popular right now" preview can still show something even with no trending searches yet.

Why doesn't the takeover grid update as I type?

The preview grid only starts following your typed text once you've entered at least two characters — a single character still shows the "Popular right now" fallback, which is expected. If you've typed two or more characters and still see the old results, it's usually mid-keystroke: the grid waits for a short pause in typing before it re-queries, so results lag slightly behind very fast typing. There's no separate admin setting for this behavior — it's built into the Takeover search style itself and applies to every store using it.

Header announcements and delivery checks

Some stores place moving announcements and a delivery-pincode check in the header, so these controls remain available while you browse.

Pausing a moving announcement

A scrolling Marquee announcement and a Rotating announcement with more than one message show a round pause/play button. Choose Pause announcement to stop the motion; the button then becomes Play announcement, which resumes it. A rotating announcement with only one message has no pause button because there is no automatic movement to stop.

If your device is set to reduce motion, a moving announcement starts paused automatically and the button begins as Play announcement. You can still start it yourself. This follows your device's accessibility preference and is not controlled by a store setting.

Checking a delivery pincode from the header

When the store has added a delivery check to its Utility Bar:

Enter the pincode

Type a six-digit pincode in the header field. The field accepts digits only and stops after six. The store may customise the field label, placeholder, and button text.

Start the check

Choose the button beside the field. While the request is running, the button reads Checking… and the form stays disabled so the same check is not submitted twice.

Read the result

The status underneath the form changes to one of these outcomes:

What you see	What it means
Delivery available · Estimated in N days	A shipping provider confirmed delivery and returned an estimate. For a one-day estimate, the message uses day rather than days
Delivery available	Delivery was confirmed, but no day estimate was returned
Delivery is not available for this pincode.	The completed check says that pincode is not serviceable
We couldn't check delivery. Try again.	The request failed, or the response was only a fallback without a confirming provider

Correct or retry if needed

If fewer than six digits were submitted, enter a complete pincode after Enter a valid 6-digit pincode. appears. After We couldn't check delivery. Try again., use the same button to try again; the input and button become available after the failed request finishes.

Not available and couldn't check are different outcomes

Delivery is not available for this pincode. is a completed negative result. We couldn't check delivery. Try again. means the storefront could not get a carrier-confirmed answer, so retrying later may produce a different result. The header check does not add products to the request, does not test COD, and does not reserve delivery; checkout performs its own order-specific checks.

Quick view

Hover (desktop) or tap the quick-view icon on a product card to open a lightweight preview dialog without leaving the grid — useful for a fast look before deciding to open the full product page. A sold-out product shows Out of Stock in the preview with its add button disabled. That includes a product sold by weight or measure whose stock is below its minimum quantity.

The product detail page

Click a product to open its detail page. What you'll find:

Product detail page contents

Image gallery — where the enhanced gallery is active, choose a thumbnail to change the main photo, use the zoom button to open a screen-filling viewer, or swipe between photos on a phone.
Variant selection — if a product has options (size, color, etc.), the choices sit in the purchase panel directly below the price. Picking a variant updates the price, stock, and linked photos. Color options set up as swatches show the merchant's exact chosen shade — or a plain text chip if the merchant hasn't set one. An unavailable choice reads Sold out when the store keeps unavailable values visible with text.
Stock status — the enhanced indicator reads In stock (N) for the selected item, using its current unit count, or Sold out when none remain. A product sold by weight or measure also reads Sold out when the stock left is below its minimum quantity, and Add to cart and Buy Now are disabled. It stays in the purchase panel near the quantity and purchase actions.
Quantity selector before adding to cart. Items sold by weight or measure show a total for the quantity you select. While that total is being calculated, it shows Pending. Changing the quantity or variant waits for a new price for that selection.
Delivery estimate — a chip that checks whether (and when) this product can reach your pincode. Enter a six-digit pincode (or it uses one you've already saved) and it checks in real time.
Customer reviews — a ratings and reviews section with the product's average rating.
Related products — other items you may be interested in, shown further down the page.

When the store has enabled them and the product has the required data, purchase helpers such as the size guide, unit price, personalisation, trust badges, pickup, pincode delivery check, bank offers, and EMI options also stay in this purchase panel. They appear before Related products, so a shopper does not have to leave the buying area to make a product choice.

Why a product shows newest products instead of similar ones

The Related products rail normally lists other products from the same category as the one you are viewing (the current product is never included). If a product has no category, or its category holds no other products, the rail would normally be empty and hidden.

Stores created from the Bakery, Beauty, Electronics, Ethnic, Fashion, Grocery, Home, Jewellery and Salon store templates (version 1.1.0) switch on a fallback for exactly that case: the rail shows the store's newest products instead, under the same heading (for example You may also like). It still excludes the product you are viewing and shows the same number of cards as a normal related rail.

The fallback applies only when the saved product page design contains relatedFallbackToNewest set to true. Stores that were not created from one of those templates, and stores created before the 1.1.0 templates, do not have it, so an empty related rail stays hidden for them.
A product that does have same-category products always shows those, never the newest ones.
Troubleshooting: "Why do my customers see unrelated products?" The product has no category-mates, so the template's fallback is showing recent additions. Put the product in a category that has other products to get a true same-category rail.

Use the enhanced product gallery

Choose a photo on desktop

Select a thumbnail to make it the main image. Depending on the product-page template, thumbnails sit in a vertical rail beside the photo or a horizontal strip above or below it. The current thumbnail is outlined. When the row or rail is longer than its available space, arrow buttons move through it; an arrow is disabled when that end has been reached.

Open and move through the larger viewer

Select the zoom button over the main image, or, where the store made the main photo clickable, click or tap the photo itself (or focus it and press Enter or Space), to open the screen-filling image viewer. Use its previous and next buttons, or the keyboard's Left and Right Arrow keys, to move through the photos. Select the close button, press Escape, or select the dark area outside the image to return to the product page.

Browse on a phone

Mobile product pages place thumbnails in a horizontal strip. Swipe left or right across the main photo or the open image viewer, or tap a thumbnail. A mostly vertical gesture continues to scroll the page instead of changing the photo.

Check colour, availability, price, and stock together

Choosing a colour switches the gallery to that colour's photos: only the selected colour's photos are shown, each once, even though the merchant's colour assignment is stored on every size of that colour. Choose a different colour swatch to change the gallery; the thumbnails no longer include other colours' photos. Before any variant is selected the gallery shows the product's own photos, without repeats. A colour with no linked photos falls back to the product photos. Where a thumbnail is linked to another variant, choosing it still selects that variant, so its price and stock count replace the previous selection. An unavailable option can be hidden, shown disabled, or shown disabled with Sold out, depending on the store's setup; new stores hide unavailable choices by default when they were created after this gallery release. Stores that already existed before the release keep their previous choice. When the stock indicator is present, it follows the same selection and reads In stock (N) or Sold out.

Why do I no longer see the template's own size table?

When the store turns on Show variant picker, the shared choices appear under the price and the template's older choice table or comparison is hidden to prevent two selectors for the same options. Use the shared Size, Colour, or other choices in the purchase panel; the selected variant still controls the photos, price, and stock.

Why doesn't my product page show thumbnails / zoom?

Thumbnails need at least two product photos, and their scroll arrows appear only when the thumbnail rail or strip actually overflows. The zoom button appears when the store turned on Show image zoom button; clicking the main photo opens the viewer only when the store turned on Open images in a larger viewer. The two work independently. A store created before the enhanced gallery can keep its previous gallery until the store owner enables and publishes the new options. Only a store created after this gallery release starts with them enabled; opening the editor for the first time does not change an older store. The template still decides whether desktop thumbnails form a side rail or a strip.

Where the store owner changes these options

In the classic admin sidebar, use Online Store → Theme → Page Layouts → Customers browse → Product page. In the new sidebar, start at storefront → Theme and follow the same path. In Store Editor, the page is Pages → Browse → Product Detail. The controls are Show image thumbnails, Show stock availability, Show image zoom button, Open images in a larger viewer, Show thumbnail navigation arrows, and Unavailable variant behaviour. See the complete merchant gallery how-to.

Note

When the merchant enables a mobile sticky purchase action, Add to Cart appears at the bottom after the main button scrolls out of view. It is not shown for an unavailable selection, and a store can turn the sticky action off or limit it to desktop.

When the product page uses Maison

Maison places the image gallery and buy panel side by side on desktop and in one column on mobile. The product's brand is shown as its byline. Selecting a Colour can update the gallery immediately from the photos linked to that colour, before a Size is selected. In-stock selections show quantity and ADD TO BAG; sold-out selections show an email/notify form instead. Empty review, customer-media, product-video, and recommendation sections are omitted rather than displaying blank containers. Maison's visible Offers & EMI panel and pincode CHECK field are static template affordances in the current storefront; they do not confirm an offer, EMI calculation, or delivery lookup.

Unit price, trust badges, personalisation, and Buy Now

Depending on what the merchant has turned on and filled in, a product page can also show:

Key points

Unit price — a per-weight or per-volume price next to the main price, such as "₹40 / 100 g", when the merchant has set a unit measure on the product or the selected variant.
Trust badges — a small row of store-wide badges (for example a return-policy or certification badge) below the price.
Personalisation fields — text, a dropdown, a date picker, or an image upload, depending on what the merchant configured for that product. Required fields must be filled before you can add the item to cart. An image field uploads a JPEG, PNG, or WebP file up to 5 MB — the same limits as a review photo (see below) — and Add to Cart stays disabled until a required image finishes uploading successfully.
Buy Now — a second button next to Add to Cart. It adds the selected variant, quantity, and any personalisation straight to your cart and takes you directly to checkout, skipping the extra step of opening the cart first. It's disabled whenever the item is out of stock.

Any of these can be missing on a given product page — each one only appears when the merchant has both turned it on for that template and filled in the data it needs (a unit measure, at least one trust badge, a personalisation field, and so on).

Buying in bulk: the quantity price table

Some products show a small table next to the price instead of a single number — a Quantity column listing each break as "N+" and an Each column showing that quantity's per-unit price, already discounted. It only appears when the merchant has both switched the product page to this price display and saved quantity-based discounts on the exact variant you have selected — switching variants can change or remove the table, since these discounts are saved per variant, not per product. A quantity break can also be listed with no discount, in which case its row simply repeats the regular price.

Checking store-pickup availability

For a pickup-enabled product, the page says Available for pickup at N stores when at least one active location has stock, or Not available for pickup right now when none does. Each listed location is marked In stock or Out of stock; raw inventory quantities are not exposed.

Choosing a different variant can refresh the location list. The current Admin stock dialog saves a base-product allocation, which the storefront uses for a variant unless an exact allocation for that variant already exists. If the merchant has not enabled pickup for this product, has no active locations, or availability cannot be loaded, the complete block is hidden.

Pre-order products

A product that's open for pre-order shows "Available for pre-order" in place of the usual stock status, and its buy button reads PRE-ORDER instead of the store's usual Add to Cart wording — this replaces any custom button text the merchant has set, specifically because it's a pre-order. On mobile, the sticky bar pinned to the bottom of the screen reads Pre-order for the same reason.

Booking a video call

Some products show a Book a video call button alongside Add to Cart — this only appears when the merchant has turned on video-call consultation for that product and linked it to a specific bookable offering. Tapping it takes you straight to the booking page with that exact offering already selected, skipping the usual step of choosing it from the offerings list yourself.

Why did the booking page show the full offerings list instead of my product's offering?

If the product's linked offering has since been removed or renamed on the merchant's side, the booking page falls back to showing every available offering rather than failing outright — pick the one you want from the list. This is expected recovery behavior, not a bug.

Reading the delivery estimate chip

The chip shows one of a few states depending on what the store's shipping setup can actually confirm:

What you see	What it means
"Enter pincode to check delivery"	No pincode has been entered or saved yet
"Checking…"	The lookup is in progress
"Not deliverable to this pincode"	The connected carrier(s) confirmed this pincode is outside their delivery network
For example, "Delivers by ~Fri, Sep 18th"; the date follows the carrier's transit estimate	A carrier confirmed delivery and gave a real transit estimate
"Delivers by ~`{date}`"	A carrier confirmed delivery and gave a real transit estimate
"Deliverable to this pincode"	A carrier confirmed delivery, but without a specific transit-day estimate
"Couldn't verify deliverability for this pincode — you can still place your order"	See below

Why does it say “couldn't verify” instead of just showing a delivery date?

This appears when the store has no shipping provider connected, or the connected one couldn't be reached to check this specific pincode — the store's default estimate is being shown as a fallback, not a carrier-confirmed answer. It's not an error on your end and it doesn't block checkout: you can still place the order normally. Once the store's shipping provider is fully connected and reachable, this pincode will show a real carrier-confirmed estimate instead.

Click the pincode next to the chip (with the pencil icon) to check a different pincode without leaving the page.

Adding to your wishlist or cart

Add to Cart adds the selected variant and quantity to your cart and opens the cart drawer so you can see it was added.
The heart / wishlist icon on a product card or detail page saves the item for later — you'll be asked to log in first if you're not signed in, since wishlists are tied to your account.

Asking a question about a product

Below the product details, an Ask a question entry lets you ask the merchant something before you buy — it's always shown, even on a product with no published questions yet.

Signed in — tapping it opens the question dialog directly. Your submitted question goes to the merchant for review before it's published, so it won't appear on the page right away.
Not signed in — tapping it sends you to sign in first; once you're signed in you're returned to this same product page to ask your question.

Why can't I see any questions on this product yet?

Every submitted question is held for merchant review before it's published — see Question moderation. A product can have the Ask-a-question block visible with zero questions listed under it; that's expected for a new product or one where nothing has been approved yet, not a broken page.

Adding photos to a review

When writing a review, you can attach up to 5 photos, each a JPEG, PNG, or WebP file no larger than 5 MB. Every photo shows its own preview thumbnail, an upload-progress state, a remove action, and a failure message if the upload doesn't go through. You can't submit the review while any photo is still uploading or has failed — remove it or wait for it to finish first.