Cart Drawer does not Automatically Update

This article is for advanced users who know the JS and Liquid code

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

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)

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

Required code in all themes

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.