Custom CTA button applies to only first product on a collection page

Shopify Discussion
1

Hi Shopify Pros,

I am trying to add a custom CTA button to all the products on a collection page of my store. This CTA pops up a small form. I have added the entire code of this CTA in a new liquid file ‘request-price.liquid’ and calling this liquid file on the ‘main-collection.liquid’ using the below code:

{% for product in collection.products %}

{% render ‘request-price’, product: product %}

{% endfor %}

The button is functioning fine but it reflects with the first product only when I want it to come with all the product cards on a collection page.

Not sure what I am missing in the loop.

Please advise your expert recommendations for this to fix.

Thank you.

2

Based on the code you provided, it seems that you are rendering the ‘request-price’ liquid file within a loop that iterates over the products in a collection. However, the issue you are facing is that the button is only appearing for the first product and not for all the products on the collection page.

  • To ensure that the button appears for all products, you can modify your code as follows:
  • Make sure the ‘request-price.liquid’ file contains the code for the custom CTA button and form.
  • Open the ‘main-collection.liquid’ file (or the file where you want to display the button) in your theme’s code editor.
{% for product in collection.products %}
  
    
  

{% endfor %}
  • Locate the section where the product cards are being rendered. It might look something like this:
  • Inside the product card loop, add the code to render the ‘request-price’ liquid file. It should look like this:
{% for product in collection.products %}
  
    
    {% render 'request-price', product: product %}
  

{% endfor %}
  • Save the changes to the file.

By including the {% render ‘request-price’, product: product %} code within the product card loop, you are instructing Shopify to render the ‘request-price’ liquid file for each product in the collection. This should ensure that the custom CTA button appears for all the products on the collection page.

Make sure to test the changes on your store and adjust the code as needed based on your specific requirements.

3

I have tried your solution but the story is the same.

Here is my code

{%- liquid
if collection and settings.prod_thumb_url_within_coll
assign product_url = product.url | within: collection
else
assign product_url = product.url
endif

assign product_images = product.media | where: ‘media_type’, ‘image’
if settings.prod_thumb_hover_image and product_images.size > 1
assign show_hover_image = true
else
assign show_hover_image = false
endif

assign cheapest_variant = product.variants | sort: ‘price’ | first
-%}
{% for product in collection.products %}

{% render 'wishlisthero-collection-product' with product: product %} {% if product.featured_media %} {%- liquid assign aspect_ratios_same = true for media in product.media offset: 1 if media.preview_image.aspect_ratio != product.media.first.preview_image.aspect_ratio assign aspect_ratios_same = false break endif endfor -%}
{%- if show_hover_image -%}
{%- render 'responsive-image', image: product.media.first.preview_image, manual_image_load: manual_image_load, min_aspect_ratio: 0.6, aspect_ratio: custom_aspect_ratio, no_max_width: true, cover: settings.prod_thumb_crop -%}
{%- for media in product_images offset: 1 -%} {%- liquid assign image_state_class = '' if media.id == product.featured_media.id assign active_media_found = true assign image_state_class = 'product-block__image--active' else if active_media_found assign active_media_found = false assign image_state_class = 'product-block__image--show-on-hover product-block__image--inactivated' else assign image_state_class = 'product-block__image--inactivated' endif endif -%}
{%- endfor -%} {%- else -%}
{%- render 'responsive-image', image: product.featured_media.preview_image, manual_image_load: manual_image_load, min_aspect_ratio: 0.6, aspect_ratio: custom_aspect_ratio, no_max_width: true, cover: settings.prod_thumb_crop -%}
{%- endif -%}
{%- if show_hover_image -%} {%- unless no_swiping -%}
{%- if product_images.size > 2 -%}
{%- endif -%}
{%- endunless -%} {%- endif -%} {% render 'product-label', product: product, cheapest_variant: cheapest_variant %}
{%- if show_hover_image -%} {%- render 'svg-chevron-left', stroke_width: 1.3 -%} {%- render 'svg-chevron-right', stroke_width: 1.3 -%} {%- endif -%}

{% if settings.quickbuy_style == ‘button’ %}
{% unless no_quick_buy %}
{{ ‘products.quick_buy.launch’ | t }}
{% endunless %}
{% endif %}

{% else %}
{{ 'product-1' | placeholder_svg_tag }}
{% endif %}
{%- if section.settings.show_vendor -%}
{{ product.vendor }}
{%- endif -%}
{{ product.title }}

{%- if settings.prod_thumb_show_subtitle and product.metafields.descriptors.subtitle != blank -%}

{{ product.metafields.descriptors.subtitle }}
{%- endif -%}
{% if product.price_varies %} {% comment %}{{ 'products.listing.from' | t }}{% endcomment %} {% endif %} {%- if settings.product_currency_code_enabled -%} {{ cheapest_variant.price | money_with_currency }} - {{ product.price_max | money_with_currency }} {%- else -%} {{ cheapest_variant.price | money }} - {{ product.price_max | money }} {%- endif -%} {% if cheapest_variant.compare_at_price > cheapest_variant.price %} {{ cheapest_variant.compare_at_price | money }} {% endif %}

{% if settings.prod_sold_out_show and product.available == false %}
{{ ‘products.labels.sold_out’ | t }}
{% elsif settings.prod_pre_order_label_show and product.template_suffix contains ‘preorder’ %}
{{ ‘products.product.preorder’ | t }}
{% elsif settings.prod_sale_show and cheapest_variant.compare_at_price > cheapest_variant.price %}
{{ ‘products.labels.sale’ | t }}
{% endif %}

{% render ‘unit-price’, variant: cheapest_variant %}

{%- if settings.prod_thumb_show_options -%}
{%- liquid
assign option_limit = 3
assign options_to_show = settings.swatch_option_name | append: ‘,’ | append: settings.prod_thumb_options_names | replace: ', ', ‘,’ | split: ‘,’
-%}
{%- for product_option in product.options_with_values -%}
{%- if options_to_show contains product_option.name -%}
{%- liquid
if settings.swatch_enabled and settings.swatch_option_name contains product_option.name
assign is_swatch = true
else
assign is_swatch = false
endif
-%}

{%- if product.options.size == 1 -%} {%- for variant in product.variants -%} {%- liquid if is_swatch and settings.swatch_method == 'image' and variant.featured_media == blank continue endif -%} {{ variant.title }} {%- endfor -%} {%- if product.variants.size > option_limit and is_swatch -%} {%- assign remaining = product.variants.size | minus: option_limit -%} {{ 'collections.general.more_swatches' | t: count: remaining }} {%- endif -%} {%- else -%} {%- assign product_option_position_0index = product_option.position | minus: 1 -%} {%- for product_option_value in product_option.values -%} {%- liquid assign option_value_variant = false for variant in product.variants if variant.options[product_option_position_0index] == product_option_value assign option_value_variant = variant break endif endfor

if settings.prod_thumb_options_disable_unavailable
assign is_unavailable = true
for variant in product.variants
if variant.available and variant.options[product_option_position_0index] == product_option_value
assign is_unavailable = false
break
endif
endfor
else
assign is_unavailable = false
endif

if is_swatch and settings.swatch_method == ‘image’ and option_value_variant.featured_media == blank
continue
endif
-%}
<span class=“product-block-options__item{% if is_unavailable %} product-block-options__item–unavailable{% endif %}{% if forloop.index > option_limit and is_swatch %} product-block-options__item–truncated{% endif %}{% if is_swatch %} lazyload{% if manual_image_load %}–manual{% endif %}{% endif %}”
data-option-item=“{{ product_option_value | escape }}”
{% if option_value_variant.featured_media %}data-media=“{{ option_value_variant.featured_media.id }}”{% endif %}
{% if is_swatch %}
{%- if settings.swatch_method == ‘standard’ -%}
data-swatch=“{{ product_option_value | replace: '”', ‘’ | downcase }}"
{%- elsif settings.swatch_method == ‘image’ and option_value_variant.featured_media -%}
data-bgset=“{{ option_value_variant.featured_media.preview_image | img_url: ‘48x48’, crop: settings.swatch_crop_align }}”
{%- endif -%}
{% endif %}>{{ product_option_value }}
{%- endfor -%}
{%- if product_option.values.size > option_limit and is_swatch -%}
{%- assign remaining = product_option.values.size | minus: option_limit -%}
{{ ‘collections.general.more_swatches’ | t: count: remaining }}
{%- endif -%}
{%- endif -%}

{%- endif -%} {%- endfor -%} {%- endif -%}

{%- if settings.enable_product_reviews_collection and product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}

{% render 'rating', rating_value: product.metafields.reviews.rating.value %} {{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count | downcase }}
{%- endif -%} {%- endif -%}

{%- if settings.quickbuy_style != ‘off’ -%}
{%- unless no_quick_buy_markup or no_quick_buy -%}

{%- endunless -%} {%- endif -%}
{% render 'request-price', product: product %}
{% endfor %}

and here is the result:

https://www.rosecjewels.co.uk/collections/polki-jewelry

4

Hello @NavinP

Add this code please.

{%- liquid
if collection and settings.prod_thumb_url_within_coll
assign product_url = product.url | within: collection
else
assign product_url = product.url
endif

assign product_images = product.media | where: 'media_type', 'image'
if settings.prod_thumb_hover_image and product_images.size > 1
assign show_hover_image = true
else
assign show_hover_image = false
endif

assign cheapest_variant = product.variants | sort: 'price' | first
-%}
{% for product in collection.products %}

{% render 'wishlisthero-collection-product' with product: product %}
{% if product.featured_media %}
{%- liquid
assign aspect_ratios_same = true
for media in product.media offset: 1
if media.preview_image.aspect_ratio != product.media.first.preview_image.aspect_ratio
assign aspect_ratios_same = false
break
endif
endfor
-%}

{%- if show_hover_image -%}

{%- render 'responsive-image', image: product.media.first.preview_image, manual_image_load: manual_image_load, min_aspect_ratio: 0.6, aspect_ratio: custom_aspect_ratio, no_max_width: true, cover: settings.prod_thumb_crop -%}

{%- for media in product_images offset: 1 -%}
{%- liquid
assign image_state_class = ''
if media.id == product.featured_media.id
assign active_media_found = true
assign image_state_class = 'product-block__image--active'
else
if active_media_found
assign active_media_found = false
assign image_state_class = 'product-block__image--show-on-hover product-block__image--inactivated'
else
assign image_state_class = 'product-block__image--inactivated'
endif
endif
-%}

{%- endfor -%}
{%- else -%}

{%- render 'responsive-image', image: product.featured_media.preview_image, manual_image_load: manual_image_load, min_aspect_ratio: 0.6, aspect_ratio: custom_aspect_ratio, no_max_width: true, cover: settings.prod_thumb_crop -%}

{%- endif -%}

{%- if show_hover_image -%}
{%- unless no_swiping -%}

{%- if product_images.size > 2 -%}

{%- endif -%}

{%- endunless -%}
{%- endif -%}
{% render 'product-label', product: product, cheapest_variant: cheapest_variant %}

{%- if show_hover_image -%}
{%- render 'svg-chevron-left', stroke_width: 1.3 -%}
{%- render 'svg-chevron-right', stroke_width: 1.3 -%}
{%- endif -%}

{% if settings.quickbuy_style == 'button' %}
{% unless no_quick_buy %}
{{ 'products.quick_buy.launch' | t }}
{% endunless %}
{% endif %}

{% else %}

{{ 'product-1' | placeholder_svg_tag }}

{% endif %}

{%- if section.settings.show_vendor -%}

{{ product.vendor }}

{%- endif -%}

{{ product.title }}

{%- if settings.prod_thumb_show_subtitle and product.metafields.descriptors.subtitle != blank -%}
{{ product.metafields.descriptors.subtitle }}

{%- endif -%}

{% if product.price_varies %}
{% comment %}{{ 'products.listing.from' | t }}{% endcomment %}
{% endif %}

{%- if settings.product_currency_code_enabled -%}
{{ cheapest_variant.price | money_with_currency }} - {{ product.price_max | money_with_currency }}
{%- else -%}
{{ cheapest_variant.price | money }} - {{ product.price_max | money }}
{%- endif -%}

{% if cheapest_variant.compare_at_price > cheapest_variant.price %}
{{ cheapest_variant.compare_at_price | money }}
{% endif %}

{% if settings.prod_sold_out_show and product.available == false %}
{{ 'products.labels.sold_out' | t }}
{% elsif settings.prod_pre_order_label_show and product.template_suffix contains 'preorder' %}
{{ 'products.product.preorder' | t }}
{% elsif settings.prod_sale_show and cheapest_variant.compare_at_price > cheapest_variant.price %}
{{ 'products.labels.sale' | t }}
{% endif %}

{% render 'unit-price', variant: cheapest_variant %}

{%- if settings.prod_thumb_show_options -%}
{%- liquid
assign option_limit = 3
assign options_to_show = settings.swatch_option_name | append: ',' | append: settings.prod_thumb_options_names | replace: ', ', ',' | split: ','
-%}
{%- for product_option in product.options_with_values -%}
{%- if options_to_show contains product_option.name -%}
{%- liquid
if settings.swatch_enabled and settings.swatch_option_name contains product_option.name
assign is_swatch = true
else
assign is_swatch = false
endif
-%}

{%- if product.options.size == 1 -%}
{%- for variant in product.variants -%}
{%- liquid
if is_swatch and settings.swatch_method == 'image' and variant.featured_media == blank
continue
endif
-%}
{{ variant.title }}
{%- endfor -%}
{%- if product.variants.size > option_limit and is_swatch -%}
{%- assign remaining = product.variants.size | minus: option_limit -%}
{{ 'collections.general.more_swatches' | t: count: remaining }}
{%- endif -%}
{%- else -%}
{%- assign product_option_position_0index = product_option.position | minus: 1 -%}
{%- for product_option_value in product_option.values -%}
{%- liquid
assign option_value_variant = false
for variant in product.variants
if variant.options[product_option_position_0index] == product_option_value
assign option_value_variant = variant
break
endif
endfor

if settings.prod_thumb_options_disable_unavailable
assign is_unavailable = true
for variant in product.variants
if variant.available and variant.options[product_option_position_0index] == product_option_value
assign is_unavailable = false
break
endif
endfor
else
assign is_unavailable = false
endif

if is_swatch and settings.swatch_method == 'image' and option_value_variant.featured_media == blank
continue
endif
-%}
{{ product_option_value }}
{%- endfor -%}
{%- if product_option.values.size > option_limit and is_swatch -%}
{%- assign remaining = product_option.values.size | minus: option_limit -%}
{{ 'collections.general.more_swatches' | t: count: remaining }}
{%- endif -%}
{%- endif -%}

{%- endif -%}
{%- endfor -%}
{%- endif -%}

{%- if settings.enable_product_reviews_collection and product.metafields.reviews.rating_count != blank -%}
{%- assign rating_count = product.metafields.reviews.rating_count | plus: 0 -%}
{%- if rating_count > 0 -%}

{% render 'rating', rating_value: product.metafields.reviews.rating.value %}

{{ rating_count }} {{ 'products.product.reviews_link' | t: count: rating_count | downcase }}

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

{%- if settings.quickbuy_style != 'off' -%}
{%- unless no_quick_buy_markup or no_quick_buy -%}

{% render 'svg-x' %}

{%- endunless -%}
{%- endif -%}

    {% render 'request-price', product: product %}

{% endfor %}
5

No success unfortunately.

6

Hi @NavinP , I see you’ve gotten some help. Were you able to figure it out?

7

Unfortunately, didn’t get it fixed yet. Please suggest if you have some solution.

8

Hello @NavinP

To troubleshoot the problem, here are some suggestions:

  1. Verify that the ‘request-price’ snippet is properly defined in your theme. Make sure it is registered correctly and accessible within the appropriate location.

  2. Check if the ‘request-price’ snippet contains the necessary logic to display the price request functionality. Ensure that any required variables or data are correctly referenced and available.

  3. Review the Liquid code within the ‘request-price’ snippet and ensure there are no syntax errors or missing tags.

  4. Check for any error messages or warnings in the console log of your website’s browser developer tools. This can help identify any JavaScript or Liquid errors that might be causing issues with rendering the ‘request-price’ snippet.

  5. If possible, isolate the ‘request-price’ snippet and test it separately to determine if the issue lies within that specific code or if there are other factors affecting its functionality.

If you continue to experience difficulties, it would be helpful to provide more information about the ‘request-price’ snippet and any relevant error messages or unexpected behavior you’re encountering.

9

Can you share the link to your website so that I can see how the button works? Maybe it can help me provide some insight on what to do. Thanks.

10

https://www.rosecjewels.co.uk/collections/polki-jewelry

Here you can see it. When you click on the “Request Price” button under the first product card, a pop up form comes up. But this form is not come when you click any other button on the same page. All the buttons are managed by the same code as I given in my first message here.