Changing the add to cart text style - Refresh theme

Store Design
1

Hello, I’d like to make 3 changes to my current add to cart button:

1: I’d like to change the text style to be capitalized and larger

2: I’d like to add the price on the button

3: I’d like my add to cart button not to have round edges

Current add to cart:

belal5_1-1688419398825.png

Desired add to cart:

belal5_0-1688419349225.png

How can this be achieved?

Site URL: 68bff2.myshopify.com

1 Like
2

Hi @belal5 ,

I can only give you the 1 and 3rd changes. The 2nd one need a liquid code to write cause it needs to be link on the prices in the every product. Try the 1st and 3rd.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.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:
  4. And Save.
button#ProductSubmitButton-template--19751448412459__main {
    text-transform: uppercase;
    border-radius: 0px;
    font-weight: bold;
}

Result:

Ribe_Dagandara_0-1688421537354.png
Ribe_Dagandara_0-1688421537354.png600×264 5.75 KB

I hope it help.

1 Like
3

Thanks, however, on hover, there’s the rectangle and on top of it, there’s the circular shape.

1 Like
4

Oh sorry I didnt notice that. Try this one.

.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
    border-radius: 0px !important;
}
button#ProductSubmitButton-template--19828940210475__main {
    border-radius: 0px;
}

I hope it help.

1 Like
5

Now this only works on one product page. On other product pages it only shows an outline around the button.

1 Like
6

Oh I see, I thought it all add to other products. Its not be possible for us to see the other page changes so we are just relaying the comments of the store owner. Try this.

button#ProductSubmitButton-template--19828943814955__main {
    border-radius: 0px;
}

I hope it help.

1 Like
7

Thanks for all your efforts to help so far. I applied the following code, however, it only added a border around the buttons.

button#ProductSubmitButton-template–19751448412459__main {
text-transform: uppercase;
border-radius: 0px;
font-weight: bold;
}
.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button–unbranded:after {
border-radius: 0px !important;
}
button#ProductSubmitButton-template–19828943814955__main {
border-radius: 0px;
}

8

I didnt give borders in the code. :sweat_smile:

But anyway I think youve already solve the problem.

1 Like
9

The problem was not solved. This is how it looks with the above code:

belal5_0-1688753793478.png

10

Oh i check it was good and now it come like that, Its weird.

1 Like
11

You recon it could be fixed?

12

No it wont fixed. How many time I try to fix the border but its to hard to get that out.