How can I display images at the bottom of main image, drop theme.

Store Design
,

Topic summary

A user seeks help displaying product image thumbnails below the main image on mobile devices in their Shopify Drop theme. While thumbnails appear on desktop, they don’t show on mobile regardless of settings.

Multiple solutions provided:

  • All responses recommend editing CSS code via Admin → Online Store → Theme → Edit Code
  • Target file: theme.css (around line 1121)
  • Find the .sm-hide class within @media (max-width: 767px) media query
  • Change display: none !important; to display: block !important; (or display: table-column !important;)

Alternative approach:

  • One suggestion targets section-main-product.css file instead
  • Adds specific CSS for .product-gallery__thumb-slider positioning

Status: Multiple community members provided nearly identical CSS solutions. The issue appears resolvable through a simple CSS modification to unhide thumbnails on mobile viewports. User has not yet confirmed which solution worked.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hey,

Can someone help me understand how I can get the images that are loaded after my main image, to appear as thumbnails down the bottom of the main image so customers can see there are more? I can see on desktop I can change the thumbnails from left to right to bottom, but no matter which I select they don’t appear at all on mobile.

My shopify theme is Drop and my URL is: https://salourlingerie.com/products/rochelle-bodysuit

Thanks!

2

Hi,

Which is theme you using on your store?

You can check on setting of that part first, find to place setting show thumbnail and check has the option show thumbnail on mobile.

3

Hi @Holly18 ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1724381503467.png
BSSCommerceB2B_0-1724381503467.png400×195 26.3 KB

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media (max-width: 767px) {
    .sm-hide {
        display: block !important;
    }
}

or in file theme.css, you press Ctrl + F and looking for “.sm-hide” and change the display of it from (none !important) to (block !important)

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_1-1724381680469.png
BSSCommerceB2B_1-1724381680469.png526×923 255 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

4

Hi @Holly18 ,

Please go to Actions > Edit code > Assets > section-main-product.css file and paste this at the bottom of the file:

@media (max-width: 767px) {
    .gallery__thumbnail-position--right .product-gallery__thumb-slider {
        display: block !important;
    }
}
1 Like
5

HEllo @Holly18

Go to online store ---------> themes --------------> actions ------> edit code------->theme.css—> line number 1121
search this code

@media (max-width: 767px) {
.sm-hide {
display: none !important;
}
}

and replace with this code

@media (max-width: 767px) {
.sm-hide {
display: table-column !important;
}
}

result

10.png
10.png426×791 220 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

Hi @Holly18 , I hope you are doing well.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css file
  3. In theme.css, paste the below code
@media (max-width: 767px) {
    .sm-hide {
        display: block !important;
    }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

7

Hi @Holly18 ,

If you have any questions, you can contact me directly.
Nice to meet you :blush: