This feature is available only upon request. To enable it in your account, contact our support team.

Connecting products to an e-commerce system

• Last updated on November 5, 2024
• •
• 4 minutes to read

In this article, you will learn how to create and test product links. Read the concepts of product links in the What is a product? paragraph.

The Links tab

To see your product links, go to your product and select the Links tab. Here you can see all the links to this product.

1. Link name. This is the name of a product link. This name only appears in Customer's Canvas, you can't see it on your storefront.

2. Storefront. This is the name of your integration. To create an integration, read Customer's Canvas integrations section.

3. Storefront Product. This is the name of your storefront product. If you have a custom integration, it will be an ID of your product. If you have an e-commerce integration, it will be the name of a storefront product in a drop-down list.

Let's consider how you can manipulate product links.

Manipulating product links

You can search and delete product links.

Searching product links

You can search for a product by Link name, Storefront, and Storefront Product.

Deleting product links

To delete a product link, click the ellipsis and select Delete.

Adding a product link

To add a new product link, click Add link. In the Edit link dialog box, insert the following fields and click Apply.

1. Storefront. In this drop-down list, you can select a storefront integrated to your BackOffice tenant.

2. Storefront Product. Here you can insert the ID of your storefront product or select a product from your e-commerce storefront.

3. Link name. Here you can insert a name for the link. This name will appear in the Links tab with the list of all your product links. This name isn't displayed in storefronts.

4. Description. Here you can add a description for this product link. It is displayed in Customer's Canvas only.

5. Image. You can upload an image for this product link. It is displayed in Customer's Canvas only.

6. Options and values. Here you can manage options and values. Let's consider them in detail.

Important

After changing the workflow type, for example, from UI Framework to Handy Editor, you need to delete the product link and add it again. Otherwise, the product in the storefront will not update its meta fields and will not load.

Default and include

You can manage options and values in a product link: select the default value and the values to be included in an option.

1. Default. Here, you define what options will be preselected when a page loads.
2. Include. Here, you can select what values will be available in this product link.

Note

If you select only one value in an option, this option won't be displayed in a page, and this value will be preselected when a page loads.

Let's see how you can fix issues in a product link.

Including values

In a product link, you can manually manage what options and option values will be included. This allows you to change the content of your storefront product.

Let's see an example.

Imagine that your product is a T-shirt, and you have the following options and option values:

• Red: Scarlet, Rose, and Ruby.

• Blue: Indigo, Navy, and Cerulean.

• Yellow: Lemon, Flaxen, and Canary.

If blue and yellow T-shirts are out of stock right now, you may want to show only red T-shirts.

In this case, you will only include Scarlet, Rose, and Ruby colors. As a result, your storefront will only offer Scarlet, Rose, and Ruby T-shirts.

Containing several product links

You may create several product links in one product. In this case, they will be connected to different storefront products.

Let's see an example, when you created a T-shirt product in Customer's Canvas and have the Red T-shirt, the Blue T-shirt, and the Yellow T-shirt products in your storefront.

You may connect your BackOffice product to your storefront products by different product links.

In each product link, you include corresponding options and values. Let's see the included options for each product link.

• A product link for Red t-shirt will include Scarlet, Rose, and Ruby.

• A product link for Blue t-shirt will include Indigo, Navy, and Cerulean.

• A product link for Yellow t-shirt will include Lemon, Flaxen, and Canary.

As a result, each storefront product will display only included values from a connected product link.

Now let's consider how to create a product link.

Fixing missing values

If you change options and values in your product, you can't save the changes without fixing a product link. In the Links tab, you will see a warning sign at a product link.

For fixing missing values, click the ellipsis and select Edit. In the Edit link dialog box, you can see a warning sign near the deleted option. Click Fix missing values to delete an option.

Testing links

You can test how your product link will look to customers. This feature is called a preview. In the preview, you can see your personalization process as a customer.

You can see a preview by two ways:

• Go to the Products list, click ellipsis in the product row, hover over Preview and select a product link. In this example, the link is My link name.

• In the Links tab, click ellipsis in the product link row and then click Preview.

---

Now, your products are on the storefront, and you only need to define their SKU.