# Color Splash

> Add a splash of color to your sections with a beautiful splash of color.

URL: https://sectionstar.app/sections/color-splash/
Source: Section Star — https://sectionstar.app
Updated: 2026-10-26T00:00:21.885Z

---

**Color Splash** is a Shopify theme section in the Section Star library. Add a splash of color to your sections with a beautiful splash of color.

## Live demo

## Settings

Every setting below appears in the Shopify theme customizer once the section is published.

### Color Splash
Set settings for the color callout

| Setting | Type | Default |
| --- | --- | --- |
| Color Splash | Color | #3B8B96 |
| Splash Height | Number | 75 |
| Mobile Splash Height | Number | 75 |

### Grid Design
Set settings for the grid

| Setting | Type | Default |
| --- | --- | --- |
| Grid Spacing | Number | 25 |
| Grid Column Size | Select (50/50, 60/40, 40/60) | 1fr 1fr |
| Grid Vertical Alighment | Select (Top, Center, Bottom) | center |

### Content
Set image and text for section

| Setting | Type | Default |
| --- | --- | --- |
| Image Location | Select (Left, Right, Full Width) | left |
| Mobile Image Location | Select (Top, Bottom) | top |
| Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, 3:4, 9:16…) | 4 / 3 |
| Mobile Image Aspect Ratio | Select (21:9, 16:9, 4:3, 1:1, Auto) | 4 / 3 |
| Image Border Radius | Number | 5 |
| Subtle Shadow on Image | Checkbox | On |

### Button Style
Set the look and feel of the button

| Setting | Type | Default |
| --- | --- | --- |
| Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Secondary Button Background Color | Color or gradient | linear-gradient(164deg, #111 0%, #333… |
| Button Text Color | Color | #fff |
| Secondary Button Text Color | Color | #fff |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Border Radius | Number | 5 |
| Border Size | Number | 0 |
| Border Color | Color | #111 |

### Content
Set the content for the section

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Rich text | <p>Sample content</p> |
| Primary Action Text | Inline rich text | Shop More |
| Primary Action Link | URL | — |
| Show Secondary Action? | Checkbox | Off |
| Secondary Action Text | Inline rich text | Secondary Action |
| Secondary Action Link | URL | — |