How to redirect a collection grid 'Buy Button' to the product page, rather than adding to cart?

Technical Q&A
1

Hi All,

I’m looking to edit the redirect on all the ‘collection’ pages ‘Buy’ button so they don’t add the product to the cart, they send you to the actual products page.

Need to do this as we have a lot of upsell on the actual products page, which is skipped if they can just add it to cart from the collection page.

I’m fairly new to Liquid and Shopify so any and all help is appreciated. Here is a link to a page I’m looking to change so you get an idea of what kind of pages I’m on about - https://www.aimshop.com/collections/aim-power-distribution-modules-32-pdm32-unit-systems

I’ve managed to find where the button is rendered, and also the snippet with all the code for the button (see below), I’m just not sure where to add or edit the code to make it do this for me.

Thanks in advance!

{% comment %}

{% endcomment %}

{%- assign product_form_id = 'product-form-' | append: product.id -%}

  

  {{ '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 -%}
2

Hi @WoodyDev ,

You need to remove the buy button from collection liquid file and add the button for product pages, If you are having coding knowledge. else you can hire us for this work because its a time consuming task.

You just have to provide store.

You can directly get connected with me via email or Skype.

Thank you!

3

Surely it’s just a case of changing the redirect of the button rather than making a whole new button and switching it out?

4

Found the Solution (New Code):

{% comment %}

{% endcomment %}

{%- assign product_form_id = 'product-form-' | append: product.id -%}

    

      
      {%- if block.settings.show_dynamic_checkout -%}
      {{ form | payment_button }}
      {%- endif -%}
    
 

  {{ '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 -%}

had to remove lines 8-10 & lines 28-29 :

line 8 =
5

Make sure this behavior isn’t a theme setting “ajax cart”, “cart drawer” etc.

There is a return_to parameter that can be used to send customers from a url to another url; like /cart to a product page.

If this is not for all collections on a store this should be done in an alternate template , or from a flag to toggle it per collection between form & no-form.

Make sure no apps/analytics are depending on the form element.

If your gutting a form you should just outright replace all form related elements such as the submit button, to avoid future dev confusion, or accessibility issues.

When disabling add to cart buttons you generally should also cripple dynamic checkout buttons regardless of setting flags to avoid future mistakes by staff.

Watch the button wording, or at least ab test ,when removing modern conveniences of purchase capability or ability to add to the cart directly from the current view. Very easy to annoy customer when they click “add to cart”, or “buy now” etc and that act they just took doesn’t actually happen. Redirect don’t misdirect, but context matters /shrug.

6

Yeah i made sure it didn’t mess with anything around the rest of the site, seems to be doing what i need it to now, fairly new to liquid and shopify so probably isn’t the best process, but i presumed it would be a case of just changing the url redirect for the button but couldn’t seem to find anywhere that specified a destination for the button