Shopify themes, liquid, logos, and UX
Hi,
I am having trouble relocating my thumbnails to the left side of the main image on my product page. The theme only allows a below photo carousel option but I don't like the layout on my desktop. Is there another way around this with the sense theme?
Hi, @Empbuilder77
Please share website URL
the-enkore.com
Go to your Online store > Themes > Edit code > Assets > open base.css and add this code at the bottom
@media (min-width: 751px) {
.product--thumbnail_slider {
position: relative;
}
.product--thumbnail_slider media-gallery {
display: flex;
flex-direction: row-reverse;
}
.product--thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
width: calc(100% - 100px);
}
.product--thumbnail_slider .thumbnail-slider {
width: 100px;
padding-right: 10px;
align-items: flex-start !important;
}
.product--thumbnail_slider .slider-button {
display: none !important;
}
.product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
padding: 5px;
display: block;
}
.product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
width: 100%;
}
.thumbnail {
padding: 5px !important;
}
}
- 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.
I've tried attaching the code and it's not working.. I double checked the file and everything? The url is the-enkore.com..
Your store has password protected
- 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.
You can follow these steps:
Go to Online Store -> Themes -> Edit code.
Go to Assets folder -> base.css.file
.product--thumbnail_slider {
position: relative;
}
.product--thumbnail_slider media-gallery {
display: flex;
flex-direction: row-reverse;
}
.product--thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
width: calc(100% - 100px);
}
.product--thumbnail_slider .thumbnail-slider {
width: 100px;
padding-right: 10px;
align-items: flex-start !important;
}
.product--thumbnail_slider .slider-button {
display: none !important;
}
.product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
padding: 10px;
display: block;
}
.product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
width: 100%;
}
.thumbnail {
padding: 5px !important;
}
Add the following code at the bottom of the file above </body> tag
I tried attaching this to the file and it didn't work.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024