When working with GemPages, sometimes you find the differences between the editor preview and the published live 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.
Check the most common reasons and follow the steps to make sure your product pages display correctly.
1. Verify Product Module Settings
If your published product page displays a different product than intended, it may be due to the configuration of the Product Module. To ensure the correct product is displayed:
- Step 1: In the GemPages Editor, click on the Product Module to access its settings in the left sidebar.
- Step 2: 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.
- Step 3: Click Publish to apply the changes.
2. Check Product Visibility Settings
Sometimes, a product may appear correctly in the GemPages Editor but not on the live page. To address this:
- Step 1: Navigate to your Shopify Admin dashboard and select Products.
- Step 2: Choose the product in question and ensure its status is set to Active.
- Step 3: Under the Sales channels and Apps section, verify that the Online Store channel is selected.
3. Republish Your Page
If changes made in the GemPages Editor are not reflecting on the live page, republishing can help:
- Step 1: From your GemPages Dashboard, access the product template in the Editor.
- Step 2: Click Publish to update the live version of your page with the latest changes.
4. Check Theme CSS Conflicts
- 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. Verify Responsive Settings
- Double-check the Responsive settings for each element (e.g., font size, margin, padding).
- Ensure you haven’t hidden or resized elements differently across devices.
- Preview the page at different breakpoints in both the Editor and live site to confirm consistency.
FAQs
1. Why are my pictures missing after publishing?
Ensure the image is uploaded, the product is active on the Online Store channel, and republish the page.
2. Why does my product look different on the live page?
Set the Product Module to Display by assigned product so the correct product shows.
3. Why don’t my edits update online?
Click Publish from the Dashboard. Edits in the Editor won’t go live until published.
4. Why does the layout look off compared to the Editor?
Theme CSS may override GemPages styling. Test with a default theme (like Dawn) to confirm.
Thank you for your comments