# The storefront and filters

How products look on the website: cards, listings, filters, search, product pages and the basket.

For: Everyone shaping the shop pages

## Storefront settings

The Storefront tab in the products area sets how products appear on the website: whether the catalogue and prices are on, the addresses of the listing and product pages, what products are called, the listing heading, introduction and how many show before Load more.

Under Look, choose the card style (Standard, Minimal or Framed), the picture shape (Square, Portrait or Landscape), the columns on a computer, the order on listing pages, and whether cards show the summary, key facts and a Quick add to basket button for products without options. Category tiles add pictures of the categories above the products. A sketch beside the settings shows the look as you change it.

Walkthrough: The Storefront tab (The Storefront tab)

1. **Catalogue switched on**: Adds the listing, category and product pages when you publish.
2. **Card style**: Standard, Minimal or Framed.
3. **Picture shape**: Square, Portrait or Landscape.
4. **Quick add**: An add button on each card, for products without options.
5. **Filters**: Price, in stock and on offer, beside categories and attributes.
6. **A sketch**: The look as you change it. Publish to see it for real.

Note: Storefront settings go live when you next publish the website. Changing an address after publishing breaks old links, so add redirects if you do.

## Shop page settings in the editor

In the editor, the Navigator lists the shop pages: the listing, a category, a product, the basket and the checkout. Choosing one shows it beside Shop page settings, so you can change the cards, browsing, product page, basket and checkout while you look at the result.

Some settings are only here: share buttons on product pages (email, WhatsApp and social networks) and the name of the collections filter, such as Collections or Ranges.

## The listing, filters and search

Listing pages filter by category, by attributes set as filters and by collection, and can offer price, in stock and on offer filters. Each choice shows how many products it would leave, worked out against the filters already chosen, so the number always matches what choosing it shows. Chosen filters appear as chips that can be removed one by one.

Search looks through names, codes and the extra search words you add to products. Typing a product's exact code goes straight to that product.

Walkthrough: The listing on the website (A shop listing on the website)

1. **Search**: Names, codes and extra search words. An exact code goes straight to its product.
2. **Filters**: Categories, collections, attributes, price, stock and offers.
3. **Counts that add up**: Worked out against the filters already chosen.
4. **Chosen filters**: Remove them one by one, or all at once.
5. **Product cards**: In the style, shape and columns you chose.

## The product page

A product page shows the pictures, the price with any offer or was price, the options, the quantity and Add to basket, then up to four short points under the button, such as Free delivery over £50. Below come the specification in its groups, the files to download or ask for, and the methods it can be sent by.

You may also like shows the related products, and Recently viewed fills from the products this visitor has looked at, kept in their own browser only.

Walkthrough: A product page (A product page on the website)

1. **The price**: With any offer or was price.
2. **Options**: Buttons, a list or colour swatches.
3. **Points under the button**: Up to four short reassurances, set in Shop settings.
4. **Specification**: From the product's attributes, in their groups.
5. **Downloads**: Files to download, or to ask for.
6. **You may also like**: Hand-picked first, then the same category. Recently viewed follows.

## The header basket and the free-delivery bar

The header carries a basket link with a count of what is in it. The basket itself is a slide-in drawer or a page, as chosen in Shop settings.

With the free delivery progress bar on, the basket says how much more to spend for free delivery, then that delivery is free. Suggest products in the basket shows a few of your featured products underneath.

Walkthrough: The basket (A shop listing on the website, then The basket drawer)

1. **The header basket**: A link with a count of what is in it.
2. **Free delivery progress**: How much more to spend, then that delivery is free.
3. **The lines**: Each product with its option and quantity.
4. **Checkout**: On your website then Stripe, or all on Stripe, as chosen.

## Why do the filter counts change as I choose?

Each count is worked out against the filters already chosen, so it always matches what choosing it would show.

## Can I hide sold-out products?

Yes. In Shop settings under Stock, set Sold-out products to Hidden until restocked.

## Do storefront changes go live straight away?

No. They go live when you next publish the website, with the design and site settings.

## Related guides

- [Add products](/help/shop/add-products)
- [Publish products](/help/shop/publish-products)
- [Search titles and descriptions](/help/seo/search-titles-and-descriptions)
---

CubeSites is a trading name of Cube Systems Limited, part of Crushed Ice Group. Registered in England and Wales, company number 17220899. Registered office: Unit 11, Olney Business Park, Osier Way, Olney, Buckinghamshire, MK46 5FP. ICO registration number ZC216972.

Contact: hello@cubesites.co.uk | 01234 672 617 | https://cubesites.co.uk/contact