Sell products on your Matrix site using Ecwid E-commerce
This guide will take you through the steps needed to add an Ecwid E-commerce store to your Matrix website.
| You can follow the general steps in this tutorial to add any ecommerce store to your Matrix site. The ecommerce platform only needs to offer an integration snippet for you to integrate it into your website. |
Before you start
Before you start, make sure you check that you have the following prerequisites met:
-
A Matrix website with a publicly accessible URL.
-
Read Creating your first site and content page to learn how to create a basic site.
-
Download one of the website templates from the Squiz Marketplace if you want a solid foundation for your ecommerce site.
-
-
An Ecwid E-Commerce store as described in the Create an Ecwid E-commerce store section.
Create an Ecwid E-commerce store
The Before you start section requires that you have access to an Ecwid E-Commerce store so that you can test out the storefront integration.
If you want to try this tutorial but do not have an Ecwid store set up, you can get started quickly by following the Ecwid Getting Started instructions. Ecwid E-commerce offers a free starter account for life, which offers more than enough functionality for this tutorial.
You only need one product available to select through your embedded storefront so you can test out the integration.
Create a standard page with a code component
You use a standard page asset with a code content component to store the Ecwid integration code.
-
Right-click on your site asset and then select
-
Name the standard page "Store" and select Create.
-
Select Edit to open the Store page and then select the Content tab.
-
Add a Code content component to the page.
Add the Ecwid integration code to the code component
Ecwid offers several plugins you can use to integrate your store into websites, social platforms, and automation platforms.
Use the supplied Ecwid integration code and place this inside the Code content component you set up in Create a standard page with a code component.
-
In the Ecwid section of the dashboard, scroll to the Sell on your website section of the page.
-
Select the Custom website tile to open the Add your store to any page integrations page.
-
Follow the instructions to copy the Ecwid integration code to your clipboard.
-
Back in Matrix, paste the integration code into the code component.
-
Select Save to add the store integration snippet to the page.
Test the integration
The Store integration is set up, and you can now test the Ecwid store within the context of your Matrix site.
-
On the Store page, select in the toolbar.
-
Click on the URL in the Current URLs field to view the page.
The page is still unpublished, so areas of your site will not yet display the Store page correctly. -
Click on items in your store and check that the Ecwid purchasing workflow functions correctly inside your site.
-
Once you are happy with the integration, use the Change status field on the Details screen to make the page Live.