Skip to main content

Add logos, images & footer banners

Logos, signatures, compliance marks and promotional strips all come from one place: the image library built into the template editor. Upload the artwork once, then drop it into as many templates as you like.

Before you begin​

  • You need the PDF templates permission to upload or delete an image.
  • Have the file ready as JPG, PNG, GIF or WEBP, up to 5 MB.
  • Images in a template must come from this library. Artwork hosted somewhere else on the web will not print — see Why an image from the web comes out blank.

Upload an image​

  1. Open any template and go to the Assets tab in the tools sidebar.
  2. Upload your file.
  3. Check the thumbnail that appears. It shows the name, the pixel dimensions, the file size, and the exact text you use to place it.

The library is shared. Anything you upload from one template is immediately available in every other template and in every store-specific copy — you don't upload your logo seven times.

Place an image in a template​

  1. Put your cursor where the image belongs.
  2. Click the image in the Assets tab to insert it, or drag the thumbnail and drop it exactly where you want it.

Either way you get a placeholder with three braces around it:

{{{asset.company-logo}}}

The three braces matter. This placeholder inserts a ready-made image rather than plain text, so with only two braces you get the raw markup printed on the page as visible characters instead of a picture.

Your uploaded images also appear in the Variables tab under Custom Assets, so you can insert them from whichever panel you already have open.

Delete an image​

  1. In the Assets tab, delete the image you no longer want.
  2. SKU.io checks which templates use it before asking you anything.

If nothing uses it, the dialog says so — No template currently references {{asset.…}}, so nothing you have built will change — and the button reads Delete.

If something does use it, you get the list: every template by name, its document type, and which store's override it is. The button changes to Delete anyway, so you can't remove a live image by reflex.

Re-uploading the same file will not undo it

The replacement gets a different placeholder name, so every template still pointing at the old one stays blank. Fix the templates the dialog named — they're the ones that need editing.

Once you've deleted anyway, the affected templates flag the leftover placeholder as a warning whenever you open them, naming what's missing. They still save normally — the warning is there to get you to the edit, not to lock you out of it.

Why an image from the web comes out blank​

Only images from the Assets library print. When the document is produced, the template is stripped of anything that would reach out to the internet:

  • images and stylesheets hosted elsewhere
  • web fonts
  • scripts, embedded frames and click handlers

Nothing warns you at save time, and the Interactive preview may show the external image quite happily — then it vanishes from the finished PDF. If a logo looks right in the preview and blank on the printed page, this is why.

The fix is always the same: upload the file to Assets and reference it from there.

Styling written into the template itself — a style attribute on an element, or a style block inside the template — is kept. It's only the fetching of external resources that's blocked.

Repeat a banner on every page​

A footer banner is artwork that prints at the bottom of every page, with the page number beneath it. It's the usual home for a promotional strip, a compliance notice, or contact details.

  1. Insert your artwork where you'd like the footer to live.

  2. Wrap it in a block marked with the footer-banner class:

    <div class="footer-banner">
      {{{asset.footer-strip}}}
    </div>

  3. Save and check the PDF preview — not the interactive one — to see it repeat.

When the document is produced, that block is lifted out of the page flow and re-attached as a true repeating footer. Space is reserved for it at the bottom of every page so your content never runs underneath it, and the page number is placed below the artwork.

The band is sized from your artwork's own proportions, so a banner is never squashed or overlapped — it gets exactly the room it needs, and the rest of the page keeps the rest.

Design the artwork wide and short

A banner is stretched to the full width of the page, so its height on the page follows directly from its shape. Around 7:1 — roughly 1734 × 250 pixels — is what the built-in templates use and what looks right.

Anything squarer than 3:1 takes a large bite out of every page. It's still honoured, but the preview says so in its warning banner. Past a third of the sheet the band stops growing and the artwork is scaled down instead, again with a warning.

The band's height isn't a setting you adjust — you change it by changing the shape of the artwork.

Show a different banner per destination​

You can vary the banner by destination by placing two footer-banner blocks next to each other and wrapping each in a conditional — one for the country you want to single out, one inverted form for everywhere else:

{{#shipping_address.is_country.NZ}}
  <div class="footer-banner">{{{asset.footer-nz}}}</div>
{{/shipping_address.is_country.NZ}}

{{^shipping_address.is_country.NZ}}
  <div class="footer-banner">{{{asset.footer-default}}}</div>
{{/shipping_address.is_country.NZ}}

Only one of the two ever renders, and whichever renders becomes the footer. The same pattern works for a state or province. See Edit a template for how the destination conditionals work.

If more than one footer-banner block does render, only the first is pinned; the rest are dropped and the preview's warning banner tells you how many, so a conditional you got wrong doesn't fail silently.

Next steps​

Last verified: