Sticky ATC and product info, while product images are stacked

[Jarniansah]

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. 

[mageplaza-cs]

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:

<div class="product-page-layout">
    <div class="product-info">
        {{ product.title }}
        {{ product.description }}
        <!-- Add more product details here -->
    </div>
    <div class="product-gallery">
        {% for image in product.images %}
            <img src="{{ image.src | img_url: 'large' }}" alt="{{ image.alt }}" class="gallery-image">
        {% endfor %}
    </div>
</div>

• 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!