Help Center

Menu

Sell products on your Matrix site using Shopify

This guide will take you through the steps needed to add a Shopify Buy Button or Buy Button collection 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 Shopify store as described in the Create a Shopify store section.

Create a Shopify store

The Before you start section requires that you have access to a Shopify store so that you can test out the storefront integration.

If you want to try this tutorial but do not have a Shopify store set up, you can get started quickly by following the Shopify online store set up instructions. Shopify offers a free 14-day trial account 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 Shopify Buy Button 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 Shopify code to the code component

Shopify lets you embed a single product or a collection of products using a Buy Button. Read the Buy Button documentation for an introduction to this concept.

To integrate with Matrix, use the supplied Shopify Buy Button integration code and place this inside the Code content component you set up in Create a standard page with a code component.

  1. From the Shopify admin, create a Buy Button for a product or collection, and then copy its embed code.

  2. Back in Matrix, paste the embed code into the code component.

  3. Select Save to add the store integration snippet to the page.

Test the integration

The Buy Button integration is set up, and you can now test the purchasing flow 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. Use the Buy Button integration to check that the 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.