How to Make Product Image Full-Screen

Step 1: Open GemPages Editor for the Product Page

• Log in to your Shopify Admin.
  
• Go to Apps > GemPages Page Builder.
  
• Find and open the product page you want to edit.
  
• Click Edit to launch the GemPages visual editor.

Step 2:  Use a Full-Width Section

Everything starts with the container. If the section isn’t full width, the image won’t be either.

• Click on the Row containing the product image.

• In the Settings (left sidebar), enable:

Full Width: Ensures the section stretches across the browser window.

Optional: Set Padding and Margin to 0 to remove spacing.

Step 3: Insert or Edit the Product Image Element

You can either use the:

• Product Module → then customize the built-in Product Image element, OR
  
• Use a standalone Image element for more control and add a dynamic product image as content.

Inside a Product Module:

1. Select the Product Images element.

2. Go to the Settings tab:

• Layout Mode: Choose Only Feature Image.

• Proportion: Switch to Custom.
• Width: 100vw (viewport width).

• Image Fit / Scale: Set to Cover or Fill Image to ensure the image fills the container.

• Alignment: Center or stretch depending on visual needs.

Step 4. Save and Publish