How do I connect the images on my page to a dynamic page? Dawn Theme

Store Design
, , , , , ,
1

Is there a way to make the photos above the links on the https://blankfuture.co/collections/shop page clickable to the same link as the ones beneath them? Can this be set up to be dynamic so that when the link beneath is changed, the photo’s link also updates automatically?

Website: blankfuture.co
Password: helpme

1 Like
2

Hi @eitanj ,

Is this a custom page that you have created?
You can do it by editing the code slightly and wrapping each collection with an tag.

Could you include the screenshot of customize for this page. may be there’s an option to do it without code.

3

@eitanj

Hi,

You are using multicolumn section for the collection list.

Please follow the steps below to make the image clickable (for the same link as the text).

  1. Please go to Edit code > Sections > multicolumn.liquid file.

  2. After open the file, scroll down to the image tag as below (Line 69).

20221226_011728.png
20221226_011728.png1870×620 80.3 KB

  1. Add the code below to top of the image tag. (as shown the image under the code)
{%- if block.settings.link_label != blank -%}
                    
                    {% endif %}

20221226_011248.png
20221226_011248.png1877×695 83.9 KB

  1. And add the code below to under the image tag (as shown above).
{%- if block.settings.link_label != blank -%}
                    
                    {% endif %}
  1. Save the file and check the page for the image with the link.

Hope it helps.

Thanks.

4

Hey, I cant find the <img beginning in muticolumn.liquid file, im using the dawn theme, are you sure thats where i would find it?

5

okay I tried to add it and it slightly worked i guess? clicking the squares makes me go to the page, but the images are gone and theyre just blurry squares now

6

@eitanj

Hi,

That’s for the Dawn theme,

Due to the image adjustment, you have to move the code as below.

20221226_030816.png
20221226_030816.png1701×795 39.6 KB

Top part code is

{%- if block.settings.link_label != blank -%}
                
                {% endif %}

and the bottom part code is

{%- if block.settings.link_label != blank -%}
                
                {% endif %}

Checked the code in Dawn theme and working fine.

20221226_031339.png
20221226_031339.png1484×598 235 KB

The image will show up and the link (page, collection or product) will be activated.

If you have any questions, please let me know.

Hope it helps.

Thanks.

7

awesome, that worked! I have a followup question, is there a way to make the arrow extend on hover like it does when i hover over the text, when i hover over the image now?

8

Due to the svg image size, it can’t be changed very much.

If you change (replace) the svg image to longer arrow, it can be changed to longer.

If you use the following code it can be very slightly longer.

Please go to Assets > base.css file and find (ctrl+F) .animate-arrow:hover .icon-arrow path and change the transform: translateX(SIZE) as below.

.animate-arrow:hover .icon-arrow path {
  transform: translateX(0.1rem);
}

Hope it helps.