Quick overview of Ecwid storefront customization options
Maybe you want to freshen up your store design or integrate a new service provider. Even better, you want to add new features to your store. This can be achieved in several ways, from adjusting built-in design settings to creating custom design themes (you can go as far as using Ecwid’s API). This article is an overview of all the options you can use to modify the look of your Ecwid store.
Using the built-in storefront design settings
Tweak product card details layout, enable or disable certain storefront elements like “Sign in” link, product SKU numbers, breadcrumbs (category paths), product quantity fields, and more right from your dashboard. No coding required.
If you're using Ecwid Instant Site – a website with a built-in online store that is provided for every user – you can do all that from the site editor. To access it, go to Website → Edit Site. Besides storefront design changes, you can choose a theme for your site, hide or add different blocks like “About us”, "Customer Feedback" or “Contact Details”, change fonts, add or hide buttons, and more.
If you've added your Ecwid store to a custom website, visit the Design page to update the design and layout of your storefront:
Learn more about designing your Ecwid storefront on a custom website →
Using the built-in checkout settings
The checkout page in your Ecwid online store is where customers review items in their cart, enter their shipping and payment details, and leave order comments before placing orders.
On the Settings → Cart & Checkout page, you can customize your store’s checkout experience and catalog settings. Change the default product sort order, choose where and how the “Compare to” price is displayed, enable favorites so that customers can like items to save them for later, and more.
There are many ways to customize your cart and checkout page. For more in-depth information, check out this article: Editing checkout form options in Ecwid →
Adjusting store design using CSS
CSS code provides the ability to change the color of buttons, font sizes, texts, and omit elements on certain pages.
In the Ecwid CSS Cookbook, you can find various codes that will help you change the look of your store. Check out our step-by-step instructions on how to add CSS codes to your store theme. These guides mostly come down to:
- Copying a piece of CSS code from the article;
- Pasting it to the CSS theme on the Design page in your Ecwid admin or in your Instant Site editor.
You can copy and paste one or more codes to the same new active theme, depending on how many things you want to change. More web-savvy users can create their own code to build a customized theme for the online store.
Related:
Ecwid CSS Cookbook
Adding CSS codes to your store
Applying custom design to Instant Site with CSS
Finding Ecwid storefront CSS selectors
Changing design in certain pages only
Using a matching theme for your site builder
In case you already have a website, Ecwid will easily integrate with it, be it WordPress, Wix, Joomla, or any other website builder or CMS. Ecwid store is compatible with the majority of design themes provided by third-party vendors for various site builders. Here is a collection of web directories where you can find design themes for your site builder:
Wix
Wix.com → Templates provides themes for your website. And the Ecwid app for Wix provides an option to set storefront colors in the Wix editor. Double tap the Ecwid store area in the editor, click Settings, and locate “Store Color settings” to set your preferred colors.
WordPress
Joomla
Squarespace
Installing apps from the Ecwid App Market
Enhance your store’s functionality with apps from the Ecwid App Market. Hundreds of apps help Ecwid merchants run their stores every day. The Ecwid App Market is available for all paid users, and many apps are free.
Popular apps:
Checkout with phone number
Checkout notices
3D Seasonal Effects
Upsell & Cross Sell Product Kit
Announcements bar
Discount Spin Wheel of Fortune
Making no-code integrations through Zapier
You can connect your Ecwid store with other services such as an email marketing platform that you want to use, CRM or your accounting software without any coding by using the Zapier service.
To connect your store with a service without any programming, you can simply find that service in Zapier (it supports hundreds of them) and create an automated task (a “zap”) by selecting an event and a desired action that should follow it.
Here you can find the instructions on how you can integrate your Ecwid store with some of the popular services through Zapier:
Connecting Ecwid and Zoho CRM
Connecting Ecwid with Salesforce CRM
Connecting Ecwid with Quickbooks
Connecting Ecwid with Hubspot
Connecting Ecwid with Constant Contact
Saving orders to Google Sheets
Managing inventory with Google Sheets
Using Ecwid’s API
Ecwid's API Platform allows you to add various extra features to your store. For example, you can empower your online business with:
- Advanced sales reports
- Integrations with 3rd party services like shipping companies or payment gateways
- Notifications about store events (using webhooks)
- Your online store’s inventory synced with your offline catalog
- Swift data migration when moving from a store on another platform
- Exquisite storefront design changes and more.
Working with Ecwid API Platform requires programming skills. You can do all the coding yourself if you’re comfortable with it. In case you need help with programming, you can recruit a freelance developer.