How to populate t-shirt designs with dynamic content

Forked offers a simple but powerful feature - dynamic content. ‘Dynamic content’ enables the population of t-shirt designs with content supplied via query parameters. In this guide we are going to walk through doing just with a t-shirt designed for speakers at a fictional developer conference.

Design the static t-shirt

First up, let’s design our t-shirt. Our design will be for an imaginary conference called AsteriskConf, or *Conf for short. The t-shirt design is intended for speakers of the conference and will feature the speakers name plus the title, date, time and location of their talk at the conference.

A t-shirt design with the text ‘⁎Conf 2020, The true power of wildcard selectors in CSS, Dave Daniels, Main Stage - Day 1

To learn how to create a basic t-shirt design read our guide for design a t-shirt with HTML & CSS.

Make the t-shirt dynamic

Forked supports simple templating in HTML. Use this to replace static content with template tags using curley braces around a variable name such as {{speaker_name}}. We will update our design using template tags and save our new version.

A t-shirt design with the the speaker name, talk title, talk day number and talk location replaced with template tags

At this point the t-shirt design resembles a dynamic template in a web application. The URL of the design on Forked looks like this:

Populate the content

The organisers of *Conf want to send a link to a shirt in an email to each speaker. T-shirt designs on Forked can have content populated via URL query parameters . To replace a template tag with text content, add a query parameters with the variable name prefixed with fkd_, e.g. fkd_speaker_name=Safaa%20Bolton - this populates the speaker name.

Here’s an example of a URL populated with fictional speaker content

The organisers of the conf can populate the URL with the details of each speaker and send a personalised product link in their email!

A t-shirt design with the the speaker name, talk title, talk day number and talk location populated with the data from the query string

This also works with product image URLS:

Try it for yourself

Create your own t-shirt with dynamic content using the code editor! 👇


Finished hacking?

When you’re done, fork and save this tee!