Sticky ATC and product info, while product images are stacked

Store Design

Topic summary

A user seeks to replicate a specific product page layout in Shopify’s Impulse theme, where product information remains fixed on the left while product images display as a vertically scrollable gallery on the right, rather than the default thumbnail swiper.

Proposed Solution:

A Shopify expert provided a multi-step technical approach:

  • Theme Customization: Check if Impulse theme offers built-in layout options via the theme customizer
  • Code Modifications: Edit product.liquid or product.json files to restructure the page with separate containers for product info and image gallery
  • CSS Styling: Implement flexbox layout with sticky positioning for product info and vertical scrolling for the gallery (100vh height with overflow-y: auto)
  • JavaScript Enhancement: Add smooth scrolling behavior to improve user experience
  • Responsive Design: Include media queries to adapt the layout for mobile devices

The discussion remains open with no confirmation whether the solution was implemented or successful.

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

Hi All,

I am wondering how we can achieve this sort of layout on Shopify Impulse theme.

https://www.overland.com/products/lucas-sheepskin-coat-11816?cl=vnb2

I want to have all my product info on the left, and have the images as a gallery which users can scroll, as opposed to swiping thumnails in a gallery.

Jarniansah_0-1735870036167.png
Jarniansah_0-1735870036167.png1336×1510 423 KB

2

Hi @Jarniansah ,

I am from Mageplaza - Shopify solution expert.

To achieve a product page layout similar to the page you provided on the Shopify Impulse theme, with product info on the left and a scrollable gallery on the right, you can follow these steps:

  1. Enable or Customize the Product Page Layout- Go to Online Store > Themes > Customize.

    • In the Product pages section, check if the Impulse theme provides an option to adjust the layout (e.g., “Product Info on the Left”).
    • If no such setting exists, proceed with custom code modifications

  2. Edit the Product Template- Go to Online Store > Themes > Actions > Edit Code.

    • Open the product.liquid or product.json file, depending on your theme’s structure.
    • Modify the layout to separate product information and the image gallery:

    

        {{ product.title }}
        {{ product.description }}
        
    

    
        {% for image in product.images %}
            
        {% endfor %}

  • Add CSS for Layout- Open your theme’s CSS file (theme.css or styles.css) and add styles for the layout:

.product-page-layout {
    display: flex;
    gap: 20px;
}

.product-info {
    flex: 1;
}

.product-gallery {
    flex: 2;
    overflow-y: auto;
    height: 100vh; /* Adjust height as needed */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-image {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

  • Enhance the Gallery with JavaScript- Add smooth scrolling or advanced gallery functionality with JavaScript.

    • Locate the theme’s main JavaScript file and include:
const gallery = document.querySelector('.product-gallery');
gallery.style.scrollBehavior = 'smooth';

// Optional: Add custom scroll indicators or navigation

  • Test and Adjust- Preview the changes and ensure the layout looks good on desktop and mobile.

    • Use media queries to adjust the design for smaller screens
@media (max-width: 768px) {
    .product-page-layout {
        flex-direction: column;
    }
}

I hope this information proves helpful to you. Feel free to leave a comment if you require any additional assistance or further clarification!