Skip to content
RockStarUI Docs

Featured Collection

What this section does

Section titled “What this section does”

The Featured collection section shows a curated product grid from one selected collection. It includes section copy, product count control, and a top-right CTA link.

Shopify Theme Editor with the Featured collection section selected on the Home page template, showing collection products in a grid and the settings panel with heading, collection, product count, and CTA fields.

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 Featured collection.
  5. Set collection, product count, and CTA fields, then save.

Editor areas overview

Section titled “Editor areas overview”
  1. Left sidebar:
    • Shows the selected section instance in the template tree.
  2. Center preview:
    • Shows section heading/subheading and the product card grid.
    • Reflects product count and selected collection immediately.
  3. Right settings panel:
    • Section controls: Heading, Subheading, Collection, Products to show, CTA label, CTA link.

Key settings explained

Section titled “Key settings explained”
  1. Heading: section title above the product grid.
  2. Subheading: supporting copy under the heading.
  3. Collection: source collection used for products in the grid.
  4. Products to show: grid item count (from 4 up to 12).
  5. CTA label: text for the top-right call-to-action.
  6. CTA link: destination for the CTA button.

Important behavior

Section titled “Important behavior”
  1. If CTA link is empty, the button defaults to the selected collection URL.
  2. If no collection is selected, the section falls back to all products.
  3. Product cards automatically show sale pricing when compare-at price is higher than current price.

Common tasks

Section titled “Common tasks”
Section titled “Switch the featured collection”
  1. Open Featured collection settings.
  2. Change Collection.
  3. Review product order and relevance in preview.
  4. Save.

Increase or reduce product density

Section titled “Increase or reduce product density”
  1. Adjust Products to show.
  2. Verify layout balance on desktop and mobile.
  3. Save.

Update CTA destination

Section titled “Update CTA destination”
  1. Set a custom CTA link (for example, /collections/all).
  2. Keep CTA label aligned with destination intent.
  3. Save.

Tips

Section titled “Tips”
  1. Keep heading/subheading concise to prioritize product visibility.
  2. Use product counts that maintain clean rows for your target breakpoints.
  3. Make sure the selected collection has enough in-stock products for the configured count.
  4. Validate CTA destination after major navigation updates.

FAQs

Section titled “FAQs”

Why are products not from the collection I expected?

Section titled “Why are products not from the collection I expected?”

Check the Collection setting first. If blank, the section can fall back to all products.

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

The theme automatically links CTA to the selected collection URL when no explicit link is provided.

Why do some products show two prices?

Section titled “Why do some products show two prices?”

Those products have compare-at prices higher than current prices, so the section renders sale and compare values.

Section titled “Related guides”

Publish checklist

Section titled “Publish checklist”
  1. Confirm heading/subheading copy.
  2. Confirm selected collection and product count.
  3. Verify CTA label and destination.
  4. Check desktop/mobile preview and save.

Need help?

Section titled “Need help?”

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