Hello,
Could anyone help me out changing my dawn theme product image carousel from 1 image to 2 image in functionality and look :
Topic summary
A user is attempting to modify the Dawn theme’s product page image carousel to display 2 images instead of 1, seeking help with both functionality and appearance.
Proposed Solution:
- Another user (zack_dev) provided CSS code to be added to theme.liquid within
<style>tags - The code modifies the media gallery layout using CSS Grid (20% thumbnails, 80% main image) and adjusts thumbnail slider properties
- Includes responsive design adjustments for tablet and larger screens
Current Status:
- The proposed CSS solution is not working as intended
- Issues reported: thumbnails display in a single column at large size, main images become stretched and blurred when scrolling
- The problem remains unresolved and requires further troubleshooting
Note: Some text in the conversation appears corrupted or reversed, making portions difficult to interpret fully.
hi can you tell the store url
please add this css to theme.liquid inside tags
media-gallery#MediaGallery-template--24012908101918__main {
flex-direction: row;
display: grid;
grid-template-columns: 20% 80%;
}.thumbnail-slider .thumbnail-list.slider--tablet-up {
display: flex;
padding: .5rem;
flex: 1;
scroll-padding-left: .5rem;
flex-direction: column;
}
@media(min-width:900px){
.thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
width: 80% !important;
}
slider-component#GalleryViewer-template--24012908101918__main {
order: 2;
}
}
result will look like
NOT Working its makes all the thumbnails 1 columns and big and need to scroll it down each image also it becomes streched and blur