Featured collection

Steps to add the featured collection section:

1. In your Shopify admin dashboard, go to Online Store > Themes.
2. Choose the theme you want to edit and click on the Customize button.
3. Click on the arrow down next to Home page↓and select a template you want your Featured collection section to add to. 
4. Click on + Add section which can be found in your left sidebar or directly in the live editor. 
5. Scroll down, or search for Featured collection, then click on Featured collection. 
6. Click and hold the drag-and-drop handles ⋮⋮  to re-order your sections.

Congrats! 👏 You just added your Featured collection section.

Featured collection

1. Collection reference - Choose what will be shown in the section between these two options:
1. Collections - This option will allow you to display products from a certain collection or all products together. Click Select collection to choose what you want to show.
2. Custom products list - With this option, you can customize select products that you want to show in your section. Click Select products under Product list to choose your products.
2. Maximum product to show - The number of products from the collection to display. Minimum: 2. Maximum: 12.
3. Number of columns on desktop - Number of columns to display on desktop computers. Minimum: 2. Maximum: 4.
4. Layout options - Choose between Grid view (all the products will be visible and stacked on top of each other) or Slider (a slider will be activated, hiding some of the products).
5. Inline button position - Make the product's button inlined. Feature enabled only when Heading is left aligned.

Slider controls

1. Slider options - Choose whether you want to display a slider for Mobile only or Mobile and desktop.
2. Navigation (arrows) - If clicked, arrows will be shown as slider controls.
3. Pagination (dots) - If clicked, dots will be shown as slider controls.

Card content layout

1. Layout - There are two options:
1. Product info floating - Product information will be displayed directly on the product image.
2. Product info stacked - Product information will be displayed under the product image.

Section padding

1. You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
2. Read more about Custom CSS ↗.

Steps

1. Find the Featured collection section you added and customized following the steps above.
2. Click + Add block underneath and choose the block.
3. Once you've added a block, click on it to see additional block customization options.
4. (Optional) Click and hold the drag-and-drop handles ⋮⋮     to re-order your collections.

Subheading

1. Subheading - Subheading text for the section. Accepts dynamic sources.
2. Subheading size - Choose between a small and medium.
3. Subheading alignment - Choose between left, right, or center.

Heading

1. Heading - The title text for the section. Accepts dynamic sources.
2. Heading size - Choose between a small, medium, or large.
3. Subheading alignment - Choose between left, right, or center.

Collection banner

This block adds a custom image to the collection list.

1. Layout - The image can be small or medium.
2. Image - You can choose your image here by clicking Select image or Explore free images if you want to choose an image from Shopify's library. Optionally, upload a Mobile image if you wish for a different image to appear on mobile screens. Recommended dimensions are 768x1024 pixels. Alternatively, accept dynamic sources.
3. Content position - Choose where, relative to the image, you want to display your content block. Available options include Top left, Middle Right, Bottom Left, etc.
4. Text alignment - Set the alignment of the image banner text for desktop computers. Choose between right, left, or center.
5. Color scheme - It controls the background color of your content block, the text color, etc. Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one ↗ in Theme settings.
6. Enable Gradient - If marked, this will bring the text to the bottom and add a gradient to the image.

Text fields - control the text that will be displayed on the collection banner image.

1. Subheading - The subheading of your collection banner. Leave empty if you don't want to display it. Connects to the dynamic sources.
2. Subheading size - Choose between Small and Medium.
3. Heading - The title of your collection banner.
4. Heading size - Choose between small, medium, large, and extra large.
5. Show product count - If checked, the product count for the collection will be displayed next to the collection name.
6. Description - The description of your collection banner.
7. Button label - The text that displays on the button. Leave blank to hide the button.
8. Button link - The URL that you want the button to link to. Click the source button to add a dynamic source as a URL.
9. Button style - Choose a style for your button.