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 02-19-2018, 09:37 PM
grippitc's Avatar
grippitc is offline
Junior Member
 
Join Date: Feb 2018
Posts: 10
Default

Unable to customize add to cart button with design and appearance


Hi, I am unable to style my "add to bag" buttons.
I would like to change the color, font, font size, and make it with rounded corners or pill shaped.

I tried this css for the color, but it is not working:

.ecwid .ecwid-btn--addToBag:hover {
background: #ffc180;
}
.ecwid .ecwid-btn--addToBag:focus,
.ecwid .ecwid-btn--addToBag:focus:hover {
border-color: #ffc180;
}
.ecwid .ecwid-btn--addToBag:active,
.ecwid .ecwid-btn--addToBag:focus:active {
background: #ff9c33;
}

https://grippit.com/wordpress_test/store/


Thanks for any help.
  #2  
Old 02-21-2018, 07:21 AM
Kay Parkar's Avatar
Kay Parkar Kay Parkar is offline
Junior Member
 
Join Date: Feb 2018
Posts: 3
Default

facing same problem. I think hover functionality is not supported.
  #3  
Old 02-21-2018, 12:36 PM
grippitc's Avatar
grippitc grippitc is offline
Junior Member
 
Join Date: Feb 2018
Posts: 10
Default

Kay, here is some CSS code that worked for styling my "add to cart" and "checkout" buttons:

/* Add to bag button changes */

.ec-size .ec-store .form-control--small .form-control__button {
background: #FFA726;
border-radius:30px;
font-size: 12px;
padding: 8px 16px;
color: #fff;
}
.ec-size .ec-store .form-control--small .form-control__button:hover {
background: #FF9800;
}

/* Checkout button changes */

.ecwid .ecwid-btn--checkout {
background: #ff9c33;
}
.ecwid .ecwid-btn--checkout:hover {
background: #ffc180;
}
.ecwid .ecwid-btn--checkout:focus,
.ecwid .ecwid-btn--checkout:focus:hover {
border-color: #ffc180;
}
.ecwid .ecwid-btn--checkout:active,
.ecwid .ecwid-btn--checkout:focus:active {
background: #ff9c33;
}

Here is some HTML for changing "Buy Now" button text:

<script>
ecwidMessages = {
"BuyNow.buy_now":"ADD TO CART"
}
</script>

In my opinion ecwid is a total POS. Very difficult to customize. Whoever came up with "Bag" instead of the standardized "Cart" is a complete moron. Studies have shown "cart" has a vastly higher conversion rate than "Bag". I refuse to purchase a plan from ecwid, because of these and other failings, not to mention zero customer support. I HIGHLY (can't stress this enough) recommend you have a look at Woocommerce if you have not already.
  #4  
Old 02-22-2018, 04:57 AM
Kay Parkar's Avatar
Kay Parkar Kay Parkar is offline
Junior Member
 
Join Date: Feb 2018
Posts: 3
Default

facing same problem. I think hover functionality is not supported.
  #5  
Old 02-22-2018, 05:12 AM
Roger Flopple's Avatar
Roger Flopple Roger Flopple is offline
Junior Member
 
Join Date: Feb 2018
Posts: 1
Default

thank you for your reply my problem has been fix thanks a lot !

ios Developer
  #6  
Old 02-22-2018, 10:05 AM
Daria L.'s Avatar
Daria L. Daria L. is offline
Ecwid Team
 
Join Date: May 2015
Posts: 558
Default

Hello,

This is Daria from Ecwid Customer Care Team, thank you for contacting us!

Basically, there are different ways to change the design in Ecwid. I'll describe them below:

- Changing the basic design elements in the Ecwid Control Panel.

Log in to your Ecwid Control Panel and go to the Settings > Design and press the Change Theme options button. You will be forwarded to the Appearance section, where you can manipulate sliders to hide some storefront elements, like: quantity, sign-in link, product SKU and more. Here you can also switch on the Color Adaptive Mode, to adapt your store to the colors of your website:



That’s it. This is the easiest way to change the the design of your store, in the Ecwid Control Panel itself.

- Changing the store design with the help of the CSS Custom Themes.

You can change the design of almost any element in your Ecwid store with the help of CSS. In order to do that, you will just need to add the appropriate CSS code to the Custom Theme of your store. Please, find the details here: https://support.ecwid.com/hc/en-us/a...-Store-Design-

First of all, you should create your custom CSS theme: go to your Ecwid control panel -> Settings -> Design, click "Create Theme" button and create a new CSS theme by pressing the “New CSS Theme” button. Then activate your new custom CSS theme and save the changes.

Then, you can customize it according to your needs, by adding CSS rules to this theme one by one. Currently, we have a lot of ready codes for customisation of Ecwid stores, you can find them here: https://support.ecwid.com/hc/en-us/s...ize-Your-Store

If you face any difficulties with CSS codes or If you want to change something specific in your store, please, feel free to ask, we are always glad to help you!

- Using the Theme Design apps.

Another way to change the design of your store — is utilizing the various Themes Apps. For instance, you may consider checking the Store Designer app, this application can help you to customize the design of your store: https://www.ecwid.com/apps/design/store-designer Please mind, in order to use our App Market, you need to be subscribed to any paid plan. I assume, that you also might be interested in other Theme apps, please get acquainted with the full list of the available Theme Design Apps.

- Custom Design.

In case of any difficulties with the store design customization or you need a unique theme, devised by the professionals and tailored especially for your store, then you may consider contacting our Customization Team. For this, you can submit a request here: https://ecwidcom.typeform.com/to/vIlijv and they will email you a quote. They can develop a unique design for your store.

As for Ecwid buttons, you can change the buttons via CSS. For example, to make Add to bag button orange, you'll need the following code:

Code:
.ecwid .ecwid-btn--addToBag {
 background: #ff9c33;
}
.ecwid .ecwid-btn--addToBag:hover {
 background: #ffc180;
}
.ecwid .ecwid-btn--addToBag:focus,
.ecwid .ecwid-btn--addToBag:focus:hover {
 border-color: #ffc180;
}
.ecwid .ecwid-btn--addToBag:active,
.ecwid .ecwid-btn--addToBag:focus:active {
 background: #ff9c33;
}
Add it to Ecwid Control panel > Design, CSS Themes, your active CSS Theme.

If you want to change the color of all buttons at once, you can use the following code:

Code:
.ecwid .ecwid-btn--primary {
  background: #ff9c33;
}
.ecwid .ecwid-btn--primary:hover {
  background: #ffc180;
}
.ecwid .ecwid-btn--primary:focus,
.ecwid .ecwid-btn--primary:focus:hover {
  border-color: #ffc180;
}
.ecwid .ecwid-btn--primary:active,
.ecwid .ecwid-btn--primary:focus:active {
  background: #ff9c33;
}
You can also customize the text as you wish. There's an app that allows editing texts: Storefront Label Editor. You can edit texts labels really fast. For this you need to install the app here: https://www.ecwid.com/apps/featured/...t-label-editor . Then all you need to do is search the needed label and enter a new text for it. For example, in order to change "Add to bag" text, you need to find this label and add your text there, please see the screenshot:



That's it. Hope, it’ll be helpful for you!

Please keep in mind that our customer care team will be happy to help you with any requests you may have. Feel free to ask your questions here: https://support.ecwid.com/hc/en-us/requests/new . We'll do our best to sort everything out.

Thank you!
__________________
Daria L.
Customer Care
Ecwid Help Portal
Ecwid Knowlegde Base
The Following User Says Thank You to Daria L. For This Useful Post:
VALERIE VENITE (11-04-2018)
 
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

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 10:45 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.