# Delivery Time
**The Delivery Time** block displays estimated delivery information for products. It combines an icon and delivery time text in a flexible group layout with extensive customization options for appearance, layout, and styling.
The block is rendered through the `group` snippet with two child blocks: an icon and delivery time text.
### How to setup Delivery Time?
* From your Shopify admin, go to **Online Store** **->** **Themes**.
* Find the theme that you want to edit, and then click **Customize**.
* Choose **Default product** template in the dropdown of editor window to open theme editor of product page.
* From I**nformation -> Details ->** Choose **Delivery time**.
### Delivery Time Block - Settings Guide
| Setting | Type | Description |
| ------------------------------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Link** | url | Optional link URL for the delivery time block |
| **Open New Tab** | checkbox | Open link in new browser tab. Default: false |
| **Content Direction** | select | Layout direction. Options: "Vertical" (column) or "Horizontal" (row). Default: Column |
| **Direction On Mobile** | select | Layout direction on mobile devices. Options: "Vertical" or "Horizontal". Default: Column |
| **Alignment** | select | Horizontal alignment when direction is Horizontal. Options: "Left", "Center", "Right", "Space Between" — Visible when Content Direction is Horizontal. Default: Left |
| **Position** | select | Vertical alignment when direction is Horizontal. Options: "Stretch", "Top", "Center", "Bottom" — Visible when Content Direction is Horizontal. Default: Center |
| **Align Baseline** | checkbox | Align items to baseline — Visible when Position is Bottom. Default: false |
| **Alignment** | select | Horizontal alignment when direction is Vertical. Options: "Left", "Center", "Right" — Visible when Content Direction is Vertical. Default: Left |
| **Position** | select | Vertical alignment when direction is Vertical. Options: "Top", "Center", "Bottom", "Space Between" — Visible when Content Direction is Column. Default: Center |
| **Mobile Alignment** | select | Horizontal alignment on mobile when direction is Horizontal. Options: "Left", "Center", "Right", "Space Between" — Visible when Direction On Mobile is Horizontal. Default: Left |
| **Position Mobile** | select | Vertical alignment on mobile when direction is Horizontal. Options: "Stretch", "Top", "Center", "Bottom" — Visible when Direction On Mobile is Horizontal. Default: Center |
| **Mobile Alignment** | select | Horizontal alignment on mobile when direction is Vertical. Options: "Left", "Center", "Right" — Visible when Direction On Mobile is Vertical. Default: Left |
| **Position Mobile** | select | Vertical alignment on mobile when direction is Vertical. Options: "Top", "Center", "Bottom", "Space Between" — Visible when Direction On Mobile is Column. Default: Center |
| **Gap** | range | Space between icon and text (0-100px). Default: 12px |
| **Width** | select | Block width. Options: "Fit Content", "Fill", "Custom". Default: Fill |
| **Custom Width** | range | Custom width percentage (0-100%) — Visible when Width is Custom. Default: 100% |
| **Width Mobile** | select | Block width on mobile. Options: "Fit Content", "Fill", "Custom". Default: Fill |
| **Custom Width** | range | Custom mobile width percentage (0-100%) — Visible when Width Mobile is Custom. Default: 100% |
| **Height** | select | Block height. Options: "Auto", "Fit Content", "Fill", "Custom". Default: Fit |
| **Custom Height** | range | Custom height percentage (0-100%) — Visible when Height is Custom. Default: 100% |
| **Inherit Color Scheme** | checkbox | Inherit colors from parent section. Default: true |
| **Background** | color | Background color with alpha transparency — Visible when Inherit Color Scheme is false. Default: #FFFFFF |
| **Background Gradient** | color\_background | Background gradient — Visible when Inherit Color Scheme is false |
| **Headings** | color | Heading text color with alpha — Visible when Inherit Color Scheme is false. Default: #000000 |
| **Text** | color | Body text color with alpha — Visible when Inherit Color Scheme is false. Default: #000000 |
| **Primary Color** | color | Primary/link color with alpha — Visible when Inherit Color Scheme is false. Default: #000F9F |
| **Primary Hover Color** | color | Primary hover state color with alpha — Visible when Inherit Color Scheme is false. Default: #000000 |
| **Borders** | color | Border color with alpha — Visible when Inherit Color Scheme is false. Default: #E6E6E6 |
| **Shadow Color** | color | Shadow color with alpha — Visible when Inherit Color Scheme is false. Default: #000000 |
| **Background Media** | select | Background media type. Options: "None", "Image", "Video". Default: None |
| **Video** | video | Background video — Visible when Background Media is Video |
| **Video Position** | select | Video sizing. Options: "Cover", "Contain" — Visible when Background Media is Video. Default: Cover |
| **Image** | image\_picker | Background image — Visible when Background Media is Image |
| **Image Position** | select | Image sizing. Options: "Cover", "Fit" — Visible when Background Media is Image. Default: Cover |
| **Content Overlay** | checkbox | Enable content overlay mode — Visible when Background Media is Image or Video. Default: false |
| **Image Ratio** | select | Aspect ratio for background. Options: "Auto", "Portrait", "Square", "Landscape" — Visible when Background Media is Image/Video and Content Overlay is enabled. Default: Adapt |
| **Borders** | select | Border style. Options: "None", "Solid". Default: None |
| **Border Width** | range | Border width (0-10px, step 0.5) — Visible when Borders is not None. Default: 1px |
| **Border Radius** | range | Corner radius (0-100px). Default: 0px |
| **Background Overlay** | checkbox | Enable background overlay. Default: false |
| **Overlay Color** | color | Overlay color with alpha — Visible when Background Overlay is enabled. Default: #00000026 |
| **Extend Left Overlay** | checkbox | Extend overlay to left edge — Visible when Background Overlay is enabled. Default: false |
| **Extend Right Overlay** | checkbox | Extend overlay to right edge — Visible when Background Overlay is enabled. Default: false |
| **Overlay Style** | select | Overlay style. Options: "Solid", "Gradient" — Visible when Background Overlay is enabled. Default: Solid |
| **Gradient Direction** | select | Gradient direction. Options: "Up" (to top), "Down" (to bottom) — Visible when Background Overlay and Overlay Style is Gradient. Default: Up |
| **Enable Parallax Scroll** | checkbox | Enable parallax scrolling effect. Default: false |
| **Disable Parallax Scroll On Mobile** | checkbox | Disable parallax on mobile — Visible when Enable Parallax Scroll is true. Default: false |
| **Parallax Speed** | range | Parallax scroll speed (0-4, step 0.5) — Visible when Enable Parallax Scroll is true. Default: 0.5 |
| **Horizontal Position** | range | Parallax horizontal offset (-50% to 50%) — Visible when Enable Parallax Scroll is true. Default: 0% |
| **Vertical Position** | range | Parallax vertical offset (-50% to 50%) — Visible when Enable Parallax Scroll is true. Default: 0% |
| **Shadow Color** | color | Box shadow color with alpha. Default: #00000000 (transparent) |
| **Horizontal Offset** | range | Shadow horizontal offset (-12px to 12px). Default: 0px |
| **Vertical Offset** | range | Shadow vertical offset (-12px to 12px). Default: 0px |
| **Blur** | range | Shadow blur radius (0-20px, step 2). Default: 0px |
| **Spread** | range | Shadow spread radius (0-100px). Default: 0px |
| **Top** (Margin) | range | Top margin (0-100px). Default: 0px |
| **Top Margin Mobile** | range | Top margin on mobile (0-100px). Default: 0px |
| **Bottom** (Margin) | range | Bottom margin (0-100px). Default: 0px |
| **Bottom Margin Mobile** | range | Bottom margin on mobile (0-100px). Default: 0px |
| **Left** (Margin) | range | Left margin (0-100px). Default: 0px |
| **Left Margin Mobile** | range | Left margin on mobile (0-100px). Default: 0px |
| **Right** (Margin) | range | Right margin (0-100px). Default: 0px |
| **Top Margin Mobile** (Right) | range | Right margin on mobile (0-100px). Default: 0px |
| **Top** (Padding) | range | Top padding (0-100px). Default: 0px |
| **Bottom** (Padding) | range | Bottom padding (0-100px). Default: 0px |
| **Left** (Padding) | range | Left padding (0-100px). Default: 0px |
| **Right** (Padding) | range | Right padding (0-100px). Default: 0px |
***
