The Custom content section provides design flexibility and a customizable layout to display any type of content such as videos, featured collections, or even image cards, etc.
This section makes room for customization beyond standardized templates, empowering you to create visually appealing and engaging pages tailored to your business needs and branding requirements.
In this article, we will show you how to add a Custom content section.
How to add a Custom content section to your Shopify store
Steps
In the theme editor (Customize), click Add section
Select Custom content.
Make necessary changes.
Save the settings.
How to edit a Custom content section
Section settings
General
Container: Choose between Full width or Fixed width layout.
Color scheme: Select a background/text color combo to match your brand. Learn more: Colors
Enable sticky columns on desktop: Stick a column while the user scrolls (optional, for advanced storytelling layouts).
Section header
Subheading, Heading, and Text: Introduce your section with clear messaging.
Text alignment: Align left, center, or right.
Heading size and Text size: Control typography hierarchy.
Grid settings
Column gap / Row gap: Adjust spacing between content blocks for a tighter or more open look.
Mobile layout
If you are not into the grid layout, you can use the carousel layout by selecting the Enable swipe on mobile.
Block settings
Each block comes with common settings and its settings.
Block settings
Container width: Choose how wide the block.
Vertical alignment: Align the block vertically within its section (Top, Middle, Bottom).
Choose from available block types:
Image card
Highlight a promotion, collection, or featured content using a custom image, headline, text, and optional call-to-action button — all wrapped in a clean and responsive layout.
Adjust the Color scheme for the block. Learn more Colors
Image settings
Image: Upload an image for the card.
Image ratio: Choose how the image scales (e.g. adapt to image or fixed aspect ratio).
Image overlay opacity: Add a dark overlay for better text readability.
Content settings
Content position: Choose where the text/button appears.
Content alignment: Align text left, center, or right.
Content spacing: Adjust padding around the text.
Card link: Add a link to the image that directs customers to a desired page.
Subheading & Heading: Add eye-catching titles.
Text: Add supporting promo or product details.
Button label: Add a call-to-action button to the card content.
Button style: Choose between primary, secondary, underline, etc.
Badge settings
You can add a promotional badge like “Save 40%” or “New” to catch the shopper’s attention with deals or labels.
Show badge: Toggle on/off.
Color scheme: Style it to match your theme.
Shape: Circle or Square.
Position: Top right/Top left/Button right/Button left.
Subtext & Text: Customize your badge message (e.g. Save / 40%).
The size of the badge depends on the length of the badge content.
Mobile settings
Choose a mobile-specific image if needed for better display.
Toggle Show content below image to stack text/button under the image on smaller screens.
Video
Embed a branded video directly into your page layout.
Video source: Choose between:
Shopify-hosted video: Upload the video directly to your Shopify files.
Embed via URL: Paste a YouTube or Vimeo link for an external video.
Cover image: Upload a custom thumbnail that displays before the video plays.
Video ratio: Choose how the video scales (e.g. “Adapt to image” for flexibility) - apply to Shopify-hosted video.
Alt text: Add a short description for screen readers and accessibility.
Enable video autoplay: Autoplays the video when it enters the viewport (muted for browser compliance).
Enable video looping: Repeats the video automatically when it ends.
Use a clear, high-resolution cover image if your video doesn’t autoplay.
Keep videos under 60 seconds for higher engagement.
Add alt text for accessibility and better SEO.
Pair with a text block or button for strong CTAs.
Image
A simple but effective visual element that allows you to add high-quality static images anywhere on your page.
Upload your custom image or choose from free Shopify image resources.
Use a high-resolution, well-composed image for best visual impact.
If you want to add an overlay text over the image, use Image card block instead.
Text
A flexible content element that lets you add formatted headings, body text, and an optional button.
Subheading: Small line of text to introduce the section.
Heading: Main bold title (supports rich formatting)
Text: Paragraph or message that explains your brand, product, or story (supports links, formatting).
Text size: Adjust font size for text block body (e.g. base, small, large)
Button settings (Optional):
Button label: Add a CTA.
Button link: Choose a destination (product, collection, custom URL)
Button style: Choose a visual style.
Lookbook card
Feature a lifestyle image with a pop-up overlay that displays up to 5 tagged products, making it easy for customers to “Shop the Look.”
Products: Select up to 5 products that are tagged on the card.
Heading: Display a heading above the tagged products.
Image card with product
Perfect for showcasing a specific product with a compelling image, headline, subheading, and call-to-action — all in a clean, card-style layout.
Image: Upload or select a featured image that will appear on the card.
Image ratio: Choose between Adapt to image or a fixed ratio. This ensures the layout fits the design aesthetic of your store.
Content: Enter a subheading, heading, and text for the image card.
Button: Add a CTA button next to the selected product that directs customers to the product details page.
Product: Link a product directly within the card. Once selected:
The product title and price will automatically appear.
A thumbnail preview will show at the bottom of the card.
Pair this block with a strong product and a limited-time promo to increase conversion.
You can add multiple Image card with product blocks in one Custom content section to create a gallery-style product showcase
Hotspot card
Showcase products within a lifestyle image. Each clickable hotspot can be linked to a specific product, letting users explore items visually — perfect for “Shop the Look” or “Get Inspired by Spaces” sections.
General settings
Icon style: Choose between Plus or Dot styles.
Icon color: Light or Dark, depending on your image for best contrast.
Image settings
Upload a high-quality image that fits your branding.
Image ratio: Set how the image is scaled (e.g. Adapt to image or a fixed ratio).
Product hotspots
You can tag up to 4 products in one image.
For each:
Product: Select the product you want to showcase.
Vertical alignment: Controls how high or low the icon appears (0–100%).
Horizontal alignment: Moves the icon left or right across the image (0–100%).
The product card appears when users hover or tap the icon.
Use simple backgrounds to keep hotspots visible.
Stick with 2–3 hotspots per image to avoid clutter.
Make sure each tagged product is visible in the photo.
Align products logically with where they appear in the image.
Use icon style that contrasts with your image for accessibility.
Best practices:
Best practice: Pair with text or buttons in other blocks for interactive storytelling.
