Studio theme - multi column customization

Store Design
,

Topic summary

A user seeks customization help for the Studio theme’s multicolumn section on their homepage, which currently links to various collections.

Primary requests:

  • Move the link overlay onto the image instead of below it
  • Change images on hover
  • Extend only this section to full page width without affecting other homepage sections

Solutions provided:

Two community members offered CSS code snippets to:

  • Position links as overlays on images using position: absolute
  • Expand the multicolumn section to full width with max-width: 100%
  • Change link text color to white for visibility

For the hover image effect, one responder provided detailed steps including:

  • Uploading alternate images to Shopify Files
  • Adding Liquid code with conditional logic based on card index
  • CSS to toggle image visibility on hover

Current status:

The initial solution worked successfully. The user now requests help centering the link within the image/column but hasn’t yet received guidance on this adjustment.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hello,

My website is https://n8z0xm-yb.myshopify.com/

Pw = cheack

i am using the multicolumn section on my homepage to link to various collections. However I’d like the link to be over (on the image) the image instead of below. What’s the best way to do this?

Also would like to change the image on hover, how would I go about doing that?

and is there a way to extend this section ONLY to the full width of the page? WITHOUT changing how the other sections of the homepage are?

Thanks.

1 Like
2

Hi @schilp

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.page-width.section-template--24102789972340__multicolumn_YrY3V4-padding {
    max-width: 100%;
}

.multicolumn-card__info {
    position: absolute;
    bottom: 0;
}

.multicolumn-card__info a.link.animate-arrow {
    color: white;
}

“Also would like to change the image on hover, how would I go about doing that?” -you might need a developer for this.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Hi @schilp

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.multicolumn-card.content-container .multicolumn-card__info {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.multicolumn-card.content-container .multicolumn-card__info a.link.animate-arrow {
    color: white !important;
}

To change image while hovering

Step 1: Add Images to the File

Add the images you want to display on hover.
Example:

  • Open the Shopify Settings > Files section.
  • Upload the images there.
  • Copy the image links for each card.

Step 2: Update the Code

Add the following Liquid code to the appropriate multicolumn section of your Shopify theme (likely in a custom multicolumn.liquid or similar file). Adjust the image links as needed.

{% if forloop.index == 1 %}

![Coffee_Roasting_Techniques.webp?v=1737183745|1024x1024](upload://cCpkpc0UNE9lUOpbs4fRk6Lp1p0.jpeg)

{% elsif forloop.index == 2 %}

![Coffee_Roasting_Techniques.webp?v=1737183745|1024x1024](upload://cCpkpc0UNE9lUOpbs4fRk6Lp1p0.jpeg)

{% elsif forloop.index == 3 %}

![Coffee_Roasting_Techniques.webp?v=1737183745|1024x1024](upload://cCpkpc0UNE9lUOpbs4fRk6Lp1p0.jpeg)

{% endif %}
  • Replace https://cdn.shopify.com/… with the actual image link from Step 1.
  • Adjust forloop.index to match the number of cards in the multicolumn.

Step 3: Add CSS

Paste the following CSS into your theme’s CSS file or Assets > base.css:

.multicolumn-card.content-container:hover .multicolumn-card__image-wrapper > .media > img:nth-child(1) {
    display: none !important;
}
.multicolumn-card.content-container:hover .multicolumn-card__image-wrapper > .media > img.img-hover {
    display: block !important;
}

I hope this helps

Best,

Daisy

1 Like
4

This worked great! Thanks!

I tried fiddling with the position to move the link to the center of the image/column but wasn’t able to figure it out. Any suggestions on that?