Hello. I’ve added an add to cart button to product-card. liquid so every product has an “Add to cart” button below it.
I’ve also used an if that changes this button to “Out of stock” when a product is out of stock.
Next, I want to display another button instead of “add to cart” when a product has multiple variants (size, color etc.)
This new button would send the customer to the product page so he can choose what option he/she likes.
I’ve tried a loads of “ifs” but nothing seems to work.
This is what I have:
{% if product.variants.size > 1 %}
//Your button
{% endif %}
I think you’re looking for something like this 
This does’t do anything. Not even when it’s “==” instead of “>”
Nevermind. I just realised that “product.variants.size” needs to be “product_card_product_variants.size” in my case because i didn’t update the theme. Thank you.
Now that it works, I need a new button that just opens the product’s page. How do I do that?
@Luscius Instead of input, you can use:
Or
<input type="button" onclick="location.href='Your product url" />
If you find my answers helpful, please mark resolved.
I have multiple products that have multiple variants so i can’t put just an url in there.
This does’t open anything when i click the button.
@Luscius ok. So, that’s a different case than, can you share the whole file with me maybe? You need to loop through the variants/products and change button url based on selected one.
I can’t tell you the exact code until I see the file. But something like:
{% for variant in product.variants %}
{{ variant.title }}
{% endif %}
Hope this helps!
Here is the product-card.liquid file
{% 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
-%}
{%- 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 -%}
Hi @Luscius , I hope this will solve your problems:
If you find my answers helpful, please mark resolved or like.
1 Like
@Luscius Glad I could help!
Hi Marina - I am trying to do something similar and I’m hoping you can help. What I’m trying to do is write a conditional statement for the ‘add to cart’ button where:
if product id == x
change button text to “button text”
when button is clicked, add product to cart and redirect to page.com
or
if product id == y
change button text to “different button text”
when button is clicked, add product to cart and redirect to differntpage.com
If neither product id condition is met, don’t change the add to cart button at all.
Can you help with this? Below is the form code from product__form.liquid
Thank you!!
{% form 'product', product %}
{{ form | payment_terms }}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
{% endcomment %}
{% assign style = 'select' %}
{% if settings.product_form_style == 'radio' %}
{% assign style = 'radio' %}
{% endif %}
{% assign product = product %}
{% assign sold_out_options = sold_out_options %}
{% assign selected_variant = selected_variant %}
{% assign enable_swatches = settings.enable_swatches %}
{% assign swatches_shape = settings.swatch_style %}
{% assign swatches_option_trigger = 'color' %}
{% comment %}Inject /shopify-variants-ui/variant-selection begin{% endcomment %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param variant_selection_id
@param sold_out_options
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
{% endcomment %}
{% comment %}Inject /shopify-variants-ui/variant-selection end{% endcomment %}
{% if product.available %}
{% if settings.display_inventory_left %}
{% if selected_variant.inventory_management != blank and selected_variant.inventory_quantity > 0 %}
{% capture items_left_text %}
{% if selected_variant.inventory_quantity == 1 %}
{{ 'products.product.items_left_count.one' | t }}
{% else %}
{{ 'products.product.items_left_count.other' | t }}
{% endif %}
{% endcapture %}
{% if selected_variant.inventory_quantity <= settings.inventory_threshold %}
{{ selected_variant.inventory_quantity }} {{ items_left_text }}
{% endif %}
{% endif %}
{% endif %}
{% if settings.display_product_quantity %}
{% render 'quantity-box' %}
{% endif %}
{% comment %} Error message for add to cart action {% endcomment %}
{% if settings.cart_action == 'reload_page' %}
{% elsif settings.cart_action == 'redirect_cart' %}
{% endif %}
{% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
{% if show_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endif %}
{% endform %}