Schedule a storefront banner, with Mechanic.

Mechanic is a development and ecommerce automation platform for Shopify. :)

Schedule a storefront banner

Use this task to publish a banner, to be displayed across your online storefront. This task comes with some pre-configured HTML and CSS – customize to taste. :)

Runs . Configuration includes starting date and time, ending date and time, banner html, and banner parent css selector.

15-day free trial – unlimited tasks

Documentation

Use this task to publish a banner, to be displayed across your online storefront. This task comes with some pre-configured HTML and CSS – customize to taste. :)

Configure the starting and ending times as appropriate, remembering that all times in Mechanic are local to your store's timezone.

Adjust (or replace!) the banner HTML and CSS to taste. Mechanic will place your code within a plain <div> wrapper. To control where your banner is inserted, use the "Banner parent CSS selector" option. Mechanic will insert your banner as the first child of whatever element is matched by that CSS selector.

Please note: the Mechanic support crew can't help out with banner design.

Developer details

Mechanic is designed to benefit everybody: merchants, customers, developers, agencies, Shopifolks, everybody.

That’s why we make it easy to configure automation without code, why we make it easy to tweak the underlying code once tasks are installed, and why we publish it all here for everyone to learn from.

(By the way, have you seen our documentation? Have you joined the Slack community?)

Open source
View on GitHub to contribute to this task
Subscriptions
Tasks use subscriptions to sign up for specific kinds of events. Learn more
Options
starting date and time (required), ending date and time (required), banner html (required, multiline, code), banner parent css selector (required)
Code
Task code is written in Mechanic Liquid, an extension of open-source Liquid enhanced for automation. Learn more
Online store JavaScript
var now = Date.now();
var startAt = {{ options.starting_date_and_time__required | date: "%s" | times: 1000 | json }};
var endAt = {{ options.ending_date_and_time__required | date: "%s" | times: 1000 | json }};

if (document.getElementById('admin-bar-iframe')) {
  if (startAt === 0) {
    alert('Scheduled banner with Mechanic: starting time was not understood');
  }
  if (endAt === 0) {
    alert('Scheduled banner with Mechanic: ending time was not understood');
  }
}

if (startAt !== 0 && endAt !== 0 && startAt <= now && now <= endAt) {
  var bannerContainer = document.createElement('div');
  bannerContainer.innerHTML = {{ options.banner_html__required_multiline_code | json }};

  var parentCssSelector = {{ options.banner_parent_css_selector__required | json }};
  var parent = document.querySelector(parentCssSelector);

  parent.insertBefore(bannerContainer, parent.firstChild);
}
When this task is installed, this code is loaded into the online storefront using a ScriptTag.
Defaults
Starting date and time
May 1 2019 12:00am
Ending date and time
June 1 2019 12:00am
Banner HTML
<style>
#banner_placeholder {
    height: 50px;
    width: 100%;
}

#banner {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #ddd;
    padding: 10px;
    font-size: 16px;
}

#banner a {
    font-weight: bold;
    text-decoration: underline;
    color: #ddd;
}

#banner a:hover {
    color: #fff;
}
</style>

<div id="banner_placeholder"></div>
<div id="banner">
  It's time for a banner! <a href="/">Keep shopping!</a>
</div>
Banner parent CSS selector
body