# Diptych

> Two images, one impact — pair your best visuals side by side for a bold, editorial look that stops scrollers in their tracks.

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

---

**Diptych** is a Shopify theme section in the Section Star library. Two images, one impact — pair your best visuals side by side for a bold, editorial look that stops scrollers in their tracks.

## About the Diptych section

The **Diptych** section is a versatile Shopify component designed to enhance your store's visual appeal and user experience. This section allows you to create a dynamic layout with text, images, and customizable call-to-action buttons, all while maintaining a consistent design language.

## Live demo

## Use cases

1. **Promotional Banners:** Use the Diptych section to highlight new product launches, special offers, or seasonal sales with eye-catching visuals and text.
2. **Customer Testimonials:** Showcase customer reviews and ratings with five-star icons and testimonial text to build trust and credibility.
3. **Product Highlights:** Feature key products or collections with high-quality images, descriptions, and call-to-action buttons for easy navigation.
4. **Brand Storytelling:** Use the rich text and image options to tell the story of your brand, its mission, and its values to create a meaningful connection with your audience.
5. **Pairing Products:** Showcase complementary products together, helping customers to see how items can be combined, increasing the likelihood of upsells and cross-sells.

## Settings

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

### Grid Design
Set the display of the grid

| Setting | Type | Default |
| --- | --- | --- |
| Media Location | Select (Left, Right) | left |
| Gap Between Columns | Number | 20 |

### Images
Set the images for the section

| Setting | Type | Default |
| --- | --- | --- |
| Image 1 | Image | — |
| Image 1 Tilt (degrees) | Number | 0 |
| Image 2 | Image | — |
| Image 2 Tilt (degrees) | Number | 0 |

### Headline Design
Set design of the headline

| Setting | Type | Default |
| --- | --- | --- |
| Text Alignment | Text alignment | center |
| Mobile Text Alignment | Text alignment | center |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Rich text | <p>This is an example of the content … |
| Link Text | Inline rich text | Shop More |
| Link | URL | — |
| Spacing between Headline and Features | Number | 15 |

### 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… |
| Button Text Color | Color | #fff |
| Button Text Size | Range | 15 |
| Button Padding Top/Bottom | Number | 10 |
| Button Padding Left/Right | Number | 25 |
| Button Border Radius | Number | 5 |