Skip to content
RockStarUI Docs

Blog Carousel

What this section does

Section titled “What this section does”

The Product promo carousel on the Blog template is the featured story band at the top of the page. It lets merchants pin editorial highlights before the main article grid.

Shopify Theme Editor with the Blog template open and a Promo slide selected inside Product promo carousel, showing slide content fields like category label, heading, text, link, image, and background color.

Where it appears

Section titled “Where it appears”
  1. Template: Blog (templates/blog.json).
  2. Section name in editor: Product promo carousel.
  3. Block type: Promo slide.

How to set it up

Section titled “How to set it up”
  1. Go to Online Store -> Themes.
  2. Click Customize.
  3. Open the Blog template.
  4. Select Product promo carousel.
  5. Add or edit Promo slide blocks.
  6. Save.

Section controls (important)

Section titled “Section controls (important)”

When the section itself is selected:

  1. Section background: outer wrapper background color.
  2. Carousel background: component container background.
  3. Heading: optional section title above slides.
  4. Subheading: optional supporting copy.

Promo slide controls (important)

Section titled “Promo slide controls (important)”

When a single Promo slide block is selected:

  1. Category label: short top label (for example, Journal).
  2. Heading: primary slide title.
  3. Text: supporting summary copy.
  4. Button label: CTA text.
  5. Link: destination URL (usually a blog article URL).
  6. Image: featured visual for the slide.
  7. Background color: per-slide content panel color.

Blog-specific behavior

Section titled “Blog-specific behavior”
  1. Blog breadcrumbs (Home > Blog) are shown automatically in this template context.
  2. Slide layout alternates left/right on desktop by slide index.
  3. Arrows and dots show only when there is more than one slide.
  4. If image is empty and link matches supported blog paths, fallback assets can be used.
  5. Maximum slide blocks: 12.

Common merchant tasks

Section titled “Common merchant tasks”

Add a featured article slide

Section titled “Add a featured article slide”
  1. Select Product promo carousel.
  2. Click Add Promo slide.
  3. Fill Category label, Heading, Text, Link, and Image.
  4. Save and verify storefront output.

Reorder slides

Section titled “Reorder slides”
  1. Drag Promo slide blocks in the left sidebar.
  2. Confirm order in preview.
  3. Save.

Remove a slide

Section titled “Remove a slide”
  1. Open the slide block menu.
  2. Remove the block.
  3. Save.

Tips

Section titled “Tips”
  1. Keep headings short so the split layout stays balanced on tablet.
  2. Keep text length similar between slides to avoid height jumps.
  3. Point slide links to published articles only.
  4. Use consistent image framing across all slides.

FAQs

Section titled “FAQs”

Why is only one slide showing with no dots?

Section titled “Why is only one slide showing with no dots?”

Dots/arrows are hidden when only one slide exists.

Why is the slide image not what I uploaded?

Section titled “Why is the slide image not what I uploaded?”

If a slide image is empty, fallback logic may resolve an asset from the link pattern.

Why did the slide text panel move sides?

Section titled “Why did the slide text panel move sides?”

Desktop layout alternates per slide index by design.

Section titled “Related guides”