Why don't product images show on mobile using the Refresh theme?

Store Design
, ,

Topic summary

Issue: Product images display correctly on desktop but fail to appear on mobile devices when using the Refresh theme.

Root Cause: CSS code is hiding the product image slider on mobile devices.

Solution Provided:

  1. Navigate to Online Store → Theme → Edit code
  2. Open the base.css file in the assets folder
  3. Add specific CSS code at the end of the file to override the display property and show images on mobile

Code Fix: A media query targeting the product slider element needs to be added with display: block !important to make images visible on mobile screens (max-width: 749px).

Status: The original poster confirmed the solution worked perfectly after implementing the CSS fix. An alternative solution involving adding code to theme.liquid was also suggested but appears unnecessary since the first solution resolved the issue.

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

Hi all,

When I click on a product from my homepage it opens the product page and everything is fine on desktop view,

However when I do this on mobile the product image does not show, I am using the Refresh theme.

Could this be a setting I have missed.

here is a typical page: https://getslimed.com.au/products/shark-zone

2

Hi @kristy1987

Product images are hidden on mobile devices on your page due to this code.

GemPages_0-1679362545243.png
GemPages_0-1679362545243.png1280×958 104 KB

You can add code to show it.

  1. Go to Online Store → Theme → Edit code https://prnt.sc/XkUYXZPnym_E

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file.

@media screen and (max-width: 749px){
  #shopify-section-template--18214545719587__main .slider.slider--mobile {
     display: block !important;
  }
}

GemPages_1-1679362816030.png
GemPages_1-1679362816030.png391×852 161 KB

Best regards,
GemPages Support Team

3

GemPages

Thanks for your help once again, works perfectly

4

Hi @kristy1987

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

PageFlyVictor_0-1679364716611.png
PageFlyVictor_0-1679364716611.png1600×794 164 KB

PageFlyVictor_1-1679364716422.png
PageFlyVictor_1-1679364716422.png1600×777 194 KB

Hope this answer helps.

Best regards,

Victor | PageFly

5

I am so glad that my solution can help :grin: .