Re:

Solved

How to make collage images clickable on dawn theme.

Diarna-Official
Excursionist
33 0 7

Im new to shopify, and I am in need of the code for making a collage clickable. If anyone could just paste it below, I would be extremely grateful. The idea is that, when the client clicks on the image, it will bring them to the product page for that specific product being displayed. 

 

Thanks in advance, 

 

Mathers

Accepted Solution (1)

AliReviews
Shopify Partner
773 90 356

This is an accepted solution.

Hello @Diarna-Official ,

We are AliReviews - All-in-one reviews solution for all businesses.

 

To make a collage clickable and link it to the product page, you can use the following code:

<div class="collage">
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
  <a href="{{ product.url }}">
    <img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
  <a href="{{ product.url }}">
    <img src="{{ product.images[2] | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
</div>

You can customize the code to fit the specific layout and number of images in your collage. Just make sure to wrap each image in an anchor tag and link it to the product URL using {{ product.url }}.

 

Hope this can help, don't be hesitate to contact us if you have any further questions, we'd love to assist. Please hit the Like Button or mark it as Accepted Solution to let us know, it encourage us a lot.

 

Have a nice day,

AliReviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!

View solution in original post

Replies 10 (10)

AliReviews
Shopify Partner
773 90 356

This is an accepted solution.

Hello @Diarna-Official ,

We are AliReviews - All-in-one reviews solution for all businesses.

 

To make a collage clickable and link it to the product page, you can use the following code:

<div class="collage">
  <a href="{{ product.url }}">
    <img src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
  <a href="{{ product.url }}">
    <img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
  <a href="{{ product.url }}">
    <img src="{{ product.images[2] | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
</div>

You can customize the code to fit the specific layout and number of images in your collage. Just make sure to wrap each image in an anchor tag and link it to the product URL using {{ product.url }}.

 

Hope this can help, don't be hesitate to contact us if you have any further questions, we'd love to assist. Please hit the Like Button or mark it as Accepted Solution to let us know, it encourage us a lot.

 

Have a nice day,

AliReviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
Diarna-Official
Excursionist
33 0 7

Hey there!

Thanks so much. But where do I put this code? Below is the collage as it stands. So I have not added any images yet, however, I will be adding images of products in our store. I assume I need to edit the "collage.liquid". If it isn't too much of a hassle, I would really appreciate it if you could implement the above code into the collage.liquid and paste the entire collage.liquid. Otherwise, then all good and I really appreciate your help!

 

Mathers. 

DiarnaOfficial_0-1677667066104.png

 

AliReviews
Shopify Partner
773 90 356

Hello,

Sorry for not being clearer. Here is details steps:

  • Go to Online Stores -> Themes
  • Click on Actions -> select Edit Code -> go to Sections
  • Locate the collage.liquid file
  • Replace the code with the code above
  • Save and preview

Let us know if you have any further questions. 

 

Have a nice day.

AliReviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
edc1
New Member
7 0 0

Hi There! I would also like to make my main collage image clickable. I just wanted to confirm that I am to replace all the code in the collage.liquid file with code provided above? The default section is 400+ lines of code, so I just wanted to be sure. Also, where do I apply the link in this case? Thanks in advance.

edc1
New Member
7 0 0
AliReviews
Shopify Partner
773 90 356

Hello @edc1 ,

 

No, you shouldn't replace all of the code in the collage.liquid file. 

You will need to locate the HTML code for your main collage image within the "collage.liquid" file and modify it to include the "a" tags, like this in the example

<div class="main-collage">
  <a href="{{ product.url }}">
    <img src="{{ main_collage_image }}" alt="{{ product.title }}">
  </a>
  <a href="{{ product.url }}">
    <img src="{{ product.images[1] | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
  <a href="{{ product.url }}">
    <img src="{{ product.images[2] | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
  <a href="{{ product.url }}">
    <img src="{{ product.images[3] | product_img_url: 'large' }}" alt="{{ product.title }}">
  </a>
</div>

Make sure to replace "{{ main_collage_image }}" with the appropriate URL or liquid variable that references the main collage image.

 

Let us know if you need any further support.

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
edc1
New Member
7 0 0

Thank you @AliReviews ! I believe I have found the HTML, and the variable used for the "main_collage_image "  is "media media--transparent ratio" based on the inspect tool, I have paste the code here, would you mind informing me on how to apply? I have little to no experience  coding other than copy and pasting snippets and mild css edits. 

<div class="collage-card {% if section.settings.card_styles == 'none' %}global-media-settings{% else %}card-wrapper {{ section.settings.card_styles }} color-{{ settings.card_color_scheme }}{% endif %}">
                <div
                  class="media media--transparent ratio"
                  {% if block.settings.image != blank %}
                    style="--ratio-percent: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%"
                  {% else %}
                    style="--ratio-percent: 100%"
                  {% endif %}
                >
                  {%- if block.settings.image != blank -%}
                    {%- capture sizes -%}(min-width: {{ settings.page_width }}px) {% if section.blocks.size == 1 %}calc({{ settings.page_width }}px - 100px){% else %}{{ settings.page_width | minus: 100 | times: 0.67 | round }}px{% endif %}, (min-width: 750px){% if section.blocks.size == 1 %} calc(100vw - 100px){% else %} 500px{% endif %}, calc(100vw - 30px){%- endcapture -%}
                    {{
                      block.settings.image
                      | image_url: width: 3000
                      | image_tag: loading: 'lazy', sizes: sizes, widths: '550, 720, 990, 1100, 1500, 2200, 3000'
                    }}
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
                  {%- endif -%}
                </div>
              </div>
bensmith77
Visitor
2 0 0

I wonder if you can help. We have a lookbook page which is all collages. We want to make the images of products clickable on this page. Do you know what code and exactly where should we paste it into the collage.liquid? Many thanks! 

Lauren7093
Visitor
1 0 0

Hi! Do you delete code or do you just add in what you shared? 

 

Syd2mia
Tourist
5 0 4

Hi, I am trying to follow your instructions but finding it a little unclear. I am trying to add a link to ONLY the main picture in the collage, so do I only copy the first 4 lines of your code?

Could you please be a little more specific as to where this code needs to be copied into the file ( for us beginners that have very limited clue :), I have included a screenshot of the code if you could kindly point it out 🙂

Thanks so much! 

Screenshot 2024-06-01 at 2.46.44 PM.png