Skip to main content

E-commerce products in Topol

Topol PRO makes building engaging, product-rich emails simple and efficient with its Product Feed integration.

Erik Vlčák avatar
Written by Erik Vlčák
Updated this week

Topol.io simplifies the process of creating product-rich email templates with its powerful e-commerce product feed integration. Designed for marketers and online retailers, this feature allows users to import and manage large volumes of product data directly within the Topol editor, removing the need for repetitive manual input and minimizing errors.

General overview

The foundation of this feature is the product feed—a structured code in XML format that contains key information such as product names, descriptions, images, prices, and links. Users can add these feeds through the Editor Settings by providing a feed name, selecting the currency, and pasting the URL to the XML data. Once uploaded, the system processes the feed, making products instantly available for use across all your templates. Our editor supports multiple feeds, enabling retailers to manage different catalogs or regional inventories effortlessly.

You can either import information about your products from an external source into your template or input it manually. Each option has its own pros and cons:

1. Automatic import

  • All product information is imported into the application simultaneously from a product feed in XML format (accessible via URL).

  • Imported product information is available in all your templates.

  • If you update data in the product feed, all product information in the templates will be updated with the new data.

  • Requires an XML product feed from your supplier with the appropriate structure.

  • Requires basic understanding of XML data structure for possible modifications.

  • If your XML data are not correctly formatted, the import of products may not succeed.

2. Manual input

  • Easy to set up.

  • You have complete control over product information.

  • All data is entered manually in the editor; no XML files are required.

  • If product information is updated, you must manually change the data in all your templates.

  • Since data is not imported automatically, entering them manually will be more time-consuming.

  • Product information can not be easily copied within templates; everything must always be created from scratch for each template.

Let's describe the steps of workflow separately, shall we?

1. Automatic import

1-1 Importing Product Feeds

A Product Feed is a file typically in .xml format containing structured data about your e-commerce products.

Topol PRO expects an XML feed similar to a Google Merchant product feed format, where each product is represented inside an <item> element, and the parent is usually <channel> within a <rss> root.

Example product feed in .xml format (also available on this URL)

<?xml version="1.0" encoding="UTF-8"?>

<rss version="2.0" xmlns:g="http://base.google.com/ns/1.0">
<channel>
<title>Demo Product Feed</title>
<link>https://example.com</link>
<description>This is a demo feed for Topol.io</description>

<item>
<g:id>201</g:id>
<g:title>Modern Ceramic Vase</g:title>
<g:description>Elegant vase perfect for home decor and fresh flowers.</g:description>
<g:link>https://example.com/products/ceramic-vase</g:link> <g:image_link>https://images.pexels.com/photos/993626/pexels-photo-993626.jpeg</g:image_link>
<g:price>39.99 USD</g:price>
</item>

<item>
<g:id>202</g:id>
<g:title>Leather Journal Notebook</g:title>
<g:description>Handcrafted leather-bound journal with vintage paper.</g:description>
<g:link>https://example.com/products/leather-journal</g:link> <g:image_link>https://images.pexels.com/photos/7431638/pexels-photo-7431638.jpeg</g:image_link>
<g:price>24.50 USD</g:price>
</item>

<item>
<g:id>203</g:id>
<g:title>Minimalist Wooden Chair</g:title>
<g:description>Comfortable and stylish chair made from natural wood.</g:description>
<g:link>https://example.com/products/wooden-chair</g:link> <g:image_link>https://images.pexels.com/photos/11112738/pexels-photo-11112738.jpeg</g:image_link>
<g:price>120.00 USD</g:price>
</item>

</channel>
</rss>

Before using this data in Topol Editor, you must first import the XML feed into the Topol application. Follow these steps:

  1. While in the Topol application, navigate to the Editor settings.

  2. Select the Products tab.

  3. Enter a name for your new product feed, the product feed URL (feel free to use the URL of the example product feed), and your preferred currency.

  4. Click on the Create product feed button

This will add the new product feed to your list of product feeds located directly below the Product feeds form.

1-2 Managing Product feeds

You can add as many product feeds as you like and manage them all from one location - the Product Feeds list.

After a few seconds of processing, your new feed's uploading status will switch from "Processing" to "Completed" (if this does not happen within a few minutes, try refreshing the page). Products from successfully uploaded feeds are then available in the editor and can be accessed from every template.

To manage each product feed, you can use these options:

  • Products: provides a quick overview of all items extracted from the product feed (shown in the image below).

  • Sync: updates the product list when the feed at the URL changes.

  • Delete: removes the feed from the application.

1-3 Adding products to your template

Products from your feeds can be added to any template via the Product content block.

Product blocks have a pre-defined layout and can contain this information about your product: image, title, description, price before discount, price, and button CTA.

Simply drag and drop the Product block to your template. It should look like this:

To connect this layout with actual data from your product feeds, follow these steps:

  1. Select any of your Product blocks so you can see its properties in the left panel.

  2. In the "Select product" section, click on the "Feed" input field and choose from your imported feeds based on the names you assigned to them.

  3. In the "Product from the feed" input, choose a product from the feed whose data should be displayed in the selected Product block.

The selected Product block will then be automatically filled with appropriate data from your feed. If some data are not displayed properly, you may need to adjust the XML code, as our editor may not recognize the used tag. If you are not able to do so, you can always hide this information from the Product block, as described in the next section.

1-4 Modifying Product block

Even though the Product block comes as a one-piece, under the hood, it still acts as a column constructed from different content blocks (image, text, button). Therefore, the content can be easily modified further, just as you would modify any other block. However, there is a catch: you can only work with the provided layout, and you can not add any additional content blocks, even if it may seem possible. To modify the provided layout (change the style, order, and visibility of each piece of information), we have made special Layout options. There, you can select and modify each information as you wish. If your product does not contain certain data, click the Eye icon to hide this section from the Product block. There is also an option to "Apply the same attributes to all products" - so as you style one, all others will gain this appearance.

2. Manual import

2-1 Adding products to your template

Since this workflow does not require any setup steps for importing XML data from external sources, we can jump straight into adding the Product blocks to our template. Simply drag and drop the Product content block to the appropriate place in your template. As a result, you will see the base layout with no information.

2-2 Modifying Product block

Now, let's tackle the more time-consuming aspect. You are responsible for manually inputting the appropriate data into each Product block as if you were working with any other content block. Simply click on the Product block and replace the default Merge Tags with your product information. Similarly, adjust the images and buttons to fit your needs. You can access the same Layout options mentioned in sections 1-4.

As you may have noticed, the predefined structure of the Product block includes specific Merge Tags. If your database has the necessary data to populate these, you can leave them in place.

Conclusion

Working with product feeds in the Topol Editor is both elegant and straightforward. We have invested significant effort to ensure this process is as failsafe as possible. However, if you encounter any issues, please do not hesitate to contact our support team.

Did this answer your question?