How to change layout of default product page?

Solved
Shopify Partner
12 0 1

Hi, on default, the product page showed 2x columns (left side a picture and right side the description with price). How do you make it so that the layout is only 1 column (top is picture and bottom is text)?

0 Likes

Success.

Hi

Kindly try this.

Go to -> Online Store -> Edit Code -> sections -> product-template.liquid

Find the "grid__item product-single__photos {{ product_image_width }}" class using ctrl+f. Once you get then remove the text {{ product_image_width }}.

 

Find the "grid__item {{ product_description_width }}" class using ctrl+f. Once you get then remove the text {{ product_description_width }}.

 

Let me know with your site link if you have any issue.

 

Thank you

 

Want to modify or custom changes on store hire me.
Shopify Developer | Email:pinkal.beladiya2911@gmail.com | Skype ID: live:f9802098aa87af33 | Skype Name: Pink@l Bel@diy@
1 Like
Highlighted
Shopify Partner
12 0 1

Wow that worked nicely, thanks for the help!

0 Likes
Shopify Partner
12 0 1

@PinkalBeladiya wrote:

Hi

Kindly try this.

Go to -> Online Store -> Edit Code -> sections -> product-template.liquid

Find the "grid__item product-single__photos {{ product_image_width }}" class using ctrl+f. Once you get then remove the text {{ product_image_width }}.

 

Find the "grid__item {{ product_description_width }}" class using ctrl+f. Once you get then remove the text {{ product_description_width }}.

 

Let me know with your site link if you have any issue.

 

Thank you

 


@PinkalBeladiya How do you adjust the width of the image to the same as the text column? It seems like the image width is now half of the column. The snow website here.

0 Likes

Hi

Kindly add the below css code in you css file.

@media screen and (min-width: 750px){
.product-single .product-single__photo-wrapper {max-width: 100% !important;max-height: 100% !important;}
.product-single img.feature-row__image.product-featured-img {max-width: 100% !important;max-height: 100% !important;}
}

Let me know if you face any issue.

Thank you

Want to modify or custom changes on store hire me.
Shopify Developer | Email:pinkal.beladiya2911@gmail.com | Skype ID: live:f9802098aa87af33 | Skype Name: Pink@l Bel@diy@
1 Like
Shopify Partner
12 0 1

@PinkalBeladiya is that also within the "product-template.liquid" file?

0 Likes

Hi

This is put in :

OnlineStore -> Edit Code -> Assets -> theme.css

Kindly contact me via skype there i am online. Below is my skype ID and Name.

 

Thank you

Want to modify or custom changes on store hire me.
Shopify Developer | Email:pinkal.beladiya2911@gmail.com | Skype ID: live:f9802098aa87af33 | Skype Name: Pink@l Bel@diy@
1 Like
Shopify Partner
12 0 1

Hmmm, seems like it doesn't exist, only got theme.js in the Debut theme. Tested, it's the "theme.scss.liquid". Thank you very much for the help

 

KbEMc5S

0 Likes