Website Banner Design Rules for Pakistani Stores
Website banner design needs one offer, one button. Most Pakistani shoppers browse on phones. Design for the small screen first.
Quick facts
- A banner needs one offer and one button.
- Design the mobile crop before the desktop one.
- Heavy images load slowly on 3G and 4G.
- A COD badge answers a common buyer doubt.
- A WhatsApp button lets buyers ask fast.
What a store banner must do
A banner is not decoration. It sends the visitor to a product.
- Show the offer in one glance.
- Point to one collection or product.
- Load before the buyer scrolls.
- Stay readable on a small phone.
One banner, one message
Two offers split attention. Pick the stronger one.
Save the other for a strip.
Sample banner lines
These are examples, not promises. Use only offers you can honour.
| Goal | Example headline | Button |
|---|---|---|
| New arrivals | New summer kurtas are here | Shop now |
| Free delivery rule | Free delivery above your set amount | Order today |
| COD message | Pay cash on delivery | See products |
| Bundle offer | Buy two, save more | Build your bundle |
Web banner design sizes for desktop and mobile
These are starting points. Check your theme's guidance first.
| Banner | Starting size | Use |
|---|---|---|
| Desktop hero | 1600 x 600 px | Homepage top |
| Mobile hero | 800 x 800 px | Phone homepage |
| Collection banner | 1600 x 400 px | Category pages |
| Promo strip | 1600 x 200 px | Sale notice |
| Social share | 1200 x 630 px | Facebook and WhatsApp |
Themes crop images differently. Preview on a real phone.
Keep the safe zone clear
Put text in the centre. Edges get cropped on small screens.
Mobile-first rules for Pakistani shoppers
Many buyers browse on 3G or 4G. Slow banners lose them.
Do slow banners lose buyers? Yes, many buyers browse on 3G or 4G. Keep files light.
- Design the mobile banner first.
- Use big, bold text.
- Keep the photo simple.
- Compress the file until it still looks sharp.
- Test on a mid-range Android phone.
- Test on a weak mobile connection.
Text in the image or on the page
- Real text on the page stays sharp.
- Real text helps SEO and screen readers.
- Text baked into an image can blur.
- Urdu text needs a clear, large font.
Contrast and colour
- Put dark text on light areas.
- Add an overlay on busy photos.
- Match banner colours to your brand.
- Avoid more than two fonts.
- Check colours in bright daylight.
Many buyers browse outdoors. Glare hides weak contrast.
Add a WhatsApp click and a COD badge
Pakistani buyers want quick answers. They also want to pay on delivery.
| Element | Where to place it | Why |
|---|---|---|
| WhatsApp button | Near the main button | Buyers ask before ordering |
| COD badge | Below the headline | Removes payment doubt |
| Delivery note | Under the offer | Sets courier expectations |
| Return line | In the footer strip | Builds trust |
- Write cash on delivery in plain words.
- Link the button to a WhatsApp chat.
- Do not hide the badge on mobile.
Only show offers you can honour. A fake sale timer hurts trust.
Can a fake timer hurt sales? Yes, it hurts trust. Use real sale end times.
Banner mistakes that cost orders
| Mistake | What happens | Fix |
|---|---|---|
| Five slides at once | Buyers miss the message | Use one strong slide |
| Tiny text | Phone users cannot read | Raise the font size |
| Huge image file | Page loads slowly | Compress the image |
| No button | Visitor does not click | Add one clear button |
| Low contrast | Words disappear | Use a dark overlay |
| Old sale left up | Buyers lose trust | Remove ended offers |
Before you publish
- Check the mobile crop.
- Click the button on a phone.
- Confirm the offer is still live.
- Check spelling in English and Urdu.
- Open the page on slow data.
Five minutes of checks saves wasted ad spend.
Make banners inside a WebRank theme
WebRank has a no-code store builder. Edit sections and colours in a live preview.
- 11 ready themes to start from.
- Change colours and sections without code.
- Real countdown with a true sale end.
- Sticky add to cart on product pages.
Browse the store themes and the sales apps.
Want banners designed for you
The WebRank team also designs store pages. See website redesign.
Match banners to your theme
Themes like Bazaar One suit big catalogues. Noor suits luxury looks.
Which theme suits luxury looks? Noor suits luxury looks. Bazaar One suits big catalogues.
Pick a theme first. Then design banners to match its spacing.
Banners for ads, WhatsApp and Instagram
One banner idea can serve many places. Resize it for each one.
| Place | Crop | Tip |
|---|---|---|
| Instagram post | Square | Keep text large |
| Instagram story | Tall | Leave top and bottom clear |
| Facebook ad | Square or wide | Show the product clearly |
| WhatsApp status | Tall | Add one short line |
| Store homepage | Wide and square | Match the theme |
Keep ads and store banners aligned
- Use the same offer in both places.
- Use the same colours and fonts.
- Land the click on the same product.
- Remove the ad when the offer ends.
A mismatch loses the buyer.
Who this guide is for
- Store owners with a plain homepage.
- Sellers who run Meta Ads to a store.
- Teams who brief a designer.
Who it is not for
- Designers wanting print rules.
- Sellers wanting stats on click rates.
We do not quote conversion numbers here.
Quick brief for your designer
- State the single offer.
- Share the product photo.
- Give mobile and desktop sizes.
- Name the button text.
- Ask for editable files.
A clear brief saves two rounds of changes.
Frequently asked questions
What size should a homepage banner be?
Start from your theme's guidance. Use a wide desktop crop. Add a square mobile crop.
What size suits web banner design for mobile?
A square or portrait crop works well. Preview it on a real phone.
How big should a banner file be?
Keep it small. Compress until the image still looks sharp.
Should I put text inside the banner image?
Prefer real text on the page. It stays sharp and helps SEO.
Should I add a COD badge?
Yes, if you offer cash on delivery. It answers a common buyer doubt.
Should banners link to WhatsApp?
A WhatsApp button helps buyers ask questions. Keep your main button on the product.
How many banners should the homepage have?
One strong banner beats five weak ones.
Can I use Canva for banners?
Yes. Export the file. Upload it to your theme.
Where do ad banners link to?
Link Meta Ads to the exact product. Skip the homepage.
Do countdown timers help?
Only use real sale end times. Fake timers hurt trust.
Related pages
Last updated: 29 October 2026. Written by the WebRank team in Pakistan.