How to setup an Ecwid Store

In this article, we show you how you can easily set up a shop on your website using our Ecwid integration.

Table of contents

• Basic knowledge
• Setting up the store
• Adding your store
• Adding products
• Localizing your store
• Adding payment options
• Adding shipment options
• Add search bar
• Style your store
• Whitelisting the Ecwid store
• Wrapping up and further help

Basic knowledge

The Editor comes with integrated store functionality that allows you to set up your own web store, embed it into your website, and manage in Ecwid's powerful backend. It only takes a couple of minutes to get the store up and running. The store can be used free of charge for up to five products at once. If you want to sell more products you will need to upgrade to a paid plan with Ecwid. 

Setting up the store

In the left sidebar, you will find the category Shop. When you click on it, you will see the option to create a new shop using Ecwid. You will need to add an email address which will be used to create the shop in Ecwid automatically. Please note that by pressing Create Shop you confirm the terms of service and the privacy policy of Lightspeed Commerce Inc.

Adding your store

Once you set up your store you can choose between four store elements:

Products: This will embed the main article storefront (or the main layout you can set up via its settings) inside the website.
Cart: Using the Cart will add an icon that can be clicked to access the items in your shopping cart. Usually, this is included in the Products element already
Search: The search bar can be used to quickly find a specific product
Categories: This will give you tabs that show all categories. You will have to set up categories first in your store's settings

Add an empty container element on your page by opening the category Elements in the left sidebar. Then select Container, and drag and drop it on the site and set checkmarks to Limit width and Vertical padding to create some space around your store. Now go back to your store elements by clicking on the Shop category and drag the Products Element into your empty container. It will look similar to the image above.

These are example products that you can delete in the next step. You can access your store backend via the button inside any store element in the element settings > Open store control panel. Make sure to allow popups in your browser, otherwise, this external site might not open.

Adding products

In the Catalog tab under Dashboard you can manage your products. You can delete a product by clicking the arrow icon next to Edit Product on the right. In case you want to delete several products at once you can use the checkmarks to the left and make Bulk Updates. Click + Add New Product to add a new product with the relevant information and images.

Importing products is a quick way to upload your products' data from another e-commerce site, update your product catalog with new arrivals, or make multiple changes to existing inventory.

Make sure to add a Name, SKU, and Description to your product. You can also add images. Don't forget to set a Price and whether shipping is required or not (if it is, set a weight). If you have all the info you need you can hit Save in the top right corner. In case you have multiple similar products you can utilize the Duplicate Product to make the process faster. 

Localizing your store

Next, you might want to set up some Regional settings, like your currency, weight and sizes, and languages. Go to Settings and General. 

By default, the browser will recognize the language of each visitor and set the storefront language accordingly. Non-product texts will be displayed in this language, but your product's information (the ones you entered) will remain in your language. However, you can determine which language shall be the default language or which languages are allowed to be displayed at all. Under Language Settings, you can choose between several languages or decide to deactivate all except one (English is the default). 

Adding Payment Options

In the Payment tab, you can add or remove methods your customer can use to purchase a product of yours. You can use whatever you are familiar with. Usually, it is a good idea to offer a wide variety of payment options.

Adding shipment options

Under Shipping & Pickup, you can choose the ways you can get your products to your customers. This will likely influence the final pricing. Again, choose what suits you best. 

You can always edit and change those settings at any time. If you don't want your customers to see live changes, you can set your store to Maintenance mode in the Settings tab.

Let's go back into the Editor for some last adjustments to the look.

Adding a Search bar

Now that your store has been set up you can choose to add a search bar. Under Shop, you will find the Search element. 

You can drag it beneath or above the products' element in your editor. By default, the search bar is left-aligned. If you want to center it, double-click on the search element and open the Markup & Style tab in the settings panel. Under CSS classes simply enter center and the search bar will be aligned accordingly.

Style your store

Customize your shop under Design > Store. Here you can adjust colors, font settings, links, borders, and more for all your store elements.

Whitelisting the Ecwid store 

To whitelist the Ecwid store when using the native Cookie Consent Bar that blocks all third-party JavaScript until the visitor clicks the button to accept cookies, add the following code snippet: 

<script>(function(w,a,i){w[a]=w[a]||[];w[a].push(i)})(window,'YETT_WHITELIST',/ecwid|storefront|ecomm|new-frontend/)</script>

Further help

This is how you can set up a basic store using the Ecwid integration. You can find more information and detailed explanations about any function in Ecwid's Help Center.