Shopify Link Hero Section

Description of the Section

The "Link Hero" section is a versatile and customizable content block for your Shopify store. It allows you to display a headline, rich descriptive text, and interactive links in various formats such as text links, icon links, and image links. This section can improve user engagement and navigation by featuring prominently placed links to important pages, products, or promotional content.

Demo of the Section

Installation Instructions

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

Sample Use Cases for a Shopify E-commerce Store

1. Promotions & Discounts: Showcase ongoing sales, discounts, and special promotions with eye-catching icons and direct links.
2. Product Categories: Guide users to different product categories or best-seller collections using visually appealing image or icon links.
3. Customer Support: Provide quick access to customer support, FAQs, and contact pages for a better user experience.
4. Featured Products: Highlight specific products or new arrivals with image links to increase visibility and sales.
5. Blog & Content: Direct visitors to informative blog posts, guides, and articles to enhance content marketing efforts.

Overview of the Configuration Settings

Font

• Override theme fonts: Checkbox to override the default theme's fonts.
• Headline Font: Pick a custom font for the headline.
• Text Font: Pick a custom font for the main content text.

Text

• Text Size: Range (10-50px) to set the size of the main text.
• Text Line Height: Dropdown to select the line height for the main text.
• Text Color: Color picker to set the color of the main text.
• Headline Size: Range (10-50px) to set the size of the headline text.
• Headline Line Height: Dropdown to select the line height for the headline.
• Headline Color: Color picker to set the color of the headline.

Colors

• Background: Color and gradient picker for the section background.

Dimensions

• Max Width of Section: Number input to set the max width in pixels.
• Height of Media: Number input to set the height in pixels.
• Gap Between Images: Number input to set the gap in pixels.
• Padding Top: Number input to set the top padding in pixels.
• Padding Bottom: Number input to set the bottom padding in pixels.
• Padding Left: Number input to set the left padding in pixels.
• Padding Right: Number input to set the right padding in pixels.
• Spacing between Elements: Number input to set spacing between elements in pixels.
• Additional Spacing between Text and Links: Number input to set additional spacing in pixels.

Content

• Headline: Inline rich text input for the headline.
• Headline Alignment: Dropdown to align the headline (left, center, right).
• Content: Inline rich text input for the descriptive text.
• Content Alignment: Dropdown to align the content (left, center, right).

Button

• Show buttons?: Checkbox to show/hide buttons.
• Call to Action: Inline rich text input for the primary button.
• Call to Action Link: URL input for the primary button link.

Secondary Button

• Show Secondary Action?: Checkbox to show/hide the secondary button.
• Call to Action: Inline rich text input for the secondary button.
• Call to Action Link: URL input for the secondary button link.

Button Style

• Primary Button Background Color: Color and gradient picker.
• Secondary Button Background Color: Color and gradient picker.
• Primary Button Text Color: Color picker.
• Secondary Button Text Color: Color picker.
• Text Size: Range (10-50px) to set button text size.
• Padding Top/Bottom: Number input to set top/bottom padding.
• Padding Left/Right: Number input to set left/right padding.
• Border Radius: Number input to set border radius.
• Border Size: Number input to set border size.
• Border Color: Color picker for button border.

Grid

• Alignment: Dropdown for text alignment within grid items (left, center, right).
• Space between Columns: Number input for column gap in pixels.
• Space between Columns (mobile): Number input for mobile column gap in pixels.
• Columns: Dropdown to select the number of columns (1-5).
• Mobile Columns: Dropdown to select the number of columns for mobile view (1-3).

Links

• Link Background Color: Color and gradient picker for link backgrounds.
• Link Text Color: Color picker for link text.
• Text Size: Range (10-50px) to set link text size.
• Padding Top/Bottom: Number input for link padding.
• Padding Left/Right: Number input for link padding.
• Link Border Radius: Number input to set border radius.
• Link Border Size: Number input to set border size.
• Link Border Color: Color picker for link border.
• Subtle Shadow on Link: Checkbox for adding a shadow effect.
• Subtle Lift Animation on Link: Checkbox for adding a lift animation effect.