Hello, can someone help me out please?
1 Like
icelabplus.com website
1 Like
Hello @75tnm ,
I hope you are well!
Can you please share me the password of the store so that I can provide you the CSS which will remove the arrows from the bar.
Hi @75tnm
oh sorry. i removed the password.
1 Like
i removed the password sorry
Please copy and paste the below code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css
Alternatively, if the code didnât work, copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
button.slideshow-control.slideshow-controlânext.slideshow-controlâstyle-chevron.button.button-unstyled.button-unstyledâtransparent {
display: none;
}
button.slideshow-control.slideshow-controlâprevious.slideshow-controlâstyle-chevron.button.button-unstyled.button-unstyledâtransparent.flip-x {
display: none;
}
Hi @75tnm
- From your Shopify Admin, navigate to Online Store > Themes > Edit Code
- In the Assets folder, open styles.css and add your CSS code at the end
.announcement-bar__slider slideshow-arrows .slideshow-control {
display: none;
}
thanks but it doesnât work
thanks but it doesnât work too:(
Hi there,
Thanks for sharing the screenshot that helps a lot. From what I can see, it looks like the header section (logo/menu/icons) may not be aligned or is overlapping on your store.
This kind of issue is usually caused by:
Theme header settings (padding, alignment, or logo size)
A custom CSS change that shifted elements
A recently installed app or code snippet affecting the header
A few things you can try:
In your Shopify admin go to Online Store > Themes > Customize and open the Header section. Check the alignment and spacing settings there.
Temporarily switch to a default theme (like Dawn) to see if the problem disappears. If it does, itâs theme-related.
If youâve added custom CSS or an app recently, try disabling/removing it to test.
If youâre still stuck, feel free to post your theme name or a link to your store preview and we (or Shopify Support) can take a closer look.
Hope this helps point you in the right direction!
Sulyman
Shopify Specialist
Try this code in the âAnnouncement barâ Section âCustom CSSâ setting:
slideshow-arrows {
display: none;
}
Do not edit theme code, this will make your theme updates problematic.
I didnât do any code modifications for the header it is aligned
Here is the solution:
.slideshow-control{ display: none !important; }Add to the theme code, the file theme.liquid in the layout folder.
Hey @75tnm,
In order to delete the arrows from the left and right side of the announcement bar then you need to follow these steps.
Go to Shopify Admin >> Online Store >> Themes >> Edit Code >>styles.css
In the end of styles.css paste the following code below provided.
.slideshow-control.slideshow-control--previous {
display: none !important;
}
.slideshow-control.slideshow-control--next {
display: none !important;
}
Results:
If this was helpful donât forget to like it and Mark as Solution.
Best,
Yes you are right.
The issue you facing is Override issue. By any chance can you share the collab code so that I can put the code in right place or fix the issue with the overwritten.
Or try to paste this code in theme.liquid file in style tag.
Hi there,
Thanks for clarifying itâs good to know you havenât made any code changes. If the header looks aligned on your end, it may be a theme-specific issue, a browser cache difference, or a screen size/resolution difference.
Could you share a preview link or a live URL so we can view it directly? Seeing it in real time will make it much easier to pinpoint whatâs causing the alignment issue on your visitorsâ screens.
Once we can inspect it, weâll be able to suggest a fix without touching your code.
Sulyman
Shopify Specialist