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
- Do the same as Narrative theme, in the search field, find the site.js file
- 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
- In the search field, find the theme.liquid file
- 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
- Do the same as the Narrative theme, in the search field, find the site.js file
- 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
- In the search field, find the theme.liquid file
- 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
- Do the same as the Narrative theme, in the search field, find the site.js file
- 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
- In the search field, find the theme.liquid file
- 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.
