> ## Documentation Index > Fetch the complete documentation index at: https://docs.shopify.lightsout.agency/llms.txt > Use this file to discover all available pages before exploring further. # Build a tiled layout with Facet's mosaic section > Use Facet's mosaic section to arrange tiles and slideshows on a six-column grid, with pictures or videos, text and buttons inside each tile. The Facet mosaic section arranges tiles on a grid of six columns. Each tile spans as many columns and rows as you choose and can hold a picture or video with text, buttons and a label. A slideshow tile shows several slides in one spot. Use the mosaic for editorial layouts, lookbooks or a mix of campaigns on one screen. This page covers the grid settings and the tile, slideshow and slide blocks. ![The Mosaic section as it appears on the Facet demo storefront.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/mosaic/mosaic-overview.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=b4e63e93947bb83f0084e5906e8a9186) ## What this section controls * The space between tiles. * The order of tiles on phones. * Each tile's size, shape, media, colors and text position. * Slideshow tiles and their slides. ## Getting started **1. Open the Theme Customizer** In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet. **2. Add the section** In the **Sections** panel, click **Add section** and choose **Mosaic**. The section can't be added to the header or footer. **3. Add tiles** Click **Add block**, then **Mosaic tile** or **Mosaic slideshow**. Set each tile's **Column span** so the tiles in a row add up to 6. **4. Fill the tiles** Choose each tile's picture or video, then edit the heading, text, button and label blocks inside it. ![The theme editor with the Mosaic section selected in the sidebar, its settings panel open on the left and the section highlighted in the preview.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/mosaic/mosaic-location.jpg?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=28798821b5467577bd40556fffcf681c) ## How the grid works On screens 750 pixels wide and larger, the grid has 6 columns. A tile with a **Column span** of 3 takes half the width, and a span of 6 takes the full width. Tiles fill each row from left to right. A **Row span** above 1 makes a tile as tall as several rows, so smaller tiles can stack beside it. On phones, every tile takes the full width, one below the other. ## Section settings ### Grid ![Theme editor sidebar showing the Mosaic section settings: Spacing between tiles, Move the first tile last on mobile, Common settings, Color scheme, Top padding, Bottom padding, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/mosaic/mosaic-settings-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=582b181f9dffb0a72ff743d04cb07f1d) > [accordion] Spacing between tiles > > * **Theme grid spacing** (default): uses the spacing set in **Theme settings**, then **Grid**. > * **None**: the tiles touch. > * **Custom**: sets the space for this section only, with the two settings below. > [accordion] Desktop spacing and Mobile spacing > > **Desktop spacing**: from 0 to 64 pixels. Default: 24. **Mobile spacing**: from 0 to 40 pixels. Default: 16. Both appear only when **Spacing between tiles** is **Custom**. > [accordion] Move the first tile last on mobile > > Off by default. On phones every tile takes the full width. This puts the first tile at the end, for example to show text tiles before a large picture. ### Common settings ![Theme editor sidebar showing the Mosaic section settings (part 2, scrolled): Move the first tile last on mobile, Common settings, Color scheme, Top padding, Bottom padding, Page width, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/mosaic/mosaic-settings-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=8825696d778adb28ae4c053673136c3e) See [Common settings](https://docs.shopify.lightsout.agency/themes/facet/common-settings.md) for details. * **Color scheme**: the colors of the section behind the tiles. Each tile has its own color scheme. * **Top padding** and **Bottom padding**: None, Small, Medium (default), Large or Extra large. * **Page width**: Narrow, Narrower, Regular (default), Fluid or Full. ## Blocks ### Intro heading and text The section has a fixed **Heading** and **Text** block above the grid. Their settings are described on [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md). ### Mosaic tile A tile with optional media and nested **Heading**, **Text**, **Button** and **Label** blocks. See [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) for those. ![Theme editor sidebar showing the Mosaic tile block (in Mosaic) settings: Column span, Row span, Visibility, Aspect ratio, Media placement, Color scheme, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/mosaic/mosaic-block-mosaic-tile-1.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=cf5aab06ec8a061a917f61ba5fdeed07) ![Theme editor sidebar showing the Mosaic tile block (in Mosaic) settings (part 2, scrolled): Content, Vertical position, Horizontal position, Horizontal position on mobile, Inner padding, Media, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/mosaic/mosaic-block-mosaic-tile-2.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=968954a412d2e3d38d4a7c2fb5160a8a) ![Theme editor sidebar showing the Mosaic tile block (in Mosaic) settings (part 3, scrolled): Video, External video, Mobile media, Mobile image, Mobile video, Mobile external video, and more.](https://mintcdn.com/lightsout/Xj2zGA8z_awdsd6Z/images/themes/facet/sections/mosaic/mosaic-block-mosaic-tile-3.png?fit=max\&auto=format\&n=Xj2zGA8z_awdsd6Z\&q=85\&s=2f30402f793aac59dd1b32551329fd86) > [tab] Size and shape > > * **Column span**: from 1 to 6. Default: 3. > * **Row span**: from 1 to 4. Default: 1. > * **Visibility**: **Desktop and mobile** (default), **Desktop only** or **Mobile only**. When every tile is hidden on a device, the section's padding is removed there too. > * **Aspect ratio**: **Adapt to content** (default), **Match the media**, 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1 or 1:2. With media behind the content, the ratio shapes the whole tile. With media above or below, it shapes the media. > [tab] Colors and media placement > > * **Media placement**: **Behind the content** (default), **Above the content** or **Below the content**. > * **Color scheme**: the tile's colors. > * **Overlay**: from 0 to 80%. Default: 0. Darkens the media behind the content so text stands out. Appears only when **Media placement** is **Behind the content**. > [tab] Content > > * **Vertical position**: **Top**, **Middle** (default) or **Bottom**. > * **Horizontal position**: **Left**, **Center** (default) or **Right**. > * **Horizontal position on mobile**: **Left** (default), **Center** or **Right**. > * **Inner padding**: the space between the tile's edge and its content. **None**, **Small**, **Medium** (default), **Large** or **Extra large**. > [tab] Media > > * **Image**: a picture. > * **Video**: a video uploaded to Shopify. It plays muted, on a loop. > * **External video**: a YouTube or Vimeo link. > * **Show video controls**: off by default. Shows play and volume controls. Appears only when the media is above or below the content. > > When more than one is set, an external video wins over a video, and a video wins over an image. Without any media, the tile shows only its color scheme and content. > [tab] Mobile media > > * **Mobile image**, **Mobile video** and **Mobile external video**: optional media for phones, chosen in the same order. Without them, phones show the desktop media. ### Mosaic slideshow A tile that shows several slides, one at a time. It sits on the grid like a tile. > [tab] Size and colors > > * **Column span**: from 1 to 6. Default: 6. > * **Row span**: from 1 to 4. Default: 1. > * **Visibility**: **Desktop and mobile** (default), **Desktop only** or **Mobile only**. > * **Media aspect ratio**: the shape of the slide pictures: 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1 (default) or 4:1. > * **Color scheme**: the slideshow's colors. > [tab] Content > > * **Vertical position**: **Top**, **Middle** (default) or **Bottom**. > * **Horizontal position**: **Left**, **Center** (default) or **Right**. > * **Horizontal position on mobile**: **Left** (default), **Center** or **Right**. > * **Inner padding**: **None**, **Small**, **Medium** (default), **Large** or **Extra large**. > > These apply to every slide. > [tab] Slideshow > > * **Slides come from**: **Slide blocks** (default) shows the **Slide** blocks you add. **Metaobject** builds the slides from entries you create under **Content**, then **Metaobjects** in your Shopify admin, and ignores the **Slide** blocks. See [Slides from metaobjects](#slides-from-metaobjects). > * **Change slides every**: from 0 to 15 seconds. Default: 0. At 0 the slideshow stays still until the shopper moves it. Autoplay pauses while the pointer rests on the slideshow. > * **Show arrows**: on by default. > * **Show pagination dots**: on by default. > * **Show autoplay progress**: on by default. Shows a ring that fills until the next slide. Appears only when **Change slides every** is above 0. > * **Controls position**: **Left** (default), **Center** or **Right**. ### Slide Each **Slide** block inside a slideshow is one slide, with nested **Heading**, **Text**, **Button** and **Label** blocks. * **Image**: the slide picture. The slideshow's **Media aspect ratio** sets its shape. * **Media placement**: **Behind the content**, **Above the content** (default) or **Below the content**. ### Slides from metaobjects With **Slides come from** set to **Metaobject**, the slideshow reads its slides from your store's custom data instead of **Slide** blocks. This lets each product show its own slides on the product page. Each slide shows its picture on top, with the heading and text under it. Create this custom data once in your Shopify admin, under **Settings**, then **Custom data**: **1. Create the metaobject definition** Under **Metaobjects**, add a definition with the type `multitile_media` and these three fields: | Field key | Type | | - | - | | `heading` | Single line text | | `text` | Rich text | | `image` | File (images) | **2. Create the product metafield** Under **Products**, add a metafield definition with the namespace and key `metaobject.multitile_slideshow`. Set its type to **Metaobject**, choose your `multitile_media` definition, and allow a list of entries. **3. Add entries** Under **Content**, then **Metaobjects**, add an entry for each slide. Then open a product and pick its entries in the new metafield, in the order the slides should show. When a product has no entries picked, or the slideshow is on a page that isn't a product page, it shows the `multitile_media` entries with the handles `default-1` to `default-5` instead, in that order. Entries that don't exist, or have no heading, text or picture, are skipped. Create these default entries so the slideshow is never empty. ## Best practices * **Make each row add up to 6.** Spans of 3 and 3, or 4 and 2, fill a row exactly. Rows that don't add up leave a gap. * **Add mobile media for wide tiles.** A tile that spans 6 columns on desktop is usually much shorter on a phone. A portrait crop keeps its subject large. * **Use Overlay for text on pictures.** An overlay of 20 to 40% keeps white text readable on light pictures. * **Keep slideshows calm.** At 5 seconds or more per slide, shoppers have time to read each one. ## Related guides > [card] [Grid](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/grid.md) > > Set the theme grid spacing the mosaic uses by default. > [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md) > > Settings for the heading, text, button and label blocks in each tile. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.