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 (or CTRL + F on Windows devices) 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/CTRL+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 – Taste – Craft – Refresh – Sense with theme popup notification
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.
Dawn – Taste – Craft – Refresh – Sense theme new version with cart drawer
With the Dawn – cart drawer, please add this code to theme.liquid file
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
If you follow the guide above but it is not working and the cart drawer show blank
Please add this code
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
If the code above not work, you can try add this code instead
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
If you follow the guide above but it is not working and the cart drawer show blank
Please add this code
Lorenza theme
With Lorenza theme – you need to make sure that the theme shouldn’t be minified
Please check this video for solution
Kalles theme
With Kalles theme please add this code to theme.liquid file
Prestige – Warehouse theme
With Prestige or Warehouse theme, please add this code to the theme.liquid file
If the code above not work, please add this code instead
EcomSolid
With EcomSolid Theme, please add this code to the theme.liquid file
Focal
With Focal Theme, please add this code to the theme.liquid file
Focal 8.10
With Focal 8.10 Theme, please add this code to the theme.liquid file
Retina
Step 1: Update code on retina.js
Step 2: Use this code on theme.liquid
Slate theme
Follow this video instruction for solution
Expanse theme
Follow this video instruction for solution
Custom theme (minimog)
Please add this code to the theme.liquid file.
MeroxIO custom theme
Please follow this video for solution.
Showcase theme
With Showcase Theme, please add this code to the theme.liquid file
Lorenza theme
Please follow this video for solution.
MODULAR theme
With MODULAR Theme, please add this code to the theme.liquid file
Electro – Zeexo theme
Step 1: search and open bc.script.js.liquid in theme code
Step 2: search AT_AddCart and move it to window like this video : link
Step 3: please add this code to the theme.liquid file
Boost Theme
With Boost Theme, please add this code to the theme.liquid file
District theme
Please follow this video for solution.
Vela theme
Step 1: Move this function to window in ‘vela.js’ and added the code helper.
Step 2: Add this code to the theme.liquid file
Pipeline, Testament theme
Step 1: Move cartUpdateCallback to window first.
Step 2: Add this code to the theme.liquid file
Shella theme
Step 1: Please follow this video for solution.
Step 2: Add this code to theme.liquid file
Shella theme version 5.0.1
With Shella Theme 5.0.1, please add this code to the theme.liquid file
Prestige theme – Warehouse
With Prestige theme – Warehouse (for some version only), please add this code to the theme.liquid file
Lammer theme 4.0.0
With Lammer theme 4.0.0, please add this code to the theme.liquid file
Warehouse 2.5.2 theme
With Warehouse 2.5.2 theme, please add this code to the theme.liquid file
Turboant theme
With Turboant 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.