How to create a product catalog from scratch with a feed

Overview

With Flipsnack's automation, you have the flexibility to create fully customizable layouts that reflect your brand’s unique style. You can decide exactly how your products are displayed, connect each design element to your product data, and automatically sync any changes from your spreadsheet.

Schedule a consultation with our product experts for personalized assistance.

Step-by-step guide

1.  Download a template to set up your product feed

To start, go to the Automation panel in Flipsnack (bottom-left corner of the dashboard). From there, click Import Feed. 

A pop-up window will appear where you can click Download Templates to access the available product feed options.

In the downloaded folder, you will find two templates, and the differences between the two are:

• Simple Product Feed: Designed for products without variations. It's straightforward and ideal for simpler inventories.
• Variant-Rich Product Feed: Includes detailed attributes such as color, size, material, and more, perfect for products with multiple variations.

Once you download your preferred template, we recommend uploading it to Google Drive and opening it in Google Sheets, because it will be easier to update. 

2. Add your product information to the spreadsheet 

After opening the spreadsheet in Google Sheets, you can start customizing it based on the information you want to display in your catalog. Each column should represent an element you want to automate, such as Name, Price, ImageURL, or Description. If you don't need a particular column, you can delete it. 

Formatting rich product descriptions using HTML

With our latest product feed enhancement, descriptions are no longer limited to static plain text. You can write standard HTML formatting tags in the Description column of your spreadsheet. 

When a reader clicks on a shopping tag or interactive checkout button in your published catalog, the Product modal preview window will automatically render your description with clean line breaks, bold phrases, or clean lists instead of squashing it into an unreadable text block.

The following basic HTML elements are fully permitted and supported within the product description field:

• or , for bolding key specifications.
• or , for emphasizing notes or categories.
• 
, for introducing clean, forced line breaks.

• , for organizing your descriptive copy into separate paragraphs.

• and
  • , for displaying clean, bulleted feature sets.
  • and
    • , for itemizing structured technical points or numbered details.

  Rich text spreadsheet example:

  To display a beautifully structured product layout in the client modal view, insert the formatting strings into your spreadsheet cell exactly like this:

  <p>The is a <strong>NEW</strong> product from our <strong>best</strong>category of products.
  </p> We urge you to go through the product
  listing and see what the product information tells you:
       <ul>
        <li>Item one</li>
        <li>Item two</li>
        <li>Item three</li>
       </ul>  Main product points:
       <ol>
        <li>First point</li>
        <li>Second point</li>
        <li>Third point</li>
       </ol>

  When you click Preview or open the Product modal on your published catalog, you will instantly see that the description displays with its correct formatting and structure.

  3. Upload the CSV/Spreadsheet to Flipsnack

  Note:  There are two ways to import product feeds: 

  • From the main dashboard: Go to Automation (bottom left) → Import Feed to add your product feed.
  • From Design Studio: Add feeds directly while editing your catalog → Add feed

  From the main dashboard

  On the main dashboard, go to Automation, on the bottom left side, click on Import feed.

  

  From Design Studio

  Choose a catalog you want to add your product feed to and click on Automation from the left panel. Click on the bottom Add feed. 

  Whatever option you choose, you have three options for where you add your data: Upload CSV, Google Drive or Import URL. 

  

  For this example, I will connect to my Google Drive, because it will be easier to update it later on if I make any changes to my spreadsheet, if needed. 

  Click on the Connect Google Drive. You will have to log in to your account. From your account, you can pick your spreadsheet and wait until it's imported. 

  4. Map the product feed to Flipsnack 

  After the upload is complete, the mapping modal will open, called Map feed content, allowing you to connect your spreadsheet with our platform.

  

  At the top, Select unique ID shows the column that identifies each product. A warning tells you that if you change the unique identifier, Flipsnack cannot push future updates to the products in the flipbook.

  Under AI mapping, Flipsnack maps your feed columns automatically. Check each row and change it if necessary.

  If not, for example, if you have "Product code" instead of "SKU" you will need to map it manually so it can make the connection between your feed and our platform. 

  Important: It’s mandatory to have a valid column with the SKU in the spreadsheet because that is how it will help to sync your catalog if it has any changes. If it’s not valid, an error will appear. 

  After you make sure that the feed columns are properly mapped, click Save changes.

  5. Create the catalog 

  Go to Home in Flipsnack, click Create, then click Create from scratch.

  

  6. Set the layout

  Decide the structure of your catalog, organize placeholders for product elements such as images, titles, and descriptions, or you can add a button as well; here, you are flexible. 

  These placeholders later connect to your product feed.

  Tip: For the image, you can use a square element and make it a mask by toggling on the Use as mask in the top-left corner. 

  

  When ready, select all elements, click Group, from the upper right corner on the three dots. Then click the link icon in the upper right corner. The Connect to feed window opens.

  

  7. Map the grouped elements 

  In the Connect to feed window:

  • Selected element, on the left, lists your grouped elements.
  • Feed column, on the right, lists the columns of your feed.

  Match each element (e.g., “Product Name”) with the appropriate feed field.

  Once done, click Save changes.

  Then go to Automation, from the Side navigation,  and drag and drop the products from your product feed into the layout you made. 

  Tip: To make the process faster, duplicate the element by using Ctrl+D on Windows or Cmd+D on Mac.  A duplicated section will already be connected to the feed, and then just drag and drop it. 

  Once you have added your products, click the Preview button in the upper right corner to test if it worked properly.

  8. Add barcodes to your products

  If your catalog needs a scannable code for each product, add a Barcode element and connect it to your feed the same way you connected everything else.

  • In Design Studio, open the Elements panel and pick Barcode from the Graphics section.
  • Place it inside your grouped product elements, so it gets copied along with the rest of the layout.
  • Choose the barcode type in the panel. Code 128 is picked for you and works for most catalogs.
  • Open Connect to feed and map the barcode's code slot to the column that holds your codes.

  

  Each product you drag in now gets its own barcode, generated from that row.

  Note: The barcode has its own mapping slot. It does not reuse the SKU mapping from your shopping button, so map it yourself even if both point at the same column.

  If a row has no code, or the code does not fit the type you picked, that product shows no barcode instead of a broken one. For everything the element can do, see How to add a barcode to your flipbook.

  9. Add an interactive shopping button

  If you want your customers to order directly from your catalog, you can make it shoppable by adding interactive shopping buttons.

  If you only need a single button for your product, you can add it here. However, if your catalog contains multiple products or variants (for example, different colors or sizes), we recommend reading the dedicated article on variants. 

  To add a button, go to the Interactivity tab and insert a Shopping Button. Make sure the button is part of your grouped elements, then click the link icon to open Connect to feed.
  In the mapping modal, scroll down to the Shop Button section and select what you want to display on the button.

  You can customize:

  • Button color and label (Shop.Button.Color, Shop.Button.Label)
  • Tooltip and overlay (Area.Element.Tooltip, Area.Element.Color, Area.Element.Opacity)
  • Website link or secondary action (Website.Link, Website.Button)

  Your catalog is now interactive and fully automated.

  

  After you update a feed, you can update every catalog that uses it in one action. See Update every catalog that uses a feed.

  Next steps

  • Prepare your spreadsheet for Flipsnack automation
  • How to create a product catalog from a feed
  • Automation for product variants 
  • How to create a product catalog using the Product Catalog Generator
  • How to use synchronization for Automation in Flipsnack
  • How to automate multimedia elements in your digital publications
  • How to turn your PDFs into shoppable catalogs and automate the process
  • How to prepare your datasheets for automation

Need expert support?

Our team is here to help. Connect with our team experts or message us via the live chat for personalized assistance.