Multicolumn button

[WalkYourStyle]

Another way to do it, which is closer to what you initially needed, is to follow the steps below.

1. Go to ‘Online Store’ → Themes

2. From your Active Theme → Click on the 3 dots (…) → Edit Code

3. Inside the sections folder locate the file ‘multicolumn.liquid’.

4. Copy the entire code of the above file.

5. Create a new file inside the sections folder called ‘multicolumn-backup.liquid’

6. Paste the code in the new file you created

7. Modify the ‘multicolumn.liquid’ file as below:

8. Find the

   element with class name “multicolumn-card__image-wrapper multicolumn-card__image-wrapper–”

9. Inside the

   element mentioned above, there should be something like this:

​

• Replace the above code with this

{% if block.settings.link != blank %}
    
        

            
        

    
{% else %}
    

        
    

{% endif %}

• Then in your theme’s customization, you can add a link to each multicolumn block(shown below). This allows you to click on the image to navigate to the intended page, even if the link label is not specified.

  

• Finally, you can add CSS code to control the image’s opacity when hovering over it, as shown below:

  1. Go to ‘Online Store’ → Themes
  2. From your active theme → click on the 3 dots (…) → Edit Code
  3. In the assets folder locate the file ‘section-multicolumn.css’
  4. At the end of the file add the below code:

.multicolumn-custom-link img {
  transition: opacity 0.16s ease-in-out;
}
.multicolumn-custom-link img:hover {
   opacity: 0.7;
}​