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.

General Notes¶

Remember to replace search or recom in product.bannerImages.search.url with the correct image size name from the Hello Retail dashboard.
Ensure all intermediary containers propagate height: 100% to the .hr-banner-image element to ensure that the image will actually be shown in the appropriate postion.

Pages¶

HTML

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

CSS

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

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

Search¶

Dynamic Tile Sizing (Desktop)¶

HTML

<ul class="wc-block-grid__products">
  {% for product in products.results %}
    {% if product.isBanner == true and product.bannerImages.search.url != "" %}
    <li class="type-product product" style="width:25%">
      <a href="{{ product.url }}" class="hr-banner-container">
        <div class="hr-banner-image" style="background-image:url({{ product.bannerImages.search.url }})"></div>
      </a>
    </li>
    {% else %}
    <!-- Regular product markup -->
    {% endif %}
  {% endfor %}
</ul>

CSS

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

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

Static Tile Sizing (Desktop)¶

HTML

<div class='hr-products-container'>
  {% for product in products.results %}
    {% if product.isBanner == true and product.bannerImages.search.url != "" %}
    <div class="hr-search-overlay-product">
      <a class="hr-search-overlay-product-link hr-banner-container" href="{{ product.url }}">
        <div class="hr-banner-image" style="background-image:url({{ product.bannerImages.search.url }})"></div>
      </a>
    </div>
    {% endif %}
  {% endfor %}
</div>

CSS

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

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

Mobile Grid View¶

HTML

{% for product in products.results %}
  {% if product.isBanner == true and product.bannerImages.search_m.url != "" %}
  <div class="hr-search-overlay-product">
    <a class="hr-search-overlay-product-link hr-banner-container" href="{{ product.url }}">
      <div class="hr-banner-image" style="background-image:url({{ product.bannerImages.search_m.url }})"></div>
    </a>
  </div>
  {% endif %}
{% endfor %}

CSS

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

.hr-banner-image{
    width:100%;
    height:100%;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:5px!important;
  }

Recommendations¶

With Slider (e.g., Swiper)¶

HTML

{% for product in products %}
  <div class="swiper-slide">
    {% if product.isBanner == true and product.bannerImages.recom.url != "" %}
    <div class="addwish-product">
      <a href="{{ product.url }}" class="hr-banner-container">
        <div class="hr-banner-image" style="background-image:url({{ product.bannerImages.recom.url }})"></div>
      </a>
    </div>
    {% endif %}
  </div>
{% endfor %}

CSS

#{{ key }} .hr-banner-container,
#{{ key }} .hr-banner-image,
#{{ key }} .addwish-product,
#{{ key }} .swiper-slide {
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

Without Slider¶

HTML

{% for product in products %}
  {% if product.isBanner == true and product.bannerImages.recom.url != "" %}
  <div class="addwish-product">
    <a href="{{ product.url }}" class="hr-banner-container">
      <div class="hr-banner-image" style="background-image:url({{ product.bannerImages.recom.url }})"></div>
    </a>
  </div>
  {% endif %}
{% endfor %}

CSS

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

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