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
-
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.
-
Customer Testimonials: Display customer reviews and ratings using the five-star block and a rich paragraph block to build trust and encourage potential buyers.
-
Promotional Banners: Create visually compelling promotional banners for seasonal sales with headlines, background images, and call-to-action buttons.
-
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 |
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 “Offset Feature”.
- 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.