Narrative Theme Product image Size is too large

[rojiss]

Hi, 

I am using the Narrative theme and I absolutely love it, but the product images are too large. How can I have the images smaller, all together on the right side (next to the texts& buy buttons). Also I want for it to slide to the next image on its own. How can I do that? Any help will be appreciated.

Too largeI want this part to be on the right side of the product image (on mobile i want it to look right under the product pic)other images are too large and at the very bottom

my store url: https://nerofruit.myshopify.com/

[KetanKumar]

@rojiss 

Welcome to the Shopify community!
and Thanks for your Good question.

sorry but your store is password protect can you please share us.

[rojiss]

Sorry the passport is: gaulya

Let me know if you need anything else! 

Thank you. 

[UmairA]

Hey there @rojiss ,

Are you able to provide your store password so I can take a look and provide the solution here?

[rojiss]

hey the password is : gaulya

[KetanKumar · Accepted solution]

@rojiss 

Thanks

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__submedia-list.product__submedia-list--r2 {
max-width: 800px;
    margin: 0px auto;
}
.product__media-container {
    max-width: 400px !important;
}

[rojiss]

Worked! Thank you so much!!

[KetanKumar]

@rojiss 

it's my pleasure to help us

[ChanFuts69]

Hi can you help me please. My "Get Started" image in the gallery shows different size to different desktops.

Website: ecommerce-consulting-group.myshopify.com

Password: bleale

[KetanKumar]

@ChanFuts69 

thanks for post 

do you have like this?

[ChanFuts69]

[KetanKumar]

@ChanFuts69 

can you please just confirm above my attachment?

[ChanFuts69]

You mean if I have those photos right? 

[KetanKumar]

@ChanFuts69 

Yes

[Bibi3]

Hello, thank you for your help with resizing the image on the narrative theme.

Could you please help me how to make the product image stand on the right and buttons and text on the left, instead then under the product.

[Bibi3]

SORRY. How to make the image on the left and BUY button and text on the right?

[KetanKumar]

@Bibi3 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[sonicray]

@KetanKumar it didn't work for me... can I hire you to help me fix this theme? Thank you.

[LazaroCon1]

I tried this and it didn't work 😞

[KetanKumar]

@LazaroCon1 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[LazaroCon1]

My website is already published and I'm working in that theme because I want to change it.  

I don't know if I can still send you the URL.

[KetanKumar]

@LazaroCon1 

yes, please share store preview url

[LazaroCon1]

My store URL: https://morela-cases.myshopify.com/

[KetanKumar]

@LazaroCon1 

thanks for url which section issue i can't see now 

[LazaroCon1]

I am working on the Theme (it is not published yet)

I found this: https://medium.com/@pherkan/customize-the-product-page-of-the-narrative-theme-in-shopify-1c617cf7f76...

but unfortunately it did not work as  I expected.

[KetanKumar]

@LazaroCon1 

give me your store preview url 

[LazaroCon1]

Hi, this is the link: https://s9p16oithx1j0luw-48763306144.shopifypreview.com

[KetanKumar]

@LazaroCon1 

great Thanks URL, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (min-width: 990px) {
.product__media-container {max-width: 480px !important;}
}

[LazaroCon1]

Hi, thank you so much but...

I already pasted the code and it still doesn't work. The Product Page is still looking like this:

[KetanKumar]

@LazaroCon1 

oh sorry, 

can you please share particular product URL?

[LazaroCon1]

Hi, I was checking and it won't let me share the preview of a specific product.

It just let me share the preview of the full page. There you can check the page of a product, please.

URL: https://fx41eahlrn6qipak-48763306144.shopifypreview.com

[KetanKumar]

@LazaroCon1 

yes, please add this code

@media only screen and (min-width: 990px)
.product__media-container {
    max-width: 350px!important;
}
}

[LazaroCon1]

Hi, I copied the code into theme.scss.liquid and pasted it at the bottom of the file and now there is an error.

[KetanKumar]

@LazaroCon1 

@media only screen and (min-width: 990px) {.product__media-container { max-width: 350px !important;}}

[LazaroCon1]

The error has been solved but the product page still looks like this:

[KetanKumar]

@LazaroCon1 

can you please share this product url

[LazaroCon1]

The Password is: customstudio

URL: https://morelacases.com/products/bandas-personalizadas

[KetanKumar]

@LazaroCon1 

thanks 

i can see look at this 

[LazaroCon1]

Yes, that's the product page but it sill looks the same. 

I want it to look like this:

https://sample-store-1331.myshopify.com/products/codify-product

[KetanKumar]

@LazaroCon1 

sorry its different theme.

[thesoapmethod]

Hi, I am having the same issue and I tried copying & pasting the code but it did not work. Can you please help me?

[KetanKumar]

@thesoapmethod 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Sue-Wena]

Hi good morning I have the same issue. My pictures on the product page are to large. (not the first photo but te picterus below) for example crystals-> Rose quartz

my site is: https://pstv-vibes.myshopify.com

[KetanKumar]

@Sue-Wena 

sorry for that issue 

please sent image further issue and product page url

[Sue-Wena]

The pictures are way to big! I want them smaller, and maybe on the side?

https://www.pstv-vibes.com/products/rose-quartz 

[KetanKumar]

@Sue-Wena 

thanks for url

can you please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__submedia-list.product__submedia-list--r1 {
    max-width: 960px;
    margin: 0px auto;
}

[Sue-Wena]

Thank you so much! Keep up the good work!

[KetanKumar]

@Sue-Wena 

it's my pleasure to help us