Skip to main content

Estimated Delivery Design Styles Guide

Welcome to the comprehensive styling guide for the Estimated Delivery module! This guide showcases 34 professionally designed styles that you can easily integrate into your PrestaShop store.

🎨 How to Use This Guide​

  1. Preview the designs - See live examples of each style below
  2. Copy the CSS code - Click the copy button on your chosen design (you'll see a confirmation message)
  3. Paste into your store - Add to your theme's custom CSS (recommended method below)
  4. Customize - Adjust colors and spacing to match your brand
Quick Start

All designs work with the module's default HTML structure - no template modifications needed! Just copy and paste the CSS.

📚 Design Categories​

Browse designs by category:

  • Traditional - Classic e-commerce styles proven for conversions
  • Modern - Contemporary designs for tech-forward stores
  • Brand-Inspired - Styles inspired by major brands (Apple, Amazon, Google, etc.)
  • Premium - Luxury and high-end product styles
  • Metal - Industrial metallic effects (brushed metal, chrome, copper, gold)
  • Modern Border - Creative border styles for unique looks
  • Colorful - Bold, vibrant gradient designs
  • Minimal - Clean, simple, sophisticated styles
  • Playful - Friendly, approachable designs

🎨 All Designs​

Design 1: Classic with Icon

Traditional

A professional green-bordered design with a truck emoji. Perfect for traditional e-commerce stores.

icongreenclassice-commerce
Live Preview:
🚚Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #27ae60;
  border-radius: 8px;
  padding: 15px 15px 15px 55px;
  background: #f0f9f4;
  position: relative;
  display: block;
  margin: 10px 0;
}

.ed_delivery_wrapper:before {
  content: "🚚";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
}

.ed_countdown {
  font-weight: 600;
}

.date_green {
  font-weight: 600;
  color: #27ae60;
}

.carrier_price {
  font-weight: 700;
}

Design 2: Rounded Pill

Modern

A modern, fully-rounded design with blue gradient. Great for contemporary stores.

roundedbluegradientmodern
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #3498db;
  border-radius: 50px;
  padding: 12px 25px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  text-align: center;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: #2196f3;
  color: white;
  padding: 2px 12px;
  border-radius: 20px;
  display: inline-block;
  font-weight: 600;
}

.date_green {
  font-weight: 600;
  color: #27ae60;
}

.carrier_price {
  font-weight: 700;
}

Design 3: Modern Card with Tags

Modern

Clean card design with left accent border and colored badge tags. Excellent for highlighting key information.

cardbadgestagsaccent
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border-left: 4px solid #e74c3c;
  border-radius: 4px;
  padding: 15px 20px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 600;
}

.date_green {
  background: #27ae60;
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 600;
}

.carrier_price {
  background: #e74c3c;
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 700;
  margin-left: 5px;
}

Design 4: Gradient Border

Premium

Eye-catching purple gradient frame with clean white interior. Perfect for premium brands.

gradientpurplepremiumframe
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
⚠️ Note: This design requires wrapping the content in an additional <div class="ed_delivery_inner"> element inside the .ed_delivery_wrapper span.
.ed_delivery_wrapper {
  padding: 2px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: block;
  margin: 10px 0;
}

.ed_delivery_inner {
  background: white;
  padding: 15px 20px;
  border-radius: 10px;
}

.ed_countdown {
  color: #667eea;
  font-weight: 700;
}

.date_green {
  font-weight: 600;
  color: #27ae60;
}

.carrier_price {
  font-weight: 700;
}

Design 5: Dashed Outline

Playful

Playful orange dashed border with warm background. Great for friendly, approachable brands.

dashedorangeplayfulfriendly
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 3px dashed #f39c12;
  border-radius: 0;
  padding: 15px 20px;
  background: #fffbf0;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: #f39c12;
  color: white;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 600;
}

.date_green {
  font-weight: 600;
  color: #27ae60;
}

.carrier_price {
  font-weight: 700;
}

Design 6: Soft Shadow

Modern

Borderless design with subtle green shadow for depth. Modern and clean.

shadowborderlesscleanmodern
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-radius: 8px;
  padding: 18px 22px;
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.2);
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 600;
}

.date_green {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #27ae60;
  font-weight: 600;
  color: #27ae60;
}

.carrier_price {
  font-weight: 700;
}

Design 7: Minimal Lines

Minimal

Ultra-clean design with just top and bottom borders. Perfect for minimalist stores.

minimallinescleansimple
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-top: 3px solid #16a085;
  border-bottom: 3px solid #16a085;
  padding: 15px 10px;
  background: transparent;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 600;
}

.date_green {
  font-weight: 600;
  color: #27ae60;
}

.carrier_price {
  font-weight: 700;
}

Design 8: Badge Style

Modern

Asymmetric rounded corners with purple theme and badge highlights. Unique and modern.

badgespurpleasymmetricunique
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #9b59b6;
  border-radius: 20px 0 20px 0;
  padding: 15px 20px;
  background: linear-gradient(to right, #f5f0ff, #ffffff);
  display: block;
  margin: 10px 0;
}

.ed_countdown,
.date_green,
.carrier_price {
  background: #9b59b6;
  color: white;
  padding: 2px 10px;
  border-radius: 12px;
  display: inline-block;
  margin: 0 3px;
  font-weight: 600;
}

Design 9: Apple-like Minimalist

Brand-Inspired

Inspired by Apple's design language. Clean, subtle, and sophisticated.

appleminimalistcleansubtle
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: 16px 20px;
  background: #fbfbfd;
  font-size: 14px;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  color: #0071e3;
  font-weight: 600;
}

.date_green {
  color: #1d1d1f;
  font-weight: 600;
}

.carrier_price {
  color: #06c;
  font-weight: 700;
}

Design 10: Amazon-inspired

Brand-Inspired

Classic e-commerce aesthetic with familiar orange and green colors. Proven for conversions.

amazone-commerceorangegreen
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  padding: 14px 18px;
  background: #f7faf9;
  font-family: "Amazon Ember", Arial, sans-serif;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  color: #c7511f;
  font-weight: 700;
}

.date_green {
  color: #007600;
  font-weight: 700;
}

.carrier_price {
  color: #b12704;
  font-weight: 700;
}

Design 11: Google Material

Brand-Inspired

Material Design with elevation shadows and Google's color palette. Modern and friendly.

googlematerialshadowmodern
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-radius: 4px;
  padding: 16px 20px;
  background: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  font-family: 'Roboto', sans-serif;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  color: #1a73e8;
  font-weight: 500;
}

.date_green {
  color: #137333;
  font-weight: 500;
}

.carrier_price {
  color: #d93025;
  font-weight: 500;
}

Design 12: Stripe-inspired

Brand-Inspired

Professional fintech aesthetic with subtle gradients. Perfect for premium products.

stripefintechpurplepremium
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 1px solid #e3e8ee;
  border-radius: 6px;
  padding: 16px 20px;
  background: linear-gradient(to bottom, #ffffff, #f6f9fc);
  font-size: 15px;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: #635bff;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}

.date_green {
  color: #0a2540;
  font-weight: 600;
}

.carrier_price {
  font-weight: 700;
}

Design 13: Uber-inspired (Dark)

Brand-Inspired

Bold dark theme with bright green accents. Great for modern, tech-forward brands.

uberdarkgreenmodern
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-radius: 8px;
  padding: 16px 20px;
  background: #000000;
  color: #ffffff;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: #06c167;
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 700;
}

.date_green {
  color: #06c167;
  font-weight: 700;
}

.carrier_price {
  color: #06c167;
  font-weight: 700;
}

Design 14: Spotify-inspired

Brand-Inspired

Vibrant green gradient with glassmorphic elements. Bold and energetic.

spotifygreengradientbold
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-radius: 8px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
  color: #ffffff;
  font-weight: 500;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 700;
}

.date_green {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.carrier_price {
  font-weight: 700;
}

Design 15: Netflix-inspired

Brand-Inspired

Signature red background with white text. Perfect for entertainment or lifestyle brands.

netflixredentertainmentbold
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-radius: 4px;
  padding: 16px 20px;
  background: #e50914;
  color: #ffffff;
  font-weight: 500;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: rgba(255,255,255,0.15);
  padding: 3px 10px;
  border-radius: 3px;
  font-weight: 700;
}

.date_green {
  color: #ffffff;
  font-weight: 700;
}

.carrier_price {
  font-weight: 700;
}

Design 16: Airbnb-inspired

Brand-Inspired

Friendly rounded corners with pink accents. Welcoming and trustworthy.

airbnbfriendlypinkrounded
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 1px solid #dddddd;
  border-radius: 12px;
  padding: 16px 20px;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  font-family: 'Circular', -apple-system, sans-serif;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  color: #ff385c;
  font-weight: 600;
}

.date_green {
  color: #222222;
  font-weight: 600;
}

.carrier_price {
  color: #008a05;
  font-weight: 600;
}

Design 17: Minimal Elegant

Minimal

Ultra-clean with just top/bottom borders and underlined emphasis. Timeless sophistication.

minimalelegantsophisticatedsimple
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding: 14px 0;
  background: transparent;
  font-size: 14px;
  color: #424242;
  letter-spacing: 0.3px;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  color: #212121;
  font-weight: 600;
  border-bottom: 2px solid #212121;
  padding-bottom: 1px;
}

.date_green {
  color: #212121;
  font-weight: 600;
}

.carrier_price {
  font-weight: 700;
}

Design 18: Colorful Modern Gradient

Colorful

Purple-to-pink gradient with floating shadow. Eye-catching and contemporary.

gradientcolorfulpurplepink
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-radius: 16px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: rgba(255,255,255,0.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.date_green {
  color: #ffffff;
  font-weight: 700;
}

.carrier_price {
  font-weight: 700;
}

Design 19: Vibrant Glassmorphism

Colorful

Orange-red glass effect with backdrop blur. Trendy and modern.

glassmorphismorangemoderntrendy
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(255,107,107,0.9) 0%, rgba(255,173,96,0.9) 100%);
  backdrop-filter: blur(10px);
  color: #ffffff;
  box-shadow: 0 8px 32px 0 rgba(255, 107, 107, 0.37);
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: rgba(255,255,255,0.3);
  padding: 4px 12px;
  border-radius: 15px;
  font-weight: 700;
}

.date_green {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.carrier_price {
  font-weight: 700;
}

Design 20: Neon Cyberpunk

Colorful

Dark background with glowing neon effects. Perfect for tech and gaming stores.

neoncyberpunkdarkgaming
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #00f5ff;
  border-radius: 10px;
  padding: 16px 20px;
  background: #0a0e27;
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.3), inset 0 0 20px rgba(0, 245, 255, 0.05);
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  color: #00f5ff;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.8);
}

.date_green {
  color: #39ff14;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(57, 255, 20, 0.6);
}

.carrier_price {
  color: #ff006e;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 0, 110, 0.6);
}

Design 21: Shopify-inspired

Brand-Inspired

Clean merchant-focused design with teal highlights. Professional e-commerce aesthetic.

shopifye-commercetealprofessional
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 1px solid #c9cccf;
  border-radius: 8px;
  padding: 16px 20px;
  background: #ffffff;
  font-family: -apple-system, sans-serif;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: #008060;
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}

.date_green {
  color: #202223;
  font-weight: 600;
}

.carrier_price {
  font-weight: 700;
}

Design 22: Elegant Luxury

Premium

Gold borders on dark background with serif typography. Perfect for high-end products.

luxurygoldpremiumelegant
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #d4af37;
  border-radius: 0;
  padding: 20px 24px;
  background: linear-gradient(to right, #1a1a1a, #2d2d2d);
  color: #d4af37;
  font-family: 'Georgia', serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  color: #ffd700;
  font-weight: 600;
  font-style: italic;
}

.date_green {
  color: #d4af37;
  font-weight: 600;
}

.carrier_price {
  font-weight: 700;
}

Design 23: Brushed Metal

Metal

Industrial brushed metal effect with reflective highlights. Perfect for automotive, tools, or tech stores.

metalindustrialsteelbrushed
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #8b8b8b;
  border-radius: 8px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #c0c0c0 0%, #8b8b8b 50%, #c0c0c0 100%);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.5), 
              inset 0 -1px 3px rgba(0,0,0,0.3), 
              0 2px 8px rgba(0,0,0,0.2);
  color: #2d2d2d;
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  display: block;
  margin: 10px 0;
  position: relative;
  overflow: hidden;
}

.ed_delivery_wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}

.ed_countdown {
  font-weight: 700;
  color: #1a1a1a;
}

.date_green {
  font-weight: 700;
  color: #1a1a1a;
}

.carrier_price {
  background: #ff6b00;
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  display: inline-block;
}

Design 24: Chrome Plated

Metal

Sleek chrome effect with mirror-like reflections. Premium look for luxury brands.

chromemetalluxurypremium
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 3px solid #a8a8a8;
  border-radius: 12px;
  padding: 18px 24px;
  background: linear-gradient(180deg, #f5f5f5 0%, #d4d4d4 25%, #e8e8e8 50%, #c0c0c0 75%, #e0e0e0 100%);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 
              inset 0 1px 0 rgba(255,255,255,0.8), 
              inset 0 -1px 0 rgba(0,0,0,0.2);
  color: #1a1a1a;
  font-weight: 600;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.date_green {
  background: linear-gradient(180deg, #00695c 0%, #004d40 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.carrier_price {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  color: #1a1a1a;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(255,215,0,0.4), inset 0 1px 0 rgba(255,255,255,0.6);
  display: inline-block;
}

Design 25: Copper Patina

Metal

Aged copper with green patina effect. Unique vintage industrial aesthetic.

copperpatinavintageindustrial
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 3px solid #6b4423;
  border-radius: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #b87333 0%, #8b5a3c 50%, #a0826d 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 
              inset 0 -2px 4px rgba(255,255,255,0.2), 
              0 4px 12px rgba(0,0,0,0.25);
  color: #2d1810;
  font-weight: 600;
  display: block;
  margin: 10px 0;
  position: relative;
}

.ed_delivery_wrapper:before {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, rgba(72,209,204,0.4) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ed_delivery_wrapper:after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 15px;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(72,209,204,0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.ed_countdown {
  font-weight: 700;
  color: #1a0d06;
}

.date_green {
  font-weight: 700;
  color: #1a0d06;
}

.carrier_price {
  background: #48d1cc;
  color: #1a1a1a;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba(72,209,204,0.4);
  display: inline-block;
}

Design 26: Gold Foil

Metal

Luxurious gold foil effect with embossed appearance. Perfect for premium products.

goldluxurypremiumfoil
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #d4af37;
  border-radius: 8px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #d4af37 75%, #ffd700 100%);
  background-size: 200% 200%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 
              inset 0 -1px 0 rgba(0,0,0,0.3), 
              0 4px 15px rgba(212,175,55,0.5);
  color: #3d2817;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #2d1810;
}

.date_green {
  font-weight: 700;
  color: #2d1810;
}

.carrier_price {
  background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
  color: #ffd700;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 6px rgba(139,69,19,0.4);
  display: inline-block;
}

Design 27: Modern Double Border

Modern Border

Clean modern design with double border effect. Contemporary and professional.

double-bordermodernprofessionalclean
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 3px double #2c3e50;
  border-radius: 12px;
  padding: 16px 20px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  color: #2c3e50;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #e74c3c;
}

.date_green {
  font-weight: 700;
  color: #27ae60;
}

.carrier_price {
  background: #3498db;
  color: white;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
}

Design 28: Ridge Border Modern

Modern Border

3D ridge border with modern depth. Great for standing out.

ridge3ddepthmodern
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 4px ridge #9b59b6;
  border-radius: 10px;
  padding: 16px 20px;
  background: linear-gradient(to bottom, #ffffff, #f8f9fa);
  box-shadow: 0 4px 12px rgba(155,89,182,0.15);
  color: #2c3e50;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #9b59b6;
}

.date_green {
  font-weight: 700;
  color: #16a085;
}

.carrier_price {
  background: #9b59b6;
  color: white;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(155,89,182,0.3);
  display: inline-block;
}

Design 29: Groove Border Elegant

Modern Border

Inset groove border with elegant styling. Subtle and refined.

grooveelegantrefinedsubtle
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 4px groove #34495e;
  border-radius: 8px;
  padding: 18px 22px;
  background: #ecf0f1;
  color: #2c3e50;
  font-weight: 500;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #e67e22;
}

.date_green {
  font-weight: 700;
  color: #27ae60;
}

.carrier_price {
  background: #34495e;
  color: white;
  padding: 4px 12px;
  border-radius: 5px;
  font-weight: 700;
  display: inline-block;
}

Design 30: Multi-Border Layered

Modern Border

Multiple border layers creating depth. Modern and eye-catching.

multi-borderlayereddepthcolorful
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 2px solid #3498db;
  outline: 2px solid #e74c3c;
  outline-offset: 3px;
  border-radius: 10px;
  padding: 16px 20px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  color: #2c3e50;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #3498db;
}

.date_green {
  font-weight: 700;
  color: #e74c3c;
}

.carrier_price {
  background: linear-gradient(135deg, #3498db 0%, #e74c3c 100%);
  color: white;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
}

Design 31: Inset Shadow Border

Modern Border

Modern inset shadow creating depth illusion. Clean and professional.

insetshadowdepthmodern
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: none;
  border-radius: 12px;
  padding: 18px 24px;
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #16a085, 
              inset 0 2px 8px rgba(0,0,0,0.1), 
              0 2px 4px rgba(0,0,0,0.05);
  color: #2c3e50;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #16a085;
}

.date_green {
  font-weight: 700;
  color: #27ae60;
}

.carrier_price {
  background: #16a085;
  color: white;
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(22,160,133,0.3);
  display: inline-block;
}

Design 32: Corner Accent Modern

Modern Border

Modern design with colored corner accents. Unique and contemporary.

corneraccentcolorfulunique
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
⚠️ Note: This design uses pseudo-elements for top-left and bottom-right corners. For all 4 corners, additional HTML elements would be needed.
.ed_delivery_wrapper {
  border: 2px solid #ecf0f1;
  border-radius: 10px;
  padding: 16px 20px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: #2c3e50;
  display: block;
  margin: 10px 0;
  position: relative;
}

.ed_delivery_wrapper:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 20px;
  height: 20px;
  border-top: 4px solid #e74c3c;
  border-left: 4px solid #e74c3c;
  border-radius: 10px 0 0 0;
}

.ed_delivery_wrapper:after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  border-bottom: 4px solid #27ae60;
  border-right: 4px solid #27ae60;
  border-radius: 0 0 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #e74c3c;
}

.date_green {
  font-weight: 700;
  color: #27ae60;
}

.carrier_price {
  background: #3498db;
  color: white;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
}

Design 33: Neumorphism Style

Modern Border

Soft UI neumorphic design. Trendy and tactile appearance.

neumorphismsoft-uitactiletrendy
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
⚠️ Note: This design works best when the surrounding page background is also #e0e5ec.
.ed_delivery_wrapper {
  border: none;
  border-radius: 16px;
  padding: 18px 24px;
  background: #e0e5ec;
  box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  color: #2c3e50;
  font-weight: 500;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #5d6d7e;
}

.date_green {
  font-weight: 700;
  color: #27ae60;
}

.carrier_price {
  background: #e0e5ec;
  color: #3498db;
  padding: 4px 12px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
  display: inline-block;
}

Design 34: Border Image Gradient

Modern Border

CSS gradient border using border-image. Modern and vibrant.

gradientborder-imagevibrantmodern
Live Preview:
Place your order before 6 hours and 33 minutes and receive it between Tue, Nov 4 and Wed, Nov 5 with Express Delivery Free!
.ed_delivery_wrapper {
  border: 3px solid transparent;
  border-radius: 12px;
  padding: 16px 20px;
  background: linear-gradient(white, white) padding-box, 
              linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) border-box;
  color: #2c3e50;
  display: block;
  margin: 10px 0;
}

.ed_countdown {
  font-weight: 700;
  color: #667eea;
}

.date_green {
  font-weight: 700;
  color: #764ba2;
}

.carrier_price {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  color: white;
  padding: 3px 12px;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
}

🔧 Understanding the Module Structure​

Before integrating any design, it's helpful to understand the main CSS classes generated by the module:

Main Container:

  • .ed_delivery_wrapper - The main container for the entire delivery message

Text Elements:

  • .ed_delivery_text - Wrapper for the text content
  • .ed_countdown - The countdown timer (e.g., "6 hours and 33 minutes")
  • .date_green - The delivery date range (e.g., "between Tue, Nov 4 and Wed, Nov 5")
  • .ed_carrier_name - The carrier/shipping method name (e.g., "with Express Delivery")
  • .carrier_price - The shipping price (e.g., "Free!")

Optional Elements:

  • .ed_delivery_inner - Inner wrapper used in some designs (like Design 4)
  • .ed_dates - Additional wrapper for date elements in some configurations
Quick Customization Examples

Hide the carrier name:

.ed_carrier_name { 
  display: none; 
}

Make the countdown blink:

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.5; }
}
.ed_countdown { 
  animation: blink 2s infinite; 
}

Change only the date color without affecting other styles:

.date_green { 
  color: #e74c3c !important; 
}

Add an icon before the price:

.carrier_price:before { 
  content: "💰 "; 
}

📥 Integration Guide​

This is the best approach as it keeps your styles separate from the module and survives module updates.

  1. Navigate to your theme's custom CSS file: /themes/your-theme/assets/css/custom.css
  2. If the file doesn't exist, create it
  3. Paste your chosen design CSS at the end of the file
  4. Clear PrestaShop cache

Example custom.css structure:

/* ============================================
   Your existing theme customizations
   ============================================ */

/* Your other custom styles here */

/* ============================================
   Estimated Delivery Module Styles
   ============================================ */

/* Paste your chosen design CSS here */
.ed_delivery_wrapper {
  border: 2px solid #27ae60;
  /* ... rest of the design ... */
}

Method 2: Module CSS Override​

Use this if you want to keep module-specific styles within the module folder, or if the theme's custom.css doesn't exist and you prefer not to create it.

  1. Navigate to your module's folder: /modules/estimateddelivery/views/css/
  2. Check if custom.css exists, if not create it
  3. Paste your chosen design CSS
  4. Clear PrestaShop cache

Method 3: Back Office CSS​

Quick method for testing, but not recommended for production as it may be harder to maintain.

  1. Go to Design > Theme & Logo > Advanced Customization
  2. Add your CSS to the custom CSS section
  3. Save and clear cache
Cache Clearing

Always clear your PrestaShop cache after adding custom CSS:

  • Go to Advanced Parameters > Performance
  • Click Clear cache
  • Force reload your browser with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)

💡 Customization Tips​

Color Customization

You can easily customize any design by changing the color values:

  • Borders: Look for border-color or border properties
  • Backgrounds: Look for background or background-color
  • Text: Look for color properties
  • Accents: Modify values in .ed_countdown, .date_green, and .carrier_price classes

Quick Color Swap Examples​

Make Design 1 blue instead of green:

/* Change these values */
.ed_delivery_wrapper {
  border: 2px solid #3498db !important; /* was #27ae60 */
  background: #ebf5fb !important; /* was #f0f9f4 */
}

.date_green {
  color: #3498db !important; /* was #27ae60 */
}

Make Design 10 purple instead of orange:

.ed_countdown {
  color: #9b59b6 !important; /* was #c7511f */
}

Spacing Adjustments​

Make any design more compact:

.ed_delivery_wrapper {
  padding: 10px 15px !important; /* Reduce from default values */
}

Make any design more spacious:

.ed_delivery_wrapper {
  padding: 20px 30px !important; /* Increase from default values */
}

💡 Advanced Customization​

Combining Multiple Styles​

You can mix elements from different designs to create your own unique style:

/* Example: Combining Design 1's icon with Design 3's tags */
.ed_delivery_wrapper {
  border-left: 4px solid #27ae60;
  border-radius: 8px;
  padding: 15px 15px 15px 55px;
  background: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: relative;
  display: block;
  margin: 10px 0;
}

.ed_delivery_wrapper:before {
  content: "🚚";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
}

.date_green {
  background: #27ae60;
  color: white;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
  font-weight: 600;
}

Responsive Adjustments​

Make your delivery message responsive for mobile devices:

/* Add to any design */
@media (max-width: 768px) {
  .ed_delivery_wrapper {
    padding: 12px 15px !important;
    font-size: 13px !important;
  }
  
  .ed_countdown,
  .date_green,
  .carrier_price {
    font-size: 12px !important;
    padding: 2px 8px !important;
  }
  
  /* Stack elements vertically on mobile */
  .ed_countdown,
  .date_green,
  .carrier_price {
    display: block !important;
    margin: 5px 0 !important;
  }
}

Animation Effects​

Add subtle animations to draw attention:

/* Pulse animation for countdown */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.ed_countdown {
  animation: pulse 2s ease-in-out infinite;
}

/* Slide-in animation on page load */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ed_delivery_wrapper {
  animation: slideIn 0.5s ease-out;
}

🌐 Browser Compatibility​

All designs are tested and compatible with:

  • ✅ Chrome 90+
  • ✅ Firefox 88+
  • ✅ Safari 14+
  • ✅ Edge 90+
  • ✅ Mobile browsers (iOS Safari, Chrome Mobile)
Dark Mode Compatibility

All code blocks use explicit colors to ensure readability in both light and dark modes. If implementing in your documentation, ensure proper color contrast.

🆘 Troubleshooting​

Design Not Showing​

Issue: CSS changes don't appear on the site

Solutions:

  1. Clear PrestaShop cache (Advanced Parameters > Performance > Clear cache)
  2. Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
  3. Check that the CSS file is being loaded (inspect with browser DevTools)
  4. Verify CSS selector specificity (you may need to add !important to override theme styles)

Example fix:

.ed_delivery_wrapper {
  border: 2px solid #27ae60 !important;
  background: #f0f9f4 !important;
}

Design Breaks on Mobile​

Issue: Design looks broken on mobile devices

Solutions:

  1. Add responsive media queries (see Advanced Customization section)
  2. Test padding and font sizes on smaller screens
  3. Consider using percentage-based sizing instead of fixed pixels
@media (max-width: 576px) {
  .ed_delivery_wrapper {
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
}

Colors Don't Match Theme​

Issue: Design colors clash with your theme

Solution: Extract your theme's color palette and apply to the design:

/* Get colors from your theme's variables or inspect element */
:root {
  --primary-color: #your-theme-primary;
  --secondary-color: #your-theme-secondary;
  --accent-color: #your-theme-accent;
}

.ed_delivery_wrapper {
  border: 2px solid var(--primary-color);
  background: var(--secondary-color);
}

.ed_countdown {
  background: var(--accent-color);
}

🎨 Custom Design Request​

Can't find the perfect design? We offer custom design services:

  1. Send us your requirements - Brand colors, style preferences, inspiration sites
  2. We create a mockup - Visual preview of your custom design
  3. You approve - Request changes or approve the design
  4. Receive CSS code - Ready-to-use code for your store

Contact us at custom@yourmodule.com for pricing and timeline or hire our Freelancer Services

Happy styling! 🚀

Pro Tip

The best design is the one that matches your brand and improves your conversion rate. Don't be afraid to A/B test different styles to see which performs best with your customers!