Change the color of the button - featured product narrative theme

Shopify Discussion
1

Hi, i would like to change the change the color of the button as per picture.

  • featured product section- narrative theme

Thanks

Change color.jpg
Change color.jpg1595Ă—708 74.4 KB

2

Hi there,

Please provide your shop URL

Thanks

3

Hi,

https://au-candles.myshopify.com/

pass: yainti

Thank you.

4

Hi,

Is this what you are looking for?

Step 1:

Step 1
Step 1878Ă—1036 51.3 KB

Step 2:

Step 2
Step 2872Ă—859 46.2 KB

Step 3:

Step 3
Step 3873Ă—1017 63.4 KB

5

Hi, thank you for reply-I didn’t make myself clear.

I want to change the buy button to look like "Add to cart "(and all other buttons) i.e. to use “secondary button style” with transparent background and primary accent outline.

Thanks

6

Hi @thenebra ,

I think you want like below Image

Aashish_0-1609178629849.png
Aashish_0-1609178629849.png1247Ă—350 69.9 KB

If Yes. Please follow the below points

  1. Go to your online store → Edit theme
  2. On Assets → edit your custom css file if you don’t created your custom css file just create it.
  3. Add the below CSS code into the file
  4. You are done.
.shopify-payment-button .shopify-payment-button__button--unbranded {
    width: 100%;
}

.shopify-payment-button .shopify-payment-button__button--unbranded {
    background-color: transparent;
    color: #adacae;
}

If you need more help hire me

7

Hi,

Exactly what I had in mind!

Thanks a bunch for the solution!

Cheers

8

Hi Thenebra,

Do you want more help?

9

Hi Aashish, thanks for asking!

Actually, now that I look at it- when I hover over the buy button it displays again primary accent color…would be great if it could act as “Add to cart” when hovering.

10

Hi @thenebra ,

Just a line or 2 below where you changed .shopify-payment-button__button–unbranded { portion, you’ll find the below portion (hover). You need to change the background-color to transparent there. In case you don’t see hover there, paste the below code snippet just after the closing curly brace of --unbranded portion.

&:hover {
background-color: transparent;
}

11

Hi neeravmakwana,

That worked!

Thanks!!

1 Like
12

Hi, I want to change the text of the buy it now button. Kindly help me to solve this.