The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 01-20-2016, 09:03 PM
Scorechamber Audio's Avatar
Scorechamber Audio is offline
 
Join Date: Jan 2016
Posts: 2
Default

Change "Add to Bag" button color in Wix (simplified)?


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.
  #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!
  #3  
Old 01-22-2016, 04:36 PM
Scorechamber Audio's Avatar
Scorechamber Audio Scorechamber Audio is offline
 
Join Date: Jan 2016
Posts: 2
Default

This is a phenomenal write-up, thank you for taking the time. Works like a champ. Hey, I found a solid way to preview the color changes while working. If you open your Wix page in a separate browser tab (keeping your primary store/CSS settings window open separately for revision) and go to your Ecwid store 'Settings', then "Design" tab, then (at far bottom) 'Advanced Settings," you can add any random character in the code box there, then click somewhere else on the pane, triggering a refresh- and updating your color and other CSS revisions each time you change the box contents and click out of the box.

Hope this makes sense, and thanks again for your great info and effort in troubleshooting.
The Following User Says Thank You to Scorechamber Audio For This Useful Post:
Arthur Belostotsky (01-23-2016)
  #4  
Old 01-23-2016, 07:53 PM
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
This is a phenomenal write-up, thank you for taking the time. Works like a champ. Hey, I found a solid way to preview the color changes while working. If you open your Wix page in a separate browser tab (keeping your primary store/CSS settings window open separately for revision) and go to your Ecwid store 'Settings', then "Design" tab, then (at far bottom) 'Advanced Settings," you can add any random character in the code box there, then click somewhere else on the pane, triggering a refresh- and updating your color and other CSS revisions each time you change the box contents and click out of the box.

Hope this makes sense, and thanks again for your great info and effort in troubleshooting.
Hi Kelly,

Thanks for following up and sharing your experience here!
I am very glad to hear that you managed to make the desired changes.

Basically, there is a way to test your CSS changes right in your browser, before you add them to your custom CSS theme in Ecwid using Google Chrome Web Tools.

I've recorded a screencast that shows how to do this for you: http://take.ms/Q9F30
Please check it out and let me know if you have any questions. I'll be happy to help.

Thanks!
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
add to bag, button, color, customization, wix

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:33 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.