Promo Banner – Yaxii COD Theme — Fast WooCommerce Theme for Algeria Documentation

Configuring the Promo Banner

The Promo Banner is a single clickable promotional image — the homepage equivalent of a magazine ad. It is meant to sit between product sections, break up the visual rhythm of carousels and grids, and direct attention to a campaign, a collection, or a single high-margin product. Two layouts are available: a full-width image with overlay text, or a split layout with the image on one side and a text-plus-button block on the other. Both layouts are mobile-first and adapt cleanly to phones.

Opening the Promo Banner section

Go to Yaxii COD > Settings > Homepage Layout. Find the Promo Banner card and click it to expand. If you do not see one, click Add Section at the bottom of the list and choose Promo Banner.

The Promo Banner section card expanded in the Homepage Layout tab, showing the Banner Image uploader with an image preview, the Banner Link URL field, the Overlay Text input, the Full Image / Split layout toggle, and a Button Text field below. — The Promo Banner card with all configurable fields visible.

Configurable fields

Field	What it controls	Required
Banner image	The promotional image. The banner section does not render at all if this is empty.	Yes
Banner link	The URL the banner leads to — a product, category, or any page on your store.	No
Overlay text	A short headline shown over the image (or alongside it in split layout). Keep it punchy — five to eight words.	No
Banner layout	Choose Full image or Split — explained in the next table.	Yes
Button text	Only used in Split layout. The label on the call-to-action button (for example, “Shop the collection”).	No

The two banner layouts

Layout	What it looks like	Best for
Full image	The whole banner is the image. The overlay text appears at the bottom-left over a dark gradient for legibility. The entire image is clickable.	Lifestyle imagery, hero-style promotions, photography-led campaigns.
Split	The image takes one half (top on mobile, side on desktop). The other half holds the overlay text and a button using your brand color. Cleaner separation of message and visual.	Single-product spotlights, sale announcements with a clear CTA, content-led promotions.

Setting up a Full Image banner

1
Open the Promo Banner section
In the Homepage Layout panel, click the Promo Banner card to expand it.
2
Upload the banner image
Choose a landscape image at 1200 × 400 pixels or larger. Lifestyle photography works best for the full-image layout.
3
Set the banner link
Paste the URL of the destination page — usually a category, collection, or single product page.
4
Write the overlay text
Keep it short (for example, “Winter Collection 2026”). It appears at the bottom-left of the image.
5
Choose Full Image layout
Select Full image from the layout option. The Button Text field becomes irrelevant — the entire image is clickable.
6
Save Settings
Click Save Settings. The banner appears on your homepage immediately.

Setting up a Split layout banner

1
Open the Promo Banner section
Click the card to expand it.
2
Upload a focused image
Pick an image with a clear single subject — a product on a clean background tends to work better than a busy lifestyle shot.
3
Set the banner link
Paste the destination URL.
4
Write a stronger headline
The overlay text becomes the heading of the text block — use it for a real sentence (for example, “Up to 40% off skincare this week”).
5
Switch to Split layout
Select Split from the layout option.
6
Add button text
Fill in the button label (for example, “Shop the sale”). The button uses your brand color from the Colors and Typography panel.
7
Save Settings
Click Save Settings.

A Promo Banner in Split layout on a live storefront.

What’s Next?

You have the promotional banner configured. Next, learn how to place the Trust Badges section in your homepage layout to reinforce credibility right where it matters.

Configuring the Trust Badges Section →