Hello,
Is it possible to change the “Add to cart” buttons to “View more” buttons for only specific products? Displayed in the featured collection.
So these buttons below change to “View more”. However, only for this page. Is it possible?
Picture:
Link: https://swish.eu/collections/swish-flooring
Your assistance would be deeply appreciated and we would certainly mark your answers as solutions!
Kind regards,
Hi @swishlatvija ,
Please go to card-product.liquid file and change code here:
Code:
{%- if card_product.handle == 'handle specific product' -%}
View more
{%- else -%}
{%- if card_product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
{%- endif -%}
code example for ‘Elastic Tiles’ product:
{%- if card_product.handle == 'swish-flooring-elastic-tiles' -%}
View more
{%- else -%}
{%- if card_product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
{%- endif -%}
Hope it helps!
Hi @Litos ,
Thank you very much, but unfortunately, the code doesn’t work right. Please see the image below.
In case I added the code in the wrong place, I also wrote the card-product.liquid below. Would be great if you could place your code in the right place. Thank you very much!!
{% comment %}
Renders a product card
Accepts:
Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ ‘component-rating.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 == nil
assign ratio = 1
endif
-%}
{%- if card_product.media[1] != nil 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 -%}
{{ 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 -%}{%- if card_product.metafields.custom.description != blank -%}
{%- if card_product.metafields.custom.bulletpoints != blank -%}
{% render ‘price’, product: card_product, price_class: ‘’ %}
{%- if card_product.metafields.custom.preorder != blank -%}
{%- if card_product.handle == ‘swish-flooring-elastic-tiles’ -%}
View more
{%- else -%}
{%- if card_product.selected_or_first_available_variant.available -%}
{{ ‘products.product.add_to_cart’ | t }}
{%- else -%}
{{ ‘products.product.sold_out’ | t }}
{%- endif -%}
{%- endif -%}
Hi @swishlatvija ,
Thank you. Has it been resolved?
Hi @Litos
I carefully checked your message and realized that it was my fault as you mentioned the precise place to add your code. Everything worked perfectly!
May I quickly ask a question - how can I use this code for multiple products, how should I edit the handle?
{%- if card_product.handle == ‘swish-flooring-elastic-tiles’ -%}
{%- if card_product.handle == ‘swish-flooring-elite-tiles’ -%}
{%- if card_product.handle == ‘swish-flooring-large-elite-tiles’ -%}
How can I combine these three?
Hi @swishlatvija ,
Please change all code:
{%- if card_product.handle == 'swish-flooring-elastic-tiles' or card_product.handle == 'swish-flooring-elite-tiles' or card_product.handle == 'swish-flooring-large-elite-tiles' -%}
you just need to add ‘or’, it will work fine
Hi @Litos ,
Could you please also show us how to use different texts for the buttons?
For instance, if “card_product.handle == ‘swish-flooring-elastic-tiles’” then the button text is “View More”. But if “card_product.handle == ‘swish-flooring-elite-tiles’” then the button text is “Design”.
Is something like this possible?
Kind Regards,
Hi @swishlatvija ,
Please change code:
{%- if card_product.handle == 'swish-flooring-elastic-tiles' -%}
View more
{%- elsif card_product.handle == 'swish-flooring-elite-tiles' -%}
Design
{%- else -%}
{%- if card_product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
{%- endif -%}
Hope it helps!
Hello,
So sorry for bothering you with something so complicated, but we just realized that these edits only change the button text and not the way how they work. My deepest apologies for such a mistake.
Is there a way to make all these buttons lead directly to the product and NOT the products to the cart? So the product page is opened once the button is clicked.
We will understand if this is something too much to ask.
Kind regards,
Hi @swishlatvija ,
Please send me the full code of the file, I will check it again
Hi @Litos
Sure, card-product.liquid is attached below. Thank you very much!
{% comment %}
Renders a product card
Accepts:
Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ ‘component-rating.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 == nil
assign ratio = 1
endif
-%}
{%- if card_product.media[1] != nil 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 -%}
{{ 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 -%}{%- if card_product.metafields.custom.description != blank -%}
{%- if card_product.metafields.custom.bulletpoints != blank -%}
{%- if card_product.metafields.custom.pricem2 != blank -%}
{% render ‘price’, product: card_product, price_class: ‘’ %}
{%- if card_product.metafields.custom.preorder != blank -%}
{%- if show_quick_add -%}
{%- if card_product.handle == ‘versaclimber-108-sm’ or card_product.handle == ‘versaclimber-ts’ or card_product.handle == ‘versaclimber-108-srm’ or card_product.handle == ‘xpt-half-rack’ or card_product.handle == ‘xpt-pro’ -%}
View more
{%- elsif card_product.handle == ‘swish-flooring-elastic-tiles’ or card_product.handle == ‘swish-flooring-elite-tiles’ or card_product.handle == ‘swish-flooring-large-elastic-tiles’ -%}
Design a court
{%- else -%}
{%- if card_product.selected_or_first_available_variant.available -%}
{{ ‘products.product.add_to_cart’ | t }}
{%- else -%}
{{ ‘products.product.sold_out’ | t }}
{%- endif -%}
{%- endif -%}
Hi @swishlatvija ,
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)
- 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
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.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 == nil
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] != nil 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 -%}
{%- if card_product.metafields.custom.description != blank -%}
{{ card_product.metafields.custom.description }}
{%- endif -%}
{%- if card_product.metafields.custom.bulletpoints != blank -%}
{{ card_product.metafields.custom.bulletpoints }}
{%- endif -%}
{%- if card_product.metafields.custom.pricem2 != blank -%}
{{ card_product.metafields.custom.pricem2 }}
{%- endif -%}
{% render 'price', product: card_product, price_class: '' %}
{%- if card_product.metafields.custom.preorder != blank -%}
{{ card_product.metafields.custom.preorder }}
{%- endif -%}
{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
{%- 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 -%}
###
{{ 'onboarding.product_title' | t }}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price' %}
{%- endif -%}
Hope it helps!
Hey @Litos ,
Perhaps it’s possible to somehow eliminate the underline for these buttons? Link: https://swish.eu/collections/streetball-courts Picture:
Kind Regards,
Hi @swishlatvija ,
I checked and you solved it?
yes, slowly getting better at coding, hah.
