> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Content Tiles

> Configure Everest's content tiles section and its main settings, content structure, and styling controls.

The Content Tiles section lets you control the content, layout, and presentation of this part of the Everest storefront. Most changes happen directly in the Theme Customizer, so you can adjust structure first and then refine styling, spacing, and supporting blocks with confidence.

<img src="https://mintcdn.com/digifist/crnQ7_4eUchG30ih/images/theme/everest/sections/content-tiles/content-tiles-overview.png?fit=max&auto=format&n=crnQ7_4eUchG30ih&q=85&s=dea2c3e1b88fee1b1ad95f47ea993658" alt="Content Tiles overview" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-overview.png" />

## What this section controls

* Layout structure, width, alignment, and spacing
* Color schemes, contrast, and shared visual styling
* Block types such as Content Tile

## Getting started

<Steps>
  <Step title="Open the Theme Customizer">
    In Shopify admin, go to **Online Store** -> **Themes** -> **Customize**.
  </Step>

  <Step title="Add or open Content Tiles">
    Add the **Content Tiles** section to a compatible template or select the existing section from the left sidebar.
  </Step>

  <Step title="Adjust the main settings first">
    Start with the structural settings such as layout, width, color scheme, spacing, or content source before refining smaller details.
  </Step>

  <Step title="Review blocks and supporting content">
    Add, remove, or reorder blocks after the main layout feels right so content hierarchy stays easier to manage.
  </Step>
</Steps>

<img src="https://mintcdn.com/digifist/crnQ7_4eUchG30ih/images/theme/everest/sections/content-tiles/content-tiles-location.png?fit=max&auto=format&n=crnQ7_4eUchG30ih&q=85&s=c0c6389f3aff8d3e3c95b90f562519dd" alt="Content Tiles location in Theme Customizer" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-location.png" />

## Section settings

### Settings

<img src="https://mintcdn.com/digifist/F1GAV19RsJHhaiJ_/images/theme/everest/sections/content-tiles/content-tiles-settings.png?fit=max&auto=format&n=F1GAV19RsJHhaiJ_&q=85&s=f722176d3291a2d4a1e09683b77c8436" alt="Content Tiles Settings settings" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-settings.png" />

<AccordionGroup>
  <Accordion title="Spacing" icon="grid">
    Choose how **Spacing** behaves in the section.

    **Available options:** Standard, Compact.

    **Default:** `standard`
  </Accordion>

  <Accordion title="Tile corner radius" icon="sparkles">
    Adjust **Tile corner radius** with a slider-based control.

    **Range:** `0` to `8`  **Default:** `0.8rem`
  </Accordion>

  <Accordion title="Minimum height of each row" icon="sparkles">
    Adjust **Minimum height of each row** with a slider-based control.

    It has the strongest effect on layout balance and visual hierarchy.

    **Range:** `0` to `100`  **Default:** `0rem`
  </Accordion>
</AccordionGroup>

### Common settings

<img src="https://mintcdn.com/digifist/F1GAV19RsJHhaiJ_/images/theme/everest/sections/content-tiles/content-tiles-common-settings.png?fit=max&auto=format&n=F1GAV19RsJHhaiJ_&q=85&s=e5cac10ec3aedcbca40005fe25283a5d" alt="Content Tiles Common settings" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-common-settings.png" />

<AccordionGroup>
  <Accordion title="Section width" icon="grid">
    Choose how **Section width** behaves in the section.

    This setting shapes the section container and how it sits against surrounding content.

    **Available options:** Page, Fluid, Full.

    **Default:** `page`
  </Accordion>

  <Accordion title="Color scheme" icon="palette">
    Select the color scheme used for **color scheme**.

    Use this to keep contrast and branding consistent with the rest of the store.

    **Default:** `scheme-1`
  </Accordion>

  <Accordion title="Top spacing" icon="grid">
    Choose how **Top spacing** behaves in the section.

    This setting shapes the section container and how it sits against surrounding content.

    **Available options:** No, S, M, L, XL.

    **Default:** `2`
  </Accordion>

  <Accordion title="Bottom spacing" icon="grid">
    Choose how **Bottom spacing** behaves in the section.

    This setting shapes the section container and how it sits against surrounding content.

    **Available options:** No, S, M, L, XL.

    **Default:** `2`
  </Accordion>

  <Accordion title="Section border" icon="grid">
    Choose how **Section border** behaves in the section.

    This setting shapes the section container and how it sits against surrounding content.

    **Available options:** None, Top, Bottom, Both.

    **Default:** `none`
  </Accordion>

  <Accordion title="Show on" icon="eye">
    Choose how **Show on** behaves in the section.

    **Available options:** Desktop, Mobile, Both.

    **Default:** `both`
  </Accordion>
</AccordionGroup>

## Block settings

### Content Tile

<img src="https://mintcdn.com/digifist/F1GAV19RsJHhaiJ_/images/theme/everest/sections/content-tiles/content-tiles-content-tile.png?fit=max&auto=format&n=F1GAV19RsJHhaiJ_&q=85&s=a461587eed193fa992628f10247871dd" alt="Content Tiles Content Tile settings" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-content-tile.png" />

This block controls the **content tile** content used inside the Content Tiles section.

### Settings

<img src="https://mintcdn.com/digifist/F1GAV19RsJHhaiJ_/images/theme/everest/sections/content-tiles/content-tiles-settings-2.png?fit=max&auto=format&n=F1GAV19RsJHhaiJ_&q=85&s=addf030eb265f66254f0e2a6f01ccdc2" alt="Content Tiles Settings settings" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-settings-2.png" />

<AccordionGroup>
  <Accordion title="Show on" icon="eye">
    Choose how **Show on** behaves in the section.

    **Available options:** Desktop, Mobile, Both.

    **Default:** `both`
  </Accordion>

  <Accordion title="Column factor" icon="sparkles">
    Adjust **Column factor** with a slider-based control.

    **Range:** `1` to `12`  **Default:** `1`
  </Accordion>

  <Accordion title="Row factor" icon="sparkles">
    Adjust **Row factor** with a slider-based control.

    **Range:** `1` to `12`  **Default:** `1`
  </Accordion>

  <Accordion title="Mobile grid and row settings" icon="eye">
    Enable or disable **Mobile grid and row settings**.

    **Default:** `disabled`
  </Accordion>

  <Accordion title="Column factor (mobile)" icon="eye">
    Adjust **Column factor (mobile)** with a slider-based control.

    **Range:** `1` to `12`  **Default:** `12`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Row factor (mobile)" icon="eye">
    Adjust **Row factor (mobile)** with a slider-based control.

    **Range:** `1` to `12`  **Default:** `1`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Color scheme" icon="palette">
    Select the color scheme used for **color scheme**.

    Use this to keep contrast and branding consistent with the rest of the store.

    **Default:** `scheme-1`
  </Accordion>

  <Accordion title="Gradient background" icon="palette">
    Controls **gradient background**.
  </Accordion>

  <Accordion title="Aspect ratio" icon="grid">
    Choose how **Aspect ratio** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Auto, 1:1, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2.

    **Default:** `auto`
  </Accordion>
</AccordionGroup>

### Content

<img src="https://mintcdn.com/digifist/F1GAV19RsJHhaiJ_/images/theme/everest/sections/content-tiles/content-tiles-content.png?fit=max&auto=format&n=F1GAV19RsJHhaiJ_&q=85&s=c1cc72ba64e72a244d7c8d9b59bbadb9" alt="Content Tiles Content settings" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-content.png" />

<AccordionGroup>
  <Accordion title="Vertical alignment" icon="sparkles">
    Choose how **Vertical alignment** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** ⤒, Center, ⤓.

    **Default:** `start`
  </Accordion>

  <Accordion title="Horizontal alignment" icon="sparkles">
    Choose how **Horizontal alignment** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** ⇤, Center, ⇥.

    **Default:** `start`
  </Accordion>

  <Accordion title="Content padding" icon="sparkles">
    Choose how **Content padding** behaves in the section.

    **Available options:** No, S, M, L, ↺.

    **Default:** `default`
  </Accordion>

  <Accordion title="Show content tile media" icon="image">
    Enable or disable **Show content tile media**.

    Review the result on both desktop and mobile when media changes are involved.

    **Default:** `disabled`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Show content tile icon" icon="image">
    Enable or disable **Show content tile icon**.

    **Default:** `disabled`

    This setting only appears when its related parent option is enabled.
  </Accordion>
</AccordionGroup>

### Media

<img src="https://mintcdn.com/digifist/F1GAV19RsJHhaiJ_/images/theme/everest/sections/content-tiles/content-tiles-media.png?fit=max&auto=format&n=F1GAV19RsJHhaiJ_&q=85&s=f81a2b75283bdb19435812a103101351" alt="Content Tiles Media settings" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-media.png" />

<AccordionGroup>
  <Accordion title="Show on" icon="image">
    Choose how **Show on** behaves in the section.

    Review the result on both desktop and mobile when media changes are involved.

    **Available options:** Desktop, Mobile, Both.

    **Default:** `both`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Media position" icon="image">
    Choose how **Media position** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Top, Bottom, Start, End, Background.

    **Default:** `top`

    This setting only appears when its related parent option is enabled.

    Desktop and tablet only. Automatically adjusted for mobile.
  </Accordion>

  <Accordion title="Aspect ratio" icon="image">
    Choose how **Aspect ratio** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Auto, Square, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2.

    **Default:** `auto`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Object fit" icon="image">
    Choose how **Object fit** behaves in the section.

    Review the result on both desktop and mobile when media changes are involved.

    **Available options:** Cover, Contain.

    **Default:** `cover`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Image" icon="image">
    Upload or choose an image for **image**.

    Review the result on both desktop and mobile when media changes are involved.

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Video" icon="video">
    Choose a hosted video for **video**.

    Review the result on both desktop and mobile when media changes are involved.

    This setting only appears when its related parent option is enabled.

    Overwrites the image.
  </Accordion>

  <Accordion title="External video" icon="video">
    Paste an external video URL for **external video**.

    Review the result on both desktop and mobile when media changes are involved.

    This setting only appears when its related parent option is enabled.

    Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.
  </Accordion>

  <Accordion title="Enable mobile specific media" icon="image">
    Enable or disable **Enable mobile specific media**.

    Review the result on both desktop and mobile when media changes are involved.

    **Default:** `disabled`

    This setting only appears when its related parent option is enabled.

    Displays mobile-specific alternative media. Add a media before setting a mobile alternative.
  </Accordion>
</AccordionGroup>

### Media for mobile

<img src="https://mintcdn.com/digifist/F1GAV19RsJHhaiJ_/images/theme/everest/sections/content-tiles/content-tiles-media-for-mobile.png?fit=max&auto=format&n=F1GAV19RsJHhaiJ_&q=85&s=959d2b421670dbfc42604fb04be044ca" alt="Content Tiles Media for mobile settings" width="3280" height="2186" data-path="images/theme/everest/sections/content-tiles/content-tiles-media-for-mobile.png" />

<AccordionGroup>
  <Accordion title="Aspect ratio" icon="image">
    Choose how **Aspect ratio** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Auto, Square, 4:3, 3:4, 3:2, 2:3, 5:4, 4:5, 16:9, 9:16, 2:1, 4:1, 8:1, 1:2.

    **Default:** `auto`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Image" icon="image">
    Upload or choose an image for **image**.

    Review the result on both desktop and mobile when media changes are involved.

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Video" icon="video">
    Choose a hosted video for **video**.

    Review the result on both desktop and mobile when media changes are involved.

    This setting only appears when its related parent option is enabled.

    Overwrites the image.
  </Accordion>

  <Accordion title="External video" icon="video">
    Paste an external video URL for **external video**.

    Review the result on both desktop and mobile when media changes are involved.

    This setting only appears when its related parent option is enabled.

    Overwrites the image and video. We recommend above video option for better performance, external videos can cause performance issues. Use a YouTube or Vimeo URL.
  </Accordion>
</AccordionGroup>

### Icon

<img src="https://mintlify.s3.us-west-1.amazonaws.com/digifist/images/theme/everest/sections/content-tiles/content-tiles-icon.png" alt="Content Tiles Icon settings" />

<AccordionGroup>
  <Accordion title="Icon position" icon="image">
    Choose how **Icon position** behaves in the section.

    It has the strongest effect on layout balance and visual hierarchy.

    **Available options:** Top, Bottom, Start, End.

    **Default:** `start`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="Icon width" icon="image">
    Adjust **Icon width** with a slider-based control.

    It has the strongest effect on layout balance and visual hierarchy.

    **Range:** `0` to `40`  **Default:** `3.6rem`

    This setting only appears when its related parent option is enabled.
  </Accordion>

  <Accordion title="SVG code" icon="image">
    Enter the content used for **svg code**.

    This setting only appears when its related parent option is enabled.

    You can use SVG code for custom icons.
  </Accordion>
</AccordionGroup>

**Supports nested blocks:**

* **Heading** for more granular content inside this block.
* **Text** for more granular content inside this block.
* **Button** for more granular content inside this block.

## Best practices

* Check contrast after changing color schemes so text and controls remain easy to read.
* Adjust layout changes alongside neighboring sections so page rhythm stays consistent.
* Start with the structural settings first, then refine decorative styling after the layout feels settled.
* Preview the section with realistic content length to catch spacing and wrapping issues early.

## Related guides

* [Everest Theme Overview](/themes/everest/index)
* [Everest Header](/themes/everest/header/header)