Remove button

Store Design

Topic summary

Goal: remove the small icon/arrow shown on the “Add to cart” button on a product page.

Context and steps:

  • OP shared the product URL after initial requests and was advised to try theme settings or use CSS after inspecting the element via the browser’s dev tools. One participant questioned the reason for removing the icon.
  • First CSS suggestion hid the entire add-to-cart button (selector targeted the whole .button.atc-btn), which was not desired.

Solution implemented:

  • Revised approach targeted only the icon element: hide the .button-arrow while keeping the button visible.
  • Additional styling set the button’s border and text color to #e61f93 to match the theme.

Outcome:

  • OP confirmed the revised CSS worked and the unwanted icon was removed without affecting the Add to Cart button’s functionality.
  • Guidance was given to learn basic HTML/CSS via tutorials and use dev tools + ChatGPT for similar theme tweaks.

Status: resolved. Screenshots were shared but not essential to the fix.

Summarized with AI on December 25. AI used: gpt-5.
1

Sheeks_0-1719737837673.png
Sheeks_0-1719737837673.png1366×768 205 KB

can anyone teach me how to remove that button on that add to cart button?

2

@Sheeks - can you share this product page link? it will need css

3

If it’s part of theme see if there is anyway to remove it with there settings

but if that’s not the case fix that using HTML/CSS I don’t know how much HTML/CSS you know but if you know that’s very simple

Inspect your code first you can do open that with
cmd+swift+I
or just right click there is inspect option at the bottom
it opens like this

attaboiaj_0-1719738179715.png
attaboiaj_0-1719738179715.png2506×1247 301 KB

now go and inspect that icon “better watch some video on how to do that” search for inspect in browser
once you know that copy that part of code and give it Chatgpt
and ask how to remove this using html/css/js

paste that code in your theme settings and it will remove that

if you share the page I’ll fix that.

4

Why do you want to remove it? How will people proceed to checkout?

5

https://sheeksorority.com/products/european-and-american-new-street-hot-girl-style-halter-backless-waist-slimming-vest
here :slightly_smiling_face:

6

Paste this code at the bottom of ‘base.css’ or ‘theme.css’ or ‘style.css’

.button.atc-btn {
    display: none;
}
7

Sheeks_0-1719742378016.png
Sheeks_0-1719742378016.png1366×768 175 KB

Sorry, its not working. It remove the entire add to cart button

8

use this

.button.atc-btn .button-arrow { 
    display: none; 
}

.button.atc-btn:hover {
    background-color: #e61f93;
    color: #ffffff;
}
9

Sorry I misunderstood your question. Try this code

.button{
border-color: #e61f93 !important;
color: #e61f93 !important;
}
.button-arrow{
display: none;
}
10

Gosh! It worked!
Thanks!

11

Good to help @Sheeks seems like you have lot issue/question on how to change your theme

I highly recommend you read my below post and try to learn it using YT

and ask chatGPT hey this is my html write a CSS to do X
that’s a super power