Skip to main content
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. Content Tiles overview

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

1

Open the Theme Customizer

In Shopify admin, go to Online Store -> Themes -> Customize.
2

Add or open Content Tiles

Add the Content Tiles section to a compatible template or select the existing section from the left sidebar.
3

Adjust the main settings first

Start with the structural settings such as layout, width, color scheme, spacing, or content source before refining smaller details.
4

Review blocks and supporting content

Add, remove, or reorder blocks after the main layout feels right so content hierarchy stays easier to manage.
Content Tiles location in Theme Customizer

Section settings

Settings

Content Tiles Settings settings
Choose how Spacing behaves in the section.Available options: Standard, Compact.Default: standard
Adjust Tile corner radius with a slider-based control.Range: 0 to 8 Default: 0.8rem
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

Common settings

Content Tiles Common settings
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
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
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
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
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
Choose how Show on behaves in the section.Available options: Desktop, Mobile, Both.Default: both

Block settings

Content Tile

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

Settings

Content Tiles Settings settings
Choose how Show on behaves in the section.Available options: Desktop, Mobile, Both.Default: both
Adjust Column factor with a slider-based control.Range: 1 to 12 Default: 1
Adjust Row factor with a slider-based control.Range: 1 to 12 Default: 1
Enable or disable Mobile grid and row settings.Default: disabled
Adjust Column factor (mobile) with a slider-based control.Range: 1 to 12 Default: 12This setting only appears when its related parent option is enabled.
Adjust Row factor (mobile) with a slider-based control.Range: 1 to 12 Default: 1This setting only appears when its related parent option is enabled.
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
Controls gradient background.
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

Content

Content Tiles Content settings
Choose how Vertical alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⤒, Center, ⤓.Default: start
Choose how Horizontal alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⇤, Center, ⇥.Default: start
Choose how Content padding behaves in the section.Available options: No, S, M, L, ↺.Default: default
Enable or disable Show content tile media.Review the result on both desktop and mobile when media changes are involved.Default: disabledThis setting only appears when its related parent option is enabled.
Enable or disable Show content tile icon.Default: disabledThis setting only appears when its related parent option is enabled.

Media

Content Tiles Media settings
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: bothThis setting only appears when its related parent option is enabled.
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: topThis setting only appears when its related parent option is enabled.Desktop and tablet only. Automatically adjusted for mobile.
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: autoThis setting only appears when its related parent option is enabled.
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: coverThis setting only appears when its related parent option is enabled.
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.
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.
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.
Enable or disable Enable mobile specific media.Review the result on both desktop and mobile when media changes are involved.Default: disabledThis setting only appears when its related parent option is enabled.Displays mobile-specific alternative media. Add a media before setting a mobile alternative.

Media for mobile

Content Tiles Media for mobile settings
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: autoThis setting only appears when its related parent option is enabled.
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.
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.
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.

Icon

Content Tiles Icon settings
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: startThis setting only appears when its related parent option is enabled.
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.6remThis setting only appears when its related parent option is enabled.
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.
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.