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


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">
    <p class="company">[%Company%]</p>
    <a href="[%URL%]">Find Out More!</a>
    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);

Can't find what you're looking for?

Send us an email

Visit the blog

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