Estimated Delivery Design Styles Guide

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

🎨 How to Use This Guide

Preview the designs - See live examples of each style below
Copy the CSS code - Click the copy button on your chosen design (you'll see a confirmation message)
Paste into your store - Add to your theme's custom CSS (recommended method below)
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: Aurora Borealis

Gradient

An animated gradient background sweeps through purple, teal, and blue — giving your delivery widget a living, premium feel that draws the eye.

animatedgradientpremiumcolorful

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Aurora Borealis — animated gradient cycling purple → teal → blue */
@keyframes ed-aurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.estimateddelivery.ed-v4 {
  background: linear-gradient(135deg, #7b2ff7, #00d4aa, #2196f3, #7b2ff7);
  background-size: 300% 300%;
  animation: ed-aurora 6s ease infinite;
  border: none;
  border-radius: 10px;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(123, 47, 247, 0.4);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: rgba(255, 255, 255, 0.9);
}

Design 2: Sunset Horizon

Gradient

Warm coral-to-golden gradient reads as urgency and warmth — perfect for summer sales or fashion stores wanting an energetic vibe.

warmgradientorangesummer

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Sunset Horizon — coral → orange → golden left-to-right gradient */
.estimateddelivery.ed-v4 {
  background: linear-gradient(90deg, #ff6b6b, #ffa500, #ffd700);
  border: none;
  border-radius: 8px;
  color: #1a1a1a;
  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.35);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #1a1a1a;
  font-weight: 900;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #3a1a00;
}

Design 3: Ocean Deep

Gradient

A radial gradient from deep navy to rich blue wraps the widget in depth, with the date glowing in bright cyan — commanding and trustworthy.

darkbluegradientglow

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Ocean Deep — radial gradient navy center to deep blue edges */
.estimateddelivery.ed-v4 {
  background: radial-gradient(ellipse at center, #1e40af 0%, #0a1628 100%);
  border: none;
  border-radius: 10px;
  color: #e0f4ff;
  box-shadow: 0 4px 20px rgba(10, 22, 40, 0.5);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #00d4ff;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.7), 0 0 20px rgba(0, 212, 255, 0.4);
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #e0f4ff;
}

Design 4: Candy Pop

Gradient

Screaming hot pink to violet diagonal gradient with a neon yellow date — impossibly bold and fun, ideal for youth fashion or toy stores.

pinkboldfunyouth

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Candy Pop — hot pink to violet diagonal, neon yellow date */
.estimateddelivery.ed-v4 {
  background: linear-gradient(135deg, #ff2d92, #7c3aed);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(255, 45, 146, 0.4);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #ffef00;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 239, 0, 0.6);
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: rgba(255, 255, 255, 0.9);
}

Design 5: Forest Moss

Gradient

A deep-green diagonal gradient with a lime left accent border and mint date highlights — earthy, natural, great for organic or eco-friendly brands.

greeneconaturalgradient

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Forest Moss — sage to deep green gradient with lime left accent */
.estimateddelivery.ed-v4 {
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
  border: none;
  border-left: 4px solid #52b788 !important;
  border-radius: 8px;
  color: #d8f3dc;
  box-shadow: 0 3px 12px rgba(27, 67, 50, 0.4);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #74c69d;
  font-weight: 800;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #d8f3dc;
}

Design 6: Neon Pulse

Neon

Near-black background with a neon green glowing date and cyan carrier name — pure dark-mode energy that pops on any light theme page.

neondarkglowgreen

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Neon Pulse — near-black with neon green glow on date */
.estimateddelivery.ed-v4 {
  background: #0d0d0d;
  border: 1px solid #39ff14;
  border-radius: 8px;
  color: #cccccc;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.3), 0 0 20px rgba(57, 255, 20, 0.15);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #39ff14;
  font-weight: 800;
  text-shadow:
    0 0 10px rgba(57, 255, 20, 0.8),
    0 0 20px rgba(57, 255, 20, 0.5),
    0 0 40px rgba(57, 255, 20, 0.3);
}

.estimateddelivery.ed-v4 .ed-carrier {
  color: #00f5ff;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #cccccc;
}

Design 7: Cyberpunk

Neon

Dark violet background with neon yellow date glow and a magenta border pulse — the delivery widget as a neon sign in Night City.

neoncyberpunkdarkyellow

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Cyberpunk — dark violet with neon yellow glow and magenta border */
.estimateddelivery.ed-v4 {
  background: #1a0a2e;
  border: 1px solid #ff00aa;
  border-radius: 6px;
  color: #e0d0ff;
  box-shadow: 0 0 12px rgba(255, 0, 170, 0.4), 0 0 24px rgba(255, 0, 170, 0.2);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #ffd60a;
  font-weight: 900;
  text-shadow:
    0 0 10px rgba(255, 214, 10, 0.8),
    0 0 20px rgba(255, 214, 10, 0.4);
}

.estimateddelivery.ed-v4 .ed-carrier {
  color: #cc88ff;
}

.estimateddelivery.ed-v4 .ed-price {
  color: #ff6bb3;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #e0d0ff;
}

Design 8: Electric Blue

Neon

Deep navy with a blazing electric blue left border glow and an icy date — sharp, high-tech, and ideal for electronics or gadget stores.

blueneontechdark

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Electric Blue — deep navy with glowing ice-blue left border */
.estimateddelivery.ed-v4 {
  background: #03071e;
  border: none;
  border-left: 3px solid #4cc9f0 !important;
  border-radius: 0 8px 8px 0;
  color: #e0f4ff;
  box-shadow: -4px 0 20px rgba(76, 201, 240, 0.4), 0 2px 12px rgba(3, 7, 30, 0.5);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #4895ef;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.estimateddelivery.ed-v4 .ed-carrier {
  color: #e0f4ff;
}

.estimateddelivery.ed-v4 .ed-price {
  color: #90e0ef;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #e0f4ff;
}

Design 9: Frosted Glass

Ambient

Semi-transparent white with a blur effect and soft border — the glassmorphism look that works beautifully over product hero images.

glassblurmoderntransparent

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

⚠️ Note: backdrop-filter blur requires a non-opaque background behind the widget. Works best on product pages with image backgrounds. Fallback: a semi-transparent white card on plain backgrounds.

/* Frosted Glass — glassmorphism with backdrop blur */
.estimateddelivery.ed-v4 {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #1a1a2e;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #2d1b69;
  font-weight: 800;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #1a1a2e;
}

Design 10: Dark Glass

Ambient

Black glassmorphism card with pale gold date text — luxurious and minimal, works perfectly on dark-mode product pages or over dark hero images.

glassdarkgoldluxury

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

⚠️ Note: backdrop-filter works in Chrome, Edge, and Safari. Firefox requires enabling layout.css.backdrop-filter.enabled in about:config.

/* Dark Glass — black glass card with pale gold date */
.estimateddelivery.ed-v4 {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #e0e0e0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #f5d060;
  font-weight: 700;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #e0e0e0;
}

Design 11: Primary Stripe

Minimal

A bold 6px left border in your brand color with a subtle tint background — the cleanest professional look that fits any store without drama.

minimalborderprofessionalclean

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Primary Stripe — thick left border accent, clean and professional */
.estimateddelivery.ed-v4 {
  background: #eff6ff;
  border: none;
  border-left: 6px solid #2563eb !important;
  border-radius: 0 6px 6px 0;
  color: #1e3a5f;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Replace #2563eb and #eff6ff with your brand colors */

Design 12: Full Black

Bold

Pure black background with white text and a vivid green date — maximum contrast, works as a statement piece on any product page.

blackcontrastboldminimal

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Full Black — pure black, vivid green date */
.estimateddelivery.ed-v4 {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ffffff;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #00ff88;
  font-weight: 800;
}

.estimateddelivery.ed-v4 .ed-carrier {
  color: #cccccc;
}

.estimateddelivery.ed-v4 .ed-price {
  color: #888888;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #ffffff;
}

Design 13: Red Alert

Bold

Urgent red background with bright yellow date — the visual language of importance. Ideal for flash sales, low stock, or express-only delivery.

redurgentsalebold

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Red Alert — urgent red with yellow date, flash-sale energy */
.estimateddelivery.ed-v4 {
  background: #c62828;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.4);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #ffe57f;
  font-weight: 900;
}

.estimateddelivery.ed-v4 .ed-carrier {
  color: #ffcccc;
}

.estimateddelivery.ed-v4 .ed-price {
  color: #ffaaaa;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #ffffff;
}

Design 14: Bold Statement

Bold

Dark navy wrapper with a gradient border trick and the date displayed as a larger, standalone block element — commanding and unmissable.

darkgradient-borderdisplaystatement

Live Preview:

March 15 – March 18Delivery with Express 24h — €4.50

/* Bold Statement — dark navy with gradient border, date as block element */
.estimateddelivery.ed-v4 {
  background:
    linear-gradient(#1a1a2e, #1a1a2e) padding-box,
    linear-gradient(135deg, #ff6b6b, #ffd700, #00f5ff) border-box;
  border: 2px solid transparent;
  border-radius: 10px;
  color: #c0c0d0;
  padding: 14px 20px;
}

.estimateddelivery.ed-v4 .ed-date {
  display: block;
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 900;
  margin-bottom: 4px;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #c0c0d0;
}

Design 15: Lavender Dream

Ambient

Soft lavender background with gentle purple accents and a very light shadow — calm, elegant, and perfect for beauty, wellness, or lifestyle brands.

lavendersoftelegantbeauty

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Lavender Dream — soft lavender with gentle violet accents */
.estimateddelivery.ed-v4 {
  background: #f3e8ff;
  border: 1px solid #c4b5fd;
  border-radius: 10px;
  color: #4c1d95;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.1);
}

.estimateddelivery.ed-v4 .ed-date {
  color: #7c3aed;
  font-weight: 700;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #4c1d95;
}

Design 16: Peach Cream

Ambient

Warm peach background with amber border and rust date color — the artisan, handmade aesthetic that works for bakeries, home goods, or gift shops.

peachwarmartisancozy

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Peach Cream — warm peach with amber border, artisan feel */
.estimateddelivery.ed-v4 {
  background: #fff0e6;
  border: 1px solid #ffb347;
  border-radius: 8px;
  color: #7c3c21;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #d4380d;
  font-weight: 700;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #7c3c21;
}

Design 17: Mint Fresh

Minimal

Very light mint background with a thin forest-green border and a leaf prefix on the date — fresh, clean, and unmistakably eco-conscious.

mintecocleangreen

Live Preview:

Delivery 🌿 March 15 – March 18 with Express 24h — €4.50

/* Mint Fresh — light mint with leaf emoji prefix on date */
.estimateddelivery.ed-v4 {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  color: #14532d;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #166534;
  font-weight: 700;
}

.estimateddelivery.ed-v4 .ed-date::before {
  content: '🌿 ';
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #14532d;
}

Design 18: Pixel Retro

Retro

Dotted pixel-style border with a monospace font and retro orange date — the nostalgic 8-bit aesthetic that works for gaming stores or vintage brands.

retropixelmonospacegaming

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Pixel Retro — dashed border, monospace font, retro orange date */
.estimateddelivery.ed-v4 {
  background: #fafafa;
  border: 3px dashed #444444 !important;
  border-radius: 4px;
  color: #333333;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.03em;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #e65100;
  font-weight: 700;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #333333;
}

Design 19: Sticker Tag

Retro

White background with thick black border and an offset shadow that looks like a physical price tag sticker — bold, flat, and instantly attention-grabbing.

flatstickeroffset-shadowplayful

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Sticker Tag — flat design with offset black shadow like a price sticker */
.estimateddelivery.ed-v4 {
  background: #ffffff;
  border: 2px solid #000000 !important;
  border-radius: 4px;
  color: #111111;
  box-shadow: 4px 4px 0 #000000;
  margin-bottom: 6px;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #c0392b;
  font-weight: 800;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #111111;
}

Design 20: Memphis Pattern

Playful

Diagonal stripe pattern background with a teal date and bold black text — the 80s geometric look that's trendy again for lifestyle and fashion brands.

patternstripesgeometricplayful

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Memphis Pattern — diagonal stripe background with teal date */
.estimateddelivery.ed-v4 {
  background: repeating-linear-gradient(
    45deg,
    #fff8e1,
    #fff8e1 6px,
    #fffde7 6px,
    #fffde7 12px
  );
  border: 1px solid #e8d44d;
  border-radius: 8px;
  color: #1a1a1a;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #00897b;
  font-weight: 800;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #1a1a1a;
}

Design 21: Gold Foil

Luxury

Pitch black background with a gold gradient clipped to the date text — the clip-text technique gives an authentic foil-print impression for luxury goods.

luxurygolddarkpremium

Live Preview:

March 15 – March 18 with Express 24h — €4.50

/* Gold Foil — black background, gold gradient clipped to date text */
.estimateddelivery.ed-v4 {
  background: #0a0a0a;
  border: 1px solid #8a6f1e;
  border-radius: 8px;
  color: #888888;
}

.estimateddelivery.ed-v4 .ed-date {
  background: linear-gradient(90deg, #DAA520, #FFD700, #DAA520);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #888888;
}

Design 22: Royal Navy

Luxury

Deep navy with antique gold border, warm gold date, and silver monospace carrier name — understated luxury for jewellery, watches, or high-end fashion.

navygoldluxurywatches

Live Preview:

Delivery March 15 – March 18 with Express 24h — €4.50

/* Royal Navy — deep navy with antique gold border and warm gold date */
.estimateddelivery.ed-v4 {
  background: #0f172a;
  border: 1px solid #7c6f3d;
  border-radius: 8px;
  color: #94a3b8;
}

.estimateddelivery.ed-v4 .ed-date {
  color: #d4a017;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.estimateddelivery.ed-v4 .ed-carrier {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: #94a3b8;
}

.estimateddelivery.ed-v4 .ed-price {
  color: #64748b;
}

.estimateddelivery.ed-v4 .ed-display-text {
  color: #94a3b8;
}

🔧 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

Method 1: Theme Custom CSS (Recommended)

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

Navigate to your theme's custom CSS file: /themes/your-theme/assets/css/custom.css
If the file doesn't exist, create it
Paste your chosen design CSS at the end of the file
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.

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

Method 3: Back Office CSS

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

Go to Design > Theme & Logo > Advanced Customization
Add your CSS to the custom CSS section
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:

Clear PrestaShop cache (Advanced Parameters > Performance > Clear cache)
Clear browser cache (Ctrl+Shift+R or Cmd+Shift+R)
Check that the CSS file is being loaded (inspect with browser DevTools)
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:

Add responsive media queries (see Advanced Customization section)
Test padding and font sizes on smaller screens
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:

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

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!

Pourquoi mon ancien CSS ne fonctionne plus apres une mise a jour du module?

Le widget V4 utilise une structure HTML et des noms de classes completement differents des versions precedentes. Les selecteurs .ed_delivery_wrapper, .date_green, .ed_countdown et .ed_carrier_name n'existent plus. Remplacez-les par les equivalents V4 : .estimateddelivery.ed-v4, .ed-date, .ed-countdown et .ed-carrier.

Ai-je besoin de !important pour que mon CSS personnalise fonctionne?

Non, pour la plupart des regles. Le champ CSS personnalise ecrit dans ed_custom.css qui se charge en dernier, apres toutes les feuilles de style du module. Les regles ecrites la remplacent les valeurs par defaut du module sans !important. Vous n'avez besoin de !important que si votre theme applique des styles avec une specificite plus elevee.

Ou se trouve le champ CSS personnalise? Je ne le trouve pas.

Allez dans Back Office → Modules → Estimated Delivery → Configurer, puis ouvrez l'onglet Design. Faites defiler jusqu'au bas de la barre laterale gauche : le champ CSS personnalise se trouve tout en bas du panneau des parametres, sous les options typographiques.

Puis-je appliquer des styles uniquement sur les pages produit et pas dans le panier?

Oui. L'element conteneur a une classe de contexte ajoutee automatiquement : estimateddelivery-product sur les pages produit et estimateddelivery-cart sur le panier. Definissez votre CSS comme .estimateddelivery.estimateddelivery-product.ed-v4 pour appliquer des styles uniquement au widget de la page produit.

Puis-je utiliser des variables CSS pour changer la couleur de la date sans affecter les autres textes?

Oui, c'est exactement leur utilite. Definissez --ed-date-color sur .estimateddelivery.ed-v4 et seul l'element de date en tient compte. Les autres elements de texte comme le nom du transporteur et le prix ont leurs propres variables et ne sont pas affectes.

🎨 How to Use This Guide​

📚 Design Categories​

🎨 All Designs​

Design 1: Aurora Borealis

Design 2: Sunset Horizon

Design 3: Ocean Deep

Design 4: Candy Pop

Design 5: Forest Moss

Design 6: Neon Pulse

Design 7: Cyberpunk

Design 8: Electric Blue

Design 9: Frosted Glass

Design 10: Dark Glass

Design 11: Primary Stripe

Design 12: Full Black

Design 13: Red Alert

Design 14: Bold Statement

Design 15: Lavender Dream

Design 16: Peach Cream

Design 17: Mint Fresh

Design 18: Pixel Retro

Design 19: Sticker Tag

Design 20: Memphis Pattern

Design 21: Gold Foil

Design 22: Royal Navy

🔧 Understanding the Module Structure​

📥 Integration Guide​

Method 1: Theme Custom CSS (Recommended)​

Method 2: Module CSS Override​

Method 3: Back Office CSS​

💡 Customization Tips​

Quick Color Swap Examples​

Spacing Adjustments​

💡 Advanced Customization​

Combining Multiple Styles​

Responsive Adjustments​

Animation Effects​

🌐 Browser Compatibility​

🆘 Troubleshooting​

Design Not Showing​

Design Breaks on Mobile​

Colors Don't Match Theme​

🎨 Custom Design Request​

🎨 How to Use This Guide

📚 Design Categories

🎨 All Designs

🔧 Understanding the Module Structure

📥 Integration Guide

Method 1: Theme Custom CSS (Recommended)

Method 2: Module CSS Override

Method 3: Back Office CSS

💡 Customization Tips

Quick Color Swap Examples

Spacing Adjustments

💡 Advanced Customization

Combining Multiple Styles

Responsive Adjustments

Animation Effects

🌐 Browser Compatibility

🆘 Troubleshooting

Design Not Showing

Design Breaks on Mobile

Colors Don't Match Theme

🎨 Custom Design Request