Fluorescent Logo
Back to the index

Featured collection

The Featured collection section creates a list of products from one of your collections. You can change the look and feel of the section by changing how many products it displays at once.

Your browser does not support the video tag.

On mobile devices, one product is shown at a time. Customers can scroll left or right carousel style.

Mobile

The featured collection can be displayed on the following page templates:

  • The home page template
  • The collection pages template

Set up a featured collection section on the home page

To set up this section on the home page:

  1. From your theme’s “Customize” screen, choose Home page from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed

  2. Scroll down the list of home page settings until you see the Add section button.

    Add section button

  3. Choose Featured collection from the list of sections, and press the Add button.

    This opens the featured collection section settings.

  4. Choose the Style for the section, either Default or Contrast.

    If you select Contrast, this section uses Lorenza’s contrast colors.

  5. Pick the Text position for this section.

    This places the section heading either before or beside the collection products. Choose between Top left, Top center, Top right, Middle left or Middle right options.

    Here’s an example of the Top center option, where the heading is displayed before the collection products:

    Top center

    Here’s an example of the Middle left option, where the heading is displayed beside the collection products:

    Middle left

  6. Choose a Collection to display as the featured collection.

  7. Choose how many Columns of products to display at once.

    Choose between 2 and 4 columns.

    Note that on mobile devices only one column is shown at once.

  8. Choose the Image aspect ratio to be used for all collection images.

    Use Natural to use the original images. Or, use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another.

  9. Add a Small heading, Heading, and Subheading.

    These all appear in the header area of the section.

  10. Add Collection link text.

    When you enter this text, it adds a call to action button that links to the featured collection.

  11. Choose a Max width of text, between 16 and 50.

    The text max width lets you control the shape of the text, and make it look good no matter how long your collection descriptions are.

  12. Use the Back to settings (<) button to go back to all of the home page settings again. Use the drag handles to rearrange the order of your home page sections:

    Shopify section drag handles

  13. Use the Save button in the top-right corner when you are finished editing.

Settings

The featured collection section has the following settings:

Style
Choose a section style, either Default or Contrast. This affects the colors of the current section.
Text position
Choose a position for all of the header and link text for the current section.
Collection
Choose a collection to be featured.
Columns
Use the slider to choose how many products should be displayed side by side. You can choose between 2 and 4 per row.
Image aspect ratio
Choose the aspect ratio for all collection images displayed.

Use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another

Use Natural if you do not want your images cropped at all.

Small heading
Change the small heading text displayed above the main heading.
Heading
Change the heading displayed in the header area the section.

We recommend keeping this to just a few words long.

Subheading
Add subheading text.

We recommend a single, short paragraph.

Collection link text
Change the text for the call to action button that links to the featured collection.
Max width of text
Using the slider, choose how wide the heading text should appear, at a maximum.

Set up the featured collection section on collection pages

This section can also be added to the collection pages template.

To enable this section:

  1. From your theme’s “Customize” screen, choose Collection pages from the pages drop-down menu at the top of the screen.

    Drop-down menu with page types listed

  2. Scroll down the list of available settings until you find Featured collection. Click on it.

  3. Check the Enable checkbox to enable the featured collection.

  4. Pick the Text position for this section.

    This places the section heading either before or beside the collection products. Choose between Top left, Top center, Top right, Middle left or Middle right options.

    Here’s an example of the Top center option, where the heading is displayed before the collection products:

    Top center

    Here’s an example of the Middle left option, where the heading is displayed beside the collection products:

    Middle left

  5. Choose a Collection to display as the featured collection.

  6. Choose how many Columns of products to display at once.

    Choose between 2 and 4 columns.

    Note that on mobile devices only one column is shown at once.

  7. Choose the Image aspect ratio to be used for all collection images.

    Use Natural to use the original images. Or, use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another.

  8. Add a Small heading, Heading, and Subheading.

    These all appear in the header area of the section.

  9. Add Collection link text.

    When you enter this text, it adds a call to action button that links to the featured collection.

  10. Choose a Max width of text, between 16 and 50.

    The text max width lets you control the shape of the text, and make it look good no matter how long your collection descriptions are.

  11. Use the Save button in the top-right corner when you are finished editing.

Settings

Enable
Check this checkbox to enable the featured collection.
Text position
Choose a position for all of the header and link text for the current section.
Collection
Choose a collection to be featured.
Columns
Use the slider to choose how many products should be displayed side by side. You can choose between 2 and 4 per row.
Image aspect ratio
Choose the aspect ratio for all product images displayed.

Use Square (1:1), Landscape (3:2), or Portrait (2:3) to have the images cropped to match one another

Use Natural if you do not want your images cropped at all.

Small heading
Change the small heading text displayed above the main heading.
Heading
Change the heading displayed in the header area in this section.

We recommend keeping this to just a few words long.

Subheading
Add subheading text.

We recommend a single, short paragraph.

Collection link text
Change the text for the call to action button that links to the featured collection.
Max width of text
Using the slider, choose how wide the heading text should appear, at a maximum.

Related articles

  • Home page
  • Collection pages
  • Featured collection grid
  • Colors
© 2014-2020 Fluorescent Design Inc.   •   hello@fluorescent.co