Solved

Debut product page layout changes

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

 

Accepted Solution (1)
oscprofessional
Shopify Partner
15821 2368 3077

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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 5 (5)

oscprofessional
Shopify Partner
15821 2368 3077
.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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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.

oscprofessional
Shopify Partner
15821 2368 3077

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.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Applejacks
New Member
4 0 0

Thank you so much.

oscprofessional
Shopify Partner
15821 2368 3077

Your Most Welcome!

Feel free to ask again.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing