Aligning carousel to the right of main image

[Melodie1990]

Hi is anyone able to help me align the product thumbnails to the right of the main image and limit it to two images at a time please? 

This is currently:

Would like it look something like this if possible? 

My shop preview link is as follows: https://klijtn0qsenfqexg-73804087584.shopifypreview.com

Thanks 🙂

[mrashid]

@Melodie1990 I’d be happy to help with this! I can adjust the alignment of your product thumbnails to the right of the main image and set it to display two images at a time. Let me know if you’d like to proceed, and I can get started on the changes.

[Melodie1990]

Hi what do you need sorry? 

[mrashid]

@Melodie1990 To align the thumbnails to the right of the main image, I’ll need to make adjustments in the Liquid code, which may take a little time. I’d be happy to go through the details with you to make sure everything looks just right.

[mrashid]

@Melodie1990 I highly suggest you to hire a Shopify developer who can help you out with that. Feel free to let me know if you want me to help you out and I would be more than happy to give you a helping hand. we need collaboration

[Made4uo-Ribe · Accepted solution]

Hi @Melodie1990 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
@media only screen and (min-width: 991px) {
    slider-component.slider-mobile-gutter:not(.thumbnail-slider) {
        margin-right: 180px;
        margin-left: 0;
    }
    slider-component.thumbnail-slider {
        width: 180px;
        position: absolute;
        margin-top: 0;
        top: 0;
        left: auto;
        right: 0;
        height: 420px;
    }

.product--small .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
    height: 200px;
}
.thumbnail-slider .thumbnail-list.slider--tablet-up {
    flex: unset;
}
.thumbnail-slider ul.thumbnail-list {
        height: 100%;
}
}
</style>

• And Save. 
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Melodie1990]

You're a star thank you so much! sorry quick question, it changes when I change the main image to medium - could you possibly tweak the code for this please? Appreciate all your help 🙂

[Made4uo-Ribe]

The preview is already expired. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Melodie1990]

Done thank you 🙂 And updated preview link is: https://adr2bzv752u1vpcu-73804087584.shopifypreview.com thanks so much!

[Made4uo-Ribe]

hanks, and sorry for the confusion. Did you say it changes when you switch the image to medium size? What exactly changes?

[Melodie1990]

Sorry for the confusion - i had forgot to change the desktop media width to large.

I figured out to change part of the code you gave me to .product--large .thumbnail-list.slider

but the formatting has gone awry on desktop and looks like this (below). I've played around with adjusting the width of the thumbnails etc but I can't get it to look good 😞 appreciate your help with this.

[Made4uo-Ribe]

Yes, sorry about the confusion. The code applies only to the current design added to your theme. To make it dynamic, custom coding is needed in your store, which would require a developer with access to your store. 

[Melodie1990]

Thank you. I plan on keeping it at large so dynamic coding not required. Could I be a huge pain and ask you to amend the code for the large main image please? 🙏

[Made4uo-Ribe]

Yes, sure. On the code that I provide. find this one,

Change the margin-right: 270px; value. Be careful not to add or remove any other characters—just adjust the numbers. This change will add space to the right, preventing the background from overlapping with the thumbnails.

And save. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Melodie1990]

Worked perfectly thank you so much!

[Melodie1990]

That worked perfect for me thank you. Do you know if there's a way to keep the height the same as the main preview image no matter the device? So I've adjusted the slider height and looks okay on desktop, when it's on ipad this changes? Thank you ❤️

[Melodie1990]

I have updated the preview in case you needed that. Thanks for your help 🙂