How add the quick buy button on the collection page|Ride theme

Store Design
, , , ,
1

Hi guys,

My Shopify theme is Ride. I want to add the [quick buy button] to my Residential Playground Equipment collection page. However, I don’t want to affect other pages.

I have used the Buy Button channel plugin, but it requires modifying the theme code and it seems to target all product lines, which is not what I want.

So I need your help. Here is the basic information of my website and the help points:

image
image1920×911 120 KB

2

Hello @NinescapeLand

You can add a “Quick Buy” button to just one collection with a conditional code edit.

First, duplicate your theme for safety and make these edits on the new copy.* In your theme’s code editor, go to the Snippets folder and open the file card-product.liquid.

Then scroll to the bottom of the file, just before the last closing </div>, and paste the following code block. It will only show the button on your “Residential Playground Equipment” collection.

{%- if collection and collection.handle == 'residential-playground-equipment' -%}
  <div class="card__quick-buy" style="margin-top: 1rem;">
    {%- assign product_form_id = 'quick-buy-' | append: section.id | append: card_product.id -%}
    {%- assign first_available_variant = card_product.selected_or_first_available_variant -%}
    <product-form class="product-form">
      <form method="post" action="{{ routes.cart_add_url }}" id="{{ product_form_id }}" class="form" data-type="add-to-cart-form">
        <input type="hidden" name="id" value="{{ first_available_variant.id }}">
        <button
          type="submit"
          name="add"
          class="quick-add__submit button button--primary button--full-width"
          aria-haspopup="dialog"
          aria-labelledby="submit-{{ section.id }}-{{ card_product.id }}"
          data-sold-out-message="true"
          {% if first_available_variant.available == false %}disabled{% endif %}
        >
          <span>
            {%- if first_available_variant.available -%}
              Quick Buy
            {%- else -%}
              {{ 'products.product.sold_out' | t }}
            {%- endif -%}
          </span>
        </button>
      </form>
    </product-form>
  </div>
{%- endif -%}

Click Save. Preview your “Residential Playground Equipment” collection to see the new buttons, then check any other collection page to confirm they are not there.

Hope this helps!

3

Hi @NinescapeLand there,

If you want a Quick Buy or Pre-Order button specifically for your Residential Playground Equipment collection without affecting other pages, I recommend using an app like EZ PreOrder – PreSale Manager. Here’s how it works:

  1. Install the app from the Shopify App Store: EZ PreOrder – PreSale Manager.

  2. Select the products you want to offer for pre-order (in your case, products in the Residential Playground Equipment collection).

  3. Customize the button style and text – you can make it appear like a “Quick Buy” button or give it a glassy look with custom CSS.

  4. Test the collection page – the pre-order button will appear only for that collection, leaving all other products untouched.

This approach is much simpler than manually coding, and the app handles stock, payments, and pre-order management automatically.

If you want, you can also style the button to match your theme. For example, a glassy look under the Add to Cart button can be done with a few lines of CSS.

Hope this helps

image
image1264×495 132 KB

4

Hi @NinescapeLand,

Please go to Actions > Edit code > snippets > card-product.liquid file, find ‘{%- endform -%}‘ and add code here:

Screenshot
Screenshot1162×770 102 KB

Code:

{{ form | payment_button }}
5

Hi @namphan

Thank you for your reply. Your code is very effective, but there is a problem. The buy it now button also appears on other pages. But I only want this button to appear on my residential playground collection page.

  • This is the residential playground collection page after adding the code：

image
image1920×911 110 KB

  • This is the other collection page after adding the code：

image
image1920×911 99.7 KB

6

@NinescapeLand
If this custom code worked, you could just add a condition before to only add it for this specific collection. Something like this:

{% if collection.handle == "residential-playground-equipment" %}

  {{ form | payment_button }}

{% endif %}
7

Hi @Selim_Gawad

This is really effective, thank you for your solution

8

Hi @NinescapeLand,

Did you solve it?

9

yes, Thanks for your help