View Single Post
  #2  
Old 01-22-2016, 12:00 AM
Arthur Belostotsky's Avatar
Arthur Belostotsky Arthur Belostotsky is offline
 
Join Date: Jun 2014
Posts: 466
Default

Quote:
Originally Posted by Scorechamber Audio View Post
Hi,

What is the simplest way to change the color of your Wix-embedded store's "add to bag" buttons? I've dug around but only see general CSS related posts that lead to a ton of learning curve. Please share a step-by-step, "paste this here and change this" tutorial, thanks so much.
Hi Kelly,

Thanks for your question!

You can change the color and style of any store elements with the help of custom CSS themes.

And here is a step-by-step instruction on how to change the color of "Add to bag" buttons

1. Log into Ecwid Control Panel
2. Navigate to Settings > Design > CSS themes
3. Create new CSS theme (or use existing one if you already have it)
4. Paste the following code there:

Code:
/* Changes the color of "Add to bag" button */
html#ecwid_html body#ecwid_body .ecwid .ecwid-btn--addToBag {
  background: #82ED2F;
}

/* Changes the color of the button when it's hovered */
html#ecwid_html body#ecwid_body .ecwid .ecwid-btn--addToBag:hover {
  background: #82ED2F;
}
#82ED2F is the color code. Please feel free to replace it with the code of any color you like. You can grab this code using the Color Picker.

5. Activate the theme and save the changes.

I've reviewed the code that you have in your custom CSS theme currently and found that this is the correct code that worked for old Ecwid buttons. We've changed these buttons recently, so the legacy code doesn't work for new buttons.

If you want to change the color of all primary buttons in your store (such as "Add to bag", ), you may consider using this code:

Code:
/* Changes the color of all primary buttons */
html#ecwid_html body#ecwid_body .ecwid .ecwid-btn--primary {
  background: #82ED2F;
}

/* Changes the color of the button when it's hovered */
html#ecwid_html body#ecwid_body .ecwid .ecwid-btn--primary:hover {
  background: #82ED2F;
}
You can find the detailed information on how to change the design of your store in this article: How to change Ecwid design

Please try it out and let me know if you have any further questions.
I'll be happy to help you!