Dynamic Creative Guide
Last updated
Platform
Last updated
Dynamic creatives (designs featuring variable or personalized data) using Merge Tags or Liquid Template logic, must be uploaded in HTML file format.
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 .
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 or merge tag features, reach out to support@heypoplar.com to discuss your options with an account manager.
When formatting your HTML design, all CSS styling should appear within the <style> tag located inside the <head> tag. Additionally we recommend using 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.
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
Linking 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.
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.
Dynamic content must use a or a font with a purchased license.