What's your biggest current challenge? Have your say in Community Polls along the right column.

Can You Display Arrows On Mobile-Only In Shopify Collections?

Solved

Can You Display Arrows On Mobile-Only In Shopify Collections?

MT27
Pathfinder
166 6 16

Hi can you please help me display the arrows on mobile version only under the section T-shirts. I think I used CSS code to hide by accident. 

page:https://matibrnd.com/products/alexander-the-great-ar-hoodie

code: biangu

Thank you

 

MT27_0-1711036988058.png

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9179 2191 2708

This is an accepted solution.

Hi @MT27 

Yes, you have a prev. and next button but you hide it well in the theme.liquid. It over ride already and it would be hard to add another code it would not listen.

What you can do is to find this code in the theme.liquid, component-slider.css or wherever youi paste it before. 

This is the code.

Made4uoRibe_0-1711041969441.png

And it must be change like this. 

 

@media screen and (max-width: 749px) {
.slider-button--next {
    display: content !important;
}

 .slider-button--prev {
    display: content !important;
}

.slider-buttons {
  position: unset !important;
}
}

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Reply 1 (1)

Made4uo-Ribe
Shopify Partner
9179 2191 2708

This is an accepted solution.

Hi @MT27 

Yes, you have a prev. and next button but you hide it well in the theme.liquid. It over ride already and it would be hard to add another code it would not listen.

What you can do is to find this code in the theme.liquid, component-slider.css or wherever youi paste it before. 

This is the code.

Made4uoRibe_0-1711041969441.png

And it must be change like this. 

 

@media screen and (max-width: 749px) {
.slider-button--next {
    display: content !important;
}

 .slider-button--prev {
    display: content !important;
}

.slider-buttons {
  position: unset !important;
}
}

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.