How to chnage thumbnails on Enterprise theme

[Isaac82933]

Hello, I'm Looking to see how to move out thumbnail images to the left-hand side and vertically on the enterprise theme. 

[suyash1]

@Isaac82933 - can you share this page link?

[LizHoang]

Hi @Isaac82933, thanks for reaching out. 

Could you please share your store's URL? This will help me check your current setup and provide tailored guidance on moving the thumbnails to the left-hand side and displaying them vertically.

Looking forward to your response.

Liz

[Avitanshi_17]

Hi Issac,

To move thumbnail images to the left-hand side and display them vertically in the Shopify Enterprise theme, follow these platform-specific steps:

1. Access Theme Code

1. Log in to your Shopify admin dashboard.
2. Navigate to Online Store > Themes.
3. Find the Enterprise theme and click Actions > Edit Code.

2. Modify the Theme Code

A. Locate the Product Page Template

1. Open the product.liquid or main-product.liquid file located under the Sections or Templates folder.
2. Find the section where the thumbnails are rendered, typically within a container like product__media-list or a similar class.

B. Update the HTML Structure (if needed)

Ensure the thumbnails and the main image are in separate containers. A common structure looks like this:

html

Copy code

<div class="product-page">

  <div class="thumbnail-container">

    {% for image in product.images %}

      <img 

        src="{{ image | img_url: '100x' }}" 

        alt="{{ image.alt }}" 

        class="thumbnail-image" 

        data-image-id="{{ image.id }}" 

      />

    {% endfor %}

  </div>

  <div class="main-image-container">

    <img src="{{ product.featured_image | img_url: '800x' }}" alt="{{ product.title }}">

  </div>

</div>

If the structure is already set up similarly, proceed to the CSS styling.

3. Apply Custom CSS

1. Open the base.css or theme.css file under the Assets folder.
2. Add the following CSS at the bottom of the file:

css

Copy code

/* Move thumbnails to the left-hand side */

.thumbnail-container {

  display: flex;

  flex-direction: column; /* Stack thumbnails vertically */

  position: absolute; /* Position relative to the main container */

  left: 0; /* Align to the left-hand side */

  top: 50%; /* Center vertically */

  transform: translateY(-50%); /* Adjust for vertical centering */

  width: 100px; /* Set a fixed width for thumbnails */

  height: auto;

  overflow-y: auto; /* Allow scrolling if there are many thumbnails */

}

.thumbnail-container img {

  margin-bottom: 10px; /* Add spacing between thumbnails */

  cursor: pointer; /* Change cursor to pointer for interactivity */

  border: 2px solid transparent; /* Border for hover effect */

  transition: border-color 0.3s ease, transform 0.3s ease;

}

.thumbnail-container img:hover {

  border-color: #000; /* Highlight border on hover */

  transform: scale(1.1); /* Slight zoom effect */

}

/* Adjust the main image container */

.main-image-container {

  margin-left: 120px; /* Offset to accommodate the thumbnail container */

  position: relative;

}

4. Adjust JavaScript (if Necessary)

If your thumbnails use JavaScript to update the main product image, ensure the JavaScript selectors are updated to reflect the changes:

1. Locate the JavaScript handling image switching in theme.js or a similar file under Assets.
2. Ensure the selector for the thumbnails corresponds to .thumbnail-image or whatever class you assigned.

Example Javascript&colon;

javascript

Copy code

document.querySelectorAll('.thumbnail-image').forEach(thumbnail => {

  thumbnail.addEventListener('click', function () {

    const mainImage = document.querySelector('.main-image-container img');

    mainImage.src=this.src; // Update main image source

  });

});

5. Test Responsiveness with Media Queries

For mobile or tablet layouts, you may want the thumbnails to revert to horizontal alignment:

css

Copy code

@media (max-width: 768px) {

  .thumbnail-container {

    flex-direction: row; /* Horizontal layout for smaller screens */

    position: relative;

    left: 0;

    top: 0;

    transform: none;

    margin: 0 auto;

  }

  .main-image-container {

    margin-left: 0; /* Reset margin for smaller screens */

  }

}

6. Preview and Publish

1. Save your changes.
2. Go back to the Themes section and click Actions > Preview to test your layout.
3. If everything looks good, click Actions > Publish to make it live.