How can I make my product page photos larger and stacked?

[mira777]

Hi! I want to create a product page where half the page is product photos (left) and the other half is the text.
I would like the product photos to be stacked 1 after 1. So you can just scroll down.
https://www.alexanderwang.com/nl-en/rib-trim-turtleneck-in-velour+6CC1241028096A.html
Please look at this page from Alexander Wang, I want it a bit like this.

This is my product page now:
https://www.withdahw.com/products/white-polo-shirt?variant=47260021784915

I hope someone can help me, please let me know.

Thanks in advance

[PageFly-Richard]

Hi @mira777

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[BSS-Commerce]

Hi @mira777 ,

Please follow these steps:

Step 1: Go to Themes → Edit code

Step 2: Find file base.css and add the following code at the end of the file:

@media screen and (min-width: 750px) {
  .page-width .slider-mobile-gutter .product__media-list.contains-media .product__media-item {
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  }
}

This is the result:

Hope it works @mira777

[mira777]

Hi Richard, thank you very much. This is almost what I want…

Now you have to scroll all the way down and the page gets very long. But I want the description to stay at the same place and only the photos to move one after another. Besides that I want no space between the photos and the photo to be full width, so it hits the left side of the screen.

Please take a look at this page from another website, this is the perfect example: https://representclo.com/products/cherub-initial-hoodie-black

I hope you can help me. Thanks a lot in advance.

[mira777]

Hi, thank you very much. This is almost what I want…

Now you have to scroll all the way down and the page gets very long. But I want the description to stay at the same place and only the photos to move one after another. Besides that I want no space between the photos and the photo to be full width, so it hits the left side of the screen.

Please take a look at this page from another website, this is the perfect example: https://representclo.com/products/cherub-initial-hoodie-black

I hope you can help me. Thanks a lot in advance.

[BSS-Commerce]

Hey @mira777 ,

Please follow these steps:

Step 1: Go to Themes → Edit code


Step 2: Find file base.css and add the following code at the end of the file:

@media screen and (min-width: 750px) {
    .product__column-sticky {
        top: var(--header-height);
    }
    #MainContent > section > section > div.page-width {
        padding-left: 0;
    }
    .page-width .slider-mobile-gutter .product__media-list.contains-media .product__media-item .product-media-container.media-type-image {
        margin-left: 0;
    }
    .page-width .slider-mobile-gutter .product__media-list.contains-media .product__media-item {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
    }
    .page-width .slider-mobile-gutter .product__media-list.contains-media {
        row-gap: 0;
    }
}

This is the result: