# Grid

The **Grid** section displays a flexible collage of feature images. Mix and match between different size blocks and reorder them to create a promotional feature or lookbook layout.

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FybQtJcCtmYFLdKzxuXgT%2Fgrid.jpeg?alt=media\&token=6bf37ed2-ff4d-4b84-819e-18882074ecbd)

## Set up section

***

{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/stiletto/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/stiletto/general/adapting-your-theme/dynamic-content-with-metafields)
{% endhint %}

In the editor side panel, click **(+) Add section** and select **Grid**. Click and hold the drag handles **`⋮⋮`** to re-order sections.

Click the section to edit the general **section styles:** [Padding](https://help.fluorescent.co/stiletto/sections/using-sections#section-padding) | [Top divider](https://help.fluorescent.co/stiletto/sections/using-sections#section-top-divider) | [Animation](https://help.fluorescent.co/stiletto/sections/using-sections#section-animations)

## **Add grid blocks**

***

Add **Grid blocks** with adjustable widths. Create different layouts by reordering the blocks with the drag-and-drop handles **`⋮⋮`** and customize the width and height of each block.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on a **Grid item** block to open the settings.

   > Click **(+) Add item** to create new grid blocks.

   > Click **Remove block** or the eye icon to delete or hide a block.
2. Under **Background image**, click **Select Image** to select or upload an image.

   > There are no required image dimensions. We recommend a minimum width of **`2500px`** for optimal quality across all devices.

   > (*Optional*.) Select or upload alternate **Mobile image** that looks best on smaller screen sizes.
3. Change the **Media fit** to either have your image **Cover** the entire block or **Contain** the image in the block with its original shape.
4. Use **Image focal points** to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.

   > See our [image guide](https://help.fluorescent.co/stiletto/general/image-guide/theme-image-settings#image-focal-point) to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
5. Use the **Height** and **Mobile height** sliders to control the maximum height of the grid item.
6. Change the width of the grid item (for desktop screens). Either 100%, 66%, 50%, 33%, or 25%.
7. Use the drag and drop handles **`⋮⋮`** to change the layout of the mosaic blocks.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

   > Click the **Remove block** button in the block settings to remove a block.
8. Click **Save**.

</details>

#### Add background media <a href="#add-background-media" id="add-background-media"></a>

***

{% hint style="info" %}
Support for background videos were added in v5.2.0. View the [changelog](https://help.fluorescent.co/stiletto/readme/changelog) or learn how to [update your theme](https://help.fluorescent.co/stiletto/general/theme-updates).
{% endhint %}

Add an image or autoplay video (without sound) as the grid item's background.&#x20;

For **autoplay videos**, make sure your video files meet the following requirements:

| **Video file type** | `.mp4` or `.mov` *Embedded YouTube or Vimeo videos are not supported*. |
| ------------------- | ---------------------------------------------------------------------- |
| **Video length**    | < 15 seconds (Recommended)                                             |
| **Video size**      | < 10MB (Recommended)                                                   |

`Click Grid item block to find settings`

| Image        | Select or upload an image.                                        |
| ------------ | ----------------------------------------------------------------- |
| Mobile image | Select or upload an alternate image to display on mobile screens. |
| Video        | Add a short autoplay video (without sound) to replace the image.  |
| Mobile video | Upload an alternate video to display on mobile screens.           |

<table data-header-hidden><thead><tr><th width="159">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Width</td><td>Choose the width of the grid item as a percentage of the section width. Select 100%, 66%, 50%, 33%, or 25%.</td></tr><tr><td>Height</td><td>Set the maximum height of the grid item in pixels for desktop screens.</td></tr><tr><td>Mobile height</td><td>Set the maximum height of the grid item in pixels for mobile screens.</td></tr><tr><td>Image</td><td>Select an image to display as the grid item background. There are no required image dimensions. We recommend a minimum width or height of 2500px.</td></tr><tr><td>Media fit</td><td>Choose to have the item image <strong>Cover</strong> the entire block or <strong>Contain</strong> the image in the block with its original shape.</td></tr><tr><td>Image focal point</td><td>Select the most important part of the image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes.<br><br>You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our <a href="../../../general/image-guide/theme-image-settings#image-focal-point">Image settings guide</a>.</td></tr></tbody></table>

### Add block headings

Each grid block can have up to three types of headings. Adjust the position, width, and color of your headings to match your image.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Grid item** block to open the settings.
2. (*Optional*.) Enter text for an **Accent** heading in all capitals above the main heading.

   > We recommend a short one or two word label.
3. Add **Heading** text for a title.

   > we recommend a short title of just a few words.

   > Change the **Heading size** to **Small**, **Medium**, or **Large**.
4. Add **Subheading** text for a short paragraph.

   > We recommend two to three short sentences.

   > Change the **Subheading size** to **Small**, **Medium**, or **Large**.
5. (*Optional*.) Add additional **Text** to display beneath the Subheading.
6. Select a **Text position** (above) to position your headings (and button) in one of 9 areas of the grid block.

   > Change the **Text size** to **Small**, **Medium**, or **Large**.
7. Select a **Text color** to match your headings to your brand and make sure the text is readable.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
8. Click **Save**.

</details>

### Add block button

You can link to your collections or products or any other page. Add a **Button Label** and **Link** to display a button. Leave the **Button label** blank to make the entire block a clickable link.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Grid item** block to open the settings.
2. Select or paste a **Link**.

   > Make sure you copy the full URL, including **`https://`** at the start. For example: **`https://instagram.com/abc123`**.
3. Enter text for a **Button label**.

   > Leave the **Button text** blank to make the entire block a clickable link.

   > The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, [read "What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380)
4. Select a **Button style**: either **Solid**, **Outline**, or **Text**.
5. Click **Save**.

</details>

### Block colors

Customize the grid block colors and add either a **Overlay color** or **Overlay gradient** over your grid image.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Grid item** block to open the settings.
2. Under **Color**, use the color selectors to customize the **Background**, **Text**, **Buttons**, and **Sold button text**.

   > We recommend using WebAIM's [contrast checker](https://webaim.org/resources/contrastchecker/) when matching colors to make sure your text is clear and readable for everyone.
3. Change the **Overlay color** and **Overlay opacity** using the slider to increase the contrast between the text and slide image.

   > These settings help make your text clear and readable.

   > Set the **Opacity** to **`100%`** to create a solid color slide. This helps avoid images that include text in the image itself, which are not responsive or recommended.
4. (*Optional*) Click the **Overlay gradient** option to add a color overlay that fades across a range of hues.

   > You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.
5. Click **Save**.

</details>

<table><thead><tr><th width="164">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Text position</td><td>Choose the placement of the headings within the grid item. Select one of nine positions.</td></tr><tr><td>Accent</td><td>Add text to show a small heading above the main heading.</td></tr><tr><td>Heading</td><td>Add text to show a main heading.</td></tr><tr><td>Heading size</td><td>Change the font size of the heading to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td>Subheading</td><td>Enter text to display a section subheading below the heading.</td></tr><tr><td>Subheading size</td><td>Change the font size of the subheading to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td>Text</td><td>Add text to show a subheading below the main heading.</td></tr><tr><td>Text size</td><td>Change the font size of the text to <strong>Small</strong>, <strong>Medium</strong>, or <strong>Large</strong>.</td></tr><tr><td>Button link</td><td>Select or paste a URL for a button. This link applies to the entire grid item if the button label field is blank.</td></tr><tr><td>Button label</td><td>Enter text to display as the button label. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).</td></tr><tr><td>Button style</td><td>Choose a style for the button. Select <strong>Solid</strong>, <strong>Outline</strong>, or <strong>Text</strong>.</td></tr></tbody></table>

## Section header

***

Add a heading and subheading at the top of the section and choose their alignment.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Grid** section to open the section settings.
2. Enter **Heading** text to display a section title.
3. Enter **Subheading** text to display below the heading.

   > Use the formatting buttons to add text styles, links, or lists. To learn more, see Shopify's [Rich text editor guide](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#format-text-with-the-rich-text-editor).
4. Set the **Alignment** of the headings to **Left**, **Right**, or **Center**.
5. Click **Save**.

</details>

<table><thead><tr><th width="148">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Add text to show a main heading above the section.</td></tr><tr><td>Subheading</td><td>Add text to show a subheading below the main heading.</td></tr><tr><td>Alignment</td><td>Set the position of the section Heading and Text. Either <strong>Left</strong>, <strong>Right</strong>, or <strong>Center</strong>.</td></tr></tbody></table>

## Section layout

***

Adjust the overall section style by changing the **section width** and **grid spacing** (between blocks).

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the **Grid** section to open the settings.
2. Choose whether to set the **Content width** of the section to **Full width**.
3. Use the slider to control the **Grid spacing** between the blocks.
4. Click **Save**.

</details>

<table><thead><tr><th width="163">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Enable full width</td><td>Choose to display headings as center-aligned within section. Uncheck this option to align headings to the left.</td></tr><tr><td>Grid spacing</td><td>Increase or decrease the spacing between the grid blocks: between 0 and 50 pixels.</td></tr></tbody></table>

***

> **Related links**
>
> [Collection list grid](https://help.fluorescent.co/stiletto/sections/theme-sections/collection-list-grid)\
> [Featured collection grid](https://help.fluorescent.co/stiletto/sections/theme-sections/featured-collection-grid)\
> [Gallery carousel](https://help.fluorescent.co/stiletto/sections/theme-sections/gallery-carousel)\
> [Multi-column](https://help.fluorescent.co/stiletto/sections/theme-sections/multi-column)