Browsing & Search

Your storefront offers several ways for customers to discover and explore your products — from organized category listings to instant search with autocomplete suggestions.

Category Listing

When customers visit /categories, they see a grid of all your top-level product categories. Each category appears as a card with its image and name.

Clicking on a category takes the customer to that category's individual page, where they can browse its products.

Single Category Page

Each category has its own page at /categories/{slug} (for example, /categories/mens-clothing). This page shows all products within that category and includes:

• Product grid — Products displayed as cards with images, names, and prices
• Sort options — Customers can sort products by:
  • Newest first
  • Price: low to high
  • Price: high to low
  • Name: A to Z
• Pagination — Products are split across multiple pages if there are many items, so the page loads quickly
• Subcategory navigation — If the category has subcategories, customers can navigate between them to narrow down their browsing

TIP

Organize your products into clear, logical categories to help customers find what they are looking for. You can create categories and subcategories in Admin > Categories.

Product Detail Page

When a customer clicks on a product (from any page — category listing, homepage, search results, or wishlist), they are taken to the product detail page at /products/{slug}.

This page provides all the information a customer needs to make a purchase:

Product Images

• Image gallery with multiple product photos
• Customers can click on thumbnails to switch between images
• Zoom and lightbox — Clicking an image opens a larger view so customers can see fine details

Product Information

• Product name — The full product title
• Price display — Shows the current price. If the product is on sale, the original MRP is shown with a strikethrough alongside the sale price
• Description — Detailed product description set by you in the admin panel
• Breadcrumb navigation — Shows the path back to the category (e.g., Home > Men's Clothing > T-Shirts), making it easy for customers to navigate up

Variants

If your product has variants (such as different sizes, colors, or materials), the product page displays a variant selector:

• Customers choose their preferred options (e.g., Size: Large, Color: Blue)
• The price and stock availability update automatically based on the selected variant
• Each variant can have its own images, which swap in when selected

TIP

Set up variants in the admin panel when creating or editing a product. Each variant can have its own price, stock quantity, and images.

Stock Status

A stock badge shows availability at a glance:

Badge	Meaning
In Stock	The product (or selected variant) is available to purchase
Low Stock	Only a few units remain — creates a sense of urgency
Out of Stock	Currently unavailable — the Add to Cart button is disabled

Add to Cart

• Quantity input — Customers can choose how many units they want before adding to cart
• Add to Cart button — Adds the product (with selected variant and quantity) to the shopping cart
• The button is disabled if the product is out of stock

Related Products

Below the main product information, a row of related products is displayed. These are typically other products from the same category, helping customers discover more items they might like.

Search

Shop Craft includes a built-in search feature accessible from the header on every page.

How Search Works

1. Search bar — Located in the header on both desktop and mobile views
2. Start typing — After the customer types 3 or more characters, search suggestions appear automatically
3. Autocomplete dropdown — Shows matching products with their image, name, and price
4. Click to view — Clicking a suggestion takes the customer directly to that product's detail page

Search Features

• Debounced input — The search waits 400 milliseconds after the customer stops typing before fetching suggestions. This prevents unnecessary requests while typing quickly.
• Keyboard navigation — Customers can use the up and down arrow keys to navigate through suggestions and press Enter to select one
• Mobile-optimized — On mobile devices, the search bar expands into a full-screen overlay, giving customers plenty of room to type and view results

TIP

Make sure your product names and descriptions contain the keywords your customers are likely to search for. The search matches against product names to provide relevant suggestions.

Browsing Tips for Store Owners

Here are a few things you can do to improve the browsing experience for your customers:

• Add high-quality images — Product images are the first thing customers notice. Use clear, well-lit photos and add multiple images per product to show different angles.
• Write descriptive product names — Instead of "T-Shirt #5," use something like "Classic Cotton Crew Neck T-Shirt — Navy Blue." This also helps with search.
• Set sale prices — Products with sale prices automatically appear in the Featured Products section on the homepage, giving them extra visibility.
• Organize categories thoughtfully — Use subcategories to break down large catalogs. For example, instead of one "Clothing" category with 200 products, create subcategories like "T-Shirts," "Jeans," and "Jackets."
• Keep stock levels updated — Accurate stock badges build customer trust. Update inventory in Admin > Products whenever you restock.

Next Steps

• Cart & Checkout — Learn what happens after customers add items to their cart
• Customer Accounts — Understand account features like wishlists and order history