Skip to content
RockStarUI Docs

Home Values Strip

What this section does

Section titled “What this section does”

The Home values strip section presents brand value highlights in a three-column strip. Each value block supports an icon-style image area, heading, and short supporting text.

Shopify Theme Editor with the Home values strip section selected on the Home page template, showing value blocks in the left sidebar, the three-value strip preview in the canvas, and the background control in the right settings panel.

How to set it up

Section titled “How to set it up”
  1. Go to Online Store -> Themes.
  2. Click Customize.
  3. Open the Home page template.
  4. In the left sidebar, select Home values strip.
  5. Add or edit Value blocks, then save.

Editor areas overview

Section titled “Editor areas overview”
  1. Left sidebar:
    • Shows the section plus each Value block.
    • Add Value creates a new value item.
    • Drag blocks to reorder values.
  2. Center preview:
    • Shows icon shape, heading, and text for each value item.
    • Reflects background and block copy updates in real time.
  3. Right settings panel:
    • Section-level control: Background.
    • Block-level controls appear when a specific Value block is selected.

Key section setting explained

Section titled “Key section setting explained”
  1. Background: sets strip background color behind all value items.

Value block settings

Section titled “Value block settings”

Each Value block includes:

  1. Product image source: pulls image from selected product when no manual image override is set.
  2. Image override (optional): replaces product-derived image for full control.
  3. Heading: value title.
  4. Text: supporting value description.

Important behavior

Section titled “Important behavior”
  1. If Image override is set, it takes priority.
  2. If no override is set and a product is selected, product featured image is used.
  3. If product is not selected, the section can fall back to products from the all-products collection by position.
  4. If no usable image exists, a placeholder is shown.

Common tasks

Section titled “Common tasks”

Add a new value item

Section titled “Add a new value item”
  1. Select Home values strip.
  2. Click Add Value.
  3. Set heading and text.
  4. Set product source or image override.
  5. Save.

Reorder value items

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

Force custom icon imagery

Section titled “Force custom icon imagery”
  1. Open a Value block.
  2. Set Image override (optional).
  3. Keep Product image source as fallback if desired.
  4. Save.

Tips

Section titled “Tips”
  1. Keep value headings short and parallel in style.
  2. Keep text length balanced across items for cleaner visual rhythm.
  3. Use similarly styled images to avoid visual inconsistency in the icon row.
  4. Validate readability of text color against chosen background.

FAQs

Section titled “FAQs”

Why is a different image showing than expected?

Section titled “Why is a different image showing than expected?”

Check whether Image override is set. If not, image can come from selected product source or fallback logic.

Why does one value show a placeholder?

Section titled “Why does one value show a placeholder?”

That block has no valid image override and no available product image from selected/fallback source.

Why do values stack on mobile?

Section titled “Why do values stack on mobile?”

The section is responsive and shifts from multi-column to single-column layout at smaller widths.

Section titled “Related guides”

Publish checklist

Section titled “Publish checklist”
  1. Confirm value order and copy.
  2. Confirm each icon image source.
  3. Check background contrast and mobile layout.
  4. Save and publish.

Need help?

Section titled “Need help?”

If you still need help, contact support via the Contact page.