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
- 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)
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
- Go to theme.js.liquid file and then search theme.ajaxCart, ajaxify, ajaxCart
- 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()
- 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 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.