REMOVING WHITE SPACE/MAKING IMAGES BIGGER IN PRODUCT PAGES.

onte · ‎11-19-2024

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 · ‎11-19-2024

Please update the code to this

<style>
@media (min-width: 60em) {
    .product.product--gallery-size-large .product__top {
        grid-template-columns: 65% 35% !important;
    }
    .product__media[data-gallery-style=grid] {
        grid-gap: 0 ! important;
    }
    .product__meta {
        margin-left: 40px !important;
    }
    .product { max-width: 100% !important; padding: 0 40px !important; }
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎11-19-2024

Hi @onte

Please go to your Online Store > Themes > click "..." > Edit code, open theme.liquid file, after <head> paste this code.

<style>
@media (min-width: 60em) {
    .product.product--gallery-size-large .product__top {
        grid-template-columns: 65% 35% !important;
    }
    .product__media[data-gallery-style=grid] {
        grid-gap: 0 ! important;
    }
    .product__meta {
        margin-left: 40px !important;
    }
}
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

onte · ‎11-19-2024

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 · ‎11-19-2024

Please update the code to this

<style>
@media (min-width: 60em) {
    .product.product--gallery-size-large .product__top {
        grid-template-columns: 65% 35% !important;
    }
    .product__media[data-gallery-style=grid] {
        grid-gap: 0 ! important;
    }
    .product__meta {
        margin-left: 40px !important;
    }
    .product { max-width: 100% !important; padding: 0 40px !important; }
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

onte · ‎11-19-2024

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

Thank you

TheUntechnickle · ‎11-19-2024

Hello Onte,

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

Go to your Shopify Admin and navigate to Online Store > Themes.
Locate your active theme (Spark) and click on Actions > Edit Code.
In the code editor, search for the file named base.css (or theme.css, depending on your theme setup).
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).

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

Oh, and there’s something brewing behind the scenes that’s redefining customer experience. Curious? It’s time to Revize your store. Don’t say we didn’t warn you. 

akshay_bhatt · ‎11-19-2024

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 <div> 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:

<div class="product__layout">
  <div class="product__media-wrapper">
    {{ product.media }}
  </div>
  <div class="product__info">
    {{ product.description }}
    {{ product.price }}
    {{ product.form }}
  </div>
</div>

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

- Need a Shopify Specialist?
- Custom Design | Advanced Coding | Store Modifications
Email us

akshay_bhatt · ‎11-19-2024