Solved

Can I customize the product page layout in the Narrative theme on Shopify?

Jhonvs
Tourist
5 0 3

Hi All, I am trying out the Narrative theme for the first time. Everything looks nice and clean BUT then I discovered the product page...

I would like to get the product image on the left side and description quantity, add to cart button etc. on the right side next to the image.

Captura de ecrã 2021-07-26 194108.pngAny advice on what to do here?

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Jhonvs 

thanks for store 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.

@media only screen and (min-width: 750px)  {
.product-template__media.page-width.page-width--no-gutter {
    float: left;
    width: 50%;
}
.product__content.page-width {
    float: left;
    width: 50%;
}
.product__content-main {flex-wrap: wrap;}
.product__description, .product__form-container {width: 100%;}
}

After Code Layout 

KetanKumar_0-1627790824940.png

 

 

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 6 (6)

KetanKumar
Shopify Partner
36839 3635 11972

@Jhonvs 

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.

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
Zworthkey
Shopify Partner
5581 642 1565

@Jhonvs 
Share me your Store Detail

Thank you.

Jhonvs
Tourist
5 0 3
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Jhonvs 

thanks for store 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.

@media only screen and (min-width: 750px)  {
.product-template__media.page-width.page-width--no-gutter {
    float: left;
    width: 50%;
}
.product__content.page-width {
    float: left;
    width: 50%;
}
.product__content-main {flex-wrap: wrap;}
.product__description, .product__form-container {width: 100%;}
}

After Code Layout 

KetanKumar_0-1627790824940.png

 

 

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
Jhonvs
Tourist
5 0 3

worked perfectly! Appreciate!

KetanKumar
Shopify Partner
36839 3635 11972

@Jhonvs 

it's my pleasure to help us

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