Studio theme - multi column customization

[schilp]

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. 

[Made4uo-Ribe]

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;
}

• And Save.
• Result:
• 

"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!

[DaisyVo · Accepted solution]

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 %}
<img src="https://cdn.shopify.com/s/files/1/0674/2743/4660/files/Coffee_Roasting_Techniques.webp?v=1737183745" class="img-hover" style="display: none;" />
{% elsif forloop.index == 2 %}
<img src="https://cdn.shopify.com/s/files/1/0674/2743/4660/files/Coffee_Roasting_Techniques.webp?v=1737183745" class="img-hover" style="display: none;" />
{% elsif forloop.index == 3 %}
<img src="https://cdn.shopify.com/s/files/1/0674/2743/4660/files/Coffee_Roasting_Techniques.webp?v=1737183745" class="img-hover" style="display: none;" />
{% 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

[schilp]

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?