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
Add or open Content Tiles
Add the Content Tiles section to a compatible template or select the existing section from the left sidebar.
Adjust the main settings first
Start with the structural settings such as layout, width, color scheme, spacing, or content source before refining smaller details.
Section settings
Settings
Spacing
Spacing
Choose how Spacing behaves in the section.Available options: Standard, Compact.Default:
standardTile corner radius
Tile corner radius
Adjust Tile corner radius with a slider-based control.Range:
0 to 8 Default: 0.8remMinimum height of each row
Minimum height of each row
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: 0remCommon settings
Section width
Section width
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:
pageColor scheme
Color scheme
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.Default:
scheme-1Top spacing
Top spacing
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:
2Bottom spacing
Bottom spacing
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:
2Section border
Section border
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:
noneShow on
Show on
Choose how Show on behaves in the section.Available options: Desktop, Mobile, Both.Default:
bothBlock settings
Content Tile
This block controls the content tile content used inside the Content Tiles section.
Settings
Show on
Show on
Choose how Show on behaves in the section.Available options: Desktop, Mobile, Both.Default:
bothColumn factor
Column factor
Adjust Column factor with a slider-based control.Range:
1 to 12 Default: 1Row factor
Row factor
Adjust Row factor with a slider-based control.Range:
1 to 12 Default: 1Mobile grid and row settings
Mobile grid and row settings
Enable or disable Mobile grid and row settings.Default:
disabledColumn factor (mobile)
Column factor (mobile)
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.Row factor (mobile)
Row factor (mobile)
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.Color scheme
Color scheme
Select the color scheme used for color scheme.Use this to keep contrast and branding consistent with the rest of the store.Default:
scheme-1Gradient background
Gradient background
Controls gradient background.
Aspect ratio
Aspect ratio
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:
autoContent
Vertical alignment
Vertical alignment
Choose how Vertical alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⤒, Center, ⤓.Default:
startHorizontal alignment
Horizontal alignment
Choose how Horizontal alignment behaves in the section.It has the strongest effect on layout balance and visual hierarchy.Available options: ⇤, Center, ⇥.Default:
startContent padding
Content padding
Choose how Content padding behaves in the section.Available options: No, S, M, L, ↺.Default:
defaultShow content tile media
Show content tile media
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.Show content tile icon
Show content tile icon
Enable or disable Show content tile icon.Default:
disabledThis setting only appears when its related parent option is enabled.Media
Show on
Show on
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.Media position
Media position
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.Aspect ratio
Aspect ratio
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.Object fit
Object fit
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.Image
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.
Video
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.
External video
External 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.
Enable mobile specific media
Enable mobile specific media
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
Aspect ratio
Aspect ratio
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.Image
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.
Video
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.
External video
External 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.
Icon
Icon position
Icon position
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.Icon width
Icon width
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.SVG code
SVG code
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.
- 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.