Custom Content
Build flexible multi-column layouts combining image cards and text cards with fully customizable widths and spacing.
This section is a flexible block-based layout builder that combines image cards and text cards in any configuration. Each block has an independently adjustable width, allowing merchants to create varied multi-column layouts such as two-column splits, full-width banners, or asymmetric grids. Image cards support separate mobile images and optional links, while text cards support a subheading, heading, rich text, button, text color, and alignment.
How to Edit the Custom Content Section
- From your Shopify admin, go to Online Store → Themes.
- Click Customize on the active theme.
- Select the Custom Content section from the left sidebar.
- Add Image Card or Text blocks and adjust the settings according to your preferences.
- Click Save to apply your changes.
Section Settings
General
- Color Scheme: Select a color scheme applied to the section.
- Padding Top: Controls the top padding of the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Padding Bottom: Controls the bottom padding of the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Margin Top: Controls the spacing above the section. Scales automatically across desktop, laptop, tablet, and mobile.
- Margin Bottom: Controls the spacing below the section. Scales automatically across desktop, laptop, tablet, and mobile.
Layout
- Column Gap: Controls the horizontal spacing between blocks. Default: 24px.
- Row Gap: Controls the vertical spacing between rows of blocks when they wrap. Default: 24px.
Blocks
The section is built using blocks that can be added, removed, and reordered freely. Each block's width can be adjusted independently to build custom multi-column layouts.
Image Card Block
- Image: Upload the image displayed in the card.
- Mobile Image: Upload a separate image optimized for mobile devices. If left blank, the desktop image is used at smaller widths.
- Image Link: Optionally assign a destination URL to make the image clickable.
- Width: Controls the width of the card as a percentage of the row. Range: 16–100%. Default: 50%.
Text Block
- Subheading: Enter an optional subheading displayed above the main heading.
- Heading: Enter the heading text for the card.
- Text Size: Controls the heading size. Options: Small — H3; Medium — H2; Large — H1. Default: Medium.
- Text: Add rich text body content supporting formatting such as bold, italic, lists, and links.
- Button Label: Enter the text for the call-to-action button.
- Button Link: Assign a destination URL for the button.
- Text Color: Sets the color of the text content. Options: White; Black; Inherit — uses the active color scheme text color. Default: Inherit.
- Text Alignment: Controls the horizontal alignment of the text content. Options: Left, Center, Right. Default: Left.
- Width: Controls the width of the card as a percentage of the row. Range: 16–100%. Default: 50%.
Fallback Behaviour
If an Image Card block has no image assigned, a placeholder graphic is displayed automatically. This ensures the section remains visually structured during store setup and content management.
Best Practices
Do
- Use high-quality images that complement the surrounding text content.
- Balance block widths so the layout feels visually consistent.
- Upload separate mobile images for image cards used in narrow columns.
- Use the width setting to create varied layouts such as 2-column splits or full-width banners.
- Keep text card content concise, especially when paired with narrower widths.
Don't
- Use low-resolution images that appear blurry alongside sharp text.
- Set block widths that don't add up cleanly across a row, which may cause uneven wrapping.
- Add excessive body text in narrow text card widths, as it can feel cramped.
- Leave image card blocks without an image, as the placeholder may not match your design intent.
- Use white text color on light color schemes, as it may reduce readability.