REMOVING WHITE SPACE/MAKING IMAGES BIGGER IN PRODUCT PAGES.

[onte]

Hello,
I need to know how to change the size of the images in my product pages.
i would like to change the layout so the images are bigger with less white space and less white space around the text. I have attached an image of the style i would like.

I would like the images to be the focal point of the page rather than the info taking up so much space.
If its not possible to remove all the white space around photos then i am happy to have the just a small boarder like the second image i attached.

Thank you.

• theme: Spark
• myshopify_url: onte.com.au

I understand his requires code, which i am happy to paste in, if i am given instructions as to what and where.

Thank you in advance.

[Dan-From-Ryviu]

Hi @onte

Please go to your Online Store > Themes > click “…” > Edit code, open theme.liquid file, after paste this code.

[TheUntechnickle]

Hello Onte,

You can achieve the desired layout by adjusting the CSS in your theme. Follow these steps:

1. Go to your Shopify Admin and navigate to Online Store > Themes.
2. Locate your active theme (Spark) and click on Actions > Edit Code.
3. In the code editor, search for the file named base.css (or theme.css, depending on your theme setup).
4. Add the following code at the bottom of the file:

.product__media-container { 
    width: 105% !important;
}

.product.product--gallery-size-large.product--gallery-style-grid {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

The first part increases the size of the product images, and the second part reduces the white space to the left and right of the content (image + text).

1. Save the changes and check your product pages.

You can tweak the width or padding values to find the perfect layout for your needs. Let me know if you need further assistance!

Thank you.
Shubham | Untechnickle

[akshay_bhatt]

Hi @onte ,

To make the images in your product pages larger with less white space, while reducing the space around text, follow these steps tailored for the Spark theme:

---

1. Identify the Product Page Template- Go to Online Store > Themes > Actions > Edit Code.

• Locate the product template file: typically named product.liquid or product-template.liquid.### 2. Adjust Image Size in CSS- Open the theme’s CSS file: base.css or theme.css.
  • Add this code at the bottom to increase the size of images and adjust spacing:

.product__media-wrapper {
  max-width: 100%; /* Allow images to take the full width */
  margin: 0 auto; /* Center the image */
  padding: 0; /* Remove unnecessary padding */
}

.product__media {
  border: 2px solid #f5f5f5; /* Optional: Thin border around the images */
  border-radius: 5px; /* Optional: Slightly rounded corners */
}

.product__info {
  padding: 20px; /* Reduce space around text */
}

.product__details {
  max-width: 600px; /* Adjust text width to balance layout */
  margin: 0 auto; /* Center-align text */
}
​

3. Adjust the HTML for Layout- Go back to the product.liquid or product-template.liquid file.

• Locate the
  containing product images (usually has classes like product_media or product-gallery).
• Ensure it wraps all images properly for consistent spacing.

---

4. Make Images Focal Point- Move the image section above the text section (if not already).

• Add this wrapper for better alignment:

  

    {{ product.media }}
  

  
    {{ product.description }}
    {{ product.price }}
    {{ product.form }}
  

​

5. Test and Adjust- Save changes and preview your product pages.

• Tweak max -width, padding and margin values in the CSS until it matches your desired look.

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

[akshay_bhatt]

Hi @onte ,

To make the images in your product pages larger with less white space, while reducing the space around text, follow these steps tailored for the Spark theme:

---

1. Identify the Product Page Template- Go to Online Store > Themes > Actions > Edit Code.

• Locate the product template file: typically named product.liquid or product-template.liquid.### 2. Adjust Image Size in CSS- Open the theme’s CSS file: base.css or theme.css.
  • Add this code at the bottom to increase the size of images and adjust spacing:

.product__media-wrapper {
  max-width: 100%; /* Allow images to take the full width */
  margin: 0 auto; /* Center the image */
  padding: 0; /* Remove unnecessary padding */
}

.product__media {
  border: 2px solid #f5f5f5; /* Optional: Thin border around the images */
  border-radius: 5px; /* Optional: Slightly rounded corners */
}

.product__info {
  padding: 20px; /* Reduce space around text */
}

.product__details {
  max-width: 600px; /* Adjust text width to balance layout */
  margin: 0 auto; /* Center-align text */
}
​

3. Adjust the HTML for Layout- Go back to the product.liquid or product-template.liquid file.

• Locate the
  containing product images (usually has classes like product_media or product-gallery).
• Ensure it wraps all images properly for consistent spacing.

---

4. Make Images Focal Point- Move the image section above the text section (if not already).

• Add this wrapper for better alignment:

  

    {{ product.media }}
  

  
    {{ product.description }}
    {{ product.price }}
    {{ product.form }}
  

​

5. Test and Adjust- Save changes and preview your product pages.

• Tweak max -width, padding and margin values in the CSS until it matches your desired look.

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

[onte]

This is great. and worked.

My next question is how do i reduce the padding/white space on either edge of page.

See image below how to reduce the space that is marked in green.

Thank you in advance

[Dan-From-Ryviu]

Please update the code to this

[onte]

THANK YOU SO MUCH. THIS WORKED and was so easy to implement.

Thank you