Help! Photos on Product page too big - Narrative Theme

Solved
Mary_Abu
Tourist
7 0 0

Hi guys,

 

I need help, please. The photos on my product page are too big, the main photo is taking the whole page and the photos below are just as big as the primary photo. Here's my URL https://loveyourfur.com.co/collections/all and the password is lyf

Thanks in advance! 

0 Likes
DigitalArtisans
Shopify Partner
361 50 64

Hello @Mary_Abu !


It would require Liquid/CSS/Javascript knowledge to implement this feature. For the product image sizing:


In your Shopify Admin go to online store > themes > actions > edit code

Find Asset > theme.scss.liquid and paste this at the bottom of the file.
.product__media-container {
width: 100%;
margin: 0 auto;
}

.product__media-container {
max-width: 800px !important;
}

@media (max-width: 767px){
.product__media-container {
max-width: 320px !important;
}

}
Copy

You can change the values as you need:

800px = image width for desktop/large devices
320px = image width for mobile/small devices

 

Hope this helps!

 

Thanks,

Digital Artisans

 

Hatim Ayoub | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted
Pallavi
Shopify Expert
1731 251 305

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.css and paste this at the bottom of the file:

 

.product__media-container {
max-width: 300px!important;
}
.product__content-header {
padding: 19px 0!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Natztech
Shopify Partner
887 240 660

This is an accepted solution.

hello @Mary_Abu  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.product__submedia-list-item {
    padding: 0 12px;
    max-width: 500px;
    margin: 0 auto;
}

.product__media-container {
     max-width: 300px !important;
}
}

  

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
Mary_Abu
Tourist
7 0 0

Thank you for your help! 

0 Likes
Mary_Abu
Tourist
7 0 0

Thanks for the help! 

0 Likes
Mary_Abu
Tourist
7 0 0

Thank you so much! 

0 Likes