Solved

Narrative theme: How to move the product content to the right?

Tungsteno
Excursionist
29 0 3

Hi there!

I’m using the Narrative theme and need to move the product content: Title, size option, color option, product description, etc. to the right on the desktop view. Currently, everything is below the product image and really, it’s not that UX friendly.

HOW IT IS

Screen Shot 2021-10-20 at 07.55.50.jpg

 

HOW IT NEEDS TO BE (Or something like it)

Screen Shot 2021-10-20 at 07.55.50.jpg

This is a low quality Photoshop

 

Dear community, is there a workaround for this? 


Thanks!

Accepted Solution (1)
suyash1
Shopify Partner
9266 1152 1495

This is an accepted solution.

@Tungsteno- it can be made like the screenshot, it you want like this then please add given css to the very end of your theme.scss.css file, this will not change mobile view

@media screen and (min-width:750px){

.template-product .product-template{display: flex; flex-wrap: wrap;}

.product-template__media{flex-basis: 50%;}

.product__content{flex-basis: 50%;}

}

 

suyash1_0-1634737330847.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
9266 1152 1495

@Tungsteno- can you please share this page link? need to check it on browser

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Tungsteno
Excursionist
29 0 3

Right! I forgot to share the URL: https://wearhorse.pe/products/polo-pique-navy-contraste

Thanks!

suyash1
Shopify Partner
9266 1152 1495

This is an accepted solution.

@Tungsteno- it can be made like the screenshot, it you want like this then please add given css to the very end of your theme.scss.css file, this will not change mobile view

@media screen and (min-width:750px){

.template-product .product-template{display: flex; flex-wrap: wrap;}

.product-template__media{flex-basis: 50%;}

.product__content{flex-basis: 50%;}

}

 

suyash1_0-1634737330847.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Tungsteno
Excursionist
29 0 3

Hey! Thank you so much! It worked! 😄

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

Is most likely as your solution?

suyash1
Shopify Partner
9266 1152 1495
it is entire tutorial for page, I used only css
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Tungsteno
Excursionist
29 0 3

Thanks!