Dawn Theme, making featured collection images clickable on home page

[Allysho]

Hi there,

I have Dawn Theme 2.3.0 with a featured collection section on the home page. I’ve turned the product names off by client request, but the images themselves are not clickable links to the products. I’ve tried a few things from other posts here that didn’t work.

How do I make them clickable?

Thanks for any and all help.

Below is the contents of my featured-collection.liquid file:

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘component-product-grid.css’ | asset_url | stylesheet_tag }}

{{ ‘component-slider.css’ | asset_url | stylesheet_tag }}
{{ ‘template-collection.css’ | asset_url | stylesheet_tag }}

{%- liquid
assign products_to_display = section.settings.collection.all_products_count

if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
-%}

{{ section.settings.title | escape }}

{%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
{{ ‘sections.featured_collection.view_all’ | t }}
{%- endif -%}

{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
• {% render 'product-card', product_card_product: product, media_size: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, add_image_padding: section.settings.add_image_padding, show_vendor: section.settings.show_vendor, show_image_outline: section.settings.show_image_outline, show_rating: section.settings.show_rating %}
{%- else -%} {%- for i in (1..4) -%}
• {% render 'product-card-placeholder' %}
{%- endfor -%} {%- endfor -%}

{%- if section.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}

{% render 'icon-caret' %}

1 / {{ 'accessibility.of' | t }} {{ products_to_display }}

{% render 'icon-caret' %}

{%- endif -%}

{%- if section.settings.show_view_all and more_in_collection -%}

{{ 'sections.featured_collection.view_all' | t }}

{%- endif -%}

{% schema %}
{
“name”: “t:sections.featured-collection.name”,
“tag”: “section”,
“class”: “spaced-section”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“default”: “Featured collection”,
“label”: “t:sections.featured-collection.settings.title.label”
},
{
“type”: “collection”,
“id”: “collection”,
“label”: “t:sections.featured-collection.settings.collection.label”
},
{
“type”: “range”,
“id”: “products_to_show”,
“min”: 2,
“max”: 12,
“step”: 2,
“default”: 4,
“label”: “t:sections.featured-collection.settings.products_to_show.label”
},
{
“type”: “checkbox”,
“id”: “show_view_all”,
“default”: true,
“label”: “t:sections.featured-collection.settings.show_view_all.label”
},
{
“type”: “checkbox”,
“id”: “swipe_on_mobile”,
“default”: false,
“label”: “t:sections.featured-collection.settings.swipe_on_mobile.label”
},
{
“type”: “header”,
“content”: “t:sections.featured-collection.settings.header.content”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.featured-collection.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.featured-collection.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.featured-collection.settings.image_ratio.options__3.label”
}
],
“default”: “adapt”,
“label”: “t:sections.featured-collection.settings.image_ratio.label”
},
{
“type”: “checkbox”,
“id”: “show_secondary_image”,
“default”: false,
“label”: “t:sections.featured-collection.settings.show_secondary_image.label”
},
{
“type”: “checkbox”,
“id”: “add_image_padding”,
“default”: false,
“label”: “t:sections.featured-collection.settings.add_image_padding.label”
},
{
“type”: “checkbox”,
“id”: “show_image_outline”,
“default”: true,
“label”: “t:sections.featured-collection.settings.show_image_outline.label”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“default”: false,
“label”: “t:sections.featured-collection.settings.show_vendor.label”
},
{
“type”: “checkbox”,
“id”: “show_rating”,
“default”: false,
“label”: “t:sections.featured-collection.settings.show_rating.label”,
“info”: “t:sections.featured-collection.settings.show_rating.info”
}
],
“presets”: [
{
“name”: “t:sections.featured-collection.presets.name”
}
]
}
{% endschema %}

[azamgill]

Hey @Allysho

Try to change the following code

{% render 'product-card',
product_card_product: product,
media_size: section.settings.image_ratio,
show_secondary_image: section.settings.show_secondary_image,
add_image_padding: section.settings.add_image_padding,
show_vendor: section.settings.show_vendor,
show_image_outline: section.settings.show_image_outline,
show_rating: section.settings.show_rating
%}

with this

  {% render 'product-card',
  product_card_product: product,
  media_size: section.settings.image_ratio,
  show_secondary_image: section.settings.show_secondary_image,
  add_image_padding: section.settings.add_image_padding,
  show_vendor: section.settings.show_vendor,
  show_image_outline: section.settings.show_image_outline,
  show_rating: section.settings.show_rating
  %}

[Allysho]

Thanks @azamgill . I’ve updated the code but they still weren’t clickable. Thena lightbulb went off and I realised I had to work with product-card.liquid.

I wrapped the a around this element:

The images are clickable now, (YAY) but they only go to the home page and they aren’t rendering at the correct size:

instead of

Any ideas?

[Allysho]

I tried this solution, which is to wrap the

in the product-card.liquid with the and now the product images are clickable, and the correct size, but the links just go to the home page.

https://community.shopify.com/c/shopify-design/how-to-make-the-product-image-on-collection-page-clickable/m-p/1651418#M440516

[Allysho]

OK, I’ve got it. Here’s the solution: wrap the

with

So the new code for product-card.liquid is this:

{% comment %}
Renders a product card

Accepts:

• product_card_product: {Object} Product Liquid object (optional)
• media_size: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
• show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
• add_image_padding: {Boolean} Enables padding on the image to space out the grid
• show_vendor: {Boolean} Show the product vendor. Default: false
• show_image_outline: {Boolean} Show card outline. Default: true (optional)
• show_rating: {Boolean} Show the product rating. Default: false

Usage:
{% render ‘product-card’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}

{{ product_card_product.vendor }}

{%- endif -%}

{%- if product_card_product.featured_media -%}

{{ product_card_product.title | escape }}

{%- endif -%}

{% comment %} TODO: metafield {% endcomment %}
{{ block.settings.description | escape }}
{%- if show_rating and product_card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = product_card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ product_card_product.metafields.reviews.rating.value }} / {{ product_card_product.metafields.reviews.rating.value.scale_max }}

({{ product_card_product.metafields.reviews.rating_count }}) {{ product_card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%} {% render 'price', product: product_card_product, price_class: '' %}

****

{%- if product_card_product.featured_media -%} {%- liquid assign featured_media_aspect_ratio = product_card_product.featured_media.aspect_ratio

if product_card_product.featured_media.aspect_ratio == nil
assign featured_media_aspect_ratio = 1
endif
-%}

<div{% if add_image_padding %} class=“card__media-full-spacer”{% endif %}>

{%- if product_card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if product_card_product.media[1].width >= 165 -%}{{ product_card_product.media[1] | img_url: ‘165x’ }} 165w,{%- endif -%}
{%- if product_card_product.media[1].width >= 360 -%}{{ product_card_product.media[1] | img_url: ‘360x’ }} 360w,{%- endif -%}
{%- if product_card_product.media[1].width >= 533 -%}{{ product_card_product.media[1] | img_url: ‘533x’ }} 533w,{%- endif -%}
{%- if product_card_product.media[1].width >= 720 -%}{{ product_card_product.media[1] | img_url: ‘720x’ }} 720w,{%- endif -%}
{%- if product_card_product.media[1].width >= 940 -%}{{ product_card_product.media[1] | img_url: ‘940x’ }} 940w,{%- endif -%}
{%- if product_card_product.media[1].width >= 1066 -%}{{ product_card_product.media[1] | img_url: ‘1066x’ }} 1066w,{%- endif -%}
{{ product_card_product.media[1] | img_url: ‘master’ }} {{ product_card_product.media[1].width }}w”
src=“{{ product_card_product.media[1] | img_url: ‘533x’ }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“{{ product_card_product.media[1].alt | escape }}”
loading=“lazy”
class=“motion-reduce”
width=“{{ product_card_product.media[1].width }}”
height=“{{ product_card_product.media[1].height }}”

{%- endif -%}

{%- else -%}

{{ product_card_product.title }}

{%- endif -%}

{%- if product_card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif product_card_product.compare_at_price > product_card_product.price and product_card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}

****

[azamgill]

Happy to know that your problem is solved now.

Thanks

[blancavaldes]

Hello, I am trying to use this code and its not working for me.

Any advice. Also using DAWN