Setup an Ecwid Shop
In this article, we show you how you can easily set up a shop on your Sitejet website using Ecwids capabilities.
Table of contents
Sitejet comes with integrated store functionality that allows you to set up your own web store, embed it into your website, and manage it externally via its powerful backend. The entire process will only take a couple of minutes to get up and running. The store can be used free of charge for up to five products at once. In our example, we will assume to be a fashion company that offers different clothes and accessories. We prepared our images and descriptions in advance for this example. Getting your store online can take more time, depending on how many products and details you want to include. Let's get started!
Watch a Video
This video was recorded in the old UI. We will update this video soon.
Setting up the store
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
Create 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 like in 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.
In the Catalog tab in your 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 set up all the information about the product.
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. The next image shows how we set it up in our example:
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.
A couple of words about storefront languages: by default the browser will recognize the language of each visitor. 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 CMS to wrap things up.
Adding a Searchbar
Now that your store has been set up you can choose to add a useful new element: the searchbar. Under Shop you will find the Search element.
You can drag it beneath or above the store element in your editor. That's all there is to it. Since it's left-aligned by default, you can use a little trick to make it centered. Double-click the searchbar element and open the Markup & Style tab in the settings panel. In CSS classes simply enter "center" and the searchbar 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
This is how you can set up a basic store using Ecwid integration in Sitejet. You can find more information and detailed explanations about any function in Ecwid's Help Center.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.