Featured collection
Featured collection shows products from one collection, such as your favorites or a new range, as a row of Cosmero’s product cards. Use it on the home page or any other page.
The product card is the same everywhere in Cosmero. The image sits on its own surface, with the product type at the top and an add button on the image. Below it, the title and price share one line, with a one-line benefit from the product’s subtitle under them. You choose what the cards show once, for the whole store, in Theme settings → Product cards, described in Theme settings.
By default, Panel style is Flush and the color scheme matches Cosmero’s default page background, so the product cards themselves read as the panels.
Add the section
Section titled “Add the section”Online Store → Themes → Customize
- In your Shopify admin, go to Online Store → Themes and select Customize on Cosmero.
- At the top of the theme editor, open the template you want to change, such as the home page.
- In the sidebar, select Add section.
- Choose Featured collection.
- Choose a collection in Collection, then select Save.
You can add it to any template, but not to the header or the footer.
Settings
Section titled “Settings”- Heading: the section’s heading.
- Text: a short text under the heading.
- Collection: the collection to show. Until you choose one, or while it has no products, placeholder cards show.
- Link label: the text of a button beside the heading that links to the collection. Leave it empty to hide the link. It shows only when the collection has products.
- Maximum products to show: from 2 to 12 (default 4). Products follow the collection’s sort order, which you set in your Shopify admin under Products → Collections.
- Columns on desktop: from 2 to 5 (default 4). Tablets show up to three.
- Mobile layout: Carousel (the default) shows the cards in a row that shoppers swipe, with the next card peeking in. 2 columns shows them in a grid.
- Color scheme: the colors behind the cards. You edit color schemes in Theme settings.
- Panel style: Panel is a rounded panel inside the page margin. Flush, the default here, spans the full page width with square corners.
- Enable full width on mobile: on mobile, the panel runs from edge to edge with square corners. Shown when Panel style is Panel.
- Top padding: space above the content, from 0 to 120 px (default 40).
- Bottom padding: space below the content, from 0 to 120 px (default 40). On mobile, both paddings are scaled down: 40 px becomes 25 px.
- To show a “New” badge on a card, tag the product “new”. Sale and sold-out badges show on their own.
- The benefit line comes from the product’s standard Product subtitle metafield. Products without a subtitle show no benefit line.
- The add button adds a product with one variant straight to the cart, and opens quick add to choose options for the rest.