Skip to content
RockStarUI Docs

Home Product Slider

What this section does

Section titled “What this section does”

The Home product slider section shows a horizontally scrollable product row with pricing and sale compare values. It lets you control collection source, number of products, cards visible per desktop view, progress bar width, and optional CTA.

Shopify Theme Editor with the Home product slider section selected on the Home page template, showing product cards in a horizontal slider and the settings panel with heading, collection, product count, cards per view, progress width, CTA, and background controls.

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 product slider.
  5. Configure collection, counts, layout controls, and CTA fields, then save.

Editor areas overview

Section titled “Editor areas overview”
  1. Left sidebar:
    • Shows the selected Home product slider section in the template tree.
  2. Center preview:
    • Shows heading/subheading, product cards, and slider controls.
    • Displays progress line plus previous/next buttons.
  3. Right settings panel:
    • Section controls: Heading, Subheading, Collection, Products to show, Cards per view (desktop), Progress width, CTA label, CTA link, Background.

Key settings explained

Section titled “Key settings explained”
  1. Heading: section title.
  2. Subheading: short supporting text below heading.
  3. Collection: product source for the slider.
  4. Products to show: total number of products loaded into the slider.
  5. Cards per view (desktop): number of cards visible at once on desktop widths.
  6. Progress width: width of the progress track in pixels.
  7. CTA label: text for the top-right button.
  8. CTA link: destination URL for CTA.
  9. Background: section background color.

Important behavior

Section titled “Important behavior”
  1. If Collection is not set, the section falls back to all products.
  2. If CTA link is empty, CTA defaults to the selected collection URL.
  3. Sale and compare-at prices are shown automatically when product pricing supports it.

Common tasks

Section titled “Common tasks”

Change product source

Section titled “Change product source”
  1. Update Collection.
  2. Check product relevance/order in preview.
  3. Save.

Tune slider density

Section titled “Tune slider density”
  1. Set Products to show.
  2. Adjust Cards per view (desktop) for readability.
  3. Verify desktop and mobile behavior.
  4. Save.

Adjust control footprint

Section titled “Adjust control footprint”
  1. Change Progress width.
  2. Check balance between slider progress and nav buttons.
  3. Save.

Tips

Section titled “Tips”
  1. Keep heading/subheading concise so product cards stay dominant.
  2. Avoid very high card density on desktop unless imagery is simple and consistent.
  3. Ensure collection has enough in-stock products for the configured limit.
  4. Validate spacing and title wrapping at tablet width before publishing.

FAQs

Section titled “FAQs”

Why is the slider showing unexpected products?

Section titled “Why is the slider showing unexpected products?”

If Collection is blank, the section can fall back to all products.

Section titled “Why is CTA still clickable when CTA link is empty?”

The theme uses selected collection URL as CTA fallback when no explicit link is provided.

Why do some cards show both current and crossed-out prices?

Section titled “Why do some cards show both current and crossed-out prices?”

Those products are on sale and include compare-at pricing.

Section titled “Related guides”

Publish checklist

Section titled “Publish checklist”
  1. Confirm heading/subheading copy.
  2. Validate collection and product count.
  3. Confirm cards-per-view and progress width feel balanced.
  4. Verify CTA label/link behavior.
  5. Save and publish.

Need help?

Section titled “Need help?”

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