# Annotations

> Add an image with annotations to any page.

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

---

**Annotations** is a Shopify theme section in the Section Star library. Add an image with annotations to any page.

## About the Annotations section

The Annotations section in Shopify's Section Star app is a customizable section that allows you to add annotations to your Shopify store. Annotations are textual notes that provide additional information about a particular area or feature of your website. These are useful for highlighting special features, explaining complex items, offering tips, and much more. This section provides a lot of flexibility with customizable fonts, colors, sizes, headings, and content. You can also adjust the position of the annotation.

## Live demo

## Use cases

1. **E-commerce Store**: Use annotations to highlight specific product features or to provide additional details about a product that might not be immediately obvious from the product image or title.
2. **Fashion Store**: Use annotations to highlight the special details of a design, explain the inspiration behind an outfit, or mention certain care instructions.
3. **Electronics Store**: Use annotations to explain complex features of an electronic product, highlight certain specifications, or suggest complementary accessories.

## Settings

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

### Grid Design
Set settings for the grid

| Setting | Type | Default |
| --- | --- | --- |
| Display | Select (Image on Right, Image on Left, Image below Text) | default |
| Gap between columns | Number | 30 |
| Media Aspect Ratio | Select (9:16, 3:4, 21:9, 16:9, 4:3, 1:1…) | 4 / 3 |
| Round Borders on Media | Range | 5 |
| Subtle Shadow on Media | Checkbox | On |
| Spacing between Media | Number | 10 |

### Caption
Set the display of the caption

| Setting | Type | Default |
| --- | --- | --- |
| Caption Text Size | Range | 15 |

### Content
Set the content for the section

| Setting | Type | Default |
| --- | --- | --- |
| Image | Image | — |
| Text Alignment | Text alignment | left |
| Mobile Text Alignment | Text alignment | left |
| Headline | Inline rich text | <b>Sample headline</b> |
| Content | Inline rich text | This is the placeholder text for the … |

### 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 |

### Annotation block settings

| Setting | Type | Default |
| --- | --- | --- |
| Text Size | Range | 13 |
| Text Color | Color | #111 |
| Background Color | Color | #fff |
| Pointer Location | Select (Bottom Left, Bottom Right, Top Left, Top Right) | bottom left |
| Pointer Length | Range | 20 |
| Mobile Pointer Length | Range | 20 |
| Horizontal Offset | Range | 0 |
| Vertical Offset | Range | 0 |
| Text | Inline rich text | Sample annotation |
| Optional Link | URL | — |