adding arrow opacity of 40% onto mobile page
Can anyone help me add this arrow on my mobile page so customer know to scroll right 🙂
password:enzo
BEFORE
AFTER
You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
@media (max-width: 749px) {
.floating-controls-container { position: relative; }
.floating-controls-container>.floating-controls-container__control {
display: block !important;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
opacity: 0.4;
}
carousel-prev-button.floating-controls-container__control {
left: 32px;
}
carousel-next-button.floating-controls-container__control {
right: -16px;
}
}
</style>
You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code
<style>
@media (max-width: 749px) {
.floating-controls-container { position: relative; }
.floating-controls-container>.floating-controls-container__control {
display: block !important;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
opacity: 0.4;
}
carousel-prev-button.floating-controls-container__control {
left: 32px;
}
carousel-next-button.floating-controls-container__control {
right: -16px;
}
}
</style>
Community Blog Articles
Discover how to increase customer engagement on your store with articles from Shopify A...
By Jacqui Apr 23, 2025
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025