Shopify themes, liquid, logos, and UX
Originally I was having an issue with Dawn Theme where the product media slider images were not centering in the middle of the page for mobile (see first two attached images "IssueEx"). I was able to remedy this issue by changing scroll padding left:0 and adding 25px of padding to the left and right under component-slider.css. However now the slider count is incorrect, as it is showing there is one more photo than there actually is (see last two attached images). Is there a simple way to change the output of the slider counter to -1? Any push in the right direction would be greatly appreciated.
Hi @nevadaskye
Could you share your store url and password? I will help check it.
Hi @nevadaskye
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/theme.liquid
3. Add code below to bottom of file before </body> tag
{% if template contains 'product' %}
<style>
@media(max-width: 749px){
.grid--peek.slider .grid__item:first-of-type {
margin-left: 0!important;
display: block!important;
}
.product__media-list .product__media-item {
width: 100%!important;
}
.slider.slider--mobile .slider__slide {
padding: 0!important;
width: 100%!important;
}
.grid--peek.slider .grid__item:last-of-type{ margin-right: 0!important;}
}
</style>
{% endif %}
That worked to add padding to the right of the last image which is step in the right direction; However, is it possible to have the media image centered in the middle of the page and eliminate the peek of the next picture?
Hi @nevadaskye
Did you add code above? I can't see it on site now.
Hi @nevadaskye
replace code above with code below
{% if template contains 'product' %}
<style>
@media(max-width: 749px){
.grid--peek.slider .grid__item:first-of-type {
margin-left: 0!important;
display: block!important;
}
.product__media-list .product__media-item {
width: 100%!important;
}
.slider.slider--mobile .slider__slide {
padding: 0!important;
width: 100%!important;
}
.slider.slider--mobile {
scroll-padding-left: 0!important;
}
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
margin-left: 0!important;
margin-right: 0!important;
}
}
</style>
{% endif %}
Hey i used this code to add to my shopify dawn theme. When I added it. It miscounts the image. Like for one product I have 5 product pictures but once I added the code it says 6
Hi @takeoverapparel ,
You try to code below:
{% if template contains 'product' %}
<style>
@media(max-width: 749px){
.grid--peek.slider .grid__item:first-of-type {
margin-left: 0!important;
display: block!important;
}
.product__media-list .product__media-item {
width: 100%!important;
}
.slider.slider--mobile .slider__slide {
padding: 0!important;
width: 100%!important;
}
.slider.slider--mobile {
scroll-padding-left: 0!important;
gap: 0;
}
.product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
margin-left: 0!important;
margin-right: 0!important;
}
}
</style>
{% endif %}
We only need to add a code to fix it
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025