Collage

Collage arranges up to five tiles in an asymmetric, magazine-style grid. Each tile is an image of your own, a product or a collection, so one section can mix a campaign photograph with the pieces and the range it belongs to.

The layout changes with the number of tiles, and the first tile is always the largest. On phones the tiles stack in a single column.

It can’t be placed in the header or footer groups. Two presets are available when you add it: Collage, with an image, a product and a collection tile, and Collage with five tiles.

Settings

• Heading. Shown above the grid. Default: Shop the edit. Leave it empty to show none.
• Color scheme. Default: scheme-1.

Spacing

• Top padding / Bottom padding. Range: 0 to 300 px in 5 px steps. Default: 60 px each.

Blocks

Up to five tiles, in any mix of the three types. A collage with no tiles shows nothing on the storefront.

Image

• Image. The tile’s picture. Without one, a placeholder illustration shows.
• Title. Optional caption over the image.
• Link. Optional. Makes the whole tile a link.

Product

• Product. The tile shows the product’s featured image, title and price, and links to the product.

Collection

• Collection. The tile shows the collection’s image and title, and links to the collection.

Tips

• Lead with your strongest image. The first tile gets the most space in every layout, so put the photograph that sets the mood there and let product and collection tiles follow.
• Set the collection image in Shopify. A collection tile uses the image from Products > Collections; without one it shows a placeholder.
• Try the tile counts. Three, four and five tiles each have their own arrangement. Adding or removing one tile changes the whole composition, so preview each before settling.