Unlock a Better Shopping Experience: How to Stack and Sticky Your Shopify Product Images (No Slider!)

Hey everyone! There’s a common desire among store owners to move beyond the standard product image slider and present all product photos stacked vertically and sticky on desktop. It’s a fantastic way to enhance the customer experience, letting shoppers see every angle at a glance without endless clicking or swiping.

This topic recently sparked a great discussion in the Shopify community, initiated by @redmustang82. They were using a “free Canyon theme” and wanted to disable the JavaScript-controlled slider to achieve this stacked, sticky layout. As @tim_tairli pointed out, “Canyon” is often a renamed version of a popular free theme like Dawn, which is important because Dawn themes offer some great built-in flexibility. The core challenge here is that JavaScript often overrides simple CSS changes, making it tricky to implement this kind of visual tweak.

First Stop: Check Your Theme Settings (The Easiest Path!)

Before you even think about custom code, always, always check your theme customizer. @namphan highlighted this perfectly in the thread, showing a screenshot of where to find these settings. Many modern Shopify themes, especially Dawn and its derivatives, offer built-in layout options for your product media.

How to Check:

1. Go to your Shopify Admin: Online Store > Themes.
2. Click Customize on your active theme.
3. Navigate to a Product Page (you might need to select “Products” from the top dropdown).
4. Click on the Product information section.
5. Look for “Media” or “Product media” options. You might find dropdowns or radio buttons for different layouts, like “Stacked,” “Thumbnail,” or “Column.”

Often, selecting a “Stacked” or “Column” layout here is all you need! It’s the simplest solution if your theme supports it. Here’s what those options might look like:

When Theme Settings Aren’t Enough: Overriding with JavaScript

If your theme doesn’t have a direct “stacked” option, or if the JS slider persists, custom code is your next step. @topnewyork shared a robust JavaScript solution that injects necessary CSS and attempts to disable the slider component directly. This approach is powerful because it addresses the JavaScript override without needing to modify core Liquid files.

Step-by-Step JavaScript Override:

1. Go to your Shopify Admin: Online Store > Themes.
2. Click Actions > Edit Code for your active theme.
3. Find the theme.liquid file under the “Layout” directory.
4. Scroll to the very bottom and paste this code just before the closing tag:

This script dynamically injects CSS to override existing styles and applies position: sticky. It also attempts to disable the underlying slider JavaScript by setting a data-slider-active attribute to false on the element.

Fine-Tuning with Custom CSS

Once the slider is disabled, you might want to further fine-tune the sticky behavior or image layout. Both @devcoders and @tim_tairli provided excellent CSS snippets for this.

Option A: Add to base.css or a Custom CSS File:

1. Go to your Shopify Admin: Online Store > Themes > Actions > Edit Code.
2. Find Assets > base.css (or theme.css).
3. Paste this code at the bottom of the file:

@media screen and (min-width: 990px) {
  .product__media-wrapper .product__column-sticky {
    position: sticky;
    top: 30% !important;
  }
}

This snippet from @devcoders helps ensure the sticky column starts at a balanced 30% from the top on larger screens.

Option B: Use the “Custom CSS” setting for the section (in Theme Customizer):

From the Theme Customizer, you can often add CSS directly to a “Custom CSS” box within the Product information section settings. @tim_tairli suggested this for making images one per row and adjusting the sticky top position:

@media screen and (min-width: 750px) {
  /* make all images same width, 1 per row */
  .product__media-list .product__media-item {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* make media gallery stick at the header bottom */
  media-gallery.product__column-sticky {
    top: var(--header-height, 3rem);
  } 
}

This ensures a clean, single-column look and positions images nicely below your header, adapting to its height.

For the most advanced users, @daniel_mark’s initial diagnostic hinted at directly modifying Liquid files like main-product.liquid to remove the slider-component wrapper entirely. This is a deeper dive into theme development and typically reserved for when other methods don’t quite achieve the desired outcome. Once the JS component is truly gone, a simple CSS like this would finalize the layout:

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}

There you have it! Multiple avenues to achieve that sleek, stacked, and sticky product image layout. Always remember to duplicate your theme before making any code changes (Actions > Duplicate) and test thoroughly. Getting your product gallery just right can significantly impact how customers engage with your products and ultimately boost your conversions. Happy customizing!