How can I centralize and enlarge product images on my page?

Store Design
,
1

Hi!

I was wondering if there is a way to change so that the pictures on the product page line up in the centre in a bigger size like this?

Basically, I want customers to scroll down for more pictures, not click.

I know I can change some in Customization but it doesn’t look the same. Could someone help me?

nevy.co.kr
password: nevytesting123

2

@mayanevy - please open this page in customize section and check if you have an option to change thumbnail slider to images stacked

3

Hi @mayanevy ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Customize theme

Step 2: Product page → Product infomation section → Select this option:

PageFlyRichard_0-1677679412519.png
PageFlyRichard_0-1677679412519.png1855×815 198 KB

Step 3: Go to Online Store->Theme->Edit code
Step 4: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (min-width: 990px) {
	 .product--stacked .product__media-item {
		 width: 100% !important;
		 max-width: 100% !important;
	}
	 .product--stacked .product__media-item .product__media-toggle, .product--stacked .product__media-item .product__media-icon {
		 display: none;
	}
}

PageFlyRichard_1-1677679523103.png
PageFlyRichard_1-1677679523103.png1284×920 101 KB

I hope it would help you
Best regards,

Richard | PageFly

4

That works perfectly thank you so much!!

5

But now I have another question, can I change this part of the page so that I don’t have to scroll all the way down to see it all? Maybe make some sections smaller? the product name for example.

I still want sticky content on desktop enabled.

Screenshot 2023-03-01 at 11.55.11 PM.png
Screenshot 2023-03-01 at 11.55.11 PM.png1458×1516 232 KB

6

Hi @mayanevy ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css–>paste below code at the bottom of the file:

@media screen and (min-width: 750px) {
    .product--stacked .product__info-container--sticky {
        top: 0;
    }
    .product__info-container h1 {
        font-size: 3.5rem;
    }
    .product__description.rte {
        margin-top: 0;
    }
    .product-form,
    .swym-button-bar {
        margin-bottom: 0 !important;
    }
}

PageFlyRichard_0-1677684445151.png
PageFlyRichard_0-1677684445151.png588×933 158 KB

I hope it would help you
Best regards,

Richard | PageFly

7

That made it a lot better but I still can’t see everything. Is it possible to make the quantity button, for example, smaller too?

8

Especially when there are more sizes available it’s really hard to see.

Screenshot 2023-03-02 at 12.43.17 AM.png
Screenshot 2023-03-02 at 12.43.17 AM.png2880×1800 408 KB

9

Hi @mayanevy ,

I think it’s very difficult to css for it to be full page by page. With smaller screens, the content will also be lost.

I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.

Best regards,

Richard | PageFly

10

I see, I can’t change the distance between the buttons at all?

Thank you anyway

11

Hi again! This worked great for desktop but on mobile the product name is still really big. Is there a way to change that too?