Cart drawer banners

A lightweight Shopify snippet for displaying promotional banners in your cart drawer.

Features

• Easy to implement

• Fully customizable through CSS

• Compatible with any Shopify theme

Installation

1. Create a new file in your theme's snippets directory snippets/abra-cart-drawer-banners.liquid and copy the code below

2. Add the render tag to your cart drawer HTML template where you want the banner to render

3. Activate Abra banner (e.g. Gift with purchase banner or Tiered banner) in your cart page template, this is where the banner block will be pulled from and placed in the cart drawer

4. Add cart banner to your Abra promotion in order to show this banner when the promotion is activated

<div id="AbraCartDrawerBannerContainer" class="abra-banner-container">
  <div class="abra-banner-content">
    <abra-banner
      id="AbraGlobalGiftBanner"
      class="abra-banner abra-gift-banner-global"
      data-name="AbraGlobalGiftBanner"
      data-block-id="AbraGlobalGiftBanner"
    >
      <div class="abra-banner__content">
        <div class="abra-banner__icon abra-hide"></div>
        <p class="abra-banner__text"></p>
      </div>
      <div class="abra-banner__progress-bar"></div>
      <div class="abra-banner__offer"></div>
    </abra-banner>
    <abra-tiered-banner
      id="AbraGlobalTieredBanner"
      class="abra-tiered-banner abra-tiered-banner--global"
      data-name="AbraGlobalTieredBanner"
      data-block-id="AbraGlobalTieredBanner"
    >
      <div class="abra-tiered-banner__content">
        <div class="abra-tiered-banner__icon abra-hide"></div>
        <p class="abra-tiered-banner__text"></p>
      </div>
      <div class="abra-tiered-banner__tiers_container"></div>
    </abra-tiered-banner>
  </div>
  <div class="abra-banner-loading">
    <div class="abra-banner-spinner"></div>
  </div>
</div>

Usage

Add the following code to your cart drawer template:

{% render 'abra-cart-drawer-banners' %}

Styling

The banners use semantic CSS classes for easy customization. You can override the default styles by:

1. Adding your custom CSS to a global stylesheet

2. Ensuring your CSS file is loaded on all pages where the cart drawer appears

/* Just an example every merchant will have their own styles */
.abra-banner-container {
  position: relative;
  min-height: 120px;
  display: none;
}

.abra--initialized .abra-banner-container {
  display: block !important;
}

.abra-banner-content {
  position: relative;
  z-index: 2;
  background: white;
}

.abra-banner-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.abra-banner-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: block !important;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}