Using ecwid e-commerce solution with Concrete5
This guide will show you how to integrate the ecwid e-commerce platform with your concrete5 site. We have created this guide using the free version of ecwid which supports 10 products. You can always upgrade at a later date or keep the free version if your product itinerary is limited.
We would also like to point out that concrete5 offer their own e-commerce modules which you may choose to use instead. These can be found in the concrete5 marketplace.
If you are looking for hosting then check out our Concrete5 hosting page.
Set up a free account with ecwid.
In your dashboard, there will be a product browser widget code that you will be prompted to copy and paste into the page where you want your product browser to be displayed. Click 'the following code block' link which will select the code text for you and press Ctrl + C.
Log into your concrete5 store. Go to the 'shop page' on your concrete5 website. Go into editing mode by clicking edit in the top right corner and 'edit this page'.
Click on 'add to main' > 'add block'.
An 'add block' pop up box will appear. Scroll down to html and click on it.
In the 'add html' box, press ctrl v to paste the code from your ecwid dashboard. Click 'add' in the bottom right corner.
It will take a while to load. You will have to wait patiently (make a cup of tea) etc while it is doing its thing. If this takes way too long to work, try closing the pop up box and refreshing the page.
Afterwards, you should get something like this.
Publish your edits to view how your store currently looks in live view.
If you play around with it, you should be able to view the default products, add them to the bag and proceed to checkout.
Adding categories / products
Now, you will want to add your own products and categories to your shop. To do this, go to your ecwid control panel and click on the catalog tab.
To add a category, click on the 'categories' tab under 'catalog'.
The default categories will be displayed in the left hand column. You can delete these by clicking on the category and clicking the 'delete category' button at the top.
To create a new category, fill in the form provided. The following fields need to be filled in:
New category name: whatever you want to call your new category.
Availability: disable or enable this as required
Category image: if you have an image for your category, click 'choose file' and browse your computer for the desired file.
Description: fill in a description for your category.
Click 'save' in the top right corner to save your new category.
To add products, click on the 'product' tab under catalog.
Once there, you can remove the default demo products by simply clicking on the cross icon next to each item.
To add a product, click on the 'new product' button in the top left corner.
After clicking this, you will be taken to a form with numerous tabs. The following needs to be filled in (within the 'general' tab):
SKU: a unique identifier for each product
Weight: Leave this blank if you are selling a downloadable product. Next to this field is a tick box that asks if the product requires shipping (not needed for a downloadable product). Tick if needed.
Name: Name of product
Categories: Click the 'add categories' button and choose from the categories that you have previously added by checking the box and clicking 'ok'.
Description: List a description for your product.
Product image: Click 'choose file' and browse your computer for your product picture (if you have one).
In the top right corner there is a box where you can input the product price. Enter a figure in this box. You can also enable or disable availability and manage stock levels from here.
Click 'Save' in the top right corner after you have filled the form in.
You can now click on the other tabs to add extra information about your product. If you click on the 'attributes' tab, there are two fields available to fill in:
- UPC (universal product code): if you have one of these, you can input it.
- Brand: brand / manufacturer of your product.
Click 'save' after filling this in.
Next step is to go to the 'options' tab. This allows you to add variants of your product, for example S, M L for T-shirts etc. To add an option, click on the 'new option' button.
After you have done this, a form will pop up. You will need to input the name of your 'option' / 'attribute' e.g size / colour.
For input type, you can choose from the dropdown list how you would like your options to be displayed:
Drop - down List
Choose one of these and click 'new selection'.
A field will appear where you can enter the name of your first selection e.g blue, large. You can then also modify the price for each selection. All of your options may have the same price but if one is more expensive, you can edit it here.
Keep clicking 'new selection' each time you need to add an option and after you have finished, click save.
Click on the ‘Gallery’ tab to add any extra product pictures. To add a picture, click ‘upload images’.
Once you have done this, an upload images box will pop up. From here you can click ‘choose file’. You can then upload your chosen file from your computer by clicking ‘upload images’.
Your picture will now show up in your gallery, you can add a name for your image and click 'save'.
If you have any files to add to your product listing such as a PDF, you can add these via the 'files' tab.
Just click on the 'files' tab and then click on the 'upload files' button. Once you have done this, a box will pop up where you can choose the specific file from your computer and then click the 'upload files' button.
Once you have done this, click 'save' in the top right corner.
Next, click on the tax and shipping tab. You will come across a form that in the Tax section will say 'no taxes configured' (if you haven't already set up your tax information). To add tax settings, click on the 'tax' link in the top right corner of the page.
A new page will pop up in which you can set up tax information. To do this, you will need to click on the 'New Tax' button.
A form will load with the following fields:
Tax Name: You can leave this as New Tax 1 or call it something else such as 'UK'. Tick / untick the checkbox beneath this to indicate whether you want the tax you are setting up to be enabled for all products.
Tax applies to: You can choose whether tax applies to the subtotal of the order or the subtotal and shipping. Choose from the dropdown. You can also tick / un-tick the checkbox below the field to include tax in the product price.
Zone defines by: choose whether the tax zone is defined by the shipping address or billing address. Choose from the dropdown.
To set the tax rate itself, click on the 'new rate' button. You can now choose your zone from the dropdown. Choose your zone and then input a tax rate for that zone. You can also enter a tax rate for 'other zones'.
If you would like to show included taxes on the product details page, tick the checkbox in the top left corner. Now click save.
Now go back to the 'catalog' tab at the top and the tax rate that you have added should now be showing.
For shipping, you can choose from the options in the dropdown. Once you have chosen your preferred option, you can input a shipping rate into the box provided. To add more comprehensive shipping information, click on the 'shipping' link at the top of the page. Otherwise, click 'save'.
Related products - this is something that you may want to utilize later, when you've added new products. Once you have done this, all you will need to do is click on the 'related products' tab and click on the 'assign products' button.
From here you will be able to add any products from the list as a related product. If you don't have any other products in your catalog, you will get a blank page with no list.
Finally, if you click on the 'html code' tab, you will find some code to add to your concrete5 site that will add your new product / add to bag widget to your site. This adds the product information and 'add to bag' widget individually. You will not need to do this as you added the product browser widget code earlier.
If you visit your concrete5 site, you should now see your new product listed. If you click into it, you will see further product details and the add to bag function.
Managing store profile
Click on the 'System Settings' tab.
Once you have done this, the 'store profile' page will open. Here you can do several things including:
Closing the store for maintenance: To do this, you simply click on the 'close the store for maintenance' button. You can also enter any IP addresses that you want to exclude from this (they will still be able to see the store).
Your store should now look something like this.
Enter your Google Analytics Information: All you need to do is enter your Google Analytics tracking code and click 'save' in the top right corner.
Upload a logo for your invoices: To upload a logo, scroll to the bottom of the 'store profile' page. There will be a section labelled 'invoice logo'. Click on 'choose file' and choose a file from your computer.
Click 'save' at the top of the page after you have done this.
Setting up payment methods
To set up payment, you will need to go to the 'payment' tab under 'system settings'.
Once you have done this, you will be faced with a long list of payment methods.
For credit card : choose your payment processor / merchant from the dropdown box by clicking on the 'choose payment processer' link.
Once you have chosen a processor, a box will pop up with a form to fill in. This asks for your account information for your payment processor (after you have signed up for an account). Here you can also fill in instructions for your customer by clicking on the link.
Don't forget to 'enable' your payment method after you have set it up.
You can set up Paypal Express Checkout by clicking on the 'Paypal Express Checkout' tab and filling in the requested information.
This guide has been written just to get you up and running with your concrete5 ecwid store. There are so many more things that you can do. If you delve into the ecwid knowledgebase (http://kb.ecwid.com/w/page/15853262/FrontPage) you can find out more.
We hope you have found this guide useful. Please let us know how you got on in the comments below.
Leave a comment
Has this guide helped you? Have an idea for a guide or need help? Let us know below.