Have you followed these steps....
4. Next, go to the Sections area and open the product-template.liquid file
5. Look for the <div> with a class of thumbnails-wrapper. This is where the previous/next arrows are, and they are currently set up to only show on mobile.
6. Remove the medium-up--hide class from both of these buttons:
img missing....available on first page of this thread
7. Now we add a new class no-clear to the <li> item that is between the two buttons. If you search for product-single__thumbnails-item you can add this class at the end of the line. The product-template.liquid file should now look like this when it’s done:
img missing....available on first page of this thread
8. Finally, go to the theme.scss.liquid file in the Assets section and add the following CSS to the bottom of the file:
@include media-query($medium-up) {
.no-clear {
clear: none !important;
}
.thumbnails-slider_prev.thumbnails-slider_prev--product-template {
display: inline-block;
position: absolute;
left: -9%;
top: 60%;
transform: translateY(-60%);
z-index: 10000;
padding-left: 0;
}
.thumbnails-slider_next.thumbnails-slider_next--product-template {
display: inline-block;
position: absolute;
right: -9%;
top: 60%;
transform: translateY(-60%);
z-index: 10000;
}
.product-single__photos {
position: relative;
padding-left: 0;
}
.product-single__thumbnails-item.js.no-clear.slick-slide.slick-active {
padding-top: 0;
}
.thumbnails-wrapper.thumbnails-slider--active {
position: relative;
}
.left--arrow {
position: absolute;
top: 60%;
transform: translateY(-60%);
left: -9%;
z-index: 10000;
}
.right--arrow {
position: absolute;
top: 60%;
transform: translateY(-60%);
right: -9%;
z-index: 10000;
}
.slick-hidden {
display: none !important;
}
.slick-track {
margin-top: 10px;
}
.thumbnails-slider--active {
max-width: 92%;
margin: 0 auto;
}
.product-single__thumbnail {
margin: 3px 8px;
}
}
.thumbnails-slider__btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.thumbnails-slider__prev {
left: -50px;
}
.thumbnails-slider__next {
right: -50px;
}
@media screen and (max-width: 749px) {
.thumbnails-slider__prev {
left: -20px;
}
.thumbnails-slider__next {
right: -20px;
}
}Be sure to Save all changes!
