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
Old 11-10-2016, 04:01 AM
Steves Store166's Avatar
Steves Store166 is offline
Join Date: Nov 2016
Posts: 1

How do I customise the design of shipping (etc.) pages?

There seems to be quite a bit about that helps with the customisation of the main storefront in Ecwid, however, I'm having trouble finding any code for how to customise the colour of the continue button, SSL icon, progress trail, and "sign in to use address book" button on the Shipping Details page; and other buttons, etc. on pages other than the main ones.

The same is also true for the customisation of the "continue shopping" button (the one on the shopping cart page and the one that pops up when you empty your cart), the "clear bag" button, and the "coupon submit" button, all on the shopping cart page.

Is there a simple line of CSS code that changes "all" of your buttons and accents to the same colour?

Any help would be very much appreciated

Old 11-13-2016, 03:55 PM
Cyril D's Avatar
Cyril D Cyril D is offline
Ecwid Team
Join Date: Feb 2015
Location: Ecwid HQ
Posts: 530

By means of CSS, you can change every aspect of every storefront element: a size, a shape, a font, a colour, etc. So if you have a proper CSS code, once you add it to a custom theme in the Ecwid Control Panel → Settings → Design → Custom CSS Themes, you'll get a result you need. In this post I'll focus on colours, though.

So, buttons. There are two types of buttons in Ecwid: the big ones—we call them primary, and small ones—secondary.

Below are CSS snippets which being added to the CSS theme, will change the colours of each button in your store. Colours are specified in HEX colour codes such as #e9800b. To get a needed colour, feel free to use any HEX colour codes generator.

Primary buttons
/* Change the base color of main buttons */
.ecwid .ecwid-btn--primary { background: #e9800b; }

/* Change the color when you hover over main buttons */
.ecwid .ecwid-btn--primary:hover { background: #e8a043; }

/* Change the color when click on main buttons */
.ecwid .ecwid-btn--primary:active,
.ecwid .ecwid-btn--primary:focus:active { background: #d67506; border: none; padding: 8px 20px; }

/* Change the border color of active main buttons */
.ecwid .ecwid-btn--primary:focus,
.ecwid .ecwid-btn--primary:focus:hover { border: 2px solid #e8a043; padding: 6px 18px; }
Secondary buttons
/* Change the base color of secondary buttons */
.ecwid .ecwid-btn--secondary { background: #e9800b; }

/* Change the color when you hover over secondary buttons */
.ecwid .ecwid-btn--secondary:hover { background: #e8a043; }

/* Change the color when click on secondary buttons */
.ecwid .ecwid-btn--secondary:active,
.ecwid .ecwid-btn--secondary:focus:active { background: #d67506; border: none; padding: 6px 12px; }

/* Change the border color of active secondary buttons */
.ecwid .ecwid-btn--secondary:focus,
.ecwid .ecwid-btn--secondary:focus:hover { border: 2px solid #e8a043; padding: 4px 10px; }
Now to the checkout progress bar aka checkout breadcrumbs.

I got a CSS snippet and added a comment to each CSS rule to help you to colour the breadcrumbs the way you want.

Checkout breadcrumbs
/* Checkout breadcrumbs unvisited links */
div.ecwid-Checkout-BreadCrumbs-link { color: gray; }

/* Checkout breadcrumbs current link */
div.ecwid-Checkout-BreadCrumbs-link-current { color: #1e7ec8; border-bottom: 3px solid #439CA0; }

/* Checkout breadcrumbs visited links */
div.ecwid-Checkout-BreadCrumbs-link-visited { color: #1e7ec8; }

/* Checkout breadcrumbs unvisited circle */
div.ecwid-Checkout-BreadCrumbs-point { border: 1px solid #bfbfbf; }

/* Checkout breadcrumbs visited outer circle */
div.ecwid-Checkout-BreadCrumbs-point-visited { border-color: #1e7ec8; }

/* Checkout breadcrumbs visited inner circle */
div.ecwid-Checkout-BreadCrumbs-point-visited::after { background-color: #1e7ec8; }

/* Checkout breadcrumbs current inner circle */
div.ecwid-Checkout-BreadCrumbs-point-current::after { background-color: #439CA0; }

/* Checkout breadcrumbs unvisited section */
div.ecwid-Checkout-BreadCrumbs-section { background-color: #bfbfbf; }

/* Checkout breadcrumbs visited section */
div.ecwid-Checkout-BreadCrumbs-section-visited { background-color: #1e7ec8; }

/* Checkout breadcrumbs unvisited vertical section */
.ecwid-Checkout-BreadCrumbs-Vertical div.ecwid-Checkout-BreadCrumbs-section { background: #bfbfbf; }

/* Checkout breadcrumbs visited vertical section */
.ecwid-Checkout-BreadCrumbs-Vertical div.ecwid-Checkout-BreadCrumbs-section-visited { background: #1e7ec8; }
And the SSL icon. Here's a code to change its color.

SSL icon
/* SSL icon at checkout */
div.ecwid-AddressForm-secureLockIcon { background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='' width='42' height='42' viewBox='0 0 42 42'%3E%3Cpath d='M42 0v42H0L42 0z' fill='%23189DEE'/%3E%3Cpath d='M36.14 30.074v6.215c0 .286-.105.535-.322.74-.21.198-.466.3-.775.3H24.097c-.302 0-.565-.102-.775-.307-.217-.204-.322-.447-.322-.734v-6.216c0-.288.105-.537.322-.74.21-.206.466-.308.775-.308h.362V26.88c0-1.335.498-2.485 1.503-3.443C26.968 22.48 28.17 22 29.57 22c1.4 0 2.602.48 3.607 1.437 1.005.958 1.504 2.108 1.504 3.443v2.146h.363c.302 0 .565.102.775.307.217.204.322.447.322.74zm-9.487-1.048h5.84V26.88c0-.766-.288-1.424-.853-1.974-.58-.543-1.262-.817-2.07-.817-.808 0-1.49.273-2.063.816-.572.543-.854 1.2-.854 1.974v2.146z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; }
The background property looks massive because this time we use an SVG graphic for icons. Basically, to change the colour, you should find all fill properties in the value of the background property and change it. Also, this time # symbol for colours in HEX codes is replaced with %23 encoded value to make the code compatible with Firefox.

How to get codes for other storefront elements?
Cyril D.
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

⬇ Please click Thanks if my reply helped you.
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

customisation, customization, design, style

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