Change how roomy your storefront feels, how rounded and raised its cards are, what your buttons look like, what every product card shows, and how much the storefront moves. These settings live in five groups on the Studio’s Design tab, and they apply to every page and every language of your storefront.
To open the Studio, go to the sidebar and, under Storefront, open Design. Scroll the preview to the part you are changing, such as the category rail or a row of products, so you can watch it as you click.
Layout and density: spacing, rhythm and category tiles
| Control | Choices | What it changes |
|---|---|---|
| Density | Editorial, Standard, Dense | How tightly products sit in a grid. On a computer screen, Editorial and Standard show four products per row, Editorial with the most space between them, and Dense shows six per row with narrow gaps. |
| Section rhythm | Tight, Default, Airy | The space between the homepage sections. Tight packs them close; Airy gives each section more room. |
| Category tiles | Fill, Cut-out | How the pictures in the category rail sit in their tiles. |
Category tiles applies one treatment to the whole rail. The hint under it explains the choice: Fill suits photographs, which fill each tile edge to edge; Cut-out shows each subject whole, floating on the tile’s background, which makes a mixed set of pictures read as one set.
A theme preset sets Density for you, so choose your preset first. Choose a theme, colours and fonts. To change the pictures themselves, edit your categories. Organise products into categories
Shape and elevation: corners and shadows
| Control | Choices | What it changes |
|---|---|---|
| Corners | Sharp, Soft, Round, Pill | How rounded the corners of cards, photos, buttons and fields are, from nearly square (Sharp) to the most rounded (Pill). |
| Elevation | None, Flat, Soft, Lifted | How cards stand off the page. None has no shadow; Flat draws a fine outline instead; Soft adds a soft shadow and lifts a card slightly when a customer points at it; Lifted casts a deeper shadow and lifts further. |
Both are set by the theme preset as well, so a new preset changes them back to its own.
Buttons: style, size and letter case
Style and Size shape your main buttons, such as Shop new in in the hero and Add to cart on a product page. Case reaches further: it also sets the letter case of the storefront’s small labels.
| Control | Choices | What it changes |
|---|---|---|
| Style | Solid, Outline, Soft | Solid fills the button with your brand colour. Outline shows only a border and text in your brand colour, and fills when a customer points at it. Soft fills it with a pale tint of your brand colour, and fills fully on pointing. |
| Size | S, M, L | How much padding the buttons have. |
| Case | Aa, AA | AA puts your buttons and the storefront’s small labels in capitals: your store name in the header, the menu, badges such as NEW, the line above the hero headline, footer headings and labels such as IN STOCK. Aa shows them as written. |
Case affects English and French only: Arabic has no capital letters, so your Arabic storefront looks the same either way. Check the header and a product page after you change it, because the labels change with the buttons. The button’s colour comes from your brand colour. Brand colour, accent colour and neutral tint
Product cards: what each card shows
A product card is the tile customers see in every product grid: the homepage’s featured row, categories, collections and search.
Image ratio sets the shape of the photo on every card: Tall (3 by 4, the shape most product photos are taken in), Portrait (a little shorter) or Square. A theme preset sets it too: Square for the dense presets, Tall for the rest.
Then tick what each card shows:
| Switch | What customers see | On at first |
|---|---|---|
| Badges | One badge on the photo: Sold out when the product is out of stock, otherwise the discount, such as -25%, when it has a compare-at price, otherwise New for products added in the last three weeks. | Yes |
| Colour swatches | Dots under the price for the product’s colour options. Pointing at a dot shows that colour’s photo, and +2 means two more colours. | Yes |
| Quick add | A button on the card for products in stock. A product with one choice gets Add to cart, which adds it without leaving the page; a product with several sizes or colours gets Choose options, which opens its page. | Yes |
| Star rating | The average rating and number of reviews, such as 4.8 (12), on products that have reviews. | No |
| Auto-flip photos | Products with more than one photo show them in turn on their own. This happens on computers only, pauses while a customer points at the card, and stops when Motion is None. | No |
A discount badge needs a compare-at price on the product. Set a product’s price, cost and stock. Star ratings count the reviews you have approved. Approve, unpublish or delete reviews
Low stock warning
Low stock warning adds a small N left label beside In stock on the product page when stock runs low, for example 4 left:
| Choice | When the label shows |
|---|---|
| None | Never. |
| 3 or fewer | When the chosen size or colour has 3 or fewer in stock. |
| 5 or fewer | When it has 5 or fewer. This is where a new store starts. |
| 10 or fewer | When it has 10 or fewer. |
The label shows only for products whose stock you track and that do not accept orders when out of stock. It suits a store that makes small batches; a store that restocks often may prefer None, so the label never reads as pressure. To see it, click Product in the top bar.
This label is for customers. It is separate from the low-stock alerts that email you. Set your fulfilment SLA and stock alerts
Motion
| Choice | What customers see |
|---|---|
| None | No animation at all. |
| Subtle | Sections fade gently into place as customers scroll, with small effects when they point at things. This is where a new store starts. |
| Expressive | As Subtle, plus livelier effects: product photos rise and grow slightly, and main buttons lift, when a customer points at them. |
Customers who have asked their phone or computer to reduce motion see no animation, whatever you choose. To see the effect, scroll the preview and point at a product card.
Tip
Changes in these groups apply to the whole storefront at once. Check a product grid and a product page on a phone before you publish: click the phone icon, then Product.
When you are happy, click Publish, or Save draft to finish later. Save a draft and publish your storefront
Next, set up your logo and the big picture at the top of your homepage in Set up your header and hero image, or reorder your homepage in Arrange your homepage sections.