How can I customize a specific product's CTA button?

Shopify Discussion
1

Hi all my product listings have an “add to cart” button. But for one particular product i want a different CTA button redirected to a different link. How can i do that?

2

Hey @Jayeeta

To change the ‘Add to Cart’ button for a specific product, you’ll need to create a new product template in your theme’s code. Then, assign this template to your product.

For a detailed guide, check out this article: Creating a new product template.

Thanks

3

Hi @azamgill thank you, The link you provided redirects to another topic. Can you tell me the steps to create a new product template and add a custom button for that particular product without having to code.

4

Hey,

I created a short clip for you, in this clip you can see how to create and apply the new template and also i show how to create a new button.

Thanks

5

https://www.awesomescreenshot.com/video/22325700?key=30158a50e9bf144fa8ea77f341040779

here is the clip link

6

Thank you, that was very helpful. Now my only issue is that the add to cart button is inbuilt in the product code so im not being able to switch off the visibility of only the button without turning off the product visibility.

7

Hi @Jayeeta ,

If you are using Dawn and never modified the buy-buttons.liquid file, please follow below step to add this feature.

NOTE: Do take backup of all the files before editing template files.

Step 1: Edit your active theme

makkaomakka_0-1699528129785.png
makkaomakka_0-1699528129785.png400×114 15.6 KB

Step 2: Replace content of buy-buttons.liquid with the content from the attached file.

makkaomakka_1-1699528129940.png

Step 3: Replace the redirect url to the URL of your contact us page

makkaomakka_2-1699528129794.png

Step 4: Save the changes

Step 5: For product pages where you want to add the “enquire now” button, add “enquire-now” tag.

makkaomakka_3-1699528129782.png

To remove this feature, just replace the buy-buttons.liquid with the buy-buttons.liquid you backup.

Updated Code:

{% assign enquery_now_url = 'https://mangit.myshopify.com/products/product-2' %}
{% comment %}
  Renders product buy-buttons.
  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} product form id.
  - section_id: {String} id of section to which this snippet belongs.
  - show_pickup_availability: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

  Usage:
  {% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}

  {%- if product != blank -%}
    {%- liquid
      assign gift_card_recipient_feature_active = false
      if block.settings.show_gift_card_recipient and product.gift_card?
        assign gift_card_recipient_feature_active = true
      endif

      assign show_dynamic_checkout = false
      if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
        assign show_dynamic_checkout = true
      endif
    -%}

    
  {%- else -%}
    

      

        
      

    

  {%- endif -%}

  {%- if show_pickup_availability -%}
    {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

    {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
      | where: 'pick_up_enabled', true
    -%}

    

    
  {%- endif -%}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,

Makka

8

Hi,

At product.liquid or something similar need to add conditional logic

Example of code:

{% if product.handle == 'specific-product-handle' %}
  [Custom CTA](https://your-custom-link.com)
{% else %}
  
{% endif %}

replace ‘specific-product-handle’ with the handle of the product for which you want the custom button

9

Hey,

In my short clip i tried to show you how can you hide the default add to cart button in new product template. Does it not help for your case?
Can you please share the screenshot to explain it?