Cart Drawer does not Automatically Update
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
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.
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.
To fix this problem, please follow these steps:
Go to Shopify Admin > Online Store > Themes.
In the Current theme > click Customize.
On the left sidebar, click App embeds.
Check the box next to PageFly Theme Helper.
Click Save.
This will fix the issue for 60% of Shopify themes. If the issue persists, please check the solutions below for your specific theme. If you do not find your theme listed, please contact our support team.
For more details, you can check the video tutorial below:
First of all, you need to access the theme files of Shopify Admin
Go to your Shopify Admin > Online Store > Themes > Edit code
With the Narrative theme, you just need to add the required code inside the theme.liquid file
With the Venue theme, you just need to add the required code inside the theme.liquid file
Go to app.js.liquid file and search refreshCart
Add window.refreshCart like thisvideo
Search add.js in app.js.liquid file and copy the code below that like thisvideo
Add the above copied code inside window.__pagefly_helper_store code in theme.liquid file to make add to cart work like thisvideo
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.
With the Dawn - cart drawer, please addthis code to theme.liquid file
With the Blockshop theme, you just need to add the required code inside the theme.liquid file
Go to javascript files of theme and find ajaxCart
Add window.ajaxCart after ajaxCart like var ajaxCart = window.ajaxCart
Addthis code in theme.liquid
With Porto theme, please check this link here for the solution
With Cospora theme, please check this link here for the solution
With Flex theme, please check this link here for the solution
With Grid theme, please check this link here for the solution
With Galleria theme, please check this link here for the solution
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 keywords 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 addthis code
With Avone theme, please check this link here for the solution
With Showtime Theme, please check this link here for the solution
With Rebranding Theme, please add this code to the theme.liquid file
With Envy Theme, please check this link here for the solution
With Basel Theme, please check this link here for the solution
With Ella Theme, please check this link here for the solution
With Lusion Theme, please check this link here for the solution
With Atlantic Theme, please add this code to the theme.liquid file
With Motion Theme, please add this code to the theme.liquid file
With Maker Theme, please add this code to the theme.liquid file
With Debut Theme, please add this code to the theme.liquid file
Note: 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
With Express Theme, please add this code to the theme.liquid file
With Impulse Theme, please add this code to the theme.liquid file
If the code above not work, you can try addthis code instead
With Wokiee Theme, please add this code to the theme.liquid file
With ABZ - Icon, please add this code to the theme.liquid file
With Streamline Theme, please add this code to the theme.liquid file
With Bold-Movivatior Theme, please add this code to the theme.liquid file
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 addthis code
With Lorenza theme - you need to make sure that the theme shouldn’t be minified
Please check thisvideo for solution
With Kalles theme please addthis code to theme.liquid file
With Prestige or Warehouse theme, please addthis code to the theme.liquid file
If the code above not work, pleaseadd this code instead
With EcomSolid Theme, please add this code to the theme.liquid file
With Focal Theme, please add this code to the theme.liquid file
With Focal 8.10 Theme, please addthis code to the theme.liquid file
Step 1: Update code on retina.js
Step 2: Usethis code on theme.liquid
Followthis video instruction for solution
Followthis video instruction for solution
Please addthis code to the theme.liquid file.
Please followthis video for solution.
With Showcase Theme, please addthis code to the theme.liquid file
Please followthis video for solution.
With MODULAR Theme, please addthis code to the theme.liquid file
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 addthis code to the theme.liquid file
With Boost Theme, please addthis code to the theme.liquid file
With Reach Theme, please add this code to the theme.liquid file
Please followthis video for solution.
Step 1: Move this function to window in ‘vela.js’ and added the code helper.
Step 2: Addthis code to the theme.liquid file
Step 1: Move cartUpdateCallback to window first.
Step 2: Addthis code to the theme.liquid file
Step 1: Please followthis video for solution.
Step 2: Addthis code to theme.liquid file
With Shella Theme 5.0.1, please addthis code to the theme.liquid file
With Prestige theme - Warehouse (for some version only), please addthis code to the theme.liquid file
With Lammer theme 4.0.0, please addthis code to the theme.liquid file
With Warehouse 2.5.2 theme, please addthis code to the theme.liquid file
With Turboant theme, please addthis code to the theme.liquid file
With Broadcast theme, please addthis code to the theme.liquid file
With Be Yours 4.1.0 theme, please addthis code to the theme.liquid file
With Solodrop-2.4.0 theme, please addthis code to the theme.liquid file
With Pop version 3.0.4 theme, please addthis code to the theme.liquid file
You can watch thisvideo guide for more information.
With Flow version 16.3.1 theme, please addthis code to the theme.liquid file
You can watch thisvideo guide for more information.
For all themes, it’s required to havethis 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.
