Link Hero is a Shopify theme section in the Section Star library. Add a link hero to any page.
About the Link Hero 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.
Live demo
Use cases
- Promotions & Discounts: Showcase ongoing sales, discounts, and special promotions with eye-catching icons and direct links.
- Product Categories: Guide users to different product categories or best-seller collections using visually appealing image or icon links.
- Customer Support: Provide quick access to customer support, FAQs, and contact pages for a better user experience.
- Featured Products: Highlight specific products or new arrivals with image links to increase visibility and sales.
- Blog & Content: Direct visitors to informative blog posts, guides, and articles to enhance content marketing efforts.
Settings
Every setting below appears in the Shopify theme customizer once the section is published.
Font
Set the fonts for your section
| Setting | Type | Default |
|---|---|---|
| Override theme fonts | Checkbox | Off |
| Headline Font | Font | sans-serif |
| Text Font | Font | sans-serif |
Text
Set the text for your section
| Setting | Type | Default |
|---|---|---|
| Text Size | Range | 15 |
| Mobile Text Size | Range | 15 |
| Text Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | 1.5 |
| Text Color | Color | #111 |
| Headline Size | Range | 40 |
| Mobile Headline Size | Range | 40 |
| Headline Line Height | Select (0.75, 1.0, 1.1, 1.2, 1.3, 1.4…) | inherit |
| Headline Color | Color | #111 |
Colors
Set colors for the section.
| Setting | Type | Default |
|---|---|---|
| Background | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
Section Design
Set the design for the section
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | linear-gradient(164deg, #FFF 0%, #FFF… |
| Padding Top/Bottom | Number | 25 |
| Mobile Padding Top/Bottom | Number | 25 |
| Padding Left/Right | Number | 25 |
| Mobile Padding Left/Right | Number | 25 |
| Spacing between Elements | Number | 15 |
Container Design
Set the design for your inner container
| Setting | Type | Default |
|---|---|---|
| Background Color | Color or gradient | linear-gradient(164deg, #FFF 0%, #FFF… |
| Max Width | Number | 1000 |
| Padding Top/Bottom | Number | 10 |
| Mobile Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 10 |
| Mobile Padding Left/Right | Number | 10 |
| Round Borders on Container | Range | 0 |
| Subtle Shadow on Container | Checkbox | Off |
| Border Size on Container | Range | 0 |
| Border Color on Container | Color | #888 |
| Additional Spacing between Text and Links | Number | 25 |
Content
Set the content for the section
| Setting | Type | Default |
|---|---|---|
| Headline | Inline rich text | <b>Sample headline</b> |
| Headline Alignment | Text alignment | center |
| Content | Inline rich text | This is the placeholder text for the … |
| Content Alignment | Text alignment | center |
Button
Set content for the buttons.
| Setting | Type | Default |
|---|---|---|
| Show buttons? | Checkbox | On |
| 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 |
Grid
Set the design of the grid
| Setting | Type | Default |
|---|---|---|
| Alignment | Text alignment | center |
| Space between Columns | Number | 10 |
| Space between Columns (mobile) | Number | 5 |
| Columns | Select (1 column, 2 columns, 3 columns, 4 columns, 5 columns) | 1fr 1fr 1fr 1fr |
| Mobile Columns | Select (1 column, 2 columns, 3 columns) | 1fr |
Links
Set the display of the links
| Setting | Type | Default |
|---|---|---|
| Link Background Color | Color or gradient | linear-gradient(164deg, #fff 0%, #fff… |
| Link Text Color | Color | #111 |
| Text Size | Range | 15 |
| Padding Top/Bottom | Number | 10 |
| Padding Left/Right | Number | 25 |
| Link Border Radius | Number | 5 |
| Link Border Size | Number | 1 |
| Link Border Color | Color | #ccc |
| Subtle Shadow on Link | Checkbox | On |
| Subtle Lift Animation on Link | Checkbox | On |
Text Link block settings
| Setting | Type | Default |
|---|---|---|
| Text | Inline rich text | Link Text |
| Optional Link | URL | — |
| Open in New Tab | Checkbox | Off |
Icon Link block settings
| Setting | Type | Default |
|---|---|---|
| Icon Color | Color | #111 |
| Icon Size | Number | 25 |
| Space Between Icon and Text | Number | 5 |
| Text | Inline rich text | Link Text |
| Icon | Select (Cart, Gift, Gift Card, Shipping, Payment, Trending…) | tag |
| Optional Link | URL | — |
| Open in New Tab | Checkbox | Off |
Image Link block settings
| Setting | Type | Default |
|---|---|---|
| Image | Image | — |
| Shape | Select (Circle, Rounded, Square) | circle |
| Image Size | Number | 25 |
| Space Between Icon and Text | Number | 20 |
| Text | Inline rich text | Link Text |
| Optional Link | URL | — |
| Open in New Tab | Checkbox | Off |
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 “Link Hero”.
- 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.