Custom content
Produce a flexible and unique Custom content that deatures extra information regarding store's recognition
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%).
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.
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.
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.
Image: Upload image/video to the lookbook card and adjust image ratio
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.
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
PlusorDotstyles.
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.
Collections 🔥
Showcase a group of related products under a collection. It is typically used to highlight specific product categories, seasonal selections, or promotional items to guide your customers and increase engagement.
Collection list: Choose collections used in the block.
Grid settings
Maximum products to show: Set the total number of products visible in the section (between 2 and 12).
Number of columns on desktop (between 2 and 4): Adjust the number of products displayed per row for desktop users.
You can also control the suitable spacing between the product cards by selecting Column gap and Row gap options.
Carousel settings
Enable carousel on desktop: Toggle this option to display the products as a scrolling carousel.
Image ratio: Select the aspect ratio for product images.
Use global settings
Adapt to image
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Carousel shows only when the number of products is larger than the number of columns.
Mobile layout
You can adjust the Number of columns on mobile to 1 column or 2 columns.
If you are not into the grid layout, you can use the carousel layout by selecting the Enable swipe on mobile.
Block settings
Container width: Set the width of your block
Vertical alignment: Choose the vertical alignment of the block (Top/Middle/Bottom)
Last updated