Generate a purchase button

You have the option to include an Add to shopping cart feature in Selection lists that are linked to your “merchandise” Collection. This enables customers to promptly add items to their shopping cart from any of your product selections showcased on your landing page and other sections.

You can also position an Add to cart feature on your merchandise layout page.

Throughout this tutorial

1. Position an Add to cart element within a Selection list
2. Design and personalize the diverse conditions
3. Insert the personalized purchase button on your product page

Prerequisite for this tutorial

Before proceeding with this tutorial, make sure to review the following guides:

• Add to shopping cart
• Selection list
• Selection page

Incorporate a purchase button element

Ensure that you have set up a merchandise show grid — a selection list linked to the merchandise collection. Add an Add to shopping cart element in this selection list from the Add panel or via Quick find (CMD/CTRL+E).

Conceal the Purchase now button (optional)

For a simplistic purchase button, you can also hide the Order now button in the default state. Once you have selected the add to cart element, you can deactivate the Order now button in the Add to cart settings panel

Conceal the quantity field (optional)

For an even simpler purchase button, you may choose to hide the quantity field in the default state. Therefore, with the purchase button element selected, disable the quantity field in the Add to cart settings panel.

If you opt to hide the quantity field in a “purchase” component, when a customer adds an item to their shopping cart, the default quantity of 1 item will be included. They can modify the quantity later from within the cart.

Design and customize the varied conditions

Several elements make up the purchase component. These elements can be styled and customized extensively. You have the flexibility to modify the appearance of elements like the “submit button”, the “out of stock” state message, and the “error” state message.

If your item has variations, you can somewhat customize labels and option fields. Additionally, you can style the label and input field of the quantity field if it’s enabled for a “purchase” component.

You can alter the default error messages from the Error message settings.

Explore more about: Add to shopping cart

Integrate the customized purchase button in your merchandise page

Now that your Add to shopping cart component is styled and personalized, you can incorporate it into other merchandise selection lists or the merchandise layout page. To achieve this, ensure you select the primary Add to shopping cart wrapper and copy it. Subsequently, access the merchandise page or choose any selection list linked to the “merchandise” category and paste your completely customized add to cart component.

Choose the main Add to shopping cart wrapper to paste it across different pages and lists.

Currently, it’s not possible to store the Add to cart component as a symbol. Nevertheless, you can still duplicate and insert it between the merchandise page and product selection lists. Any adjustments made to the settings in the Elements panel will solely impact the selected instance. Regarding styles, updating the style of an element with a class will update all elements with the identical class. Hence, ensure to allocate a class to each element in your cart even if you don’t intend to style it immediately. Your future self will appreciate this approach.