Put background color on shop button on header

Put background color on shop button on header

lucas_11
Excursionist
35 0 5

lucas_11_0-1683363594984.png

Could Someone please help me **bleep** background color on my shop now button. I would like it to be this color#C466EE

Replies 9 (9)

suyash1
Shopify Partner
10979 1359 1735

@lucas_11 - can you share the page link where you have this button?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
NomtechSolution
Astronaut
1245 113 160

To change the background color of your "Shop Now" button to #C466EE in Shopify, follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit and click "Customize".
  3. In the theme editor, select the section where the "Shop Now" button is located.
  4. Look for the button settings, which may be located in a "Button" or "CTA" section.
  5. In the button settings, look for the option to change the button background color.
  6. Replace the existing color code with #C466EE.
  7. Save your changes and preview the button to ensure the background color has changed to your desired color.

oscprofessional
Shopify Partner
16373 2440 3188

Hello @lucas_11 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

a.button.button--secondary {
    background: #C466EE !important; 
}

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
lucas_11
Excursionist
35 0 5

It's a button on my header that says shop. Here is an image and I highlighted where I want the button to have the background. The code you gave changed the button color on my banner image. Capture.JPG

oscprofessional
Shopify Partner
16373 2440 3188

Hello @lucas_11 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

li:nth-child(2) {
    background: #C466EE;
}

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
lucas_11
Excursionist
35 0 5

thanks for helping could you add a corner radius to it please.

lucas_11
Excursionist
35 0 5

I would like it to look like thisCapture.JPG

oscprofessional
Shopify Partner
16373 2440 3188

Hello @lucas_11 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

li:nth-child(2) {
    border-radius: 18px !important;
}

 

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
oscprofessional
Shopify Partner
16373 2440 3188

Hello @lucas_11 

If the solution is helpful to you please like and accept my posts.

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...