Messagebar

The message bar shows right under the header, if configured. A message bar with no pages linked is global: it shows on every page of the selected tenant and storefronts. Several bars can show at once, stacked. The one you updated least recently is on top.

How to configure

Open Content, then under DEFAULT VIEWS select Message Bar. The list includes every tenant in this environment. To create one, use the button at the top right.

Save & Publish the message ba to show it on the website, see Save, Publish & Schedule. After publish, the shop picks it up within a few minutes.

FIELDS in Hygraph on the Message Bar model:

Tenant

Select the tenant. The bar only shows on that tenant’s shops.

Storefront

Select every storefront that should show this bar. A storefront you leave out will not show it.

Text Color

Empty means black. If filled, text shows in that color. A recommendation is to refer to your storefront’s style guide and use the appropriate Hex/RGB codes.

Background Color

Empty means white.

End Date

The bar stays visible on the website through the day before this date, and is hidden from on the End Date. Leave it empty to keep the bar until you unpublish or delete it.

Countdown Date and Time

Optional timer next to the text: days, hours, minutes, seconds. On mobile it hangs just under the bar. End Date is what hides the bar.

Message

The actual message shown in the Message Bar. Keep it short and concise, we also recommend checking the result on mobile.

Countdown Complete Text

After Countdown Date and Time has passed, this text replaces Message. With no countdown date, this field stays unused. With a countdown and an empty completion text, Message stays and the timer disappears.

You can also schedule a change to Message for the same moment. See Save, Publish & Schedule.

Show messagebar on pages

Optional field. Link existing Page, Product Landing Page, or Product entries. This bar then shows ONLY on those entries, together with any global bar. Link existing entries; create the page or product in its own model.

To show only this bar, turn on Hide messagebar on that entry. That switch hides global bars. It leaves a bar that lists the entry in place. The switch is on Pages, product landing pages, and Products. Categories, blogs, and content pages always keep the global bar.

URL

Optional field. If this is filled, then the entire bar becomes clickable and direct to this URL. Note that a locale with no URL uses the default locale. The shop reads this field. On click type can stay empty.

Action

Optional field. One action. Hover it and use remove to clear it. Use URL or Action. Filling both makes the bar a link and also runs the action.

Add Discount Code

Clicking the bar applies this code. Create it in commercetools first, see Create a Discount Code. Then, make sure to correctly type in the full discount code. Discount code is a localized: fill it for each locale.

Redirect URL (redirectUrl) — optional, localized. After the code is applied, the shopper is sent here. Empty means they stay on the page after applying the code. The same code already in the cart shows a confirmation and stays put.

Add Product to Cart

Clicking the bar adds the product. Use Add existing Product. Create the product in commercetools. See Create a Product. Pick one product, then set Amount.