Shopify themes, liquid, logos, and UX
Hey,
I want to change my thumbnail position in main product. As of now the thumbnail is show the bottom of the main product image. So I need change thumbnail position bottom to left.
I using the vivid theme.
Please resolve the problem
Best regards
Sohan
Solved! Go to the solution
This is an accepted solution.
Hey @Sohan2198,
Please try this and let me know 😊
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (min-width: 991px) {
media-gallery#MediaGallery-template--16370977964205__main {
display: grid;
grid-template-columns: 1fr auto;
}
slider-component#GalleryViewer-template--16370977964205__main {
margin-left: 110px;
}
slider-component#GalleryThumbnails-template--16370977964205__main {
width: 110px;
position: absolute;
margin-top: 0;
}
.thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main {
flex-direction: column;
width: 100%;
height: 600px;
}
.thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main li {
width: 100%;
}
media-gallery#MediaGallery-template--16370977964205__main .slider-button {
display: none;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
This is an accepted solution.
Hey @Sohan2198,
I don't see the changes in the website code, are you sure you saved it and please check if you are in the correct theme.
This is an accepted solution.
Hey @Sohan2198,
Delete the previous code and apply this instead
<style>
@media only screen and (min-width: 991px) {
media-gallery.product__media-gallery {
display: grid;
grid-template-columns: 1fr auto;
}
slider-component.slider-mobile-gutter:not(.thumbnail-slider) {
margin-left: 110px;
}
slider-component.thumbnail-slider {
width: 110px;
position: absolute;
margin-top: 0;
top: 0;
left: 0;
}
.thumbnail-slider ul.thumbnail-list {
flex-direction: column;
width: 100%;
height: 600px;
}
.thumbnail-slider ul.thumbnail-list li {
width: 100% !important;
}
media-gallery.product__media-gallery .thumbnail-slider .slider-button {
display: none;
}
}
</style>
Hey @Sohan2198,
Can you share the store url and store password (if any)
This is an accepted solution.
Hey @Sohan2198,
Please try this and let me know 😊
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (min-width: 991px) {
media-gallery#MediaGallery-template--16370977964205__main {
display: grid;
grid-template-columns: 1fr auto;
}
slider-component#GalleryViewer-template--16370977964205__main {
margin-left: 110px;
}
slider-component#GalleryThumbnails-template--16370977964205__main {
width: 110px;
position: absolute;
margin-top: 0;
}
.thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main {
flex-direction: column;
width: 100%;
height: 600px;
}
.thumbnail-slider ul#Slider-Thumbnails-template--16370977964205__main li {
width: 100%;
}
media-gallery#MediaGallery-template--16370977964205__main .slider-button {
display: none;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
This is an accepted solution.
Hey @Sohan2198,
I don't see the changes in the website code, are you sure you saved it and please check if you are in the correct theme.
This is an accepted solution.
Hey @Sohan2198,
Delete the previous code and apply this instead
<style>
@media only screen and (min-width: 991px) {
media-gallery.product__media-gallery {
display: grid;
grid-template-columns: 1fr auto;
}
slider-component.slider-mobile-gutter:not(.thumbnail-slider) {
margin-left: 110px;
}
slider-component.thumbnail-slider {
width: 110px;
position: absolute;
margin-top: 0;
top: 0;
left: 0;
}
.thumbnail-slider ul.thumbnail-list {
flex-direction: column;
width: 100%;
height: 600px;
}
.thumbnail-slider ul.thumbnail-list li {
width: 100% !important;
}
media-gallery.product__media-gallery .thumbnail-slider .slider-button {
display: none;
}
}
</style>
Hey @Sohan2198,
Those buttons didn't work since the beginning. I am not sure what's causing it. That's why I put a display none in the CSS .
I replace Id the class
<style>
@media only screen and (min-width: 991px) {
media-gallery.product__media-gallery {
display: grid;
grid-template-columns: 1fr auto;
}
slider-component.slider-mobile-gutter {
margin-left: 110px;
}
slider-component.slider-mobile-gutter {
width: 110px;
position: absolute;
margin-top: 0;
}
.thumbnail-slider ul.pswp-gallery product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile {
flex-direction: column;
width: 100%;
height: 600px;
}
.thumbnail-slider ul.pswp-gallery product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile li {
width: 100%;
}
media-gallery.product__media-gallery .slider-button {
display: none;
}
}
</style>
@Sohan2198,
Your classes are wrong, see the code I just pasted above your reply
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