Adding text and link button over an image in multicolumn ( Trade Theme )

[Flightsnowboard]

Hey Team Shopify!!

Just wanting to find a way to add text and a clickable link button on top of an image in a multi column.

Have tried other methods provided on this site with no luck.

any help would be greatly appreciated!! Using Trade Theme

[Dan-From-Ryviu]

Please share the link to your store with multiple column section so I can give you the code

[Dills1]

Hi, yes its possible. You can either insert ithe image as a background image property and have the text and button element on top

1. Go to **Online Store > Themes > Customize**

2. Add a new section: **Sections > Image with text**

3. Set the layout to **"Collage"** or **"Overlap"** in the section settings

4. Enable **"Show multiple columns"**

### 2. Configure Each Column

For each column:

```liquid

{% schema %}

{

  "name": "Multi-column Images",

  "blocks": [

    {

      "type": "column",

      "name": "Column",

      "settings": [

        {

          "type": "image_picker",

          "id": "image",

          "label": "Image"

        },

        {

          "type": "text",

          "id": "title",

          "label": "Heading",

          "default": "Collection Name"

        },

        {

          "type": "text",

          "id": "button_text",

          "label": "Button Text",

          "default": "Shop Now"

        },

        {

          "type": "url",

          "id": "button_link",

          "label": "Button Link"

        }

      ]

    }

  ],

  "presets": [

    {

      "name": "Image Columns with Text",

      "blocks": [

        { "type": "column" },

        { "type": "column" },

        { "type": "column" }

      ]

    }

  ]

}

{% endschema %}

```

### 3. Add This CSS (Theme Settings > Custom CSS)

```css

/* Column container */

.image-with-text__grid {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

}

/* Individual column */

.image-with-text__item {

  position: relative;

  flex: 1;

  min-width: 300px;

}

/* Text overlay */

.image-with-text__content {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  width: 100%;

  padding: 20px;

}

/* Button styling */

.image-with-text__button {

  background: transparent;

  color: white;

  border: 2px solid white;

  padding: 12px 30px;

  margin-top: 15px;

  font-weight: bold;

  letter-spacing: 1px;

}

.image-with-text__button:hover {

  background: white;

  color: #000;

}

```

### 4. Setup Instructions

1. **Add columns**: In section settings, add as many columns as needed

2. **For each column**:

   - Upload image

   - Add heading text (e.g., "Snowboards")

   - Add button text (e.g., "SHOP")

   - Link to collection/page

3. **Enable overlay**: Under "Content position" choose "Middle center"

4. **Set color scheme**: Use light text on dark images or vice versa 

[MandasaTech]

Hi @Flightsnowboard 

Yes, it’s definitely possible to add text and a clickable link button on top of an image in a multi-column section, but since you're using the Trade theme, this might require a bit of custom code as the default settings don’t fully support that layout.

If you're comfortable editing theme files, Just let us know:

• Which section or template you're trying to customize (e.g., homepage, product page, etc.)

• The text and link you’d like to add

• If you're using the multi-column section from the Shopify editor or a custom block

Once we have those details, we’ll provide you a code for that section.

[Flightsnowboard]

Hi MandasaTech

Thanks for reaching out!

I am semi comfortable editing theme files as I have had to do it a fair bit on this theme unfortunately.

Just customising an area of the home page with the default shopify Multi-column section.

Text will include some of the categories we have for sale such as "Snowboarding", "Snowboard Bindings" etc.

if you have a look at the website flightsnowboards.com i have added the area in question however the shop now button and text was applied to the image in photoshop and the entire image itself is a clickable link instead of just the shop now button.

photo attached for reference.

Thanks!

[MandasaTech]

Hello @Flightsnowboard 

We had a look at your site and totally see what you're aiming for. Since the current setup has the "Shop Now" text baked into the image, editable text and a clickable button directly within the Multi-column section—no Photoshop workarounds needed.

Since you’re semi-comfortable editing theme files, we can provide a custom code snippet that:

• Places your category titles like “Snowboarding”, “Snowboard Bindings”, etc., as overlaid text

• Adds a separate Shop Now button on top of each image

• Ensures only the button is clickable (not the entire image)

• Keeps everything mobile-friendly and visually clean

Here’s a basic example of how it could work:

<div class="custom-image-wrapper" style="position: relative; display: inline-block;">
  <img src="{{ column.image | img_url: '600x' }}" alt="{{ column.image.alt | escape }}" />

  <div class="custom-overlay">
    <h3>{{ column.title }}</h3>
    <a href="{{ column.link }}" class="custom-shop-now-btn">Shop Now</a>
  </div>
</div>

And CSS to position the overlay:

.custom-image-wrapper {
  position: relative;
  display: inline-block;
}

.custom-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.custom-shop-now-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.custom-shop-now-btn:hover {
  background-color: #444;
}

If you can confirm which images and links you want to apply this to, please let us know. 

Let me know if you have any questions!