Make image bigger

Store Design
, , , , , ,

Topic summary

A Shopify store owner using the Spotlight theme seeks to remove the image slider below product images on mobile, wanting the main product image to sit directly above the product title instead.

Proposed Solutions:

Two responders offered CSS-based fixes:

  • Option 1: Add CSS code to the base.css file with a media query targeting screens under 767px width
  • Option 2: Insert code into the theme.liquid file before the closing </body> tag

Both solutions involve hiding the slider wrapper element using display: none or similar CSS properties.

Status: The discussion appears to have multiple solution attempts provided, but it’s unclear if the original poster tested or confirmed which approach worked. The responses include code snippets that are partially corrupted or reversed in the source text, which may affect implementation.

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

Hey all, can anyone help me remove the image slider just below the product images (like the image below) so that it looks like the reference ive provided on mobile (so that the image sits just above the product title)

Any help would be greatly appreciated.

Im using the spotlight theme btw.

URL: https://project-thirteen.com.au/products/raw-hem-trousers

IMG_1548.PNG
IMG_1548.PNG1170×2532 238 KB

IMG_1549.PNG
IMG_1549.PNG1170×2532 387 KB

2

@projectthirteen

please refer to the below code.

Option 1: please add below code in base.css file

@media screen and (max-width: 767px) {
  .product__media-wrapper .slider-buttons.no-js-hidden.quick-add-hidden {
	display: none;
}
}

OR

Option 2 : Paste below code into theme.liquid file before  tag
3

Hi @projectthirteen , I hope you are doing well.

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

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

Thanks!