Skip to content

Integrating Content Banners

Implementing Content 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

  • Rember 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 %}
<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.search.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;
}

Dynamic Tile Sizing (Desktop)

HTML

<ul class="wc-block-grid__products">
  {% for product in products.results %}
    {% if product.isBanner %}
    <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 %}
    <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 %}
  <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 %}

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 %}
    <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 %}
  <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;
}