Register

What is a Product Element and how can I use it to design my newsletter?

The Product Element allows you to add a product from your website to your newsletter.
You'll find it along with the other available design Elements inside the Elements category on the left side of your Editor page.  

Let's see how you can add one to your structure:

A. Adding a product element 

1. Click on the Elements button, located on the left side of your Editor page.
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_a1.png

 

2. Drag-n'-drop the Product element, from the Elements list to a container inside the Editor page.What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_a2.png

A. Setting up the product element

1. Double click on the Product element to select a product.What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b1.png

2. In the pop-up that appeared, select a website from the drop-down. 
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b2.png

On this drop-down you can see all the tracking websites that are connected and verified with your Moosend account. Don't forget that you always connect a new website with your Moosend account.

 

3. Once you select a website, the field Search Product will appear. Search for a product that you want to use.
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b3.png

Keep in mind that in order for a product to appear here, a tracking event (e.g. Product view, Added to cart etc) for this specific product should have occured before.

4. Click on the Select button to add the product in your design.
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b4.png

The product will appear in your design and its settings instantly become available on the left side of the Editor page.

5. Click on the Background Color option, to choose the background color for your Product element out of a palette.
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b5.png

Most of the times the default transparent option is the one that works best, but sometimes adding background color might help you better integrate an image to the style of your design, especially if you intend to resize the image so that it doesn't take up all of the container space.

 

6. Tick this box if you want to use this specific product for Gmail Promotions Tab
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b6.png


7. Click-n'-drag the designated bottom-right corner of your image to resize it.
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b7.png


8. Check the additional options now made available on the image settings, on the left side of the editor page. 
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b8.png

 

The new options are there to help you make the image sit perfectly inside its container. These are:

  • Crop
    Opens the crop pop-up which focuses on the image and provides you with efficient cropping tools.
  • Natural Size
    Resizes the image back to its original dimensions.

  • Full Width
    Resizes the image to cover the maximum possible width inside the container.

  • Image Picker
    Allows you to upload an image from your computer, or directly from various other sources, such as Facebook, Instagram, Dropbox, Giphy, and many more!

  • Remove Image
    Removes the image from the article.

 

9. There some more product related settings: 
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b9.png

  • Description
    This is the description of the selected product. You can leave this field empty or add a description of your choice.

  • Price
    This is the price of the selected product and will automatically be filled with the product's price number, depending on the value you pass through the tracking events. If no value is passed through the tracking events, we will display a default one. You can leave this field empty or add a price of your choice.

  • Old Price
    This is the old price of the selected product and will automatically be filled with the product's price number, depending on the value you pass through the tracking events. If no value is passed through the tracking events, we will display a default one. You can leave this field empty or add an old price of your choice.
  • Product Code / SKU
    This is the product code of the selected product and will automatically be filled with the product's code, depending on the value you pass through the tracking events. You can leave this field empty or add a product code of your choice.
  • Button Link
    This is the URL of the selected product and will automatically be filled with the product's URL, depending on the value you pass through the tracking events. You can leave this field empty or add a URL of your choice.

  • Button Label
    This is the label of the button which contains the URL of your product. By default says "Shop now" but you can change it to a label of your choice. 

10. Click on the Select a product button to replace the current product or to add new product if you didn't select one. 
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_b10.png

 

C. Additional Editing Options

There are several more options within the Product Element Settings menu, allowing you to tweak your Product Element to your heart's content!
What_is_a_product_element_and_how_can_I_use_it_to_design_my_newsletter_c1.png

Click on each option to expand its menu. You have the following editing options to play with: 

Clicking on the links above will provide you with all the necessary information you might need for each style, including some details which you might deem useful.