Sticky Products Image

Store Design

Topic summary

A user working with Shopify’s Impact theme wants to make product images sticky on the left side while scrolling through product details on the right. The theme lacks a built-in option for this feature.

Solutions Provided:

Multiple developers offered CSS code snippets to achieve the sticky effect:

  • CodingFifty suggested adding comprehensive CSS to base.css/theme.css, including flexbox layout adjustments, responsive breakpoints, and mobile disabling at 999px width
  • tim_1 provided a simpler solution using custom CSS in the product section settings, leveraging CSS variables for header height
  • Dan-From-Ryviu offered a mobile-only approach (max-width: 749px)

Current Status:

The user tested tim_1’s initial solution and reported it works on desktop but breaks the mobile layout. tim_1 responded with an updated version using a media query (min-width: 1000px) to restrict the sticky behavior to desktop screens only.

The discussion appears ongoing, awaiting confirmation that the revised solution resolves the mobile layout issue.

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

I’m trying to make the product images (on the left side) stay sticky while scrolling the product details on the right. I’m using the Impact theme, but it doesn’t have a built-in option for this. Can someone help me figure out how to add the sticky feature?

2

Hello @bigjimmy15
Can you please provide me with the preview URL of the theme

3

simplybuilt.co

I am using the Impact Theme

Thank you.

4

Hey! @bigjimmy15 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

/* Ensure the parent container is a flex or grid layout */
.product {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Adjust gap as needed */
}

/* Make the product gallery sticky */
.product-gallery {
  position: sticky;
  top: 20px; /* Adjust this value to align with your header or desired offset */
  align-self: flex-start; /* Ensures it sticks to the top of the flex container */
  width: 50%; /* Adjust width based on your layout */
  max-width: 600px; /* Optional: limit max width */
}

/* Ensure product info takes remaining space */
.product-info {
  flex: 1;
  min-width: 300px; /* Optional: ensure it doesn’t get too narrow */
}

/* Responsive adjustments for mobile */
@media (max-width: 999px) {
  .product {
    flex-direction: column;
  }
  .product-gallery {
    position: static; /* Disable sticky on mobile */
    width: 100%;
  }
  .product-info {
    width: 100%;
  }
}
5

In your main product section settings paste this code to “Cusom CSS”:

product-gallery {
  position: sticky;
  top: var(--header-height,0);
}
6

Please add this code to Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
.product-gallery {
    position: sticky;
    top: 0;
}
}
7

Hi Tim,

This solution works well on desktop, but it breaks the layout on mobile. Can you adjust it so the effect only applies to desktop screens?

8

Need a media query then:

@media (min-width: 1000px) {
  product-gallery {
    position: sticky;
    top: var(--header-height,0);
  }
}