14. Advanced settings
The Advanced section of Settings is meant for theme developers and shop owners comfortable with CSS. Most stores never need it.
Content container of the theme
Content container of the theme (optional) is the CSS selector of the main content column of your theme, for example #wrapper .container. Only fill it in if the banners overlap your content. The module finds the container automatically in most themes: it uses the widest visible Bootstrap container (.container, .container-lg, .container-xl and so on) that is narrower than the window. If no container is found, the side banners are shown whenever the window is wide enough.
The storefront script measures the left edge of this element to decide whether the side banners fit (the free space must be at least the banner width plus 16 px) and to position them next to the content.
Allowed characters: letters, digits, spaces and # . > : - _ [ ] = " ' ,, up to 200 characters. Otherwise the field shows "Use a simple CSS selector, e.g. #wrapper .container."
How to find the selector:
- Open your store in Chrome or Firefox and right-click the edge of the main content, then Inspect.
- Look for the element that holds the page content and has a fixed maximum width (often
.containerinside#wrapper,mainor#content-wrapper). - Enter its selector, save and check the preview on Wide screen and Laptop.
Custom CSS
Custom CSS (optional) is added to every page that shows a campaign (and to the editor preview); pages without a campaign do not load it. Up to 20,000 characters; <style> and <script> tags are removed.
Prefer the editor where possible: colours, font, rounding and entrance are set per campaign in the Design tab, widths and positions in Display settings.
Storefront structure
<div id="sab-campaign" class="sab-root sab-anim-fade sab-has-close" data-mode="sides|bar|none">
<aside class="sab-side sab-side--left sab-mode-design fancy-baner-left" data-place="left">…</aside>
<aside class="sab-side sab-side--right sab-mode-image fancy-baner-right" data-place="right">…</aside>
<div id="mobile-ad-banner-wrapper" class="sab-bar sab-bar--bottom sab-mode-design" data-place="mobile">…</div>
</div>
| Selector | Element |
|---|---|
#sab-campaign, .sab-root |
Wrapper of the campaign. data-mode tells which placement is shown: sides, bar or none. |
.sab-side, .sab-side--left, .sab-side--right |
Side banners (fixed position). |
.sab-bar, .sab-bar--top, .sab-bar--bottom |
The bar. .sab-bar--top sits in the page flow above the header (full width); .sab-bar--bottom is fixed to the screen. |
.sab-mode-design, .sab-mode-image |
Content type of a placement. |
.sab-card, .sab-card--side, .sab-card--bar |
Designed banner. |
.sab-card__title, .sab-card__sub |
Headline and supporting text. |
.sab-cta |
Button. |
.sab-coupon, .sab-coupon__code |
Discount code button. |
.sab-countdown, .sab-countdown--cards, .sab-countdown--text |
Countdown; .sab-countdown__unit, __value, __name, __label inside. |
.sab-media, .sab-media__img, .sab-media__link |
Own-image banner. |
.sab-close |
Close button. |
.fancy-baner-left, .fancy-baner-right, #mobile-ad-banner-wrapper |
Kept for compatibility with 2.x custom CSS. |
CSS custom properties
The campaign colours and sizes are set as CSS custom properties on #sab-campaign. You can read or override them:
| Property | Value |
|---|---|
--sab-bg, --sab-bg-solid |
Background (one colour or the gradient) and a plain colour (the first gradient point) |
--sab-pattern, --sab-pattern-opacity |
Background pattern and its strength (0.05–1; drawn on the card's ::before layer) |
--sab-pattern-img, --sab-pattern-size |
Own pattern: the tile image and its width (with the root class sab-pattern-custom) |
--sab-fg, --sab-sub |
Headline and supporting text colour |
--sab-accent, --sab-accent-fg |
Button colour and button text colour |
--sab-radius |
Corner rounding |
--sab-font |
Font stack |
--sab-side-w, --sab-top |
Side banner width, distance from the top |
--sab-cd-bg, --sab-cd-fg |
Countdown strip colours on image banners (by default the design background at 88 % opacity and the headline colour) |
Examples
Raise the banners above a sticky header of your theme:
#sab-campaign .sab-side,
#sab-campaign .sab-bar {
z-index: 1100;
}
Change the countdown strip over images:
#sab-campaign {
--sab-cd-bg: rgba(200, 16, 46, 0.9);
--sab-cd-fg: #ffffff;
}
Uppercase headline on designed banners:
#sab-campaign .sab-card__title {
text-transform: uppercase;
}
Keep the side banners hidden while you test only the bar:
#sab-campaign .sab-side {
display: none !important;
}
Notes
- Do not change
displayorpositionof.sab-sideand.sab-barin normal use: the storefront script shows and positions them after measuring the page. - The banners use
position: fixed. A theme that setstransformorfilteronbodybreaks fixed positioning. - Campaign assets (
front.css,front.js) and the custom CSS are loaded only on pages that show a campaign.
Theme position (hook)
The module prints the campaign once per page through displayAfterBodyOpeningTag (right after the opening <body> tag), with displayBanner and displayBeforeBodyClosingTag as fallbacks. It loads its assets through displayHeader. Check them in Design > Positions if no campaign appears. The banners are positioned by the script, so the place of the hook inside the theme does not matter, only that the theme outputs at least one of them. Classic's checkout, which has no displayBanner, shows campaigns through displayAfterBodyOpeningTag.
Google Analytics and Meta Pixel
Settings > Google Analytics and Meta Pixel sends campaign events to the tools your store already uses:
| Switch | Events |
|---|---|
| Send events to Google Analytics 4 / Tag Manager | view_promotion when a banner is seen, select_promotion on a click (with promotion_id sab-<campaign ID>, promotion_name = campaign name, creative_slot = left, right or mobile), sab_coupon_copy when a code is copied. They fill the Promotions report of GA4 (Monetisation > E-commerce) and link banners to purchases. With Google Tag Manager the events go to the dataLayer under ecommerce. |
| Send events to Meta Pixel | Custom events BannerView, BannerClick, CouponCopy with the campaign, its ID and the placement. |
Events are sent only when gtag, dataLayer or fbq already exist on the page: the module loads no tracking code, so your cookie consent decides. No UTM parameters are added to your own links – on internal links they would start a new visit in Google Analytics and hide where your sales came from.
One-page checkout modules
If a module replaces the checkout, enter its page as module-<module>-<controller>, one per line, e.g. module-supercheckout-supercheckout. The page then counts as Checkout in the page rules (for example "All pages except Checkout"). You find the value in the address of the checkout page (fc=module&module=…&controller=…) or ask the module's author.
Page cache
Full-page cache modules (JPresta Page Cache, LiteSpeed Cache and similar) and caching servers (Varnish, Cloudflare APO) store whole pages and serve the same copy to many shoppers. A campaign printed into such a page would show the same to everyone – including campaigns meant for a customer group, a cart value or a country – and would stay on the page after its end date.
Settings > Advanced > Page cache > Load campaigns:
| Option | Behaviour |
|---|---|
| Automatically (default) | When an enabled JPresta or LiteSpeed cache module is found, campaigns load after the page; otherwise with the page. The option says which case applies. |
| With the page | The campaign is part of the page HTML. Fastest; only without a full-page cache. |
| After the page | The cached page already contains a campaign, so the page does not move when it loads. Right after loading, the storefront asks the module for the campaign of the current shopper (groups, cart, country, device, time) and swaps it only when this shopper gets another one, or hides it when none applies. Choose it for caching servers the module cannot detect. |
If a page cache module is found but With the page is selected, the settings page shows a warning.
Cookies and consent
In the EU, the UK and Switzerland, the law (the ePrivacy Directive) requires the shopper's consent before a website saves data in the browser that is not strictly needed. This also applies to data that is not personal and to the browser's local storage.
Banner Ads saves a few small items in the browser for visit targeting, A/B tests and statistics. With Wait for consent from your cookie banner switched on (the default), it saves them only after the shopper agrees in your cookie banner. The banner itself is always shown: consent decides only what is saved, never whether the shopper sees the campaign.
You do not need to configure anything: the module finds your cookie banner on its own.
Supported cookie banners
| Cookie banner | How the module reads it |
|---|---|
| Cookiebot | Its categories Statistics and Marketing |
| OneTrust | Its groups: Performance (C0002) for statistics, Targeting (C0004) for marketing |
| CookieYes | Its categories Analytics and Advertisement |
| iubenda | Its purposes Measurement (4) and Marketing (5) |
| Banners using the IAB TCF v2.2 standard (Didomi, Usercentrics, Quantcast, Sourcepoint and others) | Purposes 1 + 8 for statistics, 1 + 5 + 6 for marketing |
| Any cookie banner or module that sends Google Consent Mode v2 – including the PrestaShop cookie modules by Línea Gráfica, Idnovate, PRESTACHAMPS, BusinessTech and HiPresta | analytics_storage for statistics, ad_storage for marketing |
If your cookie banner offers Google Consent Mode v2, switch it on there; most PrestaShop cookie modules have it as an option.
PrestaShop cookie modules that block modules: do not assign Banner Ads to a cookie category in their list of blocked modules. They would switch off the whole module, and the campaign would disappear until the shopper accepts. Banner Ads follows the shopper's choice on its own.
What the module saves in the browser
Use this table for your cookie policy and to sort the cookies in the scanner of your cookie banner (Cookiebot and CookieYes list them as "unclassified" otherwise).
| Name | Type | Purpose | Duration | Category |
|---|---|---|---|---|
sab_visit |
Cookie | Visit number and time of the last page, for campaigns aimed at the first or a returning visit | 90 days | Marketing |
sab_src |
Cookie | Where the visit came from (campaign link words such as utm_source, Google or Facebook ads, the referring site), for campaigns aimed at a source |
Until the browser closes | Marketing |
sab_seen |
Cookie | Which campaigns the shopper saw in the last 7 days, to count orders for a campaign and its A/B variant | 7 days | Statistics |
sab-ab-{id} |
Local storage | The A/B test variant the shopper sees, so it stays the same | While the A/B test runs | Statistics |
sab-dismiss-{id} |
Local storage | The shopper closed the banner | As set in the campaign (When > After closing, show it again) | Necessary (the shopper's own choice) |
sab_p{id} |
Inside PrestaShop's cookie | The shopper's personal discount code and its end | Until the code ends | Necessary (requested by the shopper) |
sab-personal-{id} |
Local storage | The same personal code, to show it on every page | Until the code ends | Necessary (requested by the shopper) |
sab_visit, sab_src, sab_seen and sab-ab-{id} are saved only with consent and are deleted when the shopper withdraws it.
The settings
Open Settings in the module and find Cookies and consent.
Wait for consent from your cookie banner
On by default. Switch it off only if your shop sells exclusively outside the EU, the UK and Switzerland. If your shop's country is in these regions, the module shows a warning when it is off; you can still save.
If no cookie banner is found on the shop
What happens when the module finds no cookie banner within 10 seconds of loading a page:
- Save nothing – the default in the EU, the UK and Switzerland. Campaigns aimed at the first or a returning visit and A/B tests wait until a cookie banner is installed. Other campaigns show as usual.
- Save as usual – the default elsewhere. For shops that sell only outside these regions.
If your shop is in the EU, the UK or Switzerland and you choose Save as usual, the module shows a warning.
Views and clicks of shoppers without consent
- Count only with consent – the default in the EU, the UK and Switzerland. Views, clicks and closes then include only shoppers who accepted statistics cookies.
- Count anonymously – the default elsewhere. Views, clicks and closes are counted for everyone as daily totals: no cookie, no identifier, nothing saved in the browser. This meets the French CNIL exemption for aggregated audience measurement. German and Austrian authorities generally require consent even for this; if you sell to Germany or Austria, keep Count only with consent.
Delivered is always counted: it is the number of pages on which the module delivered the campaign, counted on your server without touching the shopper's browser. The campaign list shows it next to views and clicks, so lower view numbers in the EU do not mean the campaign stopped showing.
Detected cookie banner
Below the settings, the module shows which cookie banner it found on the last visit with a campaign, for example "Cookie banner found on the shop: Cookiebot". If it says no cookie banner was found, check that your banner is installed and loads on the storefront.
How consent changes what shoppers see
- First visit and returning visit campaigns: without consent the module cannot tell the visits apart, so these campaigns do not show until the shopper agrees. On the page where the shopper agrees, the module picks the campaign again, so a welcome campaign appears right away.
- Source of the visit: the first page of a visit is matched without consent (the campaign link is in the address). The source is remembered for the rest of the visit only with consent.
- A/B tests: a shopper gets a variant only after agreeing to statistics cookies. Until then the shopper sees version A and is not counted in the comparison of the two versions; the campaign totals still include them.
- Orders after seeing a campaign are counted only for shoppers who agreed to statistics cookies.
Custom integration (other cookie banners)
If your cookie banner is not in the list and does not send Google Consent Mode, it can pass the shopper's choice with a few lines of JavaScript. Calls made before the module has loaded are kept.
<script>
window.sabConsent = window.sabConsent || [];
// after the shopper's choice:
sabConsent.push(['set', { statistics: true, marketing: false }]);
// when the shopper withdraws consent:
sabConsent.push(['forget']);
</script>
A custom integration takes priority over any detected cookie banner.
If your OneTrust, iubenda or TCF setup uses other category IDs, set them before the module loads:
<script>
window.sabConsentMap = {
onetrust: { statistics: 'C0002', marketing: 'C0004' },
iubenda: { statistics: 4, marketing: 5 },
tcf: { statistics: [1, 8], marketing: [1, 5, 6] }
};
</script>
Automatic blocking by cookie banners
Some cookie banners block scripts automatically until the shopper agrees. The module's script tells Cookiebot not to block it (data-cookieconsent="ignore"), because it saves nothing without consent anyway. CookieYes and iubenda block known third-party trackers only, so the module's own script is not affected. If your cookie banner still blocks modules/sideadbanners/views/js/front.js, add it to the banner's list of allowed scripts; otherwise the campaign does not appear.