Sections

Collection sections

These sections help customers browse your range. Use them on the home page and on any page where customers start shopping.

Settings that several sections share:

  • Subheading, Heading and Text: the text above the section.
  • Heading alignment: Left or Center.
  • Color scheme: the colors of the section.
  • Top padding and Bottom padding: the space above and below the section, from 0 to 120px.

Collection list

Collection tiles for shopping by category or concern. The home page uses two of them: "Shop by category" with round images, and "Shop by concern" with titles over the images.

Settings

  • Card style: Title below image, Title over image or Circle.
  • Image ratio: Square, Portrait, Landscape or Adapt to image.
  • Layout: Grid shows all tiles. Carousel shows a row that customers can scroll, with arrow buttons.
  • Number of columns on desktop: from 2 to 6. Tablets show three columns.
  • Number of columns on mobile: 1 column or 2 columns.
  • Show product count: shows the number of products under each title.
  • Show view all link: shows a link to your collections page. With a left-aligned heading, the link sits next to the heading. With a centered heading, or no heading, a button shows under the tiles.

Collection block

  • Collection: the collection the tile links to.
  • Custom title: overrides the collection title. Use it for short tile names, such as "Acne" instead of "Products for acne-prone skin".
  • Custom image: overrides the collection image.

Tips:

  • Without a custom image, tiles use the collection image from your Shopify admin. Add one to each collection under Products > Collections.
  • For Circle, use square images with the product in the middle.
  • To build concern tiles, see Product tags and metafields.

Products from one collection, in a grid or a carousel. Use it for bestsellers, new launches or seasonal picks.

Settings

  • Collection: the collection to show. If Heading is empty, the collection title is used.
  • Maximum products to show: from 2 to 16.
  • Number of columns on desktop: from 2 to 5.
  • Layout: Grid or Carousel.
  • Show view all link: links to the collection. With a left-aligned heading, the link sits next to the heading. With a centered heading, a button shows under the products.

Products appear in the order set for the collection in your Shopify admin. Product cards follow your Product cards settings.

Until you choose a collection, the section shows example products in the theme editor. On your live store, the section stays hidden until you choose a collection that has products.

Collection tabs

Tabs that switch between collections, for example "Hair", "Skin" and "Sun care". The home page uses it as "Shop by routine".

Settings

  • Maximum products per tab: from 2 to 12.
  • Number of columns on desktop: from 2 to 5.

Tab block

Add up to six tabs.

  • Collection: the products shown in this tab.
  • Tab label: the text on the tab. Defaults to the collection title.

Each tab shows its products in a row that customers can scroll, and a link to view the whole collection.

Promotion grid

Large image tiles with text, for offers, launches or featured collections. When a tile has a link, the whole tile is clickable.

Settings

  • Layout: Two columns, Three columns or Large first tile. With Large first tile, the first tile is twice as tall as the others on desktop, with the other tiles beside it. On tablets, it spans the full width.
  • Tile height: from 200 to 500px.

Tile block

Add up to six tiles.

  • Image: the tile background. Use images at least 1600px wide.
  • Subheading: a short line above the heading.
  • Heading: the main message.
  • Link label: the text with an arrow at the bottom of the tile. It shows when the tile has a link.
  • Link: where the tile goes. Without a link, the tile shows its image and text but isn't clickable.
  • Text position: Bottom, Center or Top.
  • Overlay opacity: darkens the image so the text stands out, from 0 to 80%.

Tip: keep tile headings to one short line. Images are cropped to fill each tile, so keep the subject away from the edges.

Updated 2026-10-24