Align Product Image Thumbnails To Left Of Main Image

[Alliance]

Hey guys,

I want to change the position for Thumbnail-images on the Product Page to the left side. Ideally looking to implement this in desktop and mobile view.

 Thank you

allianceautoproducts.com

[BSS-Commerce · Accepted solution]

Hi @Alliance 

We fixed it, please check and let us know if you need further help.

[BSS-Commerce]

Hi @Alliance 

We see that you're using a Debut theme. So please go to Online store > Themes > Edit code. In "theme.css", please scroll down to the bottom and add this code:

@media only screen and (min-width: 750px) {
.product-single__media-wrapper {
    width: 80%;
    float: right;
}
.thumbnails-wrapper.thumbnails-slider--active {
    float: left;
    width: 15%;
}
.product-single__thumbnails-item {
    flex: 0 0 51% !important;
}
}

I hope that it will work for you

[Alliance]

Hi,

It didn't work out. If did with you, please share screen shot.

[BSS-Commerce]

Hi @Alliance 

Please go to Online store > Themes > Edit code. In "theme.css", please scroll down to the bottom, remove the code from the last comment and add this code/:

@media only screen and (min-width: 750px) {
.product-single__thumbnails {
  width: 20%!important;
  margin-top: 5px!important;
}
.product-single__photo-wrapper {
  width: 80%;
  float: right;
}
.thumbnails-wrapper {
  position: fixed;
}
}

Here is the result:

I hope that it will work for you.

[Alliance]

Hi,

Thank you. Here what it shows on desktop from my end. 

[BSS-Commerce]

Hi @Alliance 

I tried our code outside the front end and it works (in the screenshot I shared).

If you have added the code and still have an error, it is likely that you have added it in the wrong place or it had a few small errors. It's a bit hard for us as to check and fix it, we will need access to your store.

[Alliance]

Access already granted 

[Alliance]

Please send request

[BSS-Commerce]

Hi @Alliance,

I have just sent you a collaborator request to Shopify Admin => Settings => Users and Permissions => Collaborators => BSS Commerce to have access and check your settings. Then, we can help you fix the problem.

After accepting the request, please kindly keep me updated. Thanks so much in advance!I

[Alliance]

Access granted 

[BSS-Commerce · Accepted solution]

Hi @Alliance 

We fixed it, please check and let us know if you need further help.

[Alliance]

I need the CTA buttons back. 

[BSS-Commerce]

Hi @Alliance 

Can you kindly provide us with detailed information about the CTA button you mentioned (screenshots)? 

Or if adding code has an error displaying CTA, please specify where the error is (with image). Currently, we checked the code, and there is still no error.

After having more information from you, we will check it and give you a solution.

[Alliance]

Hi,

It was fixed by one of the community team.

Thank you for the follow up. 

[Alliance]

Hi again,

I started adding thumbnail images, but its coming very small again. 

[BSS-Commerce]

Hi @Alliance 

We checked and saw that this problem would likely take time to read the code and fix the CSS. We suggest you find Shopify experts who can help you do it. If you need help from our expert, kindly share your request with us via Shopify experts https://experts.shopify.com/bss-commerce/services.

[Alliance]

Hi,

Code provided by you. However, I am going to deactivate it. Thank you

[EBOOST · Accepted solution]

Hi @Alliance 

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
3. Assets/theme.css
4. Add code below to bottom of file

@media(min-width: 750px){
  .template-product  .product-single__photos {
    display: flex;
    flex-flow: row-reverse;
  }
  .template-product  .product-single__photos .outer-photo {
    flex: 0 0 80%;
  }
  .template-product  .product-single__photos .thumbnails-wrapper {
    flex: 0 0 20%;
  }
  .template-product  .product-single__photos .thumbnails-wrapper .product-single__thumbnails {
    margin-top: 0;
  }
  .template-product  .product-single__photos .thumbnails-wrapper .product-single__thumbnails-item {
    width: 100%;
  }
}

[Alliance]

Thank you. You are simply the best. Clean codes.

[MRamzan]

Display thumbnail images in the left side: