If you sell products online and send emails about them, manually copying images, names, and prices into every template is one of the fastest ways to make mistakes. Topol PRO solves this with built-in Product Feed integration. Connect your store's product feed, and every product becomes available in the editor, ready to drop into any email.
The Product block is one of the most powerful tools in the editor for retailers and email marketers.
This guide walks through the whole workflow: importing a feed, picking the products you want to feature, choosing a layout, and styling the result. By the end, you'll know how to use the Product block like a pro! 😉
1. Importing Product Feeds
A Product Feed is a file (usually in .xml format) that describes your e-commerce products in a structured way (including names, descriptions, images, prices, and links to the product pages).
Topol PRO expects an XML feed in a format similar to Google Merchant, where each product is contained within an <item> element, wrapped by a <channel> and an <rss> root element.
Example product feed in .xml format (also available on this URL)
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 you can use any of this data in the editor, the feed needs to be imported into the Topol application:
In the Topol application, open Editor settings (1).
Switch to the Products tab (2).
Give your new feed a name, paste the feed URL, and pick your currency.
Click Create product feed (3).
The new feed appears in the list directly below the form.
2. Managing Product Feeds
You can connect as many product feeds as you like for different stores, catalogs, or regions, and manage them all from one place: the Product Feeds list.
After a few seconds of processing, the new feed's status changes from Processing to Completed. If it stays on Processing for more than a minute, try refreshing the page. Once a feed is marked as Completed, its products are available across every template you build in the Topol PRO editor.
For each feed, you'll see three options:
Products (1) - a quick overview of every item extracted from the feed.
Sync (2) - pulls the latest data from the feed URL whenever your store's catalog changes.
Delete (3) - removes the feed from the application.
To verify that your feed contains the correct products, click "Products" and check the preview:
3. Adding the Product block to your template
Once a feed is connected, go to the Topol PRO editor. Products are added to emails using the Product block.
A single Product block displays one product card with up to six pieces of information: image, title, description, price before discount, price, and a button (CTA). You can show or hide any of these, change their order, and restyle them. More on this later.
To get started, just drag and drop the Product block onto your template.
4. Picking products
After you drag a Product block into the template, the next step is choosing which products it should display. The Product block lets you pick as many products as you want from any of your connected feeds. They get saved into the template, so what you see in the editor is exactly what your recipients will see in the email.
Here's how to pick products:
Click the Product block to open the selection modal.
In the modal, pick a feed from the dropdown.
Browse or search the paginated feed in the All Products tab, then tick the products you want to include. Click the Select all or Deselect all buttons to select or deselect all currently displayed products.
All ticked products will appear in the Selected Products tab. Switch to the Selected Products tab to verify that it contains all the products you need, or remove any you decide not to add.
Click Select products in the bottom right to add selected products to the block.
When choosing products, you can switch between feeds to select products from different feeds. This lets you combine products from multiple feeds into a single product block.
5. Choosing the layout
The Product block offers several layout variants, so you can present the same data in whichever way best fits your template.
Layout style (1)
Three options decide how the image and the text relate to each other in a single product card. These are:
Image–Text: image on the left, text and button on the right.
Column: image on top, text and button below.
Text–Image: text and button on the left, image on the right.
Items per row (2)
You can also decide how many products sit next to each other in a row, from 1 to 4. For a clean two-column grid, set this to 2. For a wider showcase, set it to 4. The block automatically arranges your selected products into rows based on this number.
Stack columns on mobile (3)
Finally, there's a toggle that determines the mobile layout: whether your products stack vertically in a single column or stick to the desktop layout. Stacking keeps every product readable on small screens, while keeping them side by side preserves the desktop look across all devices. The right choice depends on your template. This option also ignores the Max per row setting and, when enabled, always creates a single product row.
On: On mobile view, all products stack into a single column.
Off: In mobile view, products retain their desktop layout.
Enable centering when you want the block to feel balanced and intentional, even with an uneven number of products. Leave it off when you'd prefer to preserve a strict, predictable grid alignment across the entire block.
6. Customizing the Product block
The product inside the Product block may look like a single card, but under the hood, it's still made of separate elements (image, text, button) that you can style independently.
To customize a piece, click the product block; its properties open in the left panel.
Aside from the Layout section, which we've already covered, the Product properties panel includes three other key sections:
Items: Customize the list of products inside the selected product block. You can add a new product, replace or remove an existing one, or reorder them. Expanding a specific item lets you replace or edit the product image and update its alt text or title. If you add a new product, it will inherit the styling of other products in this block.
Column: Controls the styling of the product block as a whole. Here you can change the background color, the margins around each product, and the borders around individual products or the block itself.
Product properties: While the Column section handles the block-level styling, this section lets you style every part of the product card individually. You can adjust font sizes, colors, font families, alignment, and visibility for each element (Image, Title, Description, Price, and so on).
You can fully restyle and reorder the existing pieces of the Product block, but you can't add brand-new content blocks inside it (e.g., additional text or images). The Product block is built around its predefined structure. If you need something more custom, build it as a separate block alongside.
Conclusion
Working with product feeds in the Topol Editor is both elegant and straightforward. Connect your feed once, handpick products for each campaign, choose a layout that fits the template, and style the result to match your brand. All of this without manually copying a single image URL.
If you run into any issues, please don't hesitate to contact our support team!