how can i resize the product image in Boundless theme

amit101297
Explorer
86 1 21

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

Replies 72 (72)
KetanKumar
Shopify Partner
32502 3268 10844

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
amit101297
Explorer
86 1 21

Hi,
Thanks for the help!!

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

KetanKumar
Shopify Partner
32502 3268 10844

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
amit101297
Explorer
86 1 21

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

 

 

 

KetanKumar
Shopify Partner
32502 3268 10844

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
amit101297
Explorer
86 1 21

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

KetanKumar
Shopify Partner
32502 3268 10844

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
amit101297
Explorer
86 1 21

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?

 

Jofdom
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

tmlws94
New Member
1 0 1

Anyone figure this out for two images?

KetanKumar
Shopify Partner
32502 3268 10844

HEllo, @tmlws94 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DTGameChanger
New Member
1 0 0

Our store  https://gamechangerscanada.myshopify.com/  (ballergear.ca)  is also having issues with multiple pictures.  

All looks good on the pages, except you are unable to purchase any item with multiple pictures. 

DT


KetanKumar
Shopify Partner
32502 3268 10844

@DTGameChanger 

can you please share further issue screenshot

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SR1234
New Member
2 0 1

Hi Ketan,

I used the code you provided for resizing images of products and it worked. I am having an issue with the position of the product, they are currently aligned vertically instead of being displayed side by side. Can you please provide coding that will fix this issue?

Below is a screenshot of how they are currently positioned. I would like them to be side by side. Thank you

SR1234_1-1602441112705.png

 

 

 

 

KetanKumar
Shopify Partner
32502 3268 10844

@SR1234 

Thanks for the update can you please give me this product url you have a facing issue?

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
alecontrmon
Tourist
3 0 2

Hi, 

Did you figure out the solution on how to put the images one next to the other instead of one under the other after changing the code you suggested?

 

Thank you in advance for your help!

KetanKumar
Shopify Partner
32502 3268 10844

@alecontrmon 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
alecontrmon
Tourist
3 0 2

@KetanKumar I can give you my website but I haven't add this as it's not working as I would like It to. Therefore the question, You can see of previous posts that the pictures are one on top of the other instead of side by side. Could this be fixed? I mean the coding is the one you gave us so nothing different.

 

Thank you 

KetanKumar
Shopify Partner
32502 3268 10844

Hello, @alecontrmon 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing