how can i resize the product image in Boundless theme

Solved
Highlighted
Explorer
81 2 18

Hi,

 

I'm using the boundless theme and i want to resize the product image which will be smaller and not all over the page and the image will be in the middle
I would like to know if there is such an option and if so how can it be changed?

https://www.outfiteam.com/collections/%D7%A9%D7%A8%D7%A9%D7%A8%D7%90%D7%95%D7%AA/products/%D7%A9%D7%...

thank you for the help

Highlighted
Shopify Partner
9527 1200 3352

@amit101297 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__photo {
    max-width: 500px;
    margin: 0px auto;
    float: none;
}

Change the value as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Explorer
81 2 18

Hi,
Thanks for the help!!

I was able to resize the image but how do I change it to the center?

0 Likes
Highlighted
Shopify Partner
9527 1200 3352

sorry i can't see above code do you have added?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Explorer
81 2 18

this is the code

/*================ Product images ================*/

.product__photo {
position: relative;
}

.product__photo--single {
position: relative;

img {
position: absolute;
top: 0;
left: 0;
right: 0px;
width: 50%;
height: 50%;
z-index: 1;
margin: 0px;
float: none;
}

 

 

 

0 Likes
Highlighted
Shopify Partner
9527 1200 3352

no, it's wrong please add below code

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product__photo {
    max-width: 500px;
    margin: 0px auto;
    float: none;
}
Change the value as you like

 

this one

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Explorer
81 2 18

ok, I did it but there is a large space and the picture is not in the middle

 

/*================ Product images ================*/

.product__photo {
max-width: 700px;
margin: 0px auto;
float: none;

position: relative;
}

0 Likes
Highlighted
Shopify Partner
9527 1200 3352

@amit101297 

Thanks for it

can you please find both are class in theme.scss and update below code 

 

.product__photo {
    max-width: 600px;
    margin: 0px auto;
    text-align: center;
    float: none;
    position: relative;
}
.product__photo--single img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0px;
    float: none;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Explorer
81 2 18

This is an accepted solution.

yes !! it is working !! 

thank you so much !!

Can I put 2 pictures without them one under the other?

and put the size menu in the middle?

 

0 Likes
Highlighted
New Member
1 0 0

Hi,

Did you find how to get both images next to each other instead instead of one under the other?

Thanks

0 Likes