Shopify Offset Feature Section

Description of the 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.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Offset Feature"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

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.

Overview of the Configuration Settings

Text Settings

• Text Font: Choose from various fonts to customize the typography of your text.
• Text Size: Select a text size from 10px to 50px.
• Text Line Height: Options include 1.05, 1.15, 1.25, 1.5, 1.75, and inherit.
• Text Color: Choose a color for your text using a color picker.

Headline

• Headline Font: Select a font for your headline.
• Headline Size: Choose a size for your headline from 10px to 50px.
• Headline Line Height: Options include 1.05, 1.15, 1.25, 1.5, 1.75, and inherit.
• Headline Color: Choose a color for your headlines.

Colors

• Background Color: Set a background color for the entire section with the option to use linear gradients.

Image

• Image: Upload a background image to enhance the visual appeal of the section.

Dimensions

• Max Width of Section: Define the maximum width of the section.
• Height of Section: Set the height of the section in pixels.
• Height of Window on Mobile: Define the height for mobile views.
• Padding: Adjust the padding for the top, bottom, left, and right sides of the section.
• Spacing between Elements: Set the vertical spacing between different elements within the section.

Content

• Text Location: Choose to align text content on the left or right side of the section.

Container

• Container Background Color: Set a background color for the content container, with options for linear gradients.
• Container Padding: Adjust the padding inside the content container.
• Round Borders on Container: Choose border radius for rounded corners.
• Subtle Shadow on Container: Option to enable or disable a subtle shadow for the content container.

Block Types

• @app: Placeholder for app integrations.
• Headline: Customize alignment and content for a headline block.
• Paragraph: Customize alignment and content for a paragraph block.
• Rich Text: Add rich formatted text including headlines, lists, and more.
• Button: Configure primary and secondary buttons, including styles and alignment.
• 5 Star: Display a five-star rating with customizable alignment and color.