Banners

Rich content can be added to a campaign page with banners (also known as "content blocks"). To add or edit banners, go to the Banners toolbox.

Creating a Banner

Click the "Add Banner" button at the bottom of the panel to create a new banner. A pop-up window will appear with options to configure the banner's placement and banner type. It will also feature a banner preview on the right.

Note: You can have up to eight banners on any one campaign, with four of those allowed to be inline banners.

Configure the placement (Primary, Secondary, Left, Inline, Footer), then choose the banner type (HTML, Image, or Video). You can feature an image with an optional link attached to it, an embedded video, or custom HTML. For banner placement, you can select where on the page you'd like the banner to appear. Primary and Secondary banners appear at the top, Left and Inline beside the results, and Footer below your results.

Note: Inline banners can only stretch the width of one product card. If you want a banner that takes up the width of multiple products, this request will need to be managed on your end (and we may need to adjust our Athos implementation to support it).

Primary and Secondary banners are usually the same thing. Some Athos Commerce sites have a custom setup that places these two banners types in different locations on the page, such as above and below pagination controls.

Different banner types can also be used to "stack" banners from different campaigns. For example, if your Default Campaign has a Primary banner and a specific campaign has a Secondary banner, both banners will appear on the page for the specified campaign. If they are both Primary banners, however, the specific campaign's banner will override the default campaign's banner.

The size of your banner image is entirely up to your desired outcome, and the code styling is based on your store. In most cases, banners span the entire width of a store's content (usually at least 1200 pixels wide) and automatically scale down on smaller devices. If you notice resizing issues that you or your team are unsure how to resolve, reach out to the support team for additional assistance.

Scroll down and add the custom HTML code, image, or video for your banner content.

Preview the banner on the right side of the pop-up window and adjust your settings as needed. Click the "Add Banner" button at the bottom right to save the setup, or click the "Discard" button to cancel the settings.

Inline Banner Content

While adding banners to a page on your site, you can also place content directly within the product grid. 

To add an inline banner, select the "inline" option while creating a banner. You can add up to four.

After selecting "inline", add the position in which you'd like it to appear within the product grid. 

You can drag the banner around the grid to reposition it. You can also hover over the banner to remove or edit it, or move it directly to a specific spot using the cursor.

Tip: Inline banners will only be shown alongside other products. If the page does not contain any products, inline banners will not be displayed.

Previewing the layout

You can choose to preview a banner by clicking the Preview Banner icon (eye symbol) next to the banner name.

You can also easily edit or remove an existing banner by clicking the Edit icon or the Delete icon (red minus sign).

Changing Your Banners By Device

If you would like a different image to show up on mobile vs. desktop devices for your shoppers, copy the code below and use it in an HTML banner in Visual Merchandising. Be sure to change the min-width value to the screen width at which you would like the mobile image to start appearing, and fill out the image URLs with the web addresses of your images.

<style>
.mobile-banner, .desktop-banner {max-width: 100%;}
.mobile-banner {display: block;}
.desktop-banner {display: none;}
@media only screen and (min-width: 760px) {
    .mobile-banner {display: none;}
    .desktop-banner {display: block;}
}
</style>
<img class="mobile-banner" src="IMGURL.JPG"/>
<img class="desktop-banner" src="IMGURL.JPG"/>

Example Screenshots

Desktop	Mobile