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
{% hint style="success" %}
Steps
1. In the theme editor (**Customize**), click **Add section**
2. Select **Custom content.**
3. Make necessary changes.
4. **Save** the settings.
{% endhint %}
## 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](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")
* **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
Image card blocks
Hotspot card blocks
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](https://docs.foxecom.com/hyper-theme/theme-settings/colors "mention")
#### 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%).
{% hint style="info" %}
The size of the badge depends on the length of the badge content.
{% endhint %}
#### 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.
{% hint style="info" %}
:star2: **Best practices:**
* 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.
{% endhint %}
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.
{% hint style="info" %}
:star2: Best practice: Pair with **text** or **buttons** in other blocks for interactive storytelling.
{% endhint %}
{% hint style="info" %}
If you want to add an overlay text over the image, use [#image-card](#image-card "mention") block instead.
{% endhint %}
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.
{% hint style="info" %}
:star2: Best practices:
* 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
{% endhint %}
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.
{% hint style="info" %}
:star2: **Best practices:**
* 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.
{% endhint %}
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**.
{% hint style="info" %}
Use the swipe option for larger collections to save space while showcasing more products.
{% endhint %}
**Block settings**
* **Container width:** Set the width of your block
* **Vertical alignment:** Choose the vertical alignment of the block (Top/Middle/Bottom)
***
.jpg?alt=media&token=f7325f98-d4d8-4230-a333-7e23ba09c259)
.gif?alt=media&token=cfdfc2c5-eefd-4d17-b01b-d5493ff3918d)
.png?alt=media&token=90cbed2c-e791-49c8-9f43-49a08bed6f1f)