Integrating Retail Media Banners¶

Implementing Banners within Hello Retail's Retail Media offering requires template modifications to support dynamic banner injection alongside product tiles. Below is a comprehensive guide for implementing these banners across different contexts in your store.

Note: The examples provided here are for inspiration. Final implementation must be tailored to fit the specific template of your online store.

If you are running a custom frontend against the Retail Media APIs instead of one of our managed, template-based solutions, refer to the API documentation instead.

Important to-do

Within the Templates it is important that you replace BANNER_SIZE_NAME_PLACEHOLDER with the correct corresponding name that you have created for the size in the Hello Retail Dashboard.

Important to remember

Ensure all intermediary containers propagate height: 100% to the .hr-b-image element to ensure that the image will actually be shown in the appropriate postion.

How this works¶

Every context below follows the same pattern:

product.isBanner is true on a banner item and unset on a regular product, exactly as described in the API documentation. Branch on it first.
Pull the image URL for the size you configured out of product.bannerImages, using the size name from My Hello Retail in place of BANNER_SIZE_NAME_PLACEHOLDER.
If that size wasn't set up for the matching campaign, the URL comes back empty, so the guard against an empty value skips rendering a broken tile.

These are snippets to drop into your existing per-product template, not complete standalone blocks. Where a snippet ends in {% else %} with nothing after it, your existing product-tile markup (and its own {% endif %}/{% endfor %}) continues right there, unchanged.

product.url on a banner already carries a tracking fragment, the same way a product URL does, so linking to it "just works" with click tracking. See click tracking if you need more detail on that mechanism.

Pages¶

HTML

{% comment %}
  Replace "BANNER_SIZE_NAME_PLACEHOLDER" with the size created for this design
{% endcomment %}

{% assign banner_size_pages = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}
{% if product.isBanner == true %}
  {% if product.isBanner == true and banner_size_pages != "" %}
    <div class="hr-item product-item" style="width:100%; height:100%;">
      <div class="product-item-info">
        <a href="{{ product.url }}" class="hr-b-container">
          <div class="hr-b-image"
             style="background-image:url({{ banner_size_pages }})">
          </div>
        </a>
      </div>
    </div>
  {% endif %}  
{% else %}

CSS

.hr-pages-container .hr-b-container {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.hr-pages-container .hr-b-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Search¶

Dynamic Tile Sizing (Desktop)¶

HTML

{% for product in products.results %}
{% comment %} Replace "BANNER_SIZE_NAME_PLACEHOLDER" with the size created for this design {% endcomment %}
{% assign banner_size_search_desktop = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}
{% if product.isBanner == true %}
  {% if product.isBanner == true and banner_size_search_desktop != "" %}
    <li class="type-product product" style="width:25%">
      <div class="hr-search-overlay-product-link" style="width: 100%; max-width: 100%; height:100%; margin: 0; box-shadow: none;">
      <a href="{{ product.url }}" class="hr-b-container">
        <div class="hr-b-image" style="background-image:url({{ banner_size_search_desktop }})"></div>
      </a>
      </div>
    </li>
    {% else %}

CSS

.hr-overlay-search .hr-b-container {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.hr-overlay-search .hr-b-image {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

Static Tile Sizing (Desktop)¶

HTML

{% comment %}
  Replace "BANNER_SIZE_NAME_PLACEHOLDER" with the size created for this design
{% endcomment %}

{% assign banner_size_search_desktop = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}
{% if product.isBanner == true %}
  {% if product.isBanner == true and banner_size_search_desktop != "" %}
  <li class="hr-item product-item" style="width:100%; height:100%;">
    <div class="product-item-info">
      <a href="{{ product.url }}" class="hr-b-container">
        <div class="hr-b-image"
             style="background-image:url({{ banner_size_search_desktop }})">
        </div>
      </a>
    </div>
  </li>
{% endif %}

CSS

.hr-overlay-search .hr-b-container {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.hr-overlay-search .hr-b-image{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

Mobile Grid View¶

HTML

{% for product in products.results %}
  {% comment %}
    Replace "BANNER_SIZE_NAME_PLACEHOLDER" with the size created for this design
  {% endcomment %}

  {% assign banner_size_search_mobile = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}
{% if product.isBanner == true %}
  {% if product.isBanner == true and banner_size_search_mobile!= "" %}
    <div class="hr-search-overlay-product" style="width:100%; max-width:100%; margin:0;">
      <div class="hr-row">
        <a href="{{ product.url }}" class="hr-b-container">
          <div class="hr-b-image {% if product_grid_layout %}grid{% else %}list{% endif %}"
               style="background-image:url({{ banner_size_search_mobile }})">
          </div>
        </a>
      </div>
    </div>
  {% else %}

CSS

.hr-overlay-search .hr-b-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.hr-overlay-search .hr-b-image {
    width: 100%;
    height: 100%;
    background: center / cover no-repeat;
    border-radius: 5px !important;
}

.hr-overlay-search .hr-b-image.grid {
    height: 250px;
}

.hr-overlay-search .hr-b-image.list {
    height: 100px;
}

Recommendations¶

With Slider (e.g., Swiper)¶

HTML

{% for product in products %}
  {% comment %}
    Replace "BANNER_SIZE_NAME_PLACEHOLDER" with the size created for this design
  {% endcomment %}

  {% assign banner_size_recom_desktop = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}
  {% if product.isBanner == true %}
  {% if product.isBanner == true and banner_size_recom_desktop != "" %}
    <li class="type-product product" style="width:25%">
      <div class="hr-search-overlay-product-link"
           style="width:100%; max-width:100%; height:100%; margin:0; box-shadow:none;">
        <a href="{{ product.url }}" class="hr-b-container">
          <div class="hr-b-image"
               style="background-image:url({{ banner_size_recom_desktop }})">
          </div>
        </a>
      </div>
    </li>
  {% else %}

CSS

#{{ key }} .hr-b-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    }
#{{ key }} .hr-b-image {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#{{ key }} .hr-product {
    height:100%;
}

#{{ key }} .swiper-slide{
    height:unset!important;
}

Without Slider¶

HTML

{% for product in products %}
  {% comment %}
    Replace "BANNER_SIZE_NAME_PLACEHOLDER" with the size created for this design
  {% endcomment %}

  {% assign banner_size_recom_desktop = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}
  {% if product.isBanner == true %}
  {% if product.isBanner == true and banner_size_recom_desktop != "" %}
    <div class="hr-product">
      <a href="{{ product.url }}" class="hr-b-container">
        <div class="hr-b-image"
             style="background-image:url({{ banner_size_recom_desktop }})">
        </div>
      </a>
    </div>
  {% endif %}
{% endfor %}

CSS

#{{ key }} .hr-b-container {
  display: flex;
  flex-wrap: wrap;
}

#{{ key }} .hr-b-container,
#{{ key }} .hr-b-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Newsletters¶

HTML

{% comment %}
  Replace "BANNER_SIZE_NAME_PLACEHOLDER" with the size created for this design
{% endcomment %}

{% assign banner_size_newsletter = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}
{% if product.isBanner == true %}
  {% if product.isBanner == true and banner_size_newsletter != "" %}
  <div class="hrBImage"
        style="background-image:url({{ banner_size_newsletter }})">
  </div>
{% else %}

CSS

#container .hrBImage {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}