How to create a gridwhere you can link to a page?

[Ferryarthur]

Hello everyone,

I want some sort of grid where you can link to pages.

Like dogs + image to dog page.

Like in the example i tried. Images are not clickable. Or maybe a better/cleaner way of doing it.

[Hasstech]

Hey! If you're using the Dawn theme, the easiest way to do this is:

1. Use the "Multicolumn" section.

2. Add an image, title (like "Dogs"), and set the link to your dog page.

3. Repeat for each item (Cats, Birds, etc.).

Each column becomes clickable and mobile-friendly by default. No need for custom code.

Let me know if you want a more customized layout!

[Ferryarthur]

Thanks!

That is what i did in the image. But the picture isnt clickable. I did add a link. But it will only link if ''Link-label'' is pressed. Which i dont want to use.

Also my site is www.ollysbeestenboel.nl. I'll turn it on. Its not like someone is gonna find my page.

[marcuswebexp]

@Ferryarthur Are you trying to go for something like this:

https://mwe-test-store-6.myshopify.com/

Use the password "password"

If so, your theme code just needs to be adjusted slightly.

[Ferryarthur]

Thanks! Well if a tad smaller that could work i think. Not sure what suits mij site the best.

[ElijahGold]

Hi @Ferryarthur,

Follow this process to make your images clickabke.

1. Log in to your Shopify Admin.

2. On the left menu, click Online Store → Themes.

3. Find your live theme and click "Actions" → "Edit Code".

4. In the code editor, on the left side, open the Sections folder.

5. Look for the file called something like:
   multicolumn.liquid  I have attached the image the below

6. Click it to open something like in the image.

7. Find the part that looks like this:

Replace the entire <div class="multicolumn-card__image-wrapper ..."> ... </div> part with this new

<a
class="multicolumn-card__image-wrapper multicolumn-card__image-wrapper--{{ section.settings.image_width }}-width{% if section.settings.image_width != 'full' or spaced_image %} multicolumn-card-spacing{% endif %}"
{% if block.settings.link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.link }}"
{% endif %}
>
<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 %}
>
{%- liquid
assign number_of_columns = section.settings.columns_desktop
assign number_of_columns_mobile = section.settings.columns_mobile
assign grid_space_desktop = number_of_columns | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
assign grid_space_tablet = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | plus: 100 | append: 'px'
assign grid_space_mobile = number_of_columns_mobile | minus: 1 | times: settings.spacing_grid_horizontal | divided_by: 2 | plus: 30 | append: 'px'
if section.settings.image_width == 'half'
assign image_width = 0.5
elsif section.settings.image_width == 'third'
assign image_width = 0.33
else
assign image_width = 1
endif
-%}
{% capture sizes %}
(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width }}px - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
(min-width: 990px) calc((100vw - {{ grid_space_desktop }}) * {{ image_width }} / {{ number_of_columns }}),
(min-width: 750px) calc((100vw - {{ grid_space_tablet }}) * {{ image_width }} / {{ number_of_columns_mobile }}),
calc((100vw - {{ grid_space_mobile }}) * {{ image_width }} / {{ number_of_columns_mobile }})
{% endcapture %}
{{
block.settings.image
| image_url: width: 3200
| image_tag:
widths: '50, 75, 100, 150, 200, 300, 400, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 2500, 2750, 3000, 3200',
sizes: sizes,
class: 'multicolumn-card__image'
}}
</div>
</a>

Then enjoy your clickable image.

[Ferryarthur]

Thanks. i'll try it and let you know.

Also where can i find the part the remove collections from the url. Trying to find it.

[ElijahGold]

Sorry, can you explain this?

So I can know the best way to help you.

[Ferryarthur]

My urls are collection/dogs. I want the collaction part gone. I saw that you need to remove some lines. I was wondering if you know where those lines are.

[Ferryarthur]

I did this. It made it clickable but also created a giant image copy of the original.

[ElijahGold]

I see you've solve the problem.

Weldone @Ferryarthur 

Let me know if you need more assistance regarding your shopify store.

Have a nice day.