I have tried various different codes but none have worked how I needed. I want to overlay the arrows onto the image in the colour #ffffff80. I want them to be in the middle and look the same on desktop and mobile phone. Please could I get help with some code.
Hi @tranquilweaves ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file → Save
.slideshow__controls.slider-buttons {
position: absolute !important;
top: 50%;
left: 0;
transform: translateY(-50%) !important;
display: flex !important;
justify-content: space-between !important;
width: 100vw !important;
}
.slider-counter.slider-counter--dots, .slideshow__autoplay {
display: none !important;
}
svg.icon.icon-caret {
height: 15px !important;
}
svg.icon.icon-caret path {
fill: #ffffff80 !important;
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
Hi @BSSCommerce-HDL thank you for your reply, it gets rid of the dots and also pause button from below and also it breaks my buy now button on mobile view, so it does not work for me, is there any changes that could be made so it does not break my buy now button on mobile and get rid of the dots and pause button?
Hi @tranquilweaves , Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.
@BSSCommerce-HDL I am not able to add video on here, but if you look at my website tranquilweaves.com on your laptop and then phone you will see what I mean by my buy now button is broken and the dots are pause button are not visible with the code you gave also or I can send video via email.
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.slideshow__controls.slider-buttons {
position: relative;
width: 100%;
height: 200px;
}
.slider-button .icon {
height: unset;
}
.slider-counter.slider-counter--dots, .slideshow__autoplay.slider-button {
display: none;
}
button.slider-button.slider-button--next {
right: 20px;
top: 0px;
}
button.slider-button.slider-button--prev {
left: 20px;
}
button.slider-button.slider-button--next, button.slider-button.slider-button--prev {
position: absolute;
top: -150%;
}
@media only screen and (max-width: 749px) {
button.slider-button.slider-button--next, button.slider-button.slider-button--prev {
position: absolute;
top: -100%;
}
}
And save.
Result:
Mobile:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @Made4uo-Ribe they are too small and not in the colour #ffffff80. Also on mobile view they are not close enough to the edges. Also the code you provided has got rid of the dots and pause which I would like to still be visible at the bottom of the image, are you able to help to make it work like this? They are so small you can barely see them. I do not want them really big either but a size that looks good.
Oh, i already expected on that. Replace on this one. Let see if its okay.
.slideshow__controls.slider-buttons {
position: relative;
width: 100%;
height: 200px;
}
.slider-button .icon {
height: 3rem !important;
color: #ffff;
}
.slider-counter.slider-counter--dots, .slideshow__autoplay.slider-button {
display: flex;
}
.slideshow__controls.slider-buttons {
position: relative;
width: 100%;
height: 50px;
}
button.slider-button.slider-button--next {
right: 20px;
}
button.slider-button.slider-button--prev {
left: 20px;
}
button.slider-button.slider-button--next, button.slider-button.slider-button--prev {
position: absolute;
top: -600%;
}
@media only screen and (max-width: 749px) {
button.slider-button.slider-button--next, button.slider-button.slider-button--prev {
position: absolute;
top: -400%;
}
}
And save.
In your last slide, you have a picture that is not fully width. The arrow wont be visible on that silde.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
@Made4uo-Ribe thanks so much, it is almost there! the arrows are slightly too big now, how can I change their size? and on mobile view they are still not close enough to the edge of the screen, they need to go a bit more towards the edge like in my example, my example is the one with the orange photo
We can adjust,
.slideshow__controls.slider-buttons {
position: relative;
width: 100%;
height: 200px;
}
/* this is the height and color of the arrow */
.slider-button .icon {
height: 1.5rem !important;
color: #ffff !important;
}
.slider-counter.slider-counter--dots, .slideshow__autoplay.slider-button {
display: flex;
}
.slideshow__controls.slider-buttons {
position: relative;
width: 100%;
height: 50px;
}
button.slider-button.slider-button--next {
right: 20px;
}
button.slider-button.slider-button--prev {
left: 20px;
}
button.slider-button.slider-button--next, button.slider-button.slider-button--prev {
position: absolute;
top: -600%;
}
@media only screen and (max-width: 749px) {
button.slider-button.slider-button--next, button.slider-button.slider-button--prev {
position: absolute;
top: -400%;
}
button.slider-button.slider-button--next {
right: 0px;
padding: 0px;
justify-content: right;
}
button.slider-button.slider-button--prev {
left: 0;
padding: 0px;
justify-content: flex-start;
}
}
And Save.
It should be good now.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @tranquilweaves , pls insert this code to your file css:
.slideshow__controls.slider-buttons {
position: absolute;
bottom: 0;
left: 0;
display: flex;
width: 100vw;
justify-content: space-between;
}
button.slider-button.slider-button--next,
button.slider-button.slider-button--prev
{
transform: translateY(-560%) !important;
}
svg.icon.icon-caret {
height: 15px !important;
}
svg.icon.icon-caret path {
fill: #ffffff80 !important;
}
.slider-counter__link--dots .dot {
border: .2rem solid white !important;
}
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: white !important;
}
.slideshow__autoplay path {
fill: white !important;
}
@media only screen and (max-width: 749px) {
button.slider-button.slider-button--next,
button.slider-button.slider-button--prev
{
transform: translateY(-330%) !important;
}
}
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
Thanks so much! 
Hi @tranquilweaves ,
We’re happy to see that our suggestion helped you solve the issue. Should you need any further information, please do not hesitate to contact us by tagging directly at Community post. We will check and let you know soon.
Thanks in advance
@BSSCommerce-HDL is there any code I can use so this only affects my slideshow on my homepage? and not my other pages
Hi @tranquilweaves ,
You can try this code by following these steps:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Inside before close tag head. You need to write something like this.
{% if template.name == 'index' %}
{% endif %}
After you’ll insert my code inside it.
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
@BSSCommerce-HDL before tag? or ?
Hi @tranquilweaves , before close tag head is
@BSSCommerce-HDL for some reason it didn’t work but thank you so much for trying! 