What is the featured collection section?
The Featured collection section is probably one of the most-used sections when setting up an Online Store. It can be an excellent way to present collections of products to potential customers in a concise and user-friendly layout, aiding product discovery and helping to drive sales.
Beautify includes a range of layouts and styles including carousels, grids and cutout cards:
- Focus carousel - a carousel where the center card is highlighted and pushed forward
- Arc carousel - a carousel where the cards appear in an arc
- Standard carousel - a carousel where all the cards are in a straight line and the same size
- Grid - a grid of product cards
Focus carousel layout with cutout cards on Collage hero image background (Full width)
Arc carousel layout on a touchscreen with cutout cards on Collage hero image background (Full width)
Carousel layout with standard cards and default section background (Full width)
Grid layout with standard cards on a gradient section background (Non full width)
How to set up a featured collection
Steps
- In the Theme Editor, click Add section and select Featured collection to add the section to your page.
- Navigate to the main Featured collection settings. To populate the section with products, use Select collection to pick a collection from your inventory.
- Set the Layout to be Carousel or Grid and customize the design by setting the Products per row or choosing a carousel Effect.
- The Carousel layout option will display the product cards in a single row with horizontal scrolling, and is ideal for when a more compact look is required. Select None for a standard carousel, Focus to highlight the center card or Arc for a curved layout.
- The Grid layout option shows products in rows, and can be an excellent solution when looking to show more than one row of products.
- Select Show cutout cards for a card layout where the product image breaks the boundary of the card. Caution: This setting should only be used with images that have a transparent background.
- Choose whether to show a "View all" button to link through to the full collection.
- In the Text settings, there are options to control the alignment and width of text blocks.
- Select a Color scheme for the content. Color schemes can be managed in Theme settings > Colors.
- Choose one of the five Section background options:
Default: Uses Beautify's default color scheme selected in Theme settings > Colors > Schemes.
Color: Select a custom Background color
Image: Upload a Background image
Simple gradient: Set the gradient start and end colors, plus the gradient style
Advanced gradient: Customize the gradient further using the COLOR STOP settings - If the section is not full width, an additional Layout setting, Boundary above section controls the spacing above the section. This can help to create smoother transitions between sections.
Default - Will leave the standard spacing at the top of the section
Tight - Will leave a smaller space between sections
Join - Adjacent sections will touch each other - Add content to show above the products using the Subheading, Heading, Text, Buttons or Countdown Timer blocks. Click Add block to add more blocks of content, or use one of the existing blocks that are present upon install.
Tip
How to set up product cards
Customize product card design, content and layout using the Theme settings for Product cards and Colors. The Beautify theme includes flexible options for product card design - crop images to a consistent shape, add hover interactions and set the card content and colors.
Note
Set the product card color scheme
Steps
- Open the Theme editor, select Theme settings and open the dropdown Colors.
- Select the Product card color scheme.
- Within the Color scheme settings, there are specific settings for the product card Border and Shadow.
- Use the Opacity of muted text slider in the Color theme settings to ensure that text with reduced emphasis is legible and meets accessibility requirements. This affects some text on the product card such as the product subtitle, unit price and compare at price.
Note
Configure the product card layout and content
Steps
- Open the Theme editor, select Theme settings and open the dropdown Product cards.
- Manage the Image by setting the main Image aspect ratio.
- Set the Image fit and Image alignment for the main image.
- Choose whether to Show second image on hover and then set the Hover image fit and Hover image alignment.
- Manage the card Content, choosing whether to Show rating, Show vendor or Show subtitle.
- Choose whether to Truncate title or Truncate subtitle. This can be used to ensure to create a neater layout on the card.
- Use the setting Display inline price to show the price next to the title. This only applies on larger cards where space is available.
- Choose whether to Enable Quick shop. The quick shop can use a one-click add method for single variant products which don't require the customer to view more details prior to purchase. This can be enabled using the setting Enable single-click add.
What are cutout cards?
In a cutout card, the product image overlaps the top edge of the card. With a traditional card the product image always sits within the confines of the overall product card. The aim of cutout cards is to create a more interesting user experience and bring the product image to prominence by breaking out of the card. They are designed to be used only for products where the main image has a transparent background.
Tip
Product labels
In the Beautify theme, labels can be shown over the image or next to the price to communicate important details such as pre-order, new in, sold out and sale. Refer to the product labels guide for more information.
Swatches
The Beautify theme supports Shopify swatches. Refer to the swatches guide.
Combined products
Beautify's Combined products offer a smart solution for grouping individual products into a unified, variant-style display. It’s especially valuable for stores that showcase multiple color options. Each color can be presented as a separate product card. This type of feature is sometimes known as Sibling products, Connected products or Product groups. It offers functionality similar to the Combined Listings app without the need for Shopify Plus. Refer to the combined products guide for more.
FAQs
Why are there empty spaces at the end of my Featured collection?
Check there are sufficient products in the selected collection by navigating to Admin > Collection.
In the Grid layout, it's possible to control the number of products per row and the maximum products to show to avoid orphans.
Both Carousel layouts have a minimum number of products. The standard carousel requires a minimum of 5 products in the collection. The Focus and Arc carousels work best with a minimum of 12 products.
Why isn't the section background color showing?
Check to see if the section background is being overridden by the Collage hero section. The Collage hero section's background can extend up or down behind other non-full-width sections.
How do I add a consistent color background behind my images?
The Beautify theme includes a color blending feature which can be enabled in Theme settings > Colors This can blend the background into a light color.
How do I show review stars on a product card?
If your store is using a reviews app which links to Shopify's standard rating metafield, review stars can be shown below products on the collection page. Go to Theme settings > Product cards > Show rating.
What is the difference between a Featured collection and Product list section?
The featured collection section will show the products from a single collection. The product list section allows you to choose which products to display.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us