Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more about how to activate this in your store.
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.
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
.featured-product.liquid
to update the home page featured product section.<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.<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.
</form>
tag by searching for </form>
.</form>
tag with the following Liquid:{% endform %}
input
or a button
tag that has the attribute type="submit"
.{{ form | payment_button }}
{% form 'product', product %} ... <button type="submit">Add to cart</button> {{ form | payment_button }} ... {% endform %}
TyW | Online Community Manager @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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" %}
Hi Bryan,
Is it possible to change the function of buy now button to (add to cart then redirect to checkout) ?
Is there a way to add one more button like 'Buy Now', to perform some custom action??
did you able to perform a custom action with this button?
Did you manage to do that? I wanna change the function of buy now button to redirect to a transparent checkout from another company
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.
User | RANK |
---|---|
133 | |
91 | |
77 | |
71 | |
40 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022