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 an API solution within your Retail Media please refer to the API documentation.

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.

Pages¶

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 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>
{% else %}

CSS

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

.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 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>
    </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 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 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_search_desktop = product.bannerImages.BANNER_SIZE_NAME_PLACEHOLDER.url %}

  {% if product.isBanner 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

#{{ 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 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 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;
}