How to make product ads

Native Ad Example #1

This style of ad is commonly used for displaying products or product listings in a native format. This ad uses the [%IMAGE%] [%TITLE%] [%COMPANY%] and [%URL%] variables from the Native Template within your AdButler product.

Native Ad Example

Setup

Edit Native Ad Template Page
Variables are set up as outlined in the screenshot above. The sample HTML/Script is as follows:

<div class="container">
    [%Image%]
    <p class="company">[%Company%]</p>
    <h1>[%Title%]</h1>
    <a href="[%URL%]">Find Out More!</a>
</div>
<style>
    body {
        font-family: arial, sans-serif;
    }

    .container {
        border: 1px solid #929292;
        border-radius: 4px;
        background-color: #fff;
        width: 200px;
        padding: 10px 10px 50px;
        position: relative;
    }

    .container:hover {
        box-shadow: 3px 1px 5px #0003;
    }

    .container img {
        width: 200px;
    }

    .container .company {
        font-weight: 500;
        color: #999;
        display: inline-block;
        font-size: 12px;
        padding: 0 2px 4px 0;
        max-width: 130px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0;
    }

    h1 {
        font-size: 20px;
        line-height: 20px;
        font-family: arial, sans-serif;
        margin: 0;
        padding-bottom: 20px;
    }

    a {
        font-size: 14px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 3px;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        text-decoration: none;
        color: #666 !important;
        font-weight: bold;
        cursor: pointer;
        width: calc(100% - 20px);
    }
</style>

Can't find what you're looking for?

Send us an email

hello@adbutler.com

Visit the blog

For more ad serving tips, industry news and AdButler insights.