Multicolumn button

[PeurneLtd]

Hi,

I am using the Ride theme in Shopify and have used Multicolumn to display two product offers. How do I add a button or link so the customer can click the image to take them to the product listing? It would be great if they could hover over the image and it goes slightly Opaque and they can click it to take them to the product, but if not a button for each would cool.

I have added the product on the image section but this doesn't do anything if they click the image?

Website - www.peurne.com

Using Ride theme.

Thanks,

Team Peurne 🙂

[WalkYourStyle]

In your theme's customization you can include a link and a link label for each column block. 

[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:

1.  Find the <div> element with class name "multicolumn-card__image-wrapper multicolumn-card__image-wrapper--"
2. Inside the <div> element mentioned above, there should be something like this:

<div
    class="media media--transparent media--{{ section.settings.image_ratio }}"
    {% if section.settings.image_ratio == 'adapt' %}
        style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
    {% endif %}
>
<!-- actual code -->
</div>​

• Replace the above code with this
   

{% if block.settings.link != blank %}
    <a class="multicolumn-custom-link" href="{{ block.settings.link }}">
        <div
            class="media media--transparent media--{{ section.settings.image_ratio }}"
            {% if section.settings.image_ratio == 'adapt' %}
                style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
            {% endif %}
        >
            <!-- actual code -->
        </div>
    </a>
{% else %}
    <div
        class="media media--transparent media--{{ section.settings.image_ratio }}"
        {% if section.settings.image_ratio == 'adapt' %}
            style="padding-bottom: {{ 1 | divided_by: highest_ratio | times: 100 }}%;"
        {% endif %}
    >
        <!-- actual code -->
    </div>
{% 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;
}​

[PeurneLtd]

Hi,

I had alreasy previously added in the link within the column block but this didn't do anything so, I have done as you have said this morning and changed the code and it has now made my images within the column huge and still does not add a link to click.

[WalkYourStyle]

Can you please share the changes you made to the code ?