Showing specific button on product grid for specific collections

Store Design
1

Hey guys,

Basically on my website for Custom products, I want it to say Configure this PC and everything else to say the standard add to cart. I’ve currently got the button working in that it shows configure this PC for a specifc collection, but I don’t know how to sort the “else” part out.

This below is the code that’s working for it.

{% for collection in product.collections %}
{% if collection.handle == “custom-gaming-pcs” %}
<a
href=“{{ product_link }}”
class=“productitem–link”
data-product-page-link

Configure this PC {% endif %} {% endfor %}

This is the code below it that shows the normal add to cart:

{% unless recently_viewed %}
{% if enable_quickshop or atc_button %}
{% comment %}
Default button appearance and text
{% endcomment %}
{% assign quick_shop_text = ‘product.buttons.quick_shop’ | t %}
{% assign quick_buy_text = ‘product.buttons.add_to_cart’ | t %}

{% assign quick_shop_classes = ‘productitem–action-trigger button-secondary’ %}
{% assign quick_buy_classes = ‘productitem–action-trigger productitem–action-atc button-primary’ %}

{% if has_variants %}
{% assign quick_buy_text = ‘product.buttons.choose_options’ | t %}
{% else %}
{% if product.template_suffix contains ‘pre-order’ %}
{% assign quick_buy_text = ‘product.buttons.pre_order’ | t %}
{% endif %}
{% endif %}

{% unless product_available %}
{% assign quick_buy_text = ‘product.buttons.sold_out’ | t %}
{% assign quick_buy_classes = quick_buy_classes | append: ’ disabled’ %}
{% endunless %}

{{ product_item_price }}
{% render 'product-badge', class_root: 'productitem', product: product, product_available: product_available, on_sale: on_sale, price: price, compare_at_price: compare_at_price, show_saved: consistent_saved, compare_at_price_varies: compare_at_price_varies, include_range: true, %}

{% if enable_quickshop %}

{{ quick_shop_text }}
{% endif %}

{% if atc_button %}

{{ quick_buy_text }} {%- render 'icon-spinner' -%}
{% endif %}
{% endif %} {% endunless %}

Can anyone help me?

2

Hi @Anonymous ,

Hard to tell how your button functions without seeing it in action. Anyways, you can always put the add-to-cart button as an else. See the code as reference below

{% for collection in product.collections %}
{% if collection.handle == "custom-gaming-pcs" %}

{% else %}

{% endif %}
{% endfor %}
3

hey thanks for the help, doing that actually resulted in this:

joshsadler98_0-1658010950848.png
joshsadler98_0-1658010950848.png1151×753 133 KB

This is my website if that helps? www.directcomputers.co.uk

4

@Anonymous

Oh. Sorry. It is because of the forloop. Let me reconstruct the code. Try the code below instead

{% assign custom_gaming = "" %}
{% for collection in product.collections %}
{% if collection.handle == "custom-gaming-pcs" %}
{% assign custom_gaming = true %}
{% endif %}
{% endfor %}

{% if custom_gaming == true %}

{% else %}

{% endif %}
5

That works for displaying the buttons correctly however, the add to cart button when clicking it doesn’t do anything. Can i provide you with anymore information to help?

6

Product Grid Code for the button

{% unless recently_viewed %}
{% if enable_quickshop or atc_button %}
{% comment %}
Default button appearance and text
{% endcomment %}
{% assign quick_shop_text = ‘product.buttons.quick_shop’ | t %}
{% assign quick_buy_text = ‘product.buttons.add_to_cart’ | t %}

{% assign quick_shop_classes = ‘productitem–action-trigger button-secondary’ %}
{% assign quick_buy_classes = ‘productitem–action-trigger productitem–action-atc button-primary’ %}

{% if has_variants %}
{% assign quick_buy_text = ‘product.buttons.choose_options’ | t %}
{% else %}
{% if product.template_suffix contains ‘pre-order’ %}
{% assign quick_buy_text = ‘product.buttons.pre_order’ | t %}
{% endif %}
{% endif %}

{% unless product_available %}
{% assign quick_buy_text = ‘product.buttons.sold_out’ | t %}
{% assign quick_buy_classes = quick_buy_classes | append: ’ disabled’ %}
{% endunless %}

{{ product_item_price }}
{% render 'product-badge', class_root: 'productitem', product: product, product_available: product_available, on_sale: on_sale, price: price, compare_at_price: compare_at_price, show_saved: consistent_saved, compare_at_price_varies: compare_at_price_varies, include_range: true, %}

{% if enable_quickshop %}

{{ quick_shop_text }}
{% endif %}

{% if atc_button %}

{{ quick_buy_text }} {%- render 'icon-spinner' -%}
{% endif %}
{% endif %} {% endunless %}
7

Product form code:

{% unless recently_viewed %}
{% if enable_quickshop or atc_button %}
{% comment %}
Default button appearance and text
{% endcomment %}
{% assign quick_shop_text = ‘product.buttons.quick_shop’ | t %}
{% assign quick_buy_text = ‘product.buttons.add_to_cart’ | t %}

{% assign quick_shop_classes = ‘productitem–action-trigger button-secondary’ %}
{% assign quick_buy_classes = ‘productitem–action-trigger productitem–action-atc button-primary’ %}

{% if has_variants %}
{% assign quick_buy_text = ‘product.buttons.choose_options’ | t %}
{% else %}
{% if product.template_suffix contains ‘pre-order’ %}
{% assign quick_buy_text = ‘product.buttons.pre_order’ | t %}
{% endif %}
{% endif %}

{% unless product_available %}
{% assign quick_buy_text = ‘product.buttons.sold_out’ | t %}
{% assign quick_buy_classes = quick_buy_classes | append: ’ disabled’ %}
{% endunless %}

{{ product_item_price }}
{% render 'product-badge', class_root: 'productitem', product: product, product_available: product_available, on_sale: on_sale, price: price, compare_at_price: compare_at_price, show_saved: consistent_saved, compare_at_price_varies: compare_at_price_varies, include_range: true, %}

{% if enable_quickshop %}

{{ quick_shop_text }}
{% endif %}

{% if atc_button %}

{{ quick_buy_text }} {%- render 'icon-spinner' -%}
{% endif %}
{% endif %} {% endunless %}
8

Hi @Anonymous ,

You can try to replace the code inside the {% else %} with the code that has the add-to-cart. Sorry, it is hard to figure out how the code is written in your theme.

9

Would you be able to request access to my store to have a look really struggling here :slightly_smiling_face: It may help :slightly_smiling_face:

10

Hi @Anonymous ,

Request sent

11

Thank you accepted its not the live theme I’m working on, it’s the one below called ‘Empire Latest Version’

1 Like
12

Note. Thank you