Ajax Cart

Author: An Do 1181 views

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 EComposer App.

1. How to install the Ajax Cart extension?

Note: When you finish installing the Ajax Cart extension, it will automatically show when you publish.

To open the Extension popup, you have two ways:

  • Click on the Extension icon at the top left corner.
  • Under the Extension tab, click Add more.
Two ways to open the Extension popup.

Below is the way for installing the Ajax Cart extension:

Click on the Install now button to install the extension

2. How to set the Ajax Cart extension?

Notice: This feature only work on the live page

2.1 General

In this tab of this extension, we have:

  • Enable ajax cart: To let it be shown or not, you can turn it on without uninstalling the extension.
  • Enable order note: Allow customer to fill in the Order Special instructions before Checkout.
Order special instructions from EComposer
  • Trust Seal Image/ Trust Seal Image Size: You will upload the image for this option and have flexible changes in the size for it.

2.2 Checkout Button

You can change the Label of the Checkout Button as well as the Text color and Background color for it on both NORMAL and HOVER mode

2.3 Continue shopping button

You can change the Label of the Continue Shopping Button as well as the Text color and Background color for it on both NORMAL and HOVER mode

2.4 Button style

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

Then click the “Save” button to view it from the Live Page.

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
  • Reload page
  • Show a message
  • Redirect to the cart page
  • Go to the checkout page
  • Go Special URL

Here is the example as you can see in the video below:

How To Set The Ajax Cart With EComposer

3. How to change the text on the 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.

Open the Sections tab.

Find the text option you want to edit. For example, if you want to edit the Checkout button, you can find the Checkout text like this:

4 Comments

  • kitchen

    November 5, 2022

    I do not know whether it’s just me or if everybody else
    encountering problems with your blog. It appears like some of the text
    within your posts are running off the screen. Can someone
    else please provide feedback and let me know if this is happening to them as well?

    This might be a problem with my browser because I’ve had
    this happen before. Cheers

    Reply
    • Anna Nguyen

      November 22, 2022

      Hi Kitchen,

      I’m Anna from the EComposer support team.
      Could you please take a screenshot of that problem for me? Sorry, I’m not sure I understand about what you are facing on your end.

      Thank you
      Anna

      Reply
  • Jade

    March 7, 2023

    Hi there,

    I just installed the Ajax cart options to my website, and have 2 buttons on a page that I would like to link to 2 separate products. The issue I have is that any changes I make to the 1 button – it automatically makes those changes to the second button too. Meaning I am unable to link a different product on the second button. Please help

    Reply
    • Anna Nguyen

      March 13, 2023

      Hi Jade,

      I’m Anna from EComposer team :)
      May I ask, you are using the Add to cart button on a Landing page or on a Product page? If it is on a Landing page, you should add the Add to cart button to a Product box element to make them work separately. Please refer to this document https://help.ecomposer.io/docs/editor-elements/shopify-elements/product-box/
      If you need more help, please contact us via live chat to get help faster.

      Thank you!
      Anna

      Reply

Leave a Comment

On this page
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.