User Guide

Search limit to:






How to set up Add to cart and Buy buttons?

by Admin on Feb 23, 2025

1. How to set up and customize the “Buy buttons” block?

The Buy buttons block is used to display the “Add to cart” button and the “Buy it now” button at the same time.

  • The "Add to Cart" button will be shown by default when the product is available.
  • The "Buy it now" button is a direct route to checkout, bypassing the mini cart or cart page entirely.

If you want to add and customize Buy buttons block, here’s how:

STEP 1: Add the block

In the Quick view section, add Buy buttons block. 

STEP 2: Customize the overall look of the button

Click on the Buy buttons block to open its settings panel and then you can:

  • Choose the Button style: Primary or Secondary
  • Enable “Show dynamic checkout buttons” toggle to display the "Buy it now" button and any other dynamic checkout buttons provided by payment methods like PayPal or Apple Pay. 

  • Enable “Show add to cart” toggle to display the button.
  • Enable “Show price on Add to cart button” toggle to show product price on the button.
  • Toggle “Show quantity selector” to let customers choose product quantity before adding to cart.
  • Customize colors for both primary and secondary buttons.

STEP 3: Customize the Pre-order button

When a product is available for pre-order, the "Pre-order" button replaces the "Buy it now" button. You can customize:

  • Button label: Enter the text you want to show on the button. The default is “Pre-order”
  • Message: Enter additional information about the item shown under “Pre-order” button.
  • Toggle Show dynamic checkout buttons for pre-orders
  • Choose Content box type (Square, Round, Adapt to edge setting)
  • Adjust colors for the button background and text.

STEP 4: Click “Save” when done. 

2. How to show store pickup options?

Pickup availability refers to the option for customers to collect their purchases directly from a store location, instead of having them delivered to their address. The benefits of offering pickup availability include:

  • Convenience & Customer satisfaction: Customers have the flexibility to choose a pickup location and time that suits them best, avoiding the need to wait for delivery or worry about missing packages.
  • Cost savings: Offering pickup options can help reduce shipping costs for both the merchant and the customer, particularly for local orders.

To set up the store pickup feature, first follow the instructions provided here:Shopify's guide on setting up local pickup. Then, enable the store pickup option in the respective block settings to display it on your website.

Additionally, you can tick the box "Hide when pre-order is enabled" which means the option will be hidden when the product is not available and can be pre-ordered. This may result in not offering the pickup option. Guide for Pre-order features can be found below.

Result: