Product page

Solved
NBTHEOKUSTOMS
Tourist
7 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 

Accepted Solution (1)

Accepted Solutions
AlexEffron
Shopify Partner
2683 387 1051

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;
}
}

 

View solution in original post

Replies 8 (8)
AlexEffron
Shopify Partner
2683 387 1051

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.

NBTHEOKUSTOMS
Tourist
7 0 1
AlexEffron
Shopify Partner
2683 387 1051

@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%;
}
}
NBTHEOKUSTOMS
Tourist
7 0 1

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

 

AlexEffron
Shopify Partner
2683 387 1051

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;
}
}

 

NBTHEOKUSTOMS
Tourist
7 0 1

thanks

 

AlexEffron
Shopify Partner
2683 387 1051
NBTHEOKUSTOMS
Tourist
7 0 1

Hi there love sorry to bother you again ..

i still have a couple more questions!

1. Product image is still rather small and very to the left of the page

2. wondering how to get the product Information to be in the middle of the page other than on the right 

3. the Price details area is very squished.

4. I was hoping for a slider for the photos as when i try to have multiple photos on the page it take up the whole page.