My Product Page Look Different After Publishing

This article shows you how to troubleshoot discrepancies between your GemPages product page design and its appearance after publishing.

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.

product-page-look-different-1

Step 3: Click Publish to apply the changes.

For more detailed instructions on assigning products, please refer to this article.

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.

product-page-look-different-2

Step 2: Choose the product in question and ensure its status is set to Active.

product-page-look-different-3

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.

For a comprehensive understanding of the publishing process, refer to the Publish Settings article.

4. Check Theme CSS Conflicts

If your live page looks uncentered, too small, or aligned differently from the Editor preview, it may be caused by your Shopify theme’s CSS overriding GemPages styles.

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

The Editor allows you to design for Desktop, Tablet, and Mobile views separately. If your live preview looks different:

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.

What did you think about this content?

Your comments

Irrelevant: Unexpected or off-topic information.

Inaccurate: The information doesn’t match the product.

Needs small fixes: There are typos or broken links.

I have suggestions: I’d like to suggest improvements for this page.

Email*

Invalid email address.

Something went wrong. Please try again later.

By submitting your email address and comments, you consent to the collection and use of your information as outlined in our Privacy Policy and agree to our Terms of Service.