HELLO GUYS, I did the following changes to add arrows to the product images in the landing page. That fixed the issue, but the problem is that the ‘Choose options’ preview part in the home page is messed up. please advise. Thanks. PAGE https://qyuwxvreqcayf1g2-78669414739.shopifypreview.com
WHAT I DID
First of all, make sure that the ‘Desktop layout’ in the product information section on the product page is ‘Thumbnail Carousel’ (see on the screenshot below; this is in the customization mode of your theme: Admin account menu - Online Store - Themes - Customize) :
Next, go back to Admin account menu - Online Store - Themes - Edit Code.
So, the first code:
{% if section.settings.gallery_layout == 'thumbnail_slider' %} enable_desktop_slider slider--tablet-up {% endif %}
Copy
You need to add it to a specific place in the product-media-gallery.liquid file to enable arrows for slider. Here are the screenshots of where I have this code:
Now you need to add a CSS code for your arrows.
Take a look at the screenshots below to see exactly where you need to add it (still in the product-media-gallery.liquid file):
Here’s my code for the arrows on both desktop and mobile:
{% comment %} style start {% endcomment %}
<style>
.product--thumbnail .product__media-item:not(.is-active),
.product--thumbnail_slider .product__media-item:not(.is-active) {
display: block !important;
}
.arrow_desktop_slider--prev, .arrow_desktop_slider--next {
position: absolute;
transform: translateY(-50%);
top: 50%;
border: 1px solid #fff;
background: #fff !important;
width: 40px;
height: 40px;
border-radius: 50%;
}
.arrow_desktop_slider--prev{
left:1.1rem;
}
.arrow_desktop_slider--next{
right:1.1rem;
}
.enable_desktop_slider li{
width:calc(100% - 0rem)!important;
}
{% comment %} disable modal {% endcomment %}
.product__modal-opener--image .product__media-toggle {
pointer-events: none;
}
{% comment %} style for mobile {% endcomment %}
@media screen and (max-width: 749px) {
.product-single__photo {
width: 100%;
}
.arrow_desktop_slider--prev, .arrow_desktop_slider--next {
width: 35px;
height: 35px;
}
.arrow_desktop_slider--prev{
left: 1.5rem;
}
.arrow_desktop_slider--next{
right: 1.5rem;
}
}
</style>
{% comment %} style end {% endcomment %}
Copy
In this code, you can also manually change the style settings for the arrow and the circle around it, its border, etc. (I usually just try changing the numbers, watching how it works on the site, and adjust the layout accordingly)
And finally, I have this code:
<!-- custom arrow -->
{% if section.settings.gallery_layout == 'thumbnail_slider' %}
<div class="arrow_desktop_slider">
<button type="button" class="arrow_desktop_slider--prev slider-button slider-button--prev" name="previous">{% render 'icon-caret' %}</button>
<button type="button" class="arrow_desktop_slider--next slider-button slider-button--next" name="next">{% render 'icon-caret' %}</button>
</div>
{% endif %}
<!-- end custom arrow -->
Copy
I have it right here:
