Cart Drawer does not Automatically Update

In this article, you will learn about a PageFly page’s issue that the cart drawer (cart icon) does not automatically update when you add product(s) to your cart. It means that when customers click on the Add to Cart button, the cart drawer of your store’s theme stays static instead of automatically updating the products.

The reason for the issue

Basically, PageFly works well with Shopify themes. However, with some themes, especially the cart mechanism working makes conflict with PageFly, therefore there is the cart drawer not updating automatically.

How to fix the problem

In this article, we will show some popular themes and the solutions to each of them. If you don’t find your theme here, please contact our Support.

You need to make sure the original theme name in case you change the theme name.

First of all, you need to access the theme files of Shopify Admin

Go to your Shopify Admin > Online Store > Themes > Edit code

Note that for each theme, the code to fix this issue is different. You can find the code for your theme in the list below.

Narrative theme

Step 1: Add the window.cart = variable in the theme.js file

In the search field, find the theme.js file and you will see the result as the image below

Scroll down or you can use the hotkey Cmd+F to find the var cart function. Then, adding the window.cart = variable after var cart = , the code will become like the image below

Step 2: Add required script codes to the theme.liquid file

In the search field, find the theme.liquid file and you will see this file as the screenshot below

Now you need to add this script code inside the head tag or the body tag. In this case, we will add it inside the body tag like this

Finally, you need to add another script code inside the theme.liquid file. You should add that script code below other script codes to easily find later. Check the screenshot below

Pixel Union theme

Step 1: Add the window.QuickShopView variable in the site.js file

  1. Do the same as Narrative theme, in the search field, find the site.js file
  2. Scroll down or you can use the hotkey Cmd+F to find the QuickShopView function. Then, adding the window.QuickShopView = variable after QuickShopView =

It goes like this QuickShopView = window.QuickShopView =

Step 2: Add the required script code inside the theme.liquid file

  1. In the search field, find the theme.liquid file
  2. Now you need to add this script code inside the head tag or the body tag. In this case, we will add it inside the body tag. (Same step 2 of the Narrative theme)

Venue theme

Step 1: Add the window.ajaxCart = variable in the theme.js file

  1. Do the same as the Narrative theme, in the search field, find the site.js file
  2. Scroll down or you can use the hotkey Cmd+F to find the var ajaxCart function. Then, adding the window.ajaxCart = variable after var ajaxCart =

It goes like this var ajaxCart = window.ajaxCart =

Step 2: Add the required script code inside the theme.liquid file

  1. In the search field, find the theme.liquid file
  2. Now you need to add this script code inside the head tag or the body tag. In this case, we will add it inside the body tag. (Same step 2 of the Narrative theme)

Turbo

Step 1: Add the window.refreshCart = variable in the site.js file

  1. Do the same as the Narrative theme, in the search field, find the site.js file
  2. Scroll down or you can use the hotkey Cmd+F to find the refreshCart function. Then, adding the window.refreshCart = variable in front of refreshCart

It goes like this window.refreshCart = refreshCart;

Step 2: Add the required script code inside the theme.liquid file

  1. In the search field, find the theme.liquid file
  2. Now you need to add this script code inside the head tag or the body tag. In this case, we will add it inside the body tag. (Same step 2 of the Narrative theme)

Dawn theme

With Dawn Theme, please add this code to the theme.liquid file

Note: You have to change the “View my cart” text in the code accordingly to your store language.

Elessi theme

With the Elessi theme, you just need to add the required code inside the theme.liquid file

Gecko theme

With the Gecko theme, you just need to add the required code inside the theme.liquid file

Woodmart theme

With the Woodmart theme, you just need to add the required code inside the theme.liquid file

Blockshop theme

With the Blockshop theme, you just need to add the required code inside the theme.liquid file

Stamped review theme

With the Woodmart theme, you just need to add the required code inside the theme.liquid file

Boundless theme

With Boundless theme, please check this link here for the solution

Porto theme

With Porto theme, please check this link  here for the solution

Cospora theme

With Cospora theme, please check this link here for the solution

Flex theme

With Flex  theme, please check this link here for the solution

Grid theme:

With Grid theme, please check this link here for the solution

Galleria theme

With Galleria theme, please check this link  here for the solution

Debutify theme

With Debutify theme, please follow these steps 

  1. Go to theme.js.liquid file and then search theme.ajaxCart, ajaxify, ajaxCart
  2. Check in live view with this keyword to see there is an load function or update function or not

Example: theme.ajaxCart.update() or ajaxCart.load()

  1. If there is one of keyword above, add this code into theme.liquid file

Here is the tutorial link here

Avone theme

With Avone theme, please check this link here for the solution

Showtime theme

With Showtime Theme, please check this link  here for the solution

Rebranding theme

With Rebranding Theme, please add this code to the theme.liquid file

Envy theme

With Envy Theme, please check this link here for the solution

Blockshop Theme

With Blockshop Theme please add this code to the theme.liquid file

Basel theme

With Basel Theme, please check this link here for the solution

Ella theme

With Ella  Theme, please check this link here for the solution

Lusion theme

With Lusion Theme, please check this link here for the solution

Atlantic theme

With Atlantic Theme, please add this code to the theme.liquid file

Gecko theme

With Gecko Theme, please add this code to the theme.liquid file

Motion theme

With Motion Theme, please add this code to the theme.liquid file

Maker theme

With Maker Theme, please add this code to the theme.liquid file

Debut theme

With Debut Theme, please add this code to the theme.liquid file

NOTICE: When you added this code into theme and this does not work. You can open console.log() in live view and see there is any error for this. If you see this error “$ is not define…”
You should copy and paste this line into theme.liquid file
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Express theme

With Express Theme, please add this code to the theme.liquid file

Impulse theme

With Impulse Theme, please add this code to the theme.liquid file

Wokiee theme

With Wokiee Theme, please add this code to the theme.liquid file

ABZ – Icon 

With ABZ – Icon, please add this code to the theme.liquid file

Streamline theme

With Streamline Theme, please add this code to the theme.liquid file

Bold-Movivatior

With Bold-Movivatior Theme, please add this code to the theme.liquid file

Brooklyn theme

With Brooklyn theme, please check out this video for solution

EcomSolid

With EcomSolid Theme, please add this code to the theme.liquid file

Required code in all themesClick to copy

For all themes, it’s required to have this same code.

If your theme is not listed above, please ask your Theme Provider to have their own theme code so they can update their code in the red box as the demonstration below:

This code also needs to be added to the theme.liquid file.

Last but not least, please do not hesitate to let us know if you need any help via the Live chat.

Thank you for your feedback!

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!