How to Create Dynamic Price Graphics with No Code Automation

Manually creating price graphics for a large product range isn't the best use of your time. Learn how to automatically pull material from a database to generate branded promotional photos.
by Julianne Youngberg ·

Contents

    Price is a powerful factor in consumer behavior, which explains why it’s so often emphasized in promotional material. Brands that produce, sell, or build communities surrounding certain product types inevitably have to showcase prices in some way.

    You can use pricing graphics to illustrate:

    • Promotional deals
    • New products
    • Pricing changes
    • Clearance sales
    • And more!

    However, managing and marketing a wide product range or frequently changing prices can be time-consuming. This is where automation comes in to streamline these tasks.

    Automated workflows can simplify data collection, organization, and image generation. They can even go so far as to distribute them without manual intervention. That’s why in this tutorial, you’ll learn how to build a workflow that pulls data from a cloud database to generate dynamic pricing graphics that can be easily distributed to your audience.

    What You Will Create

    Pricing graphics can influence your audience to take action. They can be distributed in mass or customized to each person, depending on your goals.

    To auto-generate pricing graphics, we’ll be using the following tools:

    • Airtable : To store, clean, and organize pricing data
    • Bannerbear : To produce dynamic pricing graphics
    • Zapier : To build automated workflows with multiple apps

    By the end of the tutorial, you should be able to create branded pricing graphics that look like this:

    Sample Bannerbear generated pricing graphic

    Let’s start from a template.

    Design a Bannerbear Template

    Bannerbear templates are designed for you to generate different images based on incoming data. You can define fields as dynamic or static, and customize them however you want.

    To design a dynamic template, you need a Bannerbear account (create a free trial account if you don’t have one—no credit card required! 🎉). Log in, then click the Projects tab.

    Click New Project , then decide whether you want to start from scratch or use one of the templates in our pre-made template library, such as this one:

    Bannerbear White Grey E-commerce Simple Price Graphic template

    Add dynamic fields for any data that will vary from image to image. We’ll use the following:

    • Product name
    • Description
    • Price
    • Brand
    • Image

    Bear Tip 🐻: Use a dynamic QR field if you’d like your audience to scan a link directly from the graphic.

    Then, set up any static fields, such as:

    • Promoter logo
    • CTA

    Set up any background images, fonts, colors, and anything else you’d like to include.

    Screenshot of Bannerbear editor

    Click Save Template once you’re happy with your design.

    Prepare Your Pricing Data on Airtable

    Now that your template is ready, it’s time to prepare your data for use. There are several ways to clean and format your pricing data: your database’s formatting tools and Zapier’s formatting actions, among others. You can use either or a combination of methods. But in this tutorial, we’ll simplify the zap by using database formulas and filters.

    Let’s assume that your pricing data has already been saved to a cloud database—in this case, Airtable. You can format various data types in different ways, including:

    Formatting Currency

    Currency fields can be used for numbers, and they can be used to choose a symbol, decimal plates, separators, and more.

    Screenshot of Airtable sample base with currency field options outlined in red

    If your raw pricing data includes currency symbols, abbreviations, or other characters that prevent them from being recognized as numbers, you may need to create a formula field to eliminate these characters before applying a currency field to format your prices appropriately.

    Bear Tip 🐻: Airtable’s number-based fields (including currency, percentage, rating) are formatted with characters for display in the app, but they are passed to Zapier as numbers. You might have to add currency, percentage, or rating symbols using Zapier formatting tools or in your template.

    Removing Unnecessary Characters

    Airtable’s Formula fields offer a wide variety of functions and operators to help you generate your desired output. You can use one or a combination to remove unnecessary characters. For example, a substitute formula can be used to omit words, phrases, and characters that you might not want in your final result.

    Screenshot of Airtable sample base with substitute formula outlined in red

    Depending on the raw data you’re working with, you might also be able to use right, left, mid, replace, or a combination of formulas to extract only a portion the original string.

    Concatenating Links

    When extracting links, if you only have the path and not the full URL, you can use the concatenate formula to create a complete link. This full link can then be used for images, QR codes, or social media captions.

    Screenshot of Airtable sample base with concatenate formula outlined in red

    You can use this formula to join a fixed string of text (eg. https://bannerbear.com/blog) or reference a different column with dynamic data.

    After your data is properly formatted, let’s also create a view that filters for products fitting certain specifications. This will trigger image generation and make it easy to see which items match requirements. Click the + button next to Grid.

    Screenshot of Airtable sample base with grid creation button outlined in red

    Add filters for the requirements you want to set, which might include specific brands, price ranges, and even stock status.

    Screenshot of Airtable sample base with view filters outlined in red

    Make sure you have at least one record in the view to test your automation later on.

    Bear Tip 🐻: Automate price data monitoring and collection by using a web scraping app like Browserbear.

    Set up a Zap to Auto-generate Graphics

    The final piece of the puzzle is a zap that pulls data from your Airtable base, then generates images.

    Log into your Zapier account, click + Create Zap , then set up the following steps:

    Trigger: New Record in Airtable

    Choose Airtable as the app and New Record as the event. If you haven’t connected your account yet, you will be prompted to do so.

    Set up the trigger by specifying the base, table, and view that contains your filtered items.

    Screenshot of Zapier Airtable new record trigger

    Test the trigger, then save.

    Action: Create Image in Bannerbear

    Choose Bannerbear as the app and Create Image as the event. You will need to connect the project using the key found on the “Settings / API Key” page of the corresponding project on the Bannerbear app.

    Set up the action by selecting your template and mapping your database values to their corresponding fields.

    Screenshot of Zapier Bannerbear create image action

    Test the action. An image should be generated, which you can view from the zap test results or in your Bannerbear log.

    Sample Bannerbear generated pricing graphic

    Illustrating Prices With Dynamic Graphics

    Beautifully designed graphics will draw a lot more attention compared to text. But for use cases like these, there’s no need to create every image from scratch.

    Data dynamically pushed through to an image generation tool like Bannerbear can ensure you always have graphics to promote to your audience. You can even take the process a step further with these ideas:

    • Post the graphic to a social media audience (eg. Twitter, Instagram, Discord, etc.)
    • Send the graphic to a social media management app for future posting
    • Save the generated image links to your Airtable database for reference
    • Add the graphic to an email campaign
    • Send the graphic directly to followers (eg. Telegram, Messenger, etc.)

    Try it out for yourself!

    About the authorJulianne Youngberg@paradoxicaljul
    Julianne is a technical content specialist fascinated with digital tools and how they can optimize our lives. She enjoys bridging product-user gaps using the power of words.

    How to Automatically Create Translated Banner Graphics for Multilingual Websites Using GPT-4o and Bannerbear

    OpenAI’s advanced language models significantly enhances text-related tasks, especially with the GPT-4o. In this article, we’ll guide your through the steps of using GPT-4o and Bannerbear to automate the translation and generation of banner graphics in various languages for multilingual websites.

    Top Cloud Hosting Apps for Image and Video Automation

    Cloud storage services differ in terms of delivery, security, configurability, and pricing. Here's how to compare your options and choose the best for your image and video automation needs.

    3 Ways to Translate Content in Airtable

    Powering your database with translation features can save time and resources. Here's how you can set your Airtable base up to translate content in-app.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Create Dynamic Price Graphics with No Code Automation
    How to Create Dynamic Price Graphics with No Code Automation