Debut Theme Help

Solved
Tourist
13 0 0

I would appreciate help with a number of things if possible. I am using the Debut theme and can't figure out how to change the text color for the add to cart button. I have looked over other solutions and it's just greek to me. I have managed to change the add to cart button color, but when touched it turns white. How do I change it from white to another color?

 

2nd thing is how do I change the text color of the add to cart button? As of now, it is barely visible. I would like the text to be white.

 

And 3rdly How can I move my trust badge over about four inches to the right. I tried to center it but it took it too far to the right.

Thanks in advance

0 Likes
Shopify Expert
665 170 199

Hi, @ametress ,

This is Evita from On The Map.

 

To change hover button color use this code:

These are the current CSS values of the button, add this to theme.scss.liquid at the bottom, change the code to whatever colors you want.

.btn--secondary-accent:not([disabled]):hover {
    background-color: #fff;
    color: #436076;
    border-color: #436076;
}

To changed text color use color:  red:

.myClass {
color: red
}

Can you give me your store URL so I can see what trust badge you are talking about?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
New Member
7 0 0

please Provide a store url to better assist

0 Likes
Tourist
13 0 0

Hi and Thanks Evita! But could you tell me if I just go into liquid and just add that directly at the bottom? or in between somewhere? This is what it looks like now 

.product-form__cart-submit {
display: block;
width: 100%;
line-height: 1.4;
padding-left: 5px;
padding-right: 5px;
white-space: normal;
background-color: #8EA5BD;
margin-top: 0;
min-height: 44px;

I am asking does what you provided go here, or elsewhere? I am sorry for not getting the gist of what you are saying I just want to be certain

 

Here's a link to a product page with the trust badge

 https://jenesaisquoishop.com/collections/health-wellness/products/cushion-massage-acupressure-body-m...

0 Likes
Tourist
13 0 0

okay I found where to add the code

0 Likes

Success.

Shopify Expert
665 170 199

Just add the code to the bottom, so it wouldn't overwrite the original code if you need it someday.

For trust badge, if you want to center it add this code: 

.trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}

If you want to move the badge to the right use this code: 

.trust-badge {
     margin-left: 4px;
}

 And for the button, I understand you just want to change color to white and on hover darker? 

.product-form__item--payment-button .product-form__cart-submit {
     color: #fff!important
}
.product-form__item--payment-button .product-form__cart-submit:hover {
     color:#8EA5BD!important
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Tourist
13 0 0

Thank you! For the button, I want the color blue and darker blue when you hover 

0 Likes
Tourist
13 0 0

it is the text I want white 

0 Likes
Tourist
13 0 0

Where do I add the trust badge code, does it also go to the bottom?

0 Likes