Narrative theme: Edit product recommendation images and arrangement?

Solved
stellaa
Excursionist
43 0 10

Hi there! I'm currently using the narrative theme and I'm editing the recommended product section for individual product pages. The problem is that these images are too large. I just want to display the three recommended products in one row with consistent image size. 

On the customize section, these are the only options available. How do I do this?

Screenshot 2021-03-04 at 15.26.15.png

 

Screenshot 2021-03-04 at 14.29.12.png

Screenshot 2021-03-04 at 14.29.23.png

Above is when you zoom out of the browser to about 70%. 

 Thanks! 

 

Access details:

 

https://sunnysixactive.com/collections/all/products/the-get-strong-cross-bra

password: heystella

 

Accepted Solution (1)

Accepted Solutions
KetanKumar
Shopify Partner
24923 2498 9040

This is an accepted solution.

@stellaa 

Thanks for post 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.

@media only screen and (min-width: 750px) {
.product-recommendations__slide {
-webkit-flex: 0 0 calc(33% - 4rem);
    -moz-flex: 0 0 calc(33% - 4rem);
    -ms-flex: 0 0 calc(33% - 4rem);
    flex: 0 0 calc(33% - 4rem);
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 10 (10)
KetanKumar
Shopify Partner
24923 2498 9040

This is an accepted solution.

@stellaa 

Thanks for post 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.

@media only screen and (min-width: 750px) {
.product-recommendations__slide {
-webkit-flex: 0 0 calc(33% - 4rem);
    -moz-flex: 0 0 calc(33% - 4rem);
    -ms-flex: 0 0 calc(33% - 4rem);
    flex: 0 0 calc(33% - 4rem);
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

K_L
Tourist
7 0 4

Hi,

I have added this code which has also worked for me but can you please advise how i can change the product recommended number to 3 products instead of 4 on narrative theme?

Thank you!

KetanKumar
Shopify Partner
24923 2498 9040

@K_L 

sorry for any issues can you please show me store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
24923 2498 9040

@K_L 

yes please share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
24923 2498 9040

@K_L 

thanks of url please try this code

can you please confirm that look?

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
K_L
Tourist
7 0 4

Hi yes thank you I’m happy with that look! 


What is the code I need to add please?

 

 

KetanKumar
Shopify Partner
24923 2498 9040

@K_L 

yes please try 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: 750px) {
.product-recommendations__slide { -webkit-flex: 0 0 calc(25% - 4 rem ); -moz-flex: 0 0 calc(25% - 4rem); -ms-flex: 0 0 calc(25% - 4rem); flex: 0 0 calc(25% - 4 rem ); margin: 2 rem ; }
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
K_L
Tourist
7 0 4

Hi,

 

This code isn't working for me unfortunately, its not changed anything.

 

And even if i try it with the previous code as well it still shows the same as the screen shot.

 

Is there anything else we could try please? Thank you in advance!

K_L
Tourist
7 0 4

Its worked now thank you so much!!!