Boxes - Edit Image for Facebook Dynamic Ads

Image Requirements for Facebook Dynamic Ads

Summary:

When delivering your data feed to Facebook in ordert to set up Dynamic Products Ads it is important that your product images have the correct format: For Single Products Ads the ratio is 1.91:1 (1200 x 630 pixels), for Carousel Product Ads it's 1:1 (600 x 600 pixels). The resizing can be achieved within a few clicks on the Productsup Platform.

Moreover you are allowed to add text, graphic layers or logos to your images and have the possibility to deliver a mosaic image that shows your product from multiple angles. While the product data feed is really similar to the Google one, the image_link is the attribute that really sets those two feeds apart as you are not allowed to manipulate your images for Google Shopping.

If you want to learn more about Facebook Dynamic Ads download our Guide for Facebook Dynamic Ads and don't hesitate to contact our support at k2@productsup.comin case of general questions about the feed or whenever you run into issues with the boxes.

Important:

  • Please don't combine the former image boxes with the FB ones: They are two completely different systems and mixing them will not lead to a working image.

  • After the FB Image Boxes are applied, the images will be rendered on the fly when the image link is accessed. They will not be hosted/store on our servers, but the link will change from the original input to a Productsup link.

Boxes Overview

Where to find them:

In Data Edit click the dropdown labeled "All Boxes" and select "Edit Image". When filtering for "FB" the platform will show the image boxes and filter out the former image boxes.

Scope of the Boxes:

  • Resize your images to the size requested by Facebook

  • Trim the borders of your images

  • Add layers and texts with static or dynamic content

  • Add images or logos to your pictures

  • Create mosaic images

33c04cc53d48261d4dec9b72df02c183.png

Three terms to keep in mind

As our image service is oriented towards classical image editing software you will find terms like Padding, Margin and Border.

Summary:

  • Padding: Space between the content and the border of the defined area

  • Border: Space inside, outside or in the center of the defined area

  • Margin: The space outside the border

7381ef33a7f581d365660f1b66e8b412.png

1. FB Image Resize

Goal: Resize images to either make them smaller or fill them up with a background color

Box Input:

  • Width: Defines the width of the output image in pixels

  • Height: Defines the height of the output image in pixels

  • No Background color: Select it if you do not need any background color.

  • Background color: If your input image is smaller than your desired result you can choose the background color for the fill. By clicking into the field a color scheme will open - alternatively you can enter a hex color code.

  • Zoom: Choose between different zoom methods (Top/Middle/Bottom in combination with Center/Left/Right) to decide which parts of your image should be cropped away.

  • Image Format: Select your desired format jpg/png.

efe4d0973c692fbedd95efd95a3f6f33.png

Important: Using this box will crop away the parts of the image that are exceeding the limit you defined in the box. This may result in your image link being cut off.

If you want to reduce your original image to the selected size use the FB CreateImage box (8.) and enter the desired size there. Afterwards add the FB Image AddImage box (2.) and choose the image input column from your feed.

2. FB Image AddImage

Goal: Add a static image on top of your input image (e.g. your shop logo) or choose from a dynamic image input from your feed (e.g. brand logos)

Box Input:

  • Coordinates: By clicking into the field a preview image will appear and by clicking into the image you can define the area where you want your additional image located.

  • Source: Enter the image URL of the additional image here if it's a static input from outside your feed.

  • Or Image Column:: If there is a column in your feed containing your desired image, select it in the dropdown.

  • Transparency: Select the transparency of the added image on a scale from 0 (no transparency) to 100 (fully transparent)

  • Zoom: Choose between different zoom methods (Top/Middle/Bottom in combination with Center/Left/Right) to decide which parts of your image should be cropped away.

  • Padding: Defines the amount of padding between the selected area and the additional image (0 = no padding)

c969aa4a95d6b9400f519b9061481bb2.png

3. FB Image Add Layer

Goal: Add colored layers on top of your input image as a canvas to add text upon

Box Input:

  • Coordinates: By clicking into the field a preview image will appear and by clicking into the image you can define the area where you want your layer located.

  • Color: By clicking into the field a color scheme will open - alternatively you can enter a hex color code to define the color of your layer.

  • Color Column: If you have a column containing hex values, it can be selected here.

  • Transparency: Select the transparency of the added image on a scale from 0 (no transparency) to 100 (fully transparent)

  • Border width (px):: Defines the width of the border separating the layer from the surroundings

  • Border color: Define the color of the border either over the color scheme or your hex code

  • Border opacity: Choose the opacity of your border on a scale between 0 (full opacity) and 100 (no opacity)

  • Border position: Choose the position of the border in the dropdown to have the border centered on the edge of your defined area, outside or inside of it.

  • Margin (px): Defines the margin outside of your defined area

Figure 1. AddLayer
AddLayer


When clicking on Coordinated you can mark the part of the image you want to place a layer on.

931835b35744d8e0be9769e2bf8ce2a9.png

4. FB Image AddText

Goal: Add static texts or dynamic contents fron your feed to your input image

Box Input:

  • Coordinates: By clicking into the field a preview image will appear and by clicking into the image you can define the area where you want your text located.

  • Input from: Choose the column with your desired content

  • Text before: Here you can enter a static text that appears beforeyour before defined dynamic input

  • Text after: Here you can enter a static text that appears afteryour before defined dynamic input

  • Max Text Length:: Defines the amount of characters that should not be exceeded and will cut off any characters after the defined amount

  • Font: Define the color of the border either over the color scheme or your hex code

  • Font color: Choose between a variation of fonts in the dropdown

  • Align: Defines the position of your text within the defined area

  • Padding: Defines the amount of padding between the selected area and the additional image (0 = no padding)

  • Max Font Size (px): Define a max font size when adding multiple AddText boxes to make sure your texts have the same size

545bcbbdf42e3aec0e2dfbbf9d7ca833.png

5. FB Image AddCart

Goal: Include a call-to-action to make sure the user clicks on the ad

Box Input:

  • Coordinates: By clicking into the field a preview image will appear and by clicking into the image you can define the area where you want your cart logo located.

  • Text: Here you can enter a static text that appears within your cart image

  • Background color: Define the color of the area around the cart image

  • Text color: Choose between a variation of fonts in the dropdown

  • Margin (px): Defines the margin outside of your defined area

4de417b241cabbe82f3542b520cd2754.png

Example with all those boxes applied:

0486385b90b833ca8fcb53e04cd26e5c.jpeg

6. FB Image Add Rating

Goal: Include the ratings for your products directly on the input image

Box Input:

  • Coordinates: By clicking into the field a preview image will appear and by clicking into the image you can define the area where you want your cart logo located.

  • Rating (0-5): Enter a static value for the amount of rating stars

  • Or Rating Column:: If there is a column in your feed containing your ratings, choose it in the dropdown

  • Fill color: Choose the color of the rating star

  • Border color: Choose the color of the rating star's border

  • Margin (px): Defines the margin outside of your defined area

4ad8d267fb8ccf73121c7d8d0bf258b3.png

Example image with rating included:

288a095d77ce78ce86b0cbefdb089a1d.jpeg

7. FB Image Trim

Goal: Trim away the space surrounding your product - can be helpful if your products are in different positions within your images and you want to have them all centered in the output image

Box Input:

  • Color: By clicking into the field a color scheme will open - alternatively you can enter a hex color code with the color of the parts you want to trim

  • Fuzziness: Defines the tolerance of the trim - 0 means no tolerance, so the trim will stop whenever a part of the image no longer has exactly the before defined color, 100 will cut away everything

97bd801d5bcae131298e5ac557647340.png

8. FB CreateImage

Goal: Whenever you want to create a new image from scratch (e.g. when creating a mosaic either yourself or with the template box) you have to use this box

Box Input:

  • Width: Defines the width of the output image in pixels

  • Height: Defines the height of the output image in pixels

  • Color: By clicking into the field a color scheme will open - alternatively you can enter a hex color code that defines the color of your image

  • Color Column: If you have a column containing hex values, it can be selected here.

Figure 2. image
image


9. FB Mosaic Template

Goal: After using the FB CreateImage box you can use the FB Mosaic Template box to combine multiple single product images to one output image

Box Input:

  • Zoom: Defines the width of the output image in pixels

  • Orientation: Choose between Portrait (additonal images will be added on the bottom) and Landscape (additional images will be added on the right) mode

  • Image Column 1: Defines the main input image for the mosaic

  • Image Column 2-6: Defines the additional input images for the mosaic

Please keep in mind to first add the FB CreateImage box before creating this mosaic.

Example with Portrait Orientation:

53021974dbb13ddd557135415e77900c.png
de9bed4f2bef970e3b7060201686efea.jpeg

Example with Landscape Orientation:

ddf7cdaeaaa0105ee8f403493ac84375.png
7824e028aa4edf837b1ed07259204b7f.jpeg

10. FB Image Rotate

Goal: Helps you to rotate and mirror images within the given image borders.

Box input:

  • Rotate (degrees): Enter the degree that you want the image to be rotated

  • Background Color: Choose a background color, if none is selected the background is white

  • Mirror: If you want to mirror the image, select if you want to mirror it on the x- or y-axis through the dropdown

Important:

  • The image size will not change

Figure 3. RotateImage
RotateImage


11. FB Image ShowGrid

Goal: Helps you to structure your image and check if all the elements are in the right position. To make the grid visible in your preview images select "show" in the dropdown.

Important:

  • The grid will be removed within processing to make sure it's not part of your final image

  • This box has to be afterall other FB boxes in order to work correctly

c86cb7a35e2c64edfb31d302ee8d07a9.png
c0e0d73f05a2c8d69ea9d81f4a46673b.jpeg