Start Strong
Sell Smart
Manage with Ease
Market to Success

Add to Cart Button: Complete Setup and Customization Guide

The Add to Cart Button app helps you increase sales by providing a clear call to action on product details pages. This app works for both mobile and desktop interfaces and can be used on pages that lack a standard purchase button (including "Add to Cart," "Buy Now," and PayPal).

This guide will explain how to install and activate the app, configure buttons, and provide guidance for optimal performance.

 

 

Installing the App and Enabling Function

To begin using this app, follow these steps:

  1. From your SHOPLINE admin panel, go to Apps > Add to Cart Button. Install the app if you haven’t already. 

  2. Toggle on the Enabled switch to activate the floating add-to-cart button on your product details page.

    1.2.png

 

 

Customizing the Add to Cart Button

When customizing the button, adjust the following settings:

2.0.png

  • Button type
    • Add to cart button: This option adds the product to the shopping cart.
    • Checkout button: This option directs the customer straight to the product checkout page.
  • Button text: Specify the text displayed on the button. This does not affect the button’s function.
  • Display colors: Choose from default, theme-matching, or custom settings to decide button, text, and selector colors.
  • Style settings: Tailor different styles for both mobile and desktop displays to suit your business requirements.
Note: Before using this app, ensure your current theme version is OS 1.0 Pro, OS 2.0, or higher.

 

 

Optimizing Button Experience

Customizing Button Styles to Match Your Store’s Brand

SHOPLINE's Add to Cart button offers a convenient way for customers to add items and proceed to checkout. Customize the Add to Cart/Buy button to match your store's style with extensive options for personalization.

  • Button type: Choose between the "Add to Cart" or "Checkout" button to determine whether customers are directed to the shopping cart or the checkout page after clicking.
  • Button text: Customize the text to fit your store's needs or use the default based on the button type.
  • Color settings: Adjust the button background and text colors as required. 

Component Style Settings: Catering to Diverse Industry Needs

Customize the component style to suit your specific needs.

  • Display position: By default, on mobile devices, the button is positioned at the bottom of the page. On desktops, it can be placed either at the top or bottom of the page.
  • Panel style: SHOPLINE offers three default styles for both mobile and desktop interfaces, including:
    3.2.2.png
    • Call to action button only
    • Product variants and quantity selection for customers
    • Product-Related Information, such as the original price and discounted price of the product