# Offset Feature

> A beautiful offset feature with drag-and-drop content support.

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

---

**Offset Feature** is a Shopify theme section in the Section Star library. A beautiful offset feature with drag-and-drop content support.

## About the Offset Feature section

The Offset Feature is a versatile and visually appealing section designed to enhance your Shopify store's appearance. This section allows you to create a responsive and engaging layout that can contain text, images, headlines, rich text, buttons, and even a five-star rating. Leveraging its flexible design settings, you can achieve a sophisticated, custom look that aligns perfectly with your store's branding.

## Live demo

## Use cases

1. **Product Highlighting**: Use the Offset Feature to showcase a new or featured product, combining a headline, a paragraph, and a call-to-action button that directs customers to the product page.

2. **Customer Testimonials**: Display customer reviews and ratings using the five-star block and a rich paragraph block to build trust and encourage potential buyers.

3. **Promotional Banners**: Create visually compelling promotional banners for seasonal sales with headlines, background images, and call-to-action buttons.

4. **Content Sections**: Use the rich text and paragraph blocks to provide detailed information about your brand, products, or services directly on the homepage.

## Settings

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

### Image display
Set settings for your image that appears behind the offset

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Image Min Height | Number | 500 |
| Image Width | Range | 50 |

### Offset
Set settings for your offset container

| Setting | Type | Default |
| --- | --- | --- |
| Offset Location | Select (Left, Right) | right |
| Offset Background Color | Color or gradient | linear-gradient(164deg, #FFF 0%, #FFF… |
| Offset Padding | Number | 25 |
| Round Borders on Offset | Range | 5 |
| Subtle Shadow on Offset | Checkbox | On |
| Offset Mobile Margin | Number | 5 |
| Offset Mobile Overlap (px) | Number | 20 |

### Headline block settings

| Setting | Type | Default |
| --- | --- | --- |
| Alignment | Text alignment | center |
| Content | Inline rich text | <strong>This is Offset Feature.</strong> |

### Paragraph block settings

| Setting | Type | Default |
| --- | --- | --- |
| Alignment | Text alignment | center |
| Content | Inline rich text | This is sample content for your hero … |

### Rich Text block settings

| Setting | Type | Default |
| --- | --- | --- |
| Alignment | Text alignment | center |
| Content | Rich text | <h4><b>Create Amazing Content</b></h4… |

### Button block settings

#### Primary Button
Set content for the primary button

| Setting | Type | Default |
| --- | --- | --- |
| Alignment | Text alignment | center |
| Call to Action | Inline rich text | Shop Now |
| Call to Action Link | URL | — |

#### Secondary Button
Set content for the secondary button

| Setting | Type | Default |
| --- | --- | --- |
| Show Secondary Action? | Checkbox | Off |
| Call to Action | Inline rich text | Secondary Action |
| Call to Action Link | URL | — |

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

| Setting | Type | Default |
| --- | --- | --- |
| Primary 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… |
| Primary 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 |

### 5 Star block settings

| Setting | Type | Default |
| --- | --- | --- |
| Alignment | Text alignment | center |
| Icon Color | Color | #111 |