Reposition Product Thumbnails

Back9ine · ‎09-30-2024

Hello, I would like to reposition my product thumbnails to the left side of the product image selected. They are currently below. I am using the theme Be Yours. Is there a way to do this within the theme I've selected since solutions for other themes do not appear to work. Any guidance would be helpful. Thanks!

My website address is:
https://backnineskincare.com/products/pure-spf-50-sunscreen

No password required

Dan-From-Ryviu · ‎09-30-2024

Please add this code to theme.liquid file, after <head>

<style>
.product .product--thumbnail_slider .product__media-gallery {
    display: flex !important;
    flex-direction: row-reverse;
    gap: 20px;
}
.product .product--thumbnail_slider .product__media-gallery use-animate {
    display: block;
    width: 100%;
}
.product .product--thumbnail_slider .product__media-gallery .thumbnail-slider ul {
    display: flex;
    flex-direction: column;
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

gutenplayer · ‎10-01-2024

@Back9ine here is the update code
put into same place

<style>
.product--thumbnail_slider .product__media-gallery {
    display: flex;
    flex-direction: row-reverse;
    gap: 50px;
}

.product--thumbnail_slider .product__media-gallery use-animate {
    display: block;
    width: 100%;
}

.product--thumbnail_slider .product__media-gallery .thumbnail-slider ul {
    display: flex;
    flex-direction: column;
}

</style>

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.

View solution in original post

gutenplayer · ‎09-30-2024

@Back9ine

hi,

hope you are well,

check the list,

1, from admin, go to Online Store > Themes.

2, Actions > Edit code for your active theme.

3, Find and open the theme.liquid file, maybe in the Layout folder.

4, Look for the </head> tag and paste the Google Fonts embed code

.product--thumbnail_slider .product__media-gallery {
    display: flex;
    flex-direction: row-reverse;
    gap: 50px;
}

.product--thumbnail_slider .product__media-gallery use-animate {
    display: block;
    width: 100%;
}

.product--thumbnail_slider .product__media-gallery .thumbnail-slider ul {
    display: flex;
    flex-direction: column;
}

result:

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

Thank you

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.

Back9ine · ‎09-30-2024

Hi Gutenplayer. Thank you for your response.

When I paste the code you shared below the </head> tag in theme.liquid the thumbnails remain where they are and the code text shows up on the top of my webpage. Is there a more specific location I need to add the code?

Thanks!

gutenplayer · ‎10-01-2024

@Back9ine here is the update code
put into same place

<style>
.product--thumbnail_slider .product__media-gallery {
    display: flex;
    flex-direction: row-reverse;
    gap: 50px;
}

.product--thumbnail_slider .product__media-gallery use-animate {
    display: block;
    width: 100%;
}

.product--thumbnail_slider .product__media-gallery .thumbnail-slider ul {
    display: flex;
    flex-direction: column;
}

</style>

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.

Back9ine · ‎10-01-2024

Thank you! Worked great.

Back9ine · ‎10-07-2024

Hi Gutenplayer, when I repositioned the thumbnails to the left side, the slider is now in the center across the middle of the product photo and thumbnail. Is there a way to fix or remove it on desktop?

Dan-From-Ryviu · ‎09-30-2024

Please add this code to theme.liquid file, after <head>

<style>
.product .product--thumbnail_slider .product__media-gallery {
    display: flex !important;
    flex-direction: row-reverse;
    gap: 20px;
}
.product .product--thumbnail_slider .product__media-gallery use-animate {
    display: block;
    width: 100%;
}
.product .product--thumbnail_slider .product__media-gallery .thumbnail-slider ul {
    display: flex;
    flex-direction: column;
}
</style>

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Reposition Product Thumbnails

Reposition Product Thumbnails

Community Blog Articles