Product page

Solved
NBTHEOKUSTOMS
Tourist
6 0 1

Hi guys fairly new to shopify

im using the theme of boundless. but the product page is very weird looking the photos are way to big and the descripition of  the products are under the large photos.

i was looking at other themes such as venture and its the layout i wish to have for my product page.

-note i was using venture before but there was alot of things i didnt like, if there is a code for the theme to be changed to the layout on venture.please let me know 

0 Likes
HardikDavra
Shopify Partner
2322 365 995

Hello, @NBTHEOKUSTOMS 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
HardikDavra
Shopify Partner
2322 365 995

@NBTHEOKUSTOMS 

#shopify-section-product-template .product__photo {
    width: 50%;
    margin: 0 auto;
    float: unset;
}
#shopify-section-product-template .product__photo .product__photo--single {
    padding-top: 55% !important;
}
#shopify-section-product-template .product__photo .product__photo--single .product__photo--variant {
   height: 100%;
 -o-object-fit: contain;
object-fit: contain;
}

@media only screen and (max-width: 749px) {
#shopify-section-product-template .product__photo {
    width: 100%;
}
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
NBTHEOKUSTOMS
Tourist
6 0 1

Thank you, also is there a way to have the writing for the product next to the photo ?

 

0 Likes
HardikDavra
Shopify Partner
2322 365 995

This is an accepted solution.

@NBTHEOKUSTOMS 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

div.product {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}

.product__photo, .product__details {
    flex: 0 0 50%;
    max-width: 50%;
}
.product__details .grid__item  {
width: 100%;
left: 0% !important;
}

@media only screen and (max-width: 768px) {
.product__photo, .product__details {
    flex: 0 0 100%;
    max-width: 100%;
}
.product__details .grid {
padding: 0px 10px;
}
.product__details .grid #AddToCartForm-product-template {
max-width: 100% !important;
}
}

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
NBTHEOKUSTOMS
Tourist
6 0 1

thanks

 

HardikDavra
Shopify Partner
2322 365 995

@NBTHEOKUSTOMS Thank you for the update.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes