product image size in broadcast

Store Design
,
1

hello, i would like to change my images size on my product page, i don’t want them to have border on the side and have like 80% first image and 20% second image, like in the image i added. Is there a code that could help me achieve this ? Thank you

Capture d’écran 2024-12-25 à 02.26.10.png
Capture d’écran 2024-12-25 à 02.26.10.png902×1242 106 KB

2

Hi @okocha21

Please share with me your store URL?

Best,

Daisy

3

Hi @okocha21

You can try to add this code to Custom CSS in Online Store > Themes > Customize > Theme settings and check

@media (max-width: 749px) {
    .index-product .product__images--mobile-slider .product__slide {
        width: calc(100% - 80px);
        margin: 0;
        border: 1px solid #000;
    }
    .index-product .product__images--mobile-slider .product__slides {
        padding-left: 0px
        scroll-padding: 0;
    }
}

Screenshot 2024-12-26 at 09.15.53.png
Screenshot 2024-12-26 at 09.15.53.png882×1154 69.3 KB

4

Hi @okocha21

You can follow the instruction below:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section

.product__slides {
    border: none !important;
    box-shadow: none !important;
}
@media screen and (max-width: 749px) {
    .product__images--mobile-slider .product__slide {
        width: 80% !important;
    }
}

I hope it helps.

Liz

5

Hello, @okocha21
Please share “Store URL”
Thanks!

6

Hi @okocha21

Please share your store URL.

7

HI @okocha21

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media (max-width: 749px) {
    .index-product .product__images--mobile-slider .product__slide {
        width: calc(100% - 80px);
        margin: 0;
        border: 1px solid #000;
    }
    .index-product .product__images--mobile-slider .product__slides {
        padding-left: 0px
        scroll-padding: 0;
    }
}

I hope this helps

Best,

Daisy