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
- 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.
- Fashion Store: Use annotations to highlight the special details of a design, explain the inspiration behind an outfit, or mention certain care instructions.
- 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 | — |
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 “Annotations”.
- 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.