Narrative theme secondary product images

New Member
3 0 0

When I put more than one image into a narrative product, the secondary images are displayed at a HUGE size at the bottom of the page, with no space between them, which looks pretty darn ugly. Is there any way to insert some margin or padding or something between the images, both to reduce their size and to add some much-needed white space there?

 

This is something where the theme itself should be fixed--as a graphic designer, I can't imagine a client that would want their product pages to look like that.

0 Likes

Hello 

You can add this css in your theme.scss file and also can change max-width according to your requirement.

.shopify-section .product-template .product__image-container {max-width: 500px !important;}
narratve_theme_pdp_page.jpg
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
3 0 0
I tried your solution and it didn't change anything. Here's the code as I entered it in the 'global' section of theme.scss.liquid:
The double underscore in product__image didn't look right, so I tried changing to a single underscore and that didn't work either. I checked in two browsers in case it was pulling the css file from the browser cache

By the way, what key do you press to bring up the search box when viewing liquid code in shopfiy? F2 only searches the left menu

/*================ GLOBAL ================*/
/*============================================================================
#Normalize
Based on normalize.css v3.0.2 | MIT License | git.io/normalize
==============================================================================*/

/*TONY CUSTOM CHANGES$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

.shopify-section .product-template .product__image-container {
max-width: 300px !important;
}
0 Likes
New Member
5 0 0

I have the same problem and not be able edit CCS so need help! Have you figured out how to change the size if the images or add a gallery . Any solution would be appreciated 

0 Likes