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

Store Design
, , ,
1

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

multicolumn text and button on photo.png
multicolumn text and button on photo.png404Ă—357 164 KB

2 Likes
2

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

3

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:


{% 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)


/* 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

  1. Enable overlay: Under “Content position” choose “Middle center”

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

4

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.

5

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!

homepage.jpg
homepage.jpg1322Ă—421 86.8 KB

6

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!