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 | — |
How to add this section to a Shopify store
- Install Section Star from the Shopify App Store.
- Open the app and search the library for “Color Splash”.
- Click Publish, then choose a name and the theme to publish into.
- Follow the deep link into the Shopify theme customizer.
- Add the section to any page and customize it with the native theme settings.
No code is required, and the section lives in your theme as ordinary Liquid — see the full install guide.