Build a Subscription Box Announcement Bar in Weebly

A subscription box announcement bar is a slim strip that appears at the top of a Weebly site and gives visitors a timely reason to open the offer, join a mailing list or reserve a place in the next box. It works well when it carries one clear message, remains readable on a phone and can be dismissed without getting in the way.

Australian readers respond best to straightforward details: the price in Australian dollars, what is inside, when it ships and where it can be delivered. Consumer prices should be presented as GST-inclusive where applicable, so shoppers do not have to work out an extra charge at checkout.

Geography also shapes the wording. A box travelling to a suburb of Sydney or Melbourne may move quickly, while deliveries to regional and remote parts of Australia can take longer. Any reference to postage should distinguish the box price from shipping and avoid promising a universal arrival date.

Good announcement copy also reflects the local gifting calendar. A coffee or self-care subscription can be promoted for Mother’s Day, Father’s Day or Christmas, while a food box may be tied to a monthly release. The bar should say what happens after the click and give visitors a dependable next step.

Set one goal and one action

Begin with the result you want from the announcement. It might encourage visitors to reserve a place, view the contents of the next box or join a mailing list. Trying to promote a blog post, discount and subscription at once can make a small banner feel crowded and reduce the chance that visitors will act.

A useful draft contains three elements: a short benefit, a specific offer and one button label. For example: “Make room for a monthly treat. Join the June box for $39.90 including GST. See the box.” This is more useful than a vague message such as “Something special is coming soon.”

Link the button directly to the relevant page rather than the home page. Give that destination a simple URL, confirm that it works without a sign-in and remove any expired campaign codes. A tracking parameter can show which visits came from the bar, but it should never replace a clear destination.

Shape the offer for Australian readers

Put the most relevant local detail near the front of the message. If the offer is a monthly price, use Australian dollars and state whether GST is included. If the deal depends on the number of boxes, mention the minimum order. A clear saving such as “$10 off when you choose three months” gives the button a stronger reason to exist.

Delivery information needs enough detail to build trust without turning the bar into a shipping policy. Name the major destinations your service covers, including Sydney, Melbourne, Brisbane, Perth and Adelaide, then explain whether remote postcodes are available. Australia Post and StarTrack service levels can help set realistic expectations, but a transit estimate should not be presented as a guaranteed delivery date.

Tie the timing to a genuine event or release. Mentioning a Mother’s Day dispatch in late April is more persuasive than referring vaguely to a “special offer.” For a monthly box, the release date and order cut-off may be the strongest details. Remove the bar or change its storage key when that campaign ends so old timing does not return later.

If the announcement leads to an email sign-up, explain what will happen to the address and make the relevant privacy information easy to find. Australian customers may expect personal information to be handled according to the Privacy Act 1988 and the Australian Privacy Principles, particularly when a promotion builds a mailing list.

Add accessible announcement markup

Start with a small HTML block that identifies the announcement and contains the message, destination and close control. If your Weebly editor offers custom HTML, embed this block in the page where you want the promotion to appear.

A labelled region gives screen-reader users a useful description of the banner. The button uses the native button element, which receives keyboard focus and activates with Enter or Space. The familiar multiplication sign is paired with an accessible label, so assistive technology does not need to interpret the symbol alone.

<section class="sb-announcement" id="sb-announcement"
  aria-label="Subscription box announcement" hidden>
  <div class="sb-announcement__inner">
    <p class="sb-announcement__message">
      <strong>Make room for a monthly treat.</strong>
      <span>Discover this month's box, delivered across Australia.</span>
    </p>
    <a class="sb-announcement__link" href="/subscription-box">See the box</a>
    <button class="sb-announcement__close" type="button"
      aria-label="Dismiss subscription box announcement">&times;</button>
  </div>
</section>

Replace /subscription-box with the real path of the landing page, then edit the wording for the current offer. The hidden attribute prevents a flash of the banner before the script checks whether the visitor dismissed an earlier version.

Style the banner responsively

Use the colours already used by your Weebly theme so the announcement feels connected to the site. The sample palette pairs a dark background with a magenta button and warm yellow focus outline. These colours can be replaced with your brand values without changing the structure.

The layout uses CSS Grid on larger screens and allows the message to occupy its own row on small screens. The close control keeps a 44-pixel touch area, while the call-to-action button remains large enough for comfortable tapping. The script also measures the banner and applies top padding to the page body.

.sb-announcement,
.sb-announcement * {
  box-sizing: border-box;
}

.sb-announcement {
  --sb-accent: #a91f45;
  --sb-highlight: #ffd166;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #241813;
  color: #fff;
  border-bottom: 3px solid var(--sb-highlight);
  font-family: inherit;
}

.sb-announcement__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 3.25rem 0.75rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
}

.sb-announcement__message {
  margin: 0;
}

.sb-announcement__message span {
  display: block;
  margin-top: 0.15rem;
  color: #f5e8df;
  font-size: 0.9rem;
}

.sb-announcement__link {
  display: inline-block;
  padding: 0.65rem 1rem;
  background: var(--sb-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0.25rem;
}

.sb-announcement__link:hover {
  background: #871936;
}

.sb-announcement__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.75rem;
  cursor: pointer;
}

.sb-announcement a:focus-visible,
.sb-announcement button:focus-visible {
  outline: 3px solid var(--sb-highlight);
  outline-offset: 3px;
}

body.sb-announcement-visible {
  padding-top: var(--sb-bar-height, 5rem);
}

@media (max-width: 640px) {
  .sb-announcement__inner {
    grid-template-columns: 1fr 44px;
    padding: 0.75rem;
  }
  .sb-announcement__message { grid-column: 1 / -1; }
  .sb-announcement__close {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
  }
}

Check the banner against your Weebly header, especially if the header is also fixed. Add the existing header height to the body padding or adjust the top position so neither element covers the other. A background image or gradient can be added, but solid colours usually reproduce more consistently across devices.

Let visitors dismiss the bar

Use localStorage to remember that a visitor has closed the announcement. This stores a functional preference on that device; it does not need to contain an email address or another personal detail. If storage is unavailable, the close button still hides the bar for the current visit.

A versioned storage key makes campaign management easier. For example, v1 can represent the June offer, while v2 allows returning visitors to see a later announcement. Without a version change, someone who dismissed the first promotion will continue to hide it.

(function () {
  const bar = document.getElementById("sb-announcement");
  if (!bar) return;

  const closeButton = bar.querySelector(".sb-announcement__close");
  const storageKey = "myweeblytricks-subscription-box-v1";
  let dismissed = false;

  try {
    dismissed = window.localStorage.getItem(storageKey) === "dismissed";
  } catch (error) {
    dismissed = false;
  }

  function updateHeight() {
    document.documentElement.style.setProperty(
      "--sb-bar-height",
      bar.offsetHeight + "px"
    );
  }

  function showBar() {
    bar.hidden = false;
    document.body.classList.add("sb-announcement-visible");
    updateHeight();
  }

  function hideBar() {
    bar.hidden = true;
    document.body.classList.remove("sb-announcement-visible");
    try {
      window.localStorage.setItem(storageKey, "dismissed");
    } catch (error) {
      // Dismissal still works for this visit.
    }
  }

  if (!dismissed) showBar();
  closeButton.addEventListener("click", hideBar);
  window.addEventListener("resize", updateHeight);
})();

If visitors should see the announcement again after a week rather than permanently, replace localStorage with sessionStorage or add an expiry date to the stored value. Test the behaviour in a private browsing window as well, since some privacy settings restrict storage access.

Install the code across your site

Look in your Weebly settings for a field labelled Website Code, Custom Code or site-wide footer code. The wording varies between account types and editor versions. Combine the three examples in this article in one custom code block, placing the HTML first, followed by the CSS and JavaScript.

If site-wide code is unavailable, use a custom HTML or embed element on each page that needs the announcement. Add it to every shared page layout used by the site if your plan provides reusable layouts. Because the banner is positioned with CSS, it can sit near the end of the embed while still appearing at the top of the viewport.

Install the code only once per page. Repeated blocks with the same ID can cause the script to control the wrong element, and duplicate buttons may appear. After publishing, visit the site in a separate tab to confirm that the live version matches the editor preview and that the button reaches the correct subscription page.

Use a campaign label in your analytics records so visits from the announcement can be compared with other traffic sources. Avoid collecting extra information in the bar itself unless it has a clear purpose. A single offer and one button provide enough information for a visitor to make the next move.

Test the launch and keep it accurate

Test the announcement in current versions of Chrome, Safari, Edge and Firefox, then repeat the check on a phone. Use the keyboard to reach the button and close control, confirm that focus outlines remain visible and check the text at a larger zoom level. Also watch the transition between the banner and any fixed Weebly header for movement or overlap.

The destination page deserves the same attention as the bar. If it relies on large photographs, the guidance on faster image loading can help preserve the speed gained by a lightweight announcement. Check that product images fit their containers, that prices remain visible on mobile and that the subscription form works without a frustrating number of fields.

Review the offer regularly, especially after a dispatch cut-off, a stock change or a price adjustment. Keep the current release date in the wording, change the storage key for a new campaign and remove the custom code when the promotion finishes. This prevents an old announcement from returning and keeps the website accurate.

Open your Weebly editor now, add the bar with one precise offer and publish a clear route to the next box. Give visitors a reason to act, a reliable page to land on and an easy way to return to their browsing.