How to make collage images clickable on dawn theme.

[Diarna-Official]

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

[AliReviews · 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.

[Diarna-Official]

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. 

[AliReviews]

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.

[edc1]

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]

@AliReviews 

[AliReviews]

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.

[edc1]

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>