E-commerce: Integrate a store
How to integrate a store into your website
In this article you will find the following topics:
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 minutes to get up and running. The store can be used free of charge for up to ten products at once. In our example we will assume to be a design company that offers websites in three packages. We prepared our images and decriptions 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!
Setting up the store
- This is pretty straightforward. In your CMS editor simply go to Add Content > Add store to open the store settings.
- If you haven't already, you will be asked to enter your Email. Create store will then set up your account on Ecwid automatically.
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 the its settings) inside the website.
Cart: Using the Cart will add an icon which can be clicked to access the items in your shopping cart. Usually this is included in the Products element already
Search: The searchbar 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 using Add content > Add Element > Container (or [CTRL + 4]) and set checkmarks to Limit width and Vertical padding, to create some space around your store. Now go back to your store elements (Add content > Add store) 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 your product you need.
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 infos 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 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 Manage Languages you can choose between several languages or decide to deactivate all except one (English is 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 Sitejet 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 Add Elements > Add store you will find the Searchbar. You can drag it beneath 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 store further with our new Store tab in your theme settings. Here you can adjust colors, font settings, links, borders and more for all your store elements.
This is how you can set up a basic store using Ecwid integration in Sitejet. You can find more information and detailed explainations about any function in Ecwid's Help Center.