HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Change the default sorting of a collection
    • Combined listings app
    • Customize the checkout
    • Remove 'Powered by Shopify' in Copyright
    • Remove text Tax included and Shipping calculated at checkout below the product price
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How to add a Custom content section to your Shopify store
  • How to edit a Custom content section
  • Section settings
  • Block settings
  1. Theme sections

Custom content

Produce a flexible and unique Custom content that deatures extra information regarding store's recognition

PreviousCountdown timerNextCustom liquid

Last updated 2 months ago

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

  1. In the theme editor (Customize), click Add section

  2. Select Custom content.

  3. Make necessary changes.

  4. 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.

Best practices:

Best practices:

🌟
🌟
🌟
🌟
Custom content - image card blocks
Image card blocks
Hotspot card blocks
Try Foxify free now