Examples of customizing Ecwid
Various customization options are available to update your store’s design and features. It's possible to customize the storefront theme, add ways to manage your store data, rearrange the checkout process, etc. In this article, we share examples to customize your store’s look and behavior with Ecwid’s API.
In this article:
Customizing storefront theme: layout, new elements, store look
Your storefront is the face of your internet business. It defines how your customers see and interact with your brand. We built Ecwid with many customization options to provide the flexibility to design your store as you desire.
You can:
- change how customers interact with specific products and categories (e.g. dependent product options)
- add dynamic information to a specific place or page (like buttons, texts, widgets)
- add custom navigation to store pages
- change colors, fonts, sizes of any element (price, button, SKU, etc.), and many more.
Example 1
Show product color variations for easy selection:
Also, cart details are shown below the “Add to Cart” button.
Order the widget like this from Ecwid Customization Team >
Managing customer’s cart in JS API Docs >
Example 2
Make the “Add to Cart” button red for products in the “Sale” category only:
Paint the buttons or other elements >
Apply changes to specific pages only >
Example 3
Targeting customers who are already adding products to their cart is a great way to increase conversion. Display a discount offer as a popup on related items after customers add a certain product to their cart to cross-sell products on your site.
Add upsell popup >
Apply custom discounts >
Run BOGO promotions >
There are endless possibilities to customize the theme of your Ecwid store.
Make basic layout changes >
Create your own theme >
Apps from the Ecwid App Market: ecwid.com/apps/design
Managing store data: orders, catalog, customers, notifications
Running a store every day involves a certain routine. Check orders, edit orders, edit catalog, update inventory, notify suppliers about sales and low stocks. Don’t even mention compliance. Working efficiently helps make time for all the other operational issues on your hands.
Save time using tools in Ecwid’s Control Panel: bulk order status edits and duplicating existing products can make inventory management less of a headache while customizable email notifications templates and invoices reduce time managing your orders.
You can even manipulate your store’s data externally to customize automation:
- get notified about any store events (order updated, customer created, and many more).
- synchronize store data with your databases (MySQL, PostgreSQL, any other one) or services like QuickBooks, eFulfillment.
- update, product stock, change coupon availability in bulk.
Example 1
Let’s say you are always running low on large t-shirts. It inconveniences shoppers and costs you money – people can’t order shirts you don’t have.
To combat this, you can set an email to notify your supplier after the stock reaches a certain limit for that particular item. Triggering a refill for your inventory before you run out will help keep your store from running out of a product.
Order this customization >
Get notified about new orders >
Example 2
Let’s say you have a separate server with a MySQL database to track stock levels for your brick-and-mortar store. It’s familiar and works well. However, your new online store has its own stock levels which you need to update separately.
Ecwid’s REST API allows you to access product data from other software such as your MySQL database. This keeps your stocks synchronized so you can sell confidently online or in your retail outlet.
Access products with Ecwid API >
Example 3
A third-party fulfillment service you use requires lots of information. Keeping up with constant changes is a pain. With documentation for their API, you can connect your store with that fulfillment service and provide them will all the info they need.
For example, you can send information about new orders or the latest version of a current order automatically with Ecwid’s notifications using webhooks. You can also subscribe to notifications about store events including orders, customers, products, categories.
Adapt your store to fit the needs of your business.
Check order & catalog management apps >
Get API access >
Arranging checkout: new required fields, discounts, payments, shipping
Use the secure Ecwid checkout to accept orders and receive payments. After selecting products, customers use your checkout to enter their shipping information and payment details before placing the order.
The checkout process has several sections: customer’s cart, address info collection, shipping methods, payments, warnings and customer comments, buttons.
You can customize any of them:
- connect with your preferred payment method
- calculate custom discount rules
- integrate new shipping methods or complex custom rates
- add new required and optional fields
- collect additional information from customers and save it to their order
- apply any custom restriction or new features for your checkout process
Example 1
Customers crave discounts at their favourite stores during the holidays. Create a dedicated “Sale” category in your Ecwid store and apply discounts to products in that category to satisfy your customers.
You can also use Ecwid’s API to develop a custom solution. At checkout, Ecwid can send information to your server, analyze the contents of your customer’s order, and return the percentage or an absolute discount amount for that cart.
Example 2
Provide payment methods based on the customer’s country. For example, provide local payment methods if an order comes from within India but limit payment method to only PayPal if a customer orders from outside India.
United States customer address
India customer address
Make your store behave similarly with JavaScript code >
Example 3
Add additional required fields to set both pickup and return addresses at checkout:
Read about ordering extra fields at checkout in API Docs >
Add custom JavaScript code >
Example 4
Add a surcharge to a payment method. Here are some examples when you may want to charge extra:
- if a shopper chooses Cash on Delivery (COD) or any other particular payment method
- for a gift wrap
- for rush orders.
Related articles
Customizing options
Changing store design
Getting started with Ecwid
Extra services in Ecwid
App Market (website)
Ecwid 201: Ecwid Store Design & Customization (website)
A Comprehensive Guide to Customizing Your Ecwid Store Design (blog)