Online store - Add dynamic checkout buttons to products

[TyW]

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of HTML, CSS, JavaScript, and Liquid is required. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial.

---

You can update the product form on the product page template to support dynamic checkout buttons. If your theme has a home page featured product section, then you can update the product form in that template as well.

You can learn more about dynamic checkout buttons in Adding dynamic checkout buttons to your online store.

To update the product form to support dynamic checkout buttons

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Sections directory, open one of the following files:
   
   
   • Click product-template.liquid to update the product page template. In some themes, the product template has a different filename. In some cases, the product form is included in a file in the Snippets directory, and has a name like product-form.liquid.
   • Click featured-product.liquid to update the home page featured product section.
     
     
4. Find the product form by searching for <form action="/cart/add". Take note of any attributes that the form has, such as a class or an id. You can include these attributes in the updated product form that you will create in the next step. If you don't include the attributes, then the styling or behavior of the form might be affected.
5. Delete the entire opening <form> tag, and replace it with the following Liquid:
   
   

   {% form 'product', product %}

   To include the attributes from the old form, add them to your updated form by using the following syntax:
   
   

   {% form 'product', product, id: "oldID", class: "old-class" %}

   To learn more about modifying form attributes, see the Liquid reference for form tags.
   
   
6. Find the closing </form> tag by searching for </form>.
7. Replace the closing </form> tag with the following Liquid:
   
   

   {% endform %}

8. Find the Add to cart button by searching for an input or a button tag that has the attribute type="submit".
9. On a new line below the Add to cart button, add the following Liquid:
   
   

   {{ form | payment_button }}

10. Click Save.
    
    Your modified product form should look something like this example code:
    
    

    {% form 'product', product %}
      ...
      <button type="submit">Add to cart</button>
      {{ form | payment_button }}
      ...
    {% endform %}

[douglasrenato]

Thank you! 🙂

[Bryan_Beecher]

Super helpful! you can add custom attributes as well!

https://shopify.dev/docs/liquid/reference/tags/theme-tags/#modifying-form-attributes

{% form "product", product, id: "newID", class: "custom-class", data-example: "100" %}

[RynRam]

Hi Bryan,

Is it possible to change the function of buy now button to (add to cart then redirect to checkout) ?

[Gabidvs]

Did you manage to do that? I wanna change the function of buy now button to redirect to a transparent checkout from another company 

[naveenhestabit]

Is there a way to add one more button like 'Buy Now', to perform some custom action??

[Gabidvs]

did you able to perform a custom action with this button?

[MyToolkit]

Hi, it works in its simplest form but can you identify how to (a) Adjust the formatting on mobile - the text alignment is slightly out and b) make it responsive to products with options - at the moment, clicking the 'buy now' button just checks out with the first option listed, not the option selected. It also seems to have interfered with the 'add to cart' button. Same again, you cannot select the option.

Any help/guidance very much appreciated. TIA.

[ma-florence]

Is this going to display all of the payment method we have activated for express checkout? Is this also something we can utilise if we want to just display 1 payment method (e.g, Apple pay)?

[KuznetsEnvy]

{{ form | payment_button }}

This line of code adds 6 following warnings to my Google Chrome console: 

Each dictionary in the list "icons" should contain a non-empty UTF8 string field "sizes".
Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type".
Each dictionary in the list "icons" should contain a non-empty UTF8 string field "sizes".
Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type".
Each dictionary in the list "icons" should contain a non-empty UTF8 string field "sizes".
Each dictionary in the list "icons" should contain a non-empty UTF8 string field "type".

How can it be resolved?