Themeforest theme (elomus) remove thumbnails on mobile

Technical Q&A
, , , ,

Topic summary

A user is attempting to hide product image thumbnails on mobile devices for the Elomus Shopify theme. Their goal is to display only the main product photo, short description, and buy box above the fold.

Attempted solutions that failed:

  • Using the theme editor’s built-in options
  • Creating a custom thumbnails.css asset file with media queries targeting thumbnail classes
  • Adding the stylesheet reference to layout.theme.liquid

The original CSS targeted specific Flickity carousel classes but didn’t achieve the desired result.

Proposed solution:
Another user suggested simpler CSS code targeting #productGallery .slider-nav-sm with a max-width: 991px media query. They recommended adding this directly to Theme Settings > Custom CSS or the product info section’s custom CSS field, avoiding the need to edit theme files.

The discussion remains open pending confirmation of whether the suggested solution works.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m trying to remove thumbs on mobile, i tried doing it via the theme editor and it didn’t work and i tried creating a new asset named thumbnails.css with the following code and then enabling it in the layout.theme.liquid by pasting {{ ‘thumbnails.css’ | asset_url | stylesheet_tag }} and it didnt work also:

@media (max-width:767px){
.product-gallery__thumbnails.product-gallery__thumbnails–bottom-thumbnails.js-gallery-carousel.is-slide-nav–true.flickity-enabled.is-draggable.flickity-resize {
display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.next {
display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.previous {
display: none;
}
}

Any chance anyone here can help? I’d like to have just main product photo + short description + buy box above the fold. Here’s what it looks like now:

thumbnail_image0
thumbnail_image01320×2868 409 KB

2

Try

@media (max-width:991px) {
  #productGallery .slider-nav-sm {
    display: none;
  }
}

No need to edit theme code, this can go into “Theme settings”=> “Custom CSS” or “Custom css” setting of the product info section…