Banner card

A Complete Guide to Customizing the Variant Picker
A Step-by-Step Guide to Personalizing Your Product Pages with Custom Options
Banner card
Custom Fonts: How to Set Them Up in the Wonder Theme
Customizing Your Theme by Editing Theme Files
How to Set Up a Mega menu (Promotion Menu) in Your Shopify Theme: A Step-by-Step Guide
How to Set Up a Product Variations Block in Product Page
How to Set Up a Transparent Header in the Wonder Theme
Maximizing SEO Potential Within Your Theme
Multi-Images Variant Gallery
Sharing a Preview of Your Shopify Theme
Standard Variant Picker vs. Product Variations Block
Unlocking Page Speed Mastery for Your Shopify Store
Which Reviews App Should You Use on Shopify? (Free & Paid Options)

Banner Card Block

Banner Card is a special element that allows you to place a highlighted banner directly within the product grid on a collection page. Instead of a regular product card, a banner appears in a selected position within the grid — perfect for promotions, marketing messages, or highlighting key offers without disrupting the collection layout.

‍

How to set up Banner Card block?

  • Go to the collection template and select the Product grid section.
  • Add a Card Banner block.
  • Add a text and/or a button to display on the banner.
  • Select the banner position — for example, “Position before nth product: 5” means the card banner will appear before the 5th product in the grid.
  • Choose the image width to span one or two columns, separately for large and mobile screens.
  • Add an image and adjust the text size and text position for both large and mobile screens

Main settings

General

  • Text: Add main text content displayed on the card banner.
  • Text style: Choose the visual style of the banner text (headline or body)
  • Button text: Add text displayed inside the banner button.
  • Style: Choose button style (primary, secondary or underline link)
  • Banner link: Add a URL to redirect users when the banner card is clicked.
  • Position before nth product: Defines where the card banner appears in the product grid.For example, setting 5 places the banner before the 5th product.

Large screen version

  • Banner column width: Choose whether the banner spans one or two columns on desktop.
  • Font size scale: Adjust the text size for large screens.
  • Image: Image displayed inside the banner on desktop.
  • A Shopify-hosted video: Optional video to display instead of an image on desktop. Note: adding a video will override the image, so the video will be shown instead.
  • Vertical text position: Set the vertical alignment of text inside the banner on desktop (top, center, or bottom)
  • Horizontal text position: Set the alignment of text within the banner on desktop (left, center, or right).

Mobile version

  • Banner column width: Choose whether the banner spans one or two columns on mobile devices.
  • Font size scale: Adjust the text size for mobile screens.
  • Image: Image displayed inside the banner on mobile.
  • A Shopify-hosted video: Optional video to display instead of an image on mobile. Note: adding a video will override the image, so the video will be shown instead.
  • Vertical text position: Set the vertical alignment of text inside the banner on mobile (top, center, or bottom)
  • Horizontal text position: Set the alignment of text within the banner on mobile (left, center, or right).

Colors

  • Text color: Choose the color of the text displayed on the banner.
  • Background color: Set the background color of the banner overlay
  • Background opacity: Adjust the transparency level of the banner background.

‍

‍

Back