Add to cart button

The Buy buttons block enhances the shopping experience by offering customizable options for the Add to Cart functionality. It allows users to modify button appearance and behavior, and includes features like displaying payment options and shipping information. Key settings include the ability to choose an icon, display additional checkout buttons, and show free shipping information.

This block also supports local pickup options, payment icons, and a sticky cart feature that remains visible during scrolling. Users can enable a gift card recipient option and display payment terms for Shop Pay Installments. Visibility settings allow the button to be hidden on specific devices, ensuring a responsive design.

Practical usage examples include enhancing the checkout experience by displaying additional checkout buttons and payment icons, promoting free shipping offers, and attracting local customers with pickup options. The gift card recipient feature is useful for special occasions, and visibility settings help maintain a clean design across different screen sizes.

Overview #

The Buy buttons block is designed to enhance the shopping experience by providing various options related to the Add to Cart functionality. It includes settings that allow customization of button appearance and behavior, as well as additional features like displaying payment options and shipping information.

Key components and functionality #

Buy buttons

This block displays an Add to Cart button with various additional settings to customize its functionality and appearance.

• Icon button: This setting allows you to choose an icon for the button. The default icon is shopping cart.

• Display additional checkout buttons: When enabled, this option shows additional checkout buttons for quick purchase. The default setting is true.

• Display free shipping information: This setting displays information about free shipping if applicable. The default is true.

• Display local pickup options: Enables the display of local pickup options for customers. The default is true.

• Display payment icons: Shows icons of the available payment methods. The default is true.

• Display sticky cart: This option allows the cart to remain visible as a sticky bar when scrolling. The default is true. Note that this functionality is only visible on the frontend and not in the theme editor.

• Display gift card recipient option: Provides an option to send a gift card via email, applicable only for gift card products. This setting is functional only on the actual frontend.

• Display payment terms: Displays information about Shop Pay Installments if set up. The default is true.

Visibility settings

This group of settings controls the visibility of the Add to Cart button across different devices.

• Display visibility: Controls the visibility of the button with options to hide it on desktop or mobile devices. The default setting is do not hide.

Available in sections #

• Product information
• Featured product

Usage notes #

• Responsive Design: Ensure that the visibility settings are configured to provide the best user experience across all devices. Consider hiding elements that may clutter smaller screens.

• Performance: Keep the number of enabled features balanced to maintain optimal loading times and performance.

• Accessibility: Ensure that all button labels and icons are clear and descriptive to support users with accessibility needs.

Usage examples #

1. Enhanced Checkout Experience: By enabling the "Display additional checkout buttons" and "Display payment icons," customers can quickly see and use their preferred payment methods, streamlining the checkout process.

2. Promoting Free Shipping: Use the "Display free shipping information" setting to inform customers about free shipping offers, encouraging them to complete their purchase.

3. Local Pickup Options: For stores offering local pickup, enabling "Display local pickup options" can attract local customers who prefer to collect their purchases in person.

4. Gift Card Sales: The "Display gift card recipient option" is particularly useful during holiday seasons or special occasions, allowing customers to send gift cards directly to recipients.

5. Responsive Design: Adjust the "Display visibility" setting to hide the button on specific devices, ensuring a clean and responsive design across different screen sizes.