Clickable product image. Dawn theme

AI_CR7 · August 20, 2024, 1:24pm

I am using dawn theme. I would like to make my products images clickable? The only way I can click a product is if i click the product title. Please assist as I have tried everything. Thank you

dws_pvt_ltd · August 20, 2024, 1:42pm

Please share your store URL and password. So that I will check and let you know the exact solution here.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

AI_CR7 · August 20, 2024, 2:24pm

www.unseengrail.com

AI_CR7 · August 20, 2024, 2:25pm

Then password for the shopify store im assuming?

namphan · August 20, 2024, 2:46pm

Hi @AI_CR7 ,

Please send me the code of card-product.liquid file, I will add it for you

AI_CR7 · August 20, 2024, 5:15pm

{% comment %}
Renders a product card

Accepts:

card_product: {Object} Product Liquid object (optional)
media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
image_shape: {String} Image mask to apply to the product image card. Values are “arch”, “blob”, “chevronleft”, “chevronright”, “diamond”, “parallelogram”, and “round”. (optional)
show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
show_vendor: {Boolean} Show the product vendor. Default: false
show_rating: {Boolean} Show the product rating. Default: false
extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
show_quick_add: {Boolean} Show the quick add button.
section_id: {String} The ID of the section that contains this card.
horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false (optional)
horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
placeholder_image: {String} The placeholder image to use when no product exists. Default: ‘product-apparel-2’ (optional)

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

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

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} ${{ card_product.featured_media.alt | escape }}$ {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src=“{{ card_product.media[1] | image_url: width: 533 }}”
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=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

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

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

{%- endif -%}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = 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
%}

{{- card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }}) {{- card_product.metafields.reviews.rating_count }} {{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}

{%- endif -%}

{%- if show_quick_add -%}

{%- liquid assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id assign qty_rules = false if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1 assign qty_rules = true endif -%} {%- if card_product.variants.size > 1 or qty_rules -%} {{ 'products.product.choose_options' | t }} {%- if horizontal_quick_add -%} {% render 'icon-arrow' %} {%- endif -%}

{% render 'icon-close' %}

{%- else -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }} {%- if horizontal_quick_add -%} {% render 'icon-plus' %} {%- endif -%}

{%- endform -%} {%- endif -%}

{%- endif -%}

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

{%- else -%}

{%- if placeholder_image -%} {{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }} {%- else -%} {{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}

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

{%- endif -%} {% render 'price', show_compare_at_price: true %}

{%- endif -%}

AI_CR7 · August 20, 2024, 7:24pm

Look forward to hearing back from you. Thank you for assisting

namphan · August 21, 2024, 2:58am

Hi @AI_CR7 ,

Please change all code:

{% comment %}
Renders a product card

Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
- placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)

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

{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}

{%- endif -%}

{%- endif -%}

### 
{{ card_product.title | escape }}

{%- if card_product.available == false -%}

{{- 'products.product.sold_out' | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- 'products.product.on_sale' | t -}}

{%- endif -%}

### 

{{ card_product.title | escape }}

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

{{ card_product.vendor }}

{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = 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
%}

{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }})

{{- card_product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}

{%- endif -%}

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}

{{ 'products.product.volume_pricing.note' | t }}

{%- endif -%}

{%- if show_quick_add -%}

{%- liquid
assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}

{%- else -%}

{%- endif -%}

{%- endif -%}

{%- if card_product.available == false -%}

{{- 'products.product.sold_out' | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- 'products.product.on_sale' | t -}}

{%- endif -%}

{%- else -%}

{%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}

### 

{{ 'onboarding.product_title' | t }}

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

{{ 'products.product.vendor' | t }}

{%- endif -%}
{% render 'price', show_compare_at_price: true %}

{%- endif -%}

dws_pvt_ltd · August 21, 2024, 6:55am

Hello @AI_CR7 , Your sections card-heading components anchor tag not having ::after CSS there. So it is not clickable, it should must be like the screenshot below,

You should add this CSS in your CSS file.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

Topic		Replies	Views
Make featured collection images clickable- dawn theme Store Design customizations , css , shopify-themes	0	13	March 13, 2024
Dawn Theme, making featured collection images clickable on home page Shopify Discussion troubleshooting	6	19	June 17, 2024
Can I change 'Add to Cart' buttons to 'View More' for specific products? Store Design design , customizations , collection-page , css , shopify-themes	14	73	March 2, 2023
Make featured product image/text clickable dawn Store Design	4	26	July 14, 2022
Shopify Dawn theme Product card clickable area Store Design	4	42	April 12, 2022

Clickable product image. Dawn theme

{{ card_product.title | escape }}

{{ card_product.title | escape }}

{{ 'onboarding.product_title' | t }}

Related topics