Adding more Image Cards to 'Banner with Tab' section

Store Design
1

Hi friends, There is a ‘Banner with Tab ‘ section in Shopify -Hyper theme. We can put 1 image card in each Tab . ( Pls check the attached image)

Can someone please help me , add 2-3 image cards in the Tab.

Banner with Tabs
Banner with Tabs1920×1200 321 KB

2

Hi @SurTri

Since the Hyper theme limits each Tab block to only one image card, we must edit the section’s Liquid file to:

  1. Allow multiple image blocks inside each tab
  2. Output those blocks in a grid or slider layout

Below is the step-by-step tutorial you can follow.

Locate the Section

In Shopify Admin:

Online Store → Themes → Edit Code

Search for a file like:

  • sections/banner-with-tab.liquid
    OR
  • sections/tab-banner.liquid
    OR something similar (Hyper theme names vary slightly)

Open that file.

Find the Tab Block Output

Inside that section, you will see something like:

{% for block in section.blocks %}
  {% if block.type == 'tab' %}
    <div class="tab-content">
      <img src="{{ block.settings.image | img_url: 'master' }}" />
    </div>
  {% endif %}
{% endfor %}

This is where the problem is —
The theme expects only one image per tab, so it only renders a single image setting.

Add Repeatable Image Blocks

We will add new block type called "tab_image" so each tab can have unlimited images.

Add to schema ({% schema %} area):

Find the "blocks" array inside the schema and add:

{
  "type": "tab_image",
  "name": "Tab Image",
  "settings": [
    {
      "type": "image_picker",
      "id": "tab_img",
      "label": "Image"
    },
    {
      "type": "text",
      "id": "tab_id",
      "label": "Tab ID (match the tab this image belongs to)"
    }
  ]
}

This allows the merchant to upload multiple images for any tab.

Render Multiple Images in Each Tab

Find where each tab’s content is printed, and replace the current image output with:

<div class="tab-images-grid">
  {% for img_block in section.blocks %}
    {% if img_block.type == 'tab_image' and img_block.settings.tab_id == block.id %}
      <div class="tab-image-card">
        <img src="{{ img_block.settings.tab_img | img_url: '800x' }}" alt="">
      </div>
    {% endif %}
  {% endfor %}
</div>

This will show every image block that matches the tab.

Add Basic CSS

Add inside theme.css (or your section stylesheet):

.tab-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.tab-image-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
3

Hi,

Hope this will help

Hyper theme only allows one card per tab by default and to add 2 - 3 cards you need to modify the banner with tab section code (section-banner-with-tabs.liquid or in sections or under a similar name).

Two main approaches you can do:

  • Duplicate image card block in the section
  • Convert the existing block into an image grid layout

Update the CSS for proper alignment