Skip to content
RockStarUI Docs

About Care Grid

What this section does

Section titled “What this section does”

The Care grid section on the About template is used as an accordion timeline/grid for story blocks (for example: company milestones or journey steps). Each row expands to show image + rich text content.

Shopify Theme Editor with the About template open and the Care grid section selected, showing heading and text settings on the right and multiple Tip blocks in the left sidebar that expand in the canvas accordion.

Where it appears

Section titled “Where it appears”
  1. Template: About (templates/page.about.json).
  2. Section instance in template: milestones.
  3. Section type: care-grid.
  4. Block type: Tip.

How to set it up

Section titled “How to set it up”
  1. Go to Online Store -> Themes.
  2. Click Customize.
  3. Open the About template/page.
  4. Select Care grid in the left sidebar.
  5. Add/edit/reorder Tip blocks.
  6. Save.

Section controls (important)

Section titled “Section controls (important)”

When the section is selected:

  1. Heading: main section heading (example: Our journey).
  2. Text: supporting intro copy shown under the heading.

Tip block controls (important)

Section titled “Tip block controls (important)”

When a single Tip block is selected:

  1. Title: accordion row title.
  2. Text: rich text body shown when expanded.
  3. Image: uploaded media for the expanded panel.
  4. Image asset filename: optional fallback image from theme assets (example: store-la.jpg).

Behavior details

Section titled “Behavior details”
  1. The first tip opens by default when the section loads.
  2. Opening one tip closes the others (single-open accordion).
  3. If no uploaded image is set, the section tries the image_asset value.
  4. If image_asset is empty, it applies a built-in fallback by item index.
  5. In Theme Editor, selecting a block opens that item automatically.

Common merchant tasks

Section titled “Common merchant tasks”

Add a new milestone row

Section titled “Add a new milestone row”
  1. Click Add Tip.
  2. Fill Title and Text.
  3. Add an image or set an asset filename fallback.
  4. Save.

Reorder timeline items

Section titled “Reorder timeline items”
  1. Drag tip blocks in the left sidebar.
  2. Confirm order in preview.
  3. Save.

Replace fallback images with uploads

Section titled “Replace fallback images with uploads”
  1. Open each tip block.
  2. Set an Image in the picker.
  3. Keep or clear Image asset filename as needed.
  4. Save.

Tips

Section titled “Tips”
  1. Keep titles short so closed rows remain easy to scan.
  2. Use consistent image ratio/style across rows.
  3. Keep each text block to 1 to 2 short paragraphs.
  4. Test mobile view to verify readability when panels expand.

FAQs

Section titled “FAQs”

Why is a row image different from what I expected?

Section titled “Why is a row image different from what I expected?”

If Image is empty, the section uses Image asset filename or index-based defaults.

Why are all rows not open at once?

Section titled “Why are all rows not open at once?”

This component is intentionally single-open for cleaner reading.

Why does a row auto-open when editing?

Section titled “Why does a row auto-open when editing?”

Theme Editor block selection triggers that row to open so content can be edited in context.

Section titled “Related guides”