All Collections
How to add an e-commerce block to your Flodesk email
How to add an e-commerce block to your Flodesk email

A step-by-step guide on adding and customizing the e-commerce block in Flodesk emails

Petra Molnar avatar
Written by Petra Molnar
Updated over a week ago

How can you transform your Flodesk emails into a virtual storefront that beautifully displays your products and offerings to maximize sales? By simply adding an e-commerce block to your emails that showcases your products in a variety of beautiful formats so your offerings look just like billion-dollar brands.

What is the e-commerce block

The e-commerce block is a special type of block in the email builder that allows you to display your own (or affiliate) products in a variety of ways and make sales directly from your emails—without the need to create a sales page.

How to add an e-commerce block to your email

Step 1. In your Flodesk account, create a new email or open an existing one to edit it

Step 2. In the email builder, hover over an existing block until you see the plus sign (+). Click it and select the E-commerce option

Step 3. On the right sidebar under the Layout tab, choose from a variety of pre-designed e-commerce layouts and start customizing them to match your brand’s look and feel.

How to customize the e-commerce block

Step 1. Once you select the E-commerce block layout you want to use, click on the Block settings tab. Here you can control what parts of the E-commerce block you want to show in the email by toggling the following sections on/off:

  • Title

  • Price

  • Description

  • Button

Step 2. Use the Products slider to set the number of products to display in your e-commerce block

Note: Each e-commerce layout block has a maximum of 9 products. If you have more than 9 to feature, you can simply add additional e-commerce blocks below.

Step 3. Under the Grid settings, you can:

  • Choose from displaying your products in a single, double, or triple column layout

  • Modify how you want the text, description, price and button to display

Some of the style options will also allow you to modify the alignment of the images, so you can left / right align the images or even alternate them to display from left-to-right and right-to-left.

Step 4. To edit the font type, size, and color, click on any of the text elements like the title, description, or price fields to access the font editing options.

The price text box will allow you to strikeout any value to show a discount or price change.

Step 5. Click any of the image placeholders to select from a variety of shapes and then start uploading your images.

Step 6. Click on a button element to access all the available button styling options under the Button tab, including

  • Button shape

  • Button fill color

  • Button border color

  • Width selector

If you click on the Font tab, you can customize the

  • Button font

  • Button font size

  • Button font color

To hyperlink your product card to your website, sales page, landing page, or checkout page, go to the Link tab and enter the relevant web address. Repeat this step for each individual product card.

Note: you don't need the Checkout feature in order to use the e-commerce block in your emails. You can link each featured product to any product details page you'd like—whether it's a Flodesk Checkout page or not.

And that’s it! 🙌

Customize the rest of your email, hit send, and experience the difference an e-commerce block makes in boosting your sales.

Pro tip: If you’d like to send limited-time offers to your audience, add a Countdown timer block to your email.

Let’s sum it up

To add an e-commerce block to your email, do the following:

  • In the email builder, hover over an existing block until you see the plus sign (+), click it and select the E-commerce option

  • Customize the e-commerce block with your product images, brand colors, fonts, shapes, and more!

More to learn

Did this answer your question?