How to addd scrolling images on Dawn Theme: I want each image to fill the whole screen

[cielle23]

I need help! How do I make the images on my product pages scroll with only one image stacked on top of each other. I want NO extra space in between and to keep scrolling until the end. I want the fulll image to bleed into the left side too -- so no space or borders are needed on the left or below each Product Image. Here is an example of exactly what I want: https://modemischiefstudios.com/products/cherry-tee

My site is DAWN theme: https://cielleclothing.com/products/salento-corset

[PageFly-Richard]

Hi @cielle23 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
.product__media-list.grid {
    row-gap: 0;
    column-gap: 0;
}
.product--stacked .product__media-item {
    max-width: 100% !important;
    width: 100%;
}
.product-media-container.media-fit-cover {
    border: 0 !important;
}
.page-width:has(.product) {
    max-width: 100%;
    padding: 0 !important;
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[cielle23]

Hey Richard,

Thank you SO much. It has worked! But not exactly how I want it - i want the full image to be shown (now it's a lil cropped) +only one image shown at a time (not side by side).. how can I do this?

[PageFly-Richard]

@cielle23 

Please replace the code you added with this new one. Seems like your theme is having higher order of the styling code

<style>
.product__media-list.grid {
    row-gap: 0;
    column-gap: 0;
}
.product--stacked .product__media-item {
    max-width: 100% !important;
    width: 100% !important;
}
.product-media-container.media-fit-cover {
    border: 0 !important;
}
.page-width:has(.product) {
    max-width: 100%;
    padding: 0 !important;
}
</style>

Now it should stack image one by one for you

[cielle23]

This has worked! Wow thanks so much! 

One last thing.., when i view our site on mobile - there is now no padding and cuts off some of the description text. How can i solve this?

[AbbeyJai]

Hi Richard, How are you?

Can you please help me? I tried your code and nothing happened. I am using Dawn and am currently working on a draft that is very different to my very basic beginner live site. I would like the images to scroll like this: Diamond Light Flex/F | Ruby Red Leather Trainers | JIMMY CHOO AU   

I have set it to thumbnail scroll at the moment in the draft site.

(Side Note) Also, is there anyway to get a gif of the logo to appear when the client changes pages like Jimmy Choo has?

Have a great day 🙂