Hi @BrookeGentile ,
It sounds like you're dealing with a caching issue or a front-end rendering issue on your Shopify store, specifically affecting mobile devices and the homepage. Since you've already cleared the website cache, there are a few other possible causes and fixes to explore. Let's go through some troubleshooting steps to help resolve this:
1. Check for Theme Caching
Even after clearing the cache, certain caching mechanisms in the theme or on Shopify's servers could still be serving outdated data. Some Shopify themes may have custom caching solutions that could cause this issue.
- Solution: Ensure that your theme doesn't have any client-side caching enabled. Some themes have scripts that store pricing information in the browser cache or use "local storage" for quick loading of price data. You could try disabling or adjusting any caching options in your theme's settings or script files. Check the theme's theme.js or other related JavaScript files for any caching logic.
2. Review Theme or Custom Code Modifications
If you've customized the pricing or discount logic (e.g., using custom scripts or a discount app), there could be a bug in the code that’s causing the price to display incorrectly on mobile before refreshing. It's possible that the JavaScript responsible for rendering the price is not fully executed on the initial page load for mobile devices.
- Solution: Review any custom code or apps that manipulate pricing. Look for conditional logic related to the homepage and mobile devices specifically. Ensure that your discount logic is correctly handling the initial price display, especially on mobile. A common mistake is loading the discount price after a delay, causing an incorrect price to be displayed initially.
3. Clear Shopify's CDN Cache
Shopify uses a Content Delivery Network (CDN) to serve assets and data, and sometimes this can result in outdated versions of pages or images being shown.
- Solution: You can try to force a cache refresh on Shopify's CDN by making a small change to your theme files (e.g., update the theme.liquid file or an asset file) and saving the changes. This triggers Shopify’s CDN to refresh and push new data to visitors. After saving the changes, check if the issue persists.
4. Check for Price Display Logic in the Theme
Some themes may use JavaScript to dynamically load prices based on conditions such as sale pricing, and these conditions might not be properly triggering on the first page load for mobile users.
- Solution: If you're comfortable editing theme code, try to locate and review the JavaScript responsible for price rendering. Check for functions that update the price display (.price, .sale-price, etc.) on page load and ensure they are running correctly on mobile devices.
5. Check for Shopify Scripts or Third-Party Apps
If you are using a third-party discount app or Shopify Scripts for pricing, there could be an issue with how they are interacting with your homepage layout, especially on mobile.
- Solution: Disable or temporarily remove any third-party apps that might be affecting the price display and check if the problem persists. This will help you isolate whether the issue is caused by an app or custom code.
6. Disable Lazy Loading for Pricing
On mobile devices, the page might be loading content (like the price) asynchronously, especially with lazy loading (to speed up page load times). This could cause the incorrect price to display initially, before the correct price is updated once the page finishes loading.
- Solution: If your theme uses lazy loading for product details (including prices), try disabling it for the price element or tweak the lazy loading script to ensure it correctly loads the price at first render.
7. Check the Homepage Product Listings
The issue might be specific to the homepage where the products are listed. It's possible that there is a separate block or snippet for displaying products on the homepage, which might be using outdated pricing data.
- Solution: Check if the homepage uses a custom snippet or section to display products. In some themes, the homepage might use a separate script to load product data (such as prices), which may not be properly synced with the actual product data. You can verify if this is the case by inspecting the homepage's product listing code and comparing it with how prices are handled on product pages.
8. Test for Mobile-Specific Code or CSS
Mobile versions of Shopify stores sometimes use separate CSS or JavaScript files, which could be causing issues with price rendering specifically on mobile devices.
- Solution: Check the theme’s responsive design code, such as @media queries in your CSS files, and review any mobile-specific logic that could be affecting how the price is displayed. It's possible that mobile-specific CSS or JavaScript isn't properly updating the price at first load.
9. Testing with a New Theme
If none of the above steps resolve the issue, you might want to test with a fresh copy of your theme or try a default Shopify theme (like Debut or Dawn) to see if the problem persists.
- Solution: Duplicate your theme and apply the default Shopify theme temporarily to check if the pricing issue still occurs. If the issue is resolved with the default theme, it likely indicates that there is a custom code issue with your current theme.
Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.
Thanks & Regards
Akshay Bhatt
- Need a Shopify Specialist?
- Custom Design | Advanced Coding | Store Modifications
Email us
