How to show all product thumbnails in 'electro' theme?

[onyx_au]

Hello,

I am editing the 'electro' theme and I haven't purchased it yet but my biggest concern is the product page small thumbnails, not all pictures are showing. There is no arrow or wayfinding to indicate there are more pictures.

There is not option to even show all thumbnails or carousel it. You have to scroll to see all pictures and this is quite annoying.

Is there some type of CSS or code I can show all thumbnails?

Thank you

Website preview: https://1ufq2skgqc36qgch-64183730394.shopifypreview.com 

[rajweb]

Hey @onyx_au ,

Since you haven't purchased the Electro theme yet, you can try a custom CSS solution to display all thumbnails on the product page without the need to scroll. Here’s a CSS snippet that you can inject into the theme to make the thumbnails visible all at once:

Follow These Steps:

1. Online Store 

2. Themes

3. Click on Customize for the the Electro theme.

4. go to Edit code

5. Open the theme.css or styles.css file(sometimes it's under Assets).

6. Scroll to the bottom and add the following CSS:

/* Display all product thumbnails without scrolling */
.product-thumbnails {
    display: flex;
    flex-wrap: wrap;
    overflow: visible !important;
    max-height: none !important;
}

/* Ensure proper spacing and alignment */
.product-thumbnails img {
    margin: 5px;
    width: auto;
    height: auto;
    max-width: 100px; /* Adjust thumbnail size as needed */
    object-fit: cover;
}

Alternative: Add a Carousel for Thumbnails

If you prefer a carousel for a cleaner look:

1. Use a JavaScript/jQuery-based carousel library like Slick or Swiper.

2. Add the JavaScript and CSS for the carousel in your theme files.

3. Initialize it on the thumbnail container using custom JavaScript.

Let me know if you need help integrating the carousel or further adjustments!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[onyx_au]

Hello

Thank you for this but it didn't work, and even targeting '.product-slideshow' didn't work.

I have to add the CSS in the custom css under products section. As I cannot "edit code" since I haven't purchased it yet. I need to make sure this works before I purchase or else I will waste money. 😞

[KetanKumar]

@onyx_au can you please share particular product url so will give your code if need css code

[onyx_au]

https://1ufq2skgqc36qgch-64183730394.shopifypreview.com/collections/allcakes/products/verde-matcha-a... 

Here's a share-preview link of a product

[KetanKumar]

@onyx_au  can you please add below code
1. Go to Online Store->Theme->Edit code
2. Asset->/themes.min.css ->paste below code at the bottom of the file.

@media (min-width: 769px) {
.product-slideshow__thumbnail {
    position: relative !important;
    top: 0 !important;
    transform: translateY(0) !important;
}

.product-slideshow__thumbs {
    max-height: 100% !important;
    overflow: visible !important;
}
}

 please at this after code

[rajweb]

Let’s try a different approach to adjust the layout to show all thumbnails without scrolling:

/* Allow all thumbnails to be visible */
.product-slideshow__thumbnails-wrapper {
    max-height: none !important;
    overflow: visible !important;
}

/* Display thumbnails in a vertical grid */
.product-slideshow__thumbnails {
    display: grid !important;
    gap: 10px; /* Adjust spacing between thumbnails */
    grid-auto-rows: min-content;
    justify-items: center;
}

/* Control thumbnail size */
.product-slideshow__thumbnails img {
    max-width: 80px;  /* Adjust as necessary */
    height: auto;
    object-fit: cover;
}

Try this updated CSS in the Custom CSS field under the "Product" section, and let me know if this resolves the issue! If not, we can inspect further adjustments based on specific class behaviors in the Electro theme.

[onyx_au]

 Thanks for this, it didn't work but I manage to get some few tweaks from your post to make it work. I did a simple fix and responsiveness seems to be fine.

I did

.product-slideshow__thumbs {
  max-height: none;
}

@media (min-width: 769px) {
  .product-slideshow {
    min-height: 55rem;
  }
}

[rajweb]

@onyx_au ,

Great job on finding a solution! It looks like your fix addresses the main issue by removing the height limitation on the thumbnails and ensuring responsiveness for larger screen sizes with the media query.

Your approach of setting max-height: none for .product-slideshow__thumbs is a solid way to ensure that all thumbnails are visible. Additionally, adding the media query for larger screens (min-width: 769px) helps ensure the slideshow looks good across devices.

If you need further customization or tweaks in the future, feel free to ask. I'm glad to hear that responsiveness is working well now! 😊