Skip to main content

Customise the look of your product page

Use the Design tab to set the background, fonts and button style your product pages share with your Link in Bio.

Your Link in Bio has your colours and fonts. When someone taps through to a product, the page should feel like the same place, not a plain checkout they don't recognise.

The Design tab sets the background, fonts and button style for your product pages.

Open the Design drawer

  1. Go to Products and open a product.

  2. Click the Design tab. The Edit Design drawer slides up over the editor, with the controls on the left and a live preview of your product page on the right.

  3. Use the phone and desktop icons above the preview to check both layouts.

These settings are shared. A design change here also changes your Link in Bio and other product pages. Check the preview before making changes to a live store.

Edit Design drawer open over the product editor with the phone preview

Set the background

  1. Under Background, pick Fill, Gradient, Image or Video.

  2. For Gradient, choose Linear Up, Linear Down or Radial and set its colours.

  3. For Image, click Upload, then adjust Brightness and add Grayscale or Blur if you want a softer look.

  4. For Video, click Upload and adjust Brightness.

Style the text

  1. Under Text, open Title Font and pick a font for your product name and section headings, then set its colour.

  2. Open Content Font and pick a font for your description and other body text, then set its colour.

Text section with Title Font set to Playfair Display and the preview updated

Style the button

  1. Under Button, choose Solid, Outline or Glass.

  2. Pick a shape: Square, Round, Smooth or Full.

  3. Set Button Color (Outline Color for outline buttons) and Button Text Color. Glass buttons only take a text colour.

Button section with Solid style, Full shape and a custom Button Color

For example, a barista coach might use a coffee-brown Fill, Playfair Display for titles and a cream Solid button with the Full shape, so the I want this! button stands out against the dark background.

Close the drawer

Design changes save automatically as you make them. Close the drawer using the top-right close icon, or click outside it. This differs from content edits on a published product, which need Update.

Next, see Create and publish a digital product to put your styled page live.

Did this answer your question?