Ajax Cart

By Shopify default, when clicking on the Add to cart button on the Product page, customers will be redirected to the cart page. With the Ajax cart extension, you will have more choices, like showing a cart popup, reloading the page, going to the checkout page, or a cart message… So your customers can easily select product options and avoid wasting time on annoying page reloads. This function surely encourages customers to shop more, hence increasing your revenue.

Let’s step forward to see more clearly how it works and what exactly the app will bring to you with the EComposer App.

1. How to install the Ajax Cart extension?

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Ajax Cart extension.
Step 3: Click Details and install the extension on your store.

Notice: The extension only work on the live page

2. Customize

The Customize section displays the available settings for the Ajax Cart. It mainly allows you to customize the design and adjust elements such as font styles and the appearance of the displayed content.

After installation, you will be able to see this Settings tab:

2.1 General

The General Settings mainly control the overall design of the Ajax Cart, including the settings below:

• Enable ajax cart: You can turn it on or off without uninstalling the extension.
• Enable order note: Allow customers to enter special order instructions before proceeding to checkout.

• Design: You can choose your preferred layout by switching between the provided Design 1 and Design 2 options.
  • Design 1: The buttons will work according to the old version settings
  • Design 2: The buttons will work according to the settings in the Button list tab

• Trust Seal: We support a small visual badge shown to help customers feel more confident about buying.
  • Image: It allows you to upload your own custom image for easier recognition.
  • Shopify payment: This means it will display the payment methods that you have configured in your Shopify settings.
  • None: If you prefer not to use the Trust Seal, you can select this option.

• Use custom code: You can add a custom HTML and CSS snippet to this field, turning your ideas into reality with just a few lines of code.

2.2 Button List

Here, you can add or remove buttons in the extension. We provide 3 buttons: Continue Shopping, Checkout, and View Cart. For each button, you can customize the text and colors for both normal and hover states.

Note:  This option only work with design 2

• Continue Shopping Button: Customers can click this button to close the cart popup and continue shopping.

• The Checkout button redirects customers to your store’s checkout page, allowing them to complete their orders more quickly. It also includes an Enable Terms & Conditions option, which lets you add the URL of your Terms & Conditions page.

• View Cart Button: This button directs customers to the Cart page.

2.3 Button style

You can change the Typography, Width, Border radius, and Spacing for both the Checkout Button and the Continue Shopping Button

This extension will be used on the Add to cart button. After setting the extension, you can decide on the action after adding the product to the cart by clicking on the Add to cart button:

• Show cart popup: It will display a small popup immediately after you click the Add to Cart button, showing the product that was just added along with a summary of the product details.

• Reload page: After clicking the Add to cart button, the page will automatically reload.

• Show a message: After clicking the Add to cart button, a small popup message will appear at the bottom of the page indicating that the product has been added successfully.

• Redirect to the Cart page/ Redirect to the Checkout page: After adding the product to the cart, the page will redirect to the selected destination, such as the Cart page or Checkout page.

• Go to Special URL: You will be able to add your preferred page URL, meaning that after clicking the Add to cart button, the user will be redirected correctly to the page you configured.

3. How to change the text when Ajax cart is “cart popup”

After installing the extension, our app will add the Ajax cart template to your Theme. So if you want to change the text of the cart popup, please follow my guide below:

Go to Theme => Edit content.

Use the Search icon on the right side to enter the keyword “ajax” until you find the section called Ecom Ajax Cart. From there, you can start editing the content.

4. How to translate button in Ajax cart

You may need to translate the button into multiple languages using a translation tool, such as the Translate & Adapt app.

From the app dashboard, go to Translation > Shop metadata

Find ecomposer.ajax-cart, then translate the text you want inside