Dynamic Creative Guide

Dynamic creatives ( designs featuring variable or personalized data) using Merge Tags or Liquid Template logic, must be uploaded in HTML file format. If dynamic content is only used on one side of a postcard or letter, only one file needs to be an HTML file and the other side can be uploaded as a static PDF.

This article mentions common and general merge tag use cases used within our Poplar platform. If you want to learn how to add merge tags to your creative please check out How to Convert a Static Design HTML

The address block is not considered variable or personalized, since it is always auto-applied by the platform during the upload process.


Templates by Use Case

Below are a some HTML template files, designed by use case to get you started. If no one on your team has HTML design knowledge, but you want to utilize our default or custom merge tag features, reach out to support@heypoplar.com to discuss your options with an account manager.

Anniversary or Occasion

Anniversary or Occasion Template Preview

HTML/CSS Best Practices

When formatting your HTML design, all CSS styling should appear within the <style> tag located inside the <head> tag. Additionally we recommend using absolute positioning for all elements.

Inches and Pixels are the only recommended units of measurement - relative lengths such as em, rem, vw, etc. may not render properly upon upload.

URLs and File Paths

External A file path describes the location of a file. There are two types of file paths: Absolute and Relative. A relative path file points to a local file relative to the current page, an absolute file path uses a URL to an internet or Bucket file. The platform is only able to render files with an absolute path and will NOT render files sourced relatively:

Path Type Example
Absolute <img src="https://www.app.heypoplar.com/logo.png">  Correct
Relative <img src="/images/logo.png">  Incorrect

When uploading HTML creatives, it's essential to ensure that all URLs within the creative are functional and visible to the public. The best way to test the functionality of your src URL is to copy and paste it in your browser. If it's functional it will appear and if not, you may receive an HTTP Error Code.

Supported Content Types

File Type Accepted Format
font .otf, .ttf, .woff, .woff2
image .bmp, .gif, .jpg, .jpeg, .png, .svg, .tiff, vnd.microsoft.icon, .webp, .xml
text CSS


Dynamic content must use a GoogleFont or a font with a purchased license. Typekit & Adobe Fonts are not accepted in HTML creatives, but are welcome to be used in static ones.

<link>ing Fonts

The simplest option is to link your asset in the <head> of the HTML document rather than in the in the CSS. Using this method, the platform is able to accept a maximum of 2 different font weights.

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet" type="text/css">


This rule allows custom fonts to be loaded to the creative. Once added to the CSS in the rule instructs the printer to download the font from the URL where it is hosted. The @font-face rule should be added to the top of the CSS before any other styles.

@font-face {
        font-family: "MyWebFont";
        src: url("http://template-assets.sharelocalmedia.com.s3.amazonaws.com/MyWebFont.ttf")