When working with GemPages, you may sometimes notice differences between the editor preview and the live published page.
For example, an image may display properly inside the editor but not appear once the page is published.
These issues are often related to product visibility, publishing status, or theme conflicts.
Common reasons and how to fix this issue
Review the most common reasons and follow the steps to ensure your product pages display correctly.
1. GemPages App Embed Not Enabled
If the GemPages app is not enabled in your Shopify theme, your live page may look broken or fail to display the correct layout.
How to fix it:
- From your GemPages Dashboard, click Turn on Shopify Editor.
- In the Shopify theme editor, toggle on the GemPages Theme Helper.
- Click Save to apply the changes.
2. Incorrect Product Module Settings
If your published product page shows a different product than expected, the Product Module may not be set correctly.
How to fix:
- In the GemPages Editor, click on the Product Module to access its settings in the left sidebar.
- Under the Select Product section, choose Display by assigned product.
This setting ensures that the module dynamically displays the product assigned to the template, rather than a manually selected one.
- Click Publish to apply the changes.
3. Product Not Visible in Online Store
Sometimes, a product may appear correctly in the GemPages Editor but not on the live page.
How to fix:
- Navigate to your Shopify Admin dashboard and select Products.
- Choose the product in question and ensure its status is set to Active.
- Under the Sales channels and Apps section, verify that the Online Store channel is selected.
4. Changes Not Published
Edits you make in the Editor won’t appear online until you publish them.
- From your GemPages Dashboard, access the product template in the Editor.
- Click Publish to update the live version of your page with the latest changes.
5. Theme CSS Conflicts
If the live page looks uncentered, too small, or aligned differently than in the Editor, your Shopify theme CSS may be overriding GemPages styles.
How to fix:
- Try switching temporarily to a default Shopify theme (e.g., Dawn) to confirm if the issue persists.
- If the design looks correct with a default theme, the problem likely comes from custom CSS in your active theme. In this case, you can adjust or remove the conflicting CSS, or use the Extra CSS Class option in GemPages to apply your own fixes.
5. Responsive Design Differences
If the live page looks different on desktop, tablet, or mobile, your Responsive settings might not match.
How to fix:
- In the Editor, check each device view (Desktop, Tablet, Mobile).
- Review font size, margins, and padding for consistency.
- Make sure no element is hidden or resized incorrectly across breakpoints.
- Preview the page on both the Editor and the live store.
FAQs
1. Why are my pictures missing after publishing?
This usually happens if the image hasn’t been synced properly between Shopify and GemPages. To fix it:
- Double-check that the image is uploaded directly to Shopify.
- Make sure the product status is set to Active and available on the Online Store sales channel.
- Go back to the GemPages Editor, republish the page, and then refresh your live site.
If the problem persists, try clearing your browser cache or re-uploading the image in Shopify before publishing again.
2. Why does my product look different on the live page?
This often occurs when the Product Module is showing the wrong product. To fix it:
- In the Editor, select the Product Module.
- Under Select Product, choose Display by assigned product.
- Publish the page again to update the live version.
3. Why don’t my edits update online?
Edits made in the Editor will not show until you republish your page. Here’s what to do:
- From the GemPages Dashboard, open your product template.
- Click Publish to push the latest version live.
- Refresh your store page to see the updates.
If you still don’t see changes, clear your browser cache or try in Incognito mode to rule out cached versions.
4. Why does the layout look off compared to the Editor?
This is usually caused by your Shopify theme’s CSS overriding GemPages’ styling. In this case, try to temporarily switch to a default Shopify theme (e.g., Dawn) and check if the layout looks correct.
If it does, the issue comes from your current theme’s custom CSS. You can:
- Adjust/remove the conflicting CSS in your theme.
- Or add an Extra CSS Class in GemPages and apply your own fixes.
Thank you for your comments