Banner Revolution: creating eye-catching promotions without a designer

Last updated: June 2026.

You've set up the discount, a cart rule, a specific price, maybe a voucher code ready to hand out. The hard part is done. But a discount nobody sees doesn't sell anything, and the way most shoppers find out a sale is happening is the banner at the top of your homepage. That's the gap this guide closes: not the promotion itself (that's cart rules and specific prices), but the banner that announces it, designed cleanly, sized correctly, and wired into PrestaShop so the image, the link and the actual discount all point at the same thing. You don't need a designer for this, and you don't need to learn Photoshop.

Start from the discount, not the design

A banner is the storefront for a promotion that already exists in your back office. Before you open a design tool, the offer should be live and tested: a cart rule under Catalog → Discounts → Cart rules (the exact wording may vary by version and theme), or a specific price set on the product or category. The reason to build it first is simple. The banner has to be honest. If the banner says "20% off everything" but your cart rule only applies to one category, you've trained customers to distrust your headline, and you'll spend the sale answering "why didn't my code work?" emails.

So before designing, pin down three things the banner has to match exactly:

• The number. Is it 20% off, €10 off, free shipping, or buy-one-get-one? Pull it straight from the cart rule's Actions tab so the headline and the math agree.
• The scope. Whole store, one category, or selected products? A cart rule restricted under Conditions to a specific category should produce a banner that links to that category, not the homepage.
• The deadline. If the cart rule has a valid-to date, the banner can say so. "Ends Sunday" is one of the few honest urgency cues you have, and it's only honest because the back office enforces it. (For timing promotions automatically, see scheduled discounts.)

If your offer needs a code customers type at checkout, generate it in the same cart rule, the Code field on the Information tab, and put that exact code on the banner. We'll come back to why showing the code on the banner (rather than hiding it) matters for conversion.

Design principles that survive without a designer

The good news for non-designers: an effective promotional banner is mostly restraint, not talent. Four rules carry almost all of the result.

One message per banner

The most common mistake is cramming. "20% off summer collection + free shipping + new arrivals + join our loyalty program" on one banner means the customer reads none of it. One banner, one offer, one call-to-action. If you genuinely have two promotions running, that's a case for two separate banners or a slider, but each slide still gets a single focus. A banner that maps one-to-one onto a single cart rule is a banner that's easy to write and impossible to misread.

Readable in two seconds

Banner text has to land at a glance, because that's all the attention it gets:

• Big headline: at least 32px on desktop, 24px on mobile. The discount number is the star. Make it the largest thing on the banner.
• High contrast: light text on dark, or dark text on light. Text over a busy photo needs a colour overlay or a darkened scrim behind it, or it disappears.
• Few words: 5–8 for the headline, 10–15 for any subtext. "Summer Sale. 20% Off Everything" plus a code is enough.
• Clear hierarchy: the offer first, the reason second, the code or deadline third.

A call-to-action that looks clickable

Every promotional banner needs a button or obvious link telling the visitor what to do: "Shop the Sale," "See the Collection," "Use Code SUMMER20." It should stand out from the rest of the banner and read as a thing you press. Vague is wasted, "Learn More" under a 20%-off headline throws away the momentum the number just created.

Images you don't have to shoot

Use a real product photo or a clean lifestyle image if you have one. If you don't, a solid-colour or simple-gradient background with bold text beats a blurry or pixelated photo every time. A tidy text-only banner looks deliberate; a stretched stock image looks like a mistake. Don't let "I have no photos" stop you. Most strong sale banners are type on a colour.

Free tools that do the design for you

You don't need paid software. Three free tools cover essentially every banner a PrestaShop store needs.

For most merchants the answer is Canva: start from a template, swap the text for your offer, drop in a product photo or pick a background colour, and export. The skill it takes is choosing a template and not over-editing it.

Banner sizes for PrestaShop

Exact dimensions depend on your theme, but these are the common ones and the ones most banner modules expect:

• Homepage hero banner: 1920 × 600–800px, full-width, above the fold.
• Category banner: 1200 × 300–400px.
• Sidebar banner: 300 × 250px or 300 × 600px.
• Mobile banner: 750 × 750px or 750 × 500px, a separate, mobile-specific version, not a shrunk desktop one.

Always make a separate mobile version. A banner that reads cleanly at 1920px becomes an unreadable smear when squeezed onto a 375px phone screen, and on a typical PrestaShop store a large share of traffic, often more than half, is on a phone. Mobile banners need larger relative text, simpler layouts, and a shorter message.

For the file itself: export as WebP or an optimized JPEG for photo banners, and try to keep it under roughly 200KB. Use PNG only when you truly need transparency. Oversized banner images are one of the most common causes of a slow homepage, and a slow homepage costs you the very visitors the banner is meant to convert. PrestaShop's Advanced Parameters → Performance and your theme's image settings won't rescue a 3MB hero image; size it before you upload.

Getting the banner into PrestaShop

PrestaShop doesn't ship a single "promotional banner" feature, so there are a few honest routes, pick by how often you change banners and how much control you want.

• The native image slider. Most default themes ship with the ps_imageslider module. Go to Modules → Module Manager, find the slider, click Configure, and you can upload slide images, set the link URL, and write the title/caption. This is free and built in. Fine for an occasional sale banner you set and forget.
• Theme settings. Many commercial themes have their own banner manager under Design → Theme & Logo or a dedicated theme-configurator module, often with more control over placement (category pages, sidebars) than the stock slider.
• A static block / HTML. For a banner in a fixed spot, a CMS-style HTML block (via a "custom HTML" module or your theme's positions) lets you place an image wrapped in a link wherever a hook exists.
• A dedicated banner module. If you run promotions often and want more than the stock slider gives you, separate mobile-specific images, proper text overlays and call-to-action buttons rendered over the image, and several independent banner groups for the homepage, CMS pages and widget slots. A purpose-built module saves the repetitive back-office work and lets non-technical staff swap a banner in minutes. Our own Banner Revolution is built for exactly this: full-width hero carousels with text-over-image overlays and CTAs, a distinct desktop and mobile image per slide (so you're not squashing a 1920px banner onto a phone), and multiple slider groups you can place where you need them, all managed from the back office without touching a template.

Whichever route you use, the one rule that matters: the banner's link must point at the right place. A store-wide sale links to the homepage or a sale category; a category promotion links to that category; a single-product offer links to that product. Sending a "20% off dresses" banner to the homepage makes the customer hunt for the dresses, and hunting is where they leave.

Make the banner and the discount agree

This is the part generic banner advice skips, and it's the part that decides whether the promotion actually converts on a PrestaShop store. The banner is a promise; the cart rule, specific price or voucher is whether you keep it.

• Automatic discounts need no code on the banner. If your cart rule applies automatically (no code, "highlight" left off), the banner just announces the deal and links through. The price is already reduced when the customer lands. Cleanest experience: nothing to type.
• Code-based offers must show the code. If the cart rule requires a code, put that exact code on the banner, "Use code SUMMER20." A coupon box with no visible code is an invitation for the customer to open Google, go hunting for a working code, and sometimes not come back. Show the code, and consider pre-applying it for visitors who arrive from the banner link (a cart rule's Highlight helps surface it; some modules or custom links can pre-apply a voucher, but otherwise just show the code clearly).
• Match the scope exactly. If the cart rule is restricted to a category under Conditions, the banner copy and link must reflect that. "Everything" on the banner and "selected categories only" in the back office is the fastest way to generate support tickets during your busiest sale.
• Let the deadline come from the rule. If you put "Ends Sunday" on the banner, set the cart rule's valid-to date to match so the discount actually stops when the banner says it does. Honest urgency only works when the back office enforces it, see creating urgency without being manipulative.

For gift-card and voucher promotions specifically, "€10 gift card with every order", the banner advertises it and the gift-card / voucher setup delivers it. Keep one thing in mind that's easy to forget: some products should never carry the headline discount at all. If you exclude certain items in the cart rule's conditions, don't let a "20% off everything" banner imply otherwise. See why some products should never go on sale.

Keep banners fresh, and don't over-slide

A banner that's sat on your homepage for three months is invisible to returning visitors; they've stopped seeing it. Rotate on a schedule:

• Promotional banners: match the promotion's duration exactly. Up when the cart rule goes live, down when it expires.
• Seasonal banners: swap with each season or major event. A seasonal sales calendar tells you what's coming so the banner is ready before the date, not after.
• General brand banners: refresh every four to six weeks so regulars don't tune them out.

Use sliders sparingly. Most visitors see only the first slide, so a five-slide carousel mostly buries four messages. If you slide, put the most important offer first and cap it at three or four slides. For a single promotion, one static banner with a clear message usually beats a slider outright.

Check whether the banner actually worked

You don't need expensive tooling to know if a banner is pulling its weight. Add UTM parameters to the banner's link (for example ?utm_source=homepage&utm_campaign=summer-sale) so the clicks show up as a named source in your analytics, and watch a few things:

• Click-through: of the visitors who saw the banner, how many clicked it? Low clicks means the message or design needs work.
• Conversion after the click: do banner-clickers actually buy? Clicks without orders points at the landing page or a mismatch between banner and discount, not the banner art.
• Revenue from the campaign: if you used a unique voucher code, the voucher's usage on its cart-rule screen and your order list (filtered or searched by the voucher code), or an analytics/reporting module, tell you exactly how much that promotion brought in.

That last point is a quiet advantage of tying the banner to a coded cart rule: the code is its own tracking pixel. Every order that used it is a banner click you can count in real money, straight from the back office.

Good promotional banners are simple, clear, and honest. You don't need design talent. You need a discount that's already live in your back office, a clear message that matches it, a readable headline, a button that says what to do, and a link that lands on the right page. The design tools are free, the sizes are known, and PrestaShop already has somewhere to put the banner. The work that actually moves the needle isn't the artwork; it's making the banner and the cart rule tell the customer the exact same true thing.

Frequently asked questions

Do I need design skills to make a promotional banner?

No. A strong sale banner is mostly restraint, one offer, a big readable headline, high contrast, and a clear button. Canva's free tier has web-sized templates you swap your text into; many of the best-converting banners are just bold type on a solid colour, no photo at all. The skill is picking a template and not over-editing it.

What size should a homepage banner be in PrestaShop?

It depends on your theme, but a full-width homepage hero is commonly around 1920 × 600–800px, a category banner around 1200 × 300–400px, and a sidebar banner 300 × 250 or 300 × 600px. Always make a separate mobile version (around 750 × 750 or 750 × 500px) with larger relative text, a desktop banner squeezed onto a phone becomes an unreadable smear, and on most stores more than half the traffic is mobile.

Where do I put the banner, the native slider or a module?

For an occasional set-and-forget sale, the built-in ps_imageslider (Modules → Module Manager → Configure) is free and enough. Upload the image, set the link. If you run promotions often and want separate mobile images, text-and-CTA overlays, or several banner groups across the site, a dedicated module like Banner Revolution removes the repetitive back-office work. Avoid hand-editing the theme template unless you have no other option, since an update can wipe it.

Should I show the discount code on the banner or hide it?

Show it. If the cart rule needs a code, put the exact code on the banner ("Use code SUMMER20"). A coupon box with no visible code sends customers off to Google hunting for one, and sometimes they don't come back. If the cart rule applies automatically with no code, the banner just announces the deal and links through; the price is already reduced when they land.

How do I know if a banner actually worked?

Add UTM parameters to the banner's link (for example ?utm_source=homepage&utm_campaign=summer-sale) so the clicks show as a named source in your analytics, and watch click-through, conversion after the click, and revenue. If you tied the banner to a unique voucher code, the cart-rule screen and your order list show exactly how many orders used it. The code doubles as a tracking pixel you can read in real money.