Featured collection settings

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 family:
  • Heading
  • Body

In Theme Settings, you can assign a different font family to headings and body text.

This option allows you to customize the visual style of your heading by selecting heading or body styles.

For some headings, it might be more effective to apply the body text style instead of the designated heading font. This choice depends on how well the font families harmonize and the overall appearance you want to achieve.

Heading size

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

  • Small
  • Medium
  • Large
Font weight

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

  • Normal (400): The default font weight for body text, which can also be applied to headings.
  • 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.

Description style

You can select the desired style for the description text, depending on how you want the content to appear.

Available styles:

  • Body
  • Subtitle
  • Uppercase
Collection Choose the collection which products you want to display in a slider or grid layout.
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 columns on desktop

The “Number of columns on desktop” setting allows you to select the number of columns in which your content will be displayed on larger screens, and on tablets. You can select from 1 to 5.

You should disable “Enable slider” option to use this feature for grid layout.

Enable “View all” if collection has more products than shown The “View More” 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 quantity of products in “Maximum products to show” slider.
Button style (for “View all” button) 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 outline (for “View all” button)

None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look.

Outline: The button has a visible border around it, but the background is transparent.

Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent.

Enable slider Activate a slider to display the collection in a carousel on desktop devices.
Number of slides on desktop

Set the number of slides visible at once on desktop devices.

You can choose to display the entire product card or a portion of the slide at the end, depending on your settings.

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.

Product card


Setting Description
Image ratio

The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from:

  • Adapt to image: This option uses the aspect ratio of the images, ensuring that they are not cropped and displayed in their original dimensions.
  • Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height.
  • Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height.
  • Custom: works with custom image height option.
Custom image height Set a custom image ratio and adjust its height using a convenient slider.
Image shape

Select the desired image shape from the dropdown menu.

To view the changes:

  • Choose 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.
Heading size

The heading size setting offers four options to control card heading size:

  • Extra small
  • Small
  • Medium
  • Large
Font weight

Font weight defines the thickness or boldness of card heading. Available options:

  • Normal (400): The default font weight for body text, which can also be applied to headings.
  • 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.
Show second image on hover Check this option to display a second image on hover. This will only apply if the product page includes more than one image.
Show vendor Show the vendor of the product after 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.
Enable quick view button

Activate this option to display a “Quick View” button next to the “Add to Cart” button on product cards with variants.

The Quick View button opens a pop-up where customers can:

  • Select desired variants.
  • Add the item to their cart.
  • Use the “Buy it now” option for instant checkout.
  • Click the product title to view full details on the product detail page.

If disabled, only the “Add to Cart” button will appear, allowing customers to add products to their cart without the quick checkout or variant selection pop-up.

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 in each block 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”.


Mobile layout


Setting Description

Number of columns on mobile

Works with a grid layout.

You can set a distinct column layout for mobile devices. Choose between:

  • 1 column
  • 2 columns

You should disable “Enable slider” option to use this feature.


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