Debut product page layout changes

Solved
Applejacks
New Member
4 0 0

Thanks in advance for your time and kind assistance.

How do I move the picture to the left side, have the title price and description in the middle, and add to cart on the right.

Please see my product page: https://organicmountainfarms.com/collections/subscription-products/products/organic-fruit-assortment...

I would like to make it look like this.

Applejacks_0-1627538368284.png

 

0 Likes
.product-single__description.rte {
    width: 50%;
}
form#product_form_6576105980002 {
    float: right;
}
@media only screen and(max-width:750px){
.product-single__description.rte {
    width: 100%;
}
form#product_form_6576105980002 {
    float: right;
}
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

Note : If you are having already 750px media, then no need to add extra 750px media just add css in it.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Applejacks
New Member
4 0 0

I loaded it as you indicated.  The weird thing is that it only worked on the one product provided as an example. 

All of the other products in all collections seemed to ignore the changes.

Can you please help me make this change across all products in all collections? 

I am really grateful for your help.

0 Likes

This is an accepted solution.

 

 

.product-single__description.rte {
    width: 50%;
}
.product-form.product-form-product-template {
    float: right;
}
@media only screen and(max-width:750px){
.product-single__description.rte {
    width: 100%;
}
.product-form.product-form-product-template {
    float: right;
}
}

 

please update the code.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Applejacks
New Member
4 0 0

Thank you so much.

0 Likes

Your Most Welcome!

Feel free to ask again.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes