Hello.
This is my page url:
https://nobwh4pg69yfwfvj-68796285242.shopifypreview.com
(Dawn Theme)
So, I would in the featured products on my home page, I want to add arrows that float on top of the products card. One on the left side, and one on the right side. These arrows should navigate the buyer between featured products.
Please look the picture below for reference:
I want to be able to customise these arrows, i.e. change their colour, size etc.
Thanks in advance.
Hi Andy106,
it requires some coding and some CSS changes.
To customize the Arrow buttons, we have to add schema settings and write some code.
if you need help in coding so please let me know on my email.
Thanks & Regards
Sandeep
Can you provide some more informatio on this, how to do it, etc? Thanks!
Hi @Andy106
We’re BSS Commerce - Shopify Partners & Experts providing Shopify apps and Store Development on Shopify & Shopify Plus.
We saw that you need to customise these arrows, i.e. change their colour, size etc. It’s what we can help with an optimal solution. If you need help from our expert, kindly share your request with us via Shopify experts.
We will check it and give you a detailed solution. We’re looking forward to working with you.
Found the solution here: https://community.shopify.com/c/shopify-design/dawn-theme-featured-collection-slider/td-p/1816327
[details=Show More]
.collection .slider-component-desktop .slider-counter {
display: none;
}
.collection .slider-component-desktop .slider-buttons {
position: absolute;
transform: translateY(-50%);
top: 35%;
width: 100%;
justify-content: space-between;
z-index: 9;
transition: 0.5s;
opacity: 0;
padding: 0 2%;
}
.collection .slider-component-desktop:hover .slider-buttons {
opacity: 1;
}
.collection .slider-component-desktop .slider-button {
background: #000000;
color: #ffffff;
opacity: 0.7;
}
.collection .slider-component-desktop .slider-button:hover {
opacity: 1;
}
.collection .slider-component-desktop .slider-button[disabled] .icon {
color: #cdcdcd;
}
.collection .slider-component-desktop .slider-button .icon {
height: 1rem;
}
