Featured collection settings


The Featured Collection section showcases products from a selected collection in an interactive slider. Product cards are displayed in a horizontal carousel that loops continuously to the left, allowing customers to browse items without leaving the current page. This section is designed to highlight specific products or seasonal selections, improving visibility and encouraging engagement. Merchants can customize the number of visible product cards, button labels, and other display settings to match the store’s design and marketing goals.

Settings  Description
Heading

This field is for adding a heading to the section. In the top menu of the field, you can find options to customize the heading.

Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section.

Heading font size

The heading size setting offers three options to control the size of your section heading:

  • Small
  • Medium
  • Large
Heading font weight

Font weight defines the thickness or boldness of text on your store. Available options for heading:

  • Normal (400): Default weight for body text.
  • Medium (500): Slightly thicker, suitable for emphasized body text or light headings.
  • Semi-Bold (600): Heavier, ideal for subheadings or highlighted text.
  • Bold (700): Strongest weight for maximum emphasis.
Description 

To add a description to the section, simply enter the text in the provided field.

In the top menu of the field, you can find options to customize text, such as making its font bold or light, italic, or adding a hyperlink. Additionally, you can use the style of headings from H1 to H6 to the body text.

Furthermore, you can click the dynamic source button to insert a dynamic source as the description of the section.

Show collection description from the admin

Slide the button to the right if you want to display the description directly from the admin panel.

When this option is enabled, the description you entered in the field above will no longer be visible.

Collection Choose the collection of products you want to display in a slider or grid layout.
Color scheme

You can apply different color schemes to your store:

  • After creating color schemes in the theme settings under the 'Colors' tab, you can assign them to different sections of your store.
  • In each template, section, or block, you'll find a 'Color Scheme' dropdown.
  • Simply select the appropriate color scheme to maintain consistency and align with your brand's identity.
Grid slider Enable this option to display the section in two rows.
Grid columns (desktop) Use the slider to adjust the number of product card columns on desktop.
Grid columns (tablet) For better appearance on smaller screens, this option allows you to adjust the number of product card columns on tablets.
Grid columns (mobile) This option allows you to select the number of columns for mobile devices.
Maximum products to show Set the maximum number of products that will be displayed in this section. The range is from 2 to 25 products.
Number of slides Controls the number of product cards visible in this section. Adjust the value using the slider.

Button settings

Settings  Description
Enable “View all” if collection has more products than shown The “View all” button redirects to a collection page with all products. This button is visible when a collection has more products than shown. If you don't see a button, try to reduce the quantity of products in “Maximum products to show” slider.
Button label Sets the label for the button linking to the assigned collection page. For example, enter 'View all' or any other text.
Button style In Shopify, Button style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store.
Button type

Button type: Choose how the button will be displayed:

  • Button – a solid button.
  • Button with icon – a button that includes an icon.
  • Inline – text styled as a hyperlink.
  • Inline with icon – a hyperlink that includes an icon.
Icon Select an icon from the dropdown list; it will be displayed in the button before the text.

Product card

Setting Description
Image ratio

Image Ratio controls how your images look based on their shape. Here are the options:

  • Adapt to image: Keeps the original shape of the image, no cropping.
  • Portrait: Makes the image taller.
  • Square: Makes the image a perfect square.
  • Custom: Allows setting image height in the next option.
Custom image height Set a custom image ratio and adjust its height using a convenient slider.
Image shape

You can check and choose from the following shapes for product cards in the dropdown:

  • Default
  • Arch
  • Blob
  • Chevron left
  • Chevron right
  • Diamond
  • Parallelogram
  • Round

To view the changes:

  • Select the Standard style in the Theme Settings under the Product Card tab to explore different image shapes.
  • If the style is set to Card, ensure the product background is different from the card background in color scheme.
Show vendor Show the vendor of the product after the product title.
Show product rating Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and Metafield definitions for reviews.rating_count and reviews.rating.
Show type You can show or hide the product type (e.g., headphones) added on the product detail page using this button.
Show color variants

Enable this option to show color swatches. This option works with Color Variant Name option.

In the Color Variant Name field (Theme settings — Product cards tab), ensure you enter the name of the variant option, such as “Color.” It should match exactly as it appears in the Product Detail Page in the Shopify Admin Variants section.

Directly on the product card, you can preview different product variant colors and even add a selected variant to your cart. Simply click on the desired color swatch, then hover over the product card and click “Add to Cart”.

Quick add

Enables or disables quick view buttons in product cards.

  • None – Quick view button is hidden. Product cards are displayed without buttons if a variant cannot be selected directly from the card. If the product has only one variant, or if a variant can be selected using color swatches, the Add to cart button is displayed.
  • Standard – The Quick view button is displayed on the product card if a variant cannot be selected directly from the card. If the product has only one variant, or if a variant can be selected using color swatches, the Add to cart button is displayed.

Mobile layout

Setting Description
Number of slides Controls the number of product cards visible in this section on mobile. Adjust the value using the slider.

Section padding 

Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us