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:

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.

  1. Right-click on your site asset and then select New Child  Pages  Standard page

  2. Name the standard page "Store" and select Create.

  3. Select Edit to open the Store page and then select the Content tab.

  4. 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.

  1. In the Ecwid Sales channels  Overview section of the dashboard, scroll to the Sell on your website section of the page.

    ecwid sales channels overview
  2. Select the Custom website tile to open the Add your store to any page integrations page.

  3. Follow the instructions to copy the Ecwid integration code to your clipboard.

  4. Back in Matrix, paste the integration code into the code component.

  5. 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.

  1. On the Store page, select More screens  URLs in the toolbar.

  2. 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.
  3. Click on items in your store and check that the Ecwid purchasing workflow functions correctly inside your site.

  4. Once you are happy with the integration, use the Change status field on the Details screen to make the page Live.