Big Cartel Theme Support

How do I display a notice in my Big Cartel shop?

How do I display a notice in my Big Cartel shop?

From time to time you may wish to display a notice in your shop. For example..

It’s Spring sale time!! Enter discount code YAY4SPRING at checkout to get 20% off.

..or..

On 20th Decemember, we’re off to enjoy the holidays with our families. You can still place orders while we are away, however we won’t be able to get to any deliveries or enquiries until we get back on the 4th January. Have a very happy, safe and fun holiday!!

..or..

We use cookies to store cart information and ensure that we give you the best experience. If you continue without changing your settings, we’ll assume that you are happy to receive all cookies from this website.

The easiest way to display such notices in your shop is via an appropriate Insert Content method - see An introduction to the Insert Content method. Which method you choose depends upon where you want the notice to appear in your shop.

The most common location for notices is in a banner at the very top of the page. For this location, we would choose the x-ic-open-body-code method. If we wanted the banner to be within the page content, after the main navigation menus, we might choose the x-ic-before-all method instead.

Dismissable notices

In some cases you may want your notice to be dismissable, like the cookie message in our examples above. There are three methods for doing this.

Keep in mind, while applying the following methods, that once you dismiss a notice you will not see it again. It is dismissed permanently. For this reason, you should avoid dismissing it until you have it styled and functioning to your satisfaction.

Changing the name / id of a notice, to a value that has not been previously dismissed, will make it appear again.

If your notice consists of a simple image or a video, the easiest method is to use a modal window link as detailed in our article How do I use the popup image viewer with custom content? Section Displaying the modal window automatically on page load towards the end of the article explains the relevant options for creating a notice with this method.

As with all of these methods, a modal window link can be added to any page content or product description area. For example, if we only wanted the modal window to display on the home page, we would create a new page in our Customize design > Pages area of our Big Cartel admin with the exact title..

x-ic-after-home

..and, this is important, we switch to HTML edit mode per How do I switch to HTML edit mode?

Then we add our modal link to the content of the x-ic-after-home page..

<a href="http://my-drop-box.com/summer-sale.jpg" id="summer-sale-banner" class="zoom-modal click-once hide">Our Summer Sale!</a>

..and then save our changes.

Method 2: The popup shortcode

The [[popup]] shortcode — refer to Shortcodes - Popup links and windows — allows you to display content in a popup window. Since the popup window will be located in the same place regardless of where we place our code, choosing an insert content method located towards the end of the page is best practice. The x-ic-after-all is a good option.

For example, we create a new page in our Customize design > Pages area of our Big Cartel admin with the exact title..

x-ic-after-all

..and, this is important, we switch to HTML edit mode per How do I switch to HTML edit mode?

Then we add our notice to the content of the x-ic-after-all page, wrapped in the [[popup]] shortcode..

[[popup timer="0" name="Cookie Notice"]]
We use cookies to store cart information and ensure that we give you the best experience. If you continue without changing your settings, we'll assume that you are happy to receive all cookies from this website.
[[/popup]]

..and then save our changes. Note that we set the timer to 0 because we want the notice to popup immediately. For more information on the [[popup]] shortcode, see Shortcodes - Popup links and windows.

Finally we check the public side of our shop front to see if the notice appears correctly.

Method 3: The notice class

Aarcade themes support a notice class that can be used to style notices as well as make them dismissable. This class is used by wrapping notice content in div tags as follows:

<div class="notice">

..my notice content..

</div>

To make the notice dismissable, we change this to:

<div id="my-custom-notice" class="notice dismissable">
<a class="close">&times;</a>

..my notice content..

</div>

Note that we added the extra class dismissable, the id id="my-custom-notice" (which is required to log each unique notice that has been dismissed by a visitor) and the close link <a class="close">&times;</a>.

The close link text &times; is HTML entity code that renders a multiplication symbol like this × It is the best option for your close link, but using other text is possible. If you do use other text, or you have custom styled your notice, the close link may not be visible because of its default positioning. To correct this, you can apply custom styles as detailed in section Styling notices below.

Your id value should be changed for each different notice you create and should only contain lowercase letters and dashes.

For example, if we want our cookies message to be displayed in a dismissable banner, we create a new page in our Customize design > Pages area of our Big Cartel admin with the exact title..

x-ic-open-body-code

..and, this is important, we switch to HTML edit mode per How do I switch to HTML edit mode?

Then we add our notice to the content of the x-ic-open-body-code page, wrapped in the notice class div..

<div id="cookie-notice" class="notice dismissable">
<a class="close">&times;</a>

We use cookies to store cart information and ensure that we give you the best experience. If you continue without changing your settings, we'll assume that you are happy to receive all cookies from this website.

</div>

..and then save our changes. Finally we check the public side of our shop front to see if the notice appears correctly.

Styling notices

Notices can be styled, like any other content, via custom CSS - see How do I create custom style code? You can make this easier by wrapping your notice in a div tag with a unique id.

Let’s take our previous example above, with an id value of cookie-notice, and then style it by adding the following CSS to our custom style coding area — see Where do I add custom style code?:

#cookie-notice {
	background-color: #000000;
	border: 0;
	color: #ffffff;
	text-align: center;
}

You can also contain your styles within the insert content page and/or use inline styles. For example, we might add the following to an x-ic-open-body-code page:

<div id="holiday-notice">
<style scoped>
	#holiday-notice {
		background-color: #f25559;
		padding: 5px;
	}
	#holiday-notice p {
		max-width: 1000px;
		padding: 5px 0;
		margin: 0 auto;
		color: #000000;
		font-size: 15px;
	}
</style>

<p>On 20th Decemember, we're off to enjoy the holidays with our families. You can still place orders while we are away, however we won't be able to get to any deliveries or enquiries until we get back on the 4th January.</p>

<p style="font-weight: bold;">Have a very happy, safe and fun holiday!!</p>
</div>

Note that we manually added <p> paragraph tags to our notice content. This is because the x-ic-open-body-code is a code insert content method and therefore will not automatically generate paragraph tags for us.

If you are using Method 3 for your notice and your close link position needs adjusting, you can use inline styles as follows:

<div id="my-custom-notice" class="notice dismissable">
<a class="close" style="top: 5px; right: 5px;">&times;</a>

..my notice content..

</div>

Note that the positioning is set relative to the top and right side of the notice. You should adjust the top and right values to achieve the result you desire. You can use negative pixel values as well as add other styles. For example, you might also change the color with color: #ffffff;, remove the default semi-opaque style with opacity: 1; and/or remove the default text shadow style with text-shadow: none;. As with any inline style, you have the option of moving them to a style tag within the page (see previous example above) or to your custom style coding area to keep your styles all in one place and/or apply them globally if needed, for example:

/* Styling close button on dismissable notices */
.notice.dismissable .close {
	opacity: 1;
	color: #ffffff;
	text-shadow: none;
}

Built in styles

The built in notice class also has a number of extra classes available. For example, if you are using a notice class like this..

<div class="notice">

..my notice content..

</div>

Adding the class info, warning, danger or success will colour code the notice accordingly. For example this..

<div class="notice danger">

This is a very important notice - pay attention!!

</div>

..will look like this..

This is a very important notice - pay attention!!

Adding the class advice or alert will change the appearance of the notice. For example this..

<div class="notice success alert">

Hooray! Something good happened.

</div>

..will look like this..

Hooray! Something good happened.

Adding the class panel and including a notice heading like this..

<div class="notice info panel">

<div class="alert-title">
<h4>This is just FYI</h4>
</div>

Just wanted to let you know...

</div>

..will look like this..

This is just FYI

Just wanted to let you know…

Note that level 4 heading tags <h4> are used for notice headings.

Further classes include:

  • top-of-page - Removes borders from all sides of the notice except the bottom.
  • small - Reduces the size of the notice text.
  • affix - Moves the notice out of the layout and fixes it to the top left.
  • scroll - To be used with the affix class, allows the notice to move with the page when scrolled.
  • top or bottom - To be used with the affix class. Use one of these to define the position of the notice.
  • left or right - As above.
AarcadeHow do I display a notice in my Big Cartel shop?