Appearance

Featured collection table ​

This guide describes setting up the Featured collection table section.

Use the section to display a table with links to products from a specific collection on a page

​An example Featured collection table section on a store's home page.

​The previous image shows a Featured collection table section on a store's home page. On the left, part of Theme editor's section menu is displayed. The menu's Desktop media display option is set to Hover. The Hover option displays product media when the cursor is placed over an item ("mouse over") inside the section.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

To set up a Featured collection table section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains a Featured collection table section.

    Note

    The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Featured collection table. Refer to Shopify help: Add a section.

  2. From the side menu, select Featured collection table.

    The Featured collection table section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
HeadingIn the Heading box, enter text to display as title text inside the section.
Heading > Connect dynamic sourceTo display heading text from a dynamic source, if available, select the Connect dynamic source icon beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields.
CollectionUse the following Collection selector options to set up a collection to display inside the section.
  • To add a collection, choose Select collection, enter the name of a collection into the Search box and/or select a collection from the list. Then, choose Select.
  • To create a new collection, select Create collection to open the Create collection page in Shopify admin. Refer to Shopify help: Collections.
  • To replace a collection, choose Change > Change collection. Enter the name of a collection into the Search box and/or select a collection from the list. Then, choose Select.
  • To remove a collection, select Change > Remove collection.
Product limitAdjust the Product limit slider to specify the maximum number of products from a collection to display inside the section. The minimum number is 1 and the maximum is 50.
Show column labels on mobileSelect the Show column labels on mobile checkbox to show/hide the section's column labels on mobile display devices.
Show "View all" linkSelect the Show "view all" link checkbox to show/hide a link inside the section for accessing an entire collection.
Product media > Show on mobileSelect the Show on mobile checkbox to show/hide product media inside the section on mobile display devices. With this setting enabled, product media display beside each product's title inside the section.
Product media > Desktop media displayUse the Desktop media display setting to specify how product media display inside the section on desktop display devices. To hide product media, select None. The Hover option displays product media when the cursor is placed over an item ("mouse over") inside the section. The Title block option displays product media beside each product's title inside the section.
Product media > Enable quick buySelect the Enable quick buy checkbox to show/hide a "Choose options" button beside products inside the section. A store visitor uses the button to choose product options, like variants, to add to their cart.
Button styleUse the Button style setting to specify a button style for the section's quick buy buttons. To use this option, check the Enable quick buy option (set to on). Set the buttons to use a Text or Icon style.
Color > Color schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Color > Theme settings (link)Follow the Theme settings link to open Theme editor's Color theme settings. Use the settings to edit the theme colors for your entire store.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.
Remove sectionSelect Remove section to delete the section from the current page.

A default Featured collection table section contains two (product) blocks. To configure a block inside the section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains a Featured collection table section.

  2. From the side menu, expand the Featured collection table section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, choose a block to add, and then select the block you added.

    The Featured collection table's Add block menu in Theme editor.

    Note

    Inside the section, you can add, remove, show, hide, and move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.

  4. Apply a block setting described in the Table: Featured collection table blocks.

The following table describes the blocks inside the Featured collection table section, and their corresponding settings.

To configure a block, refer to Configure a block within a Featured collection table section.

Block nameBlock descriptionBlock setting(s)
TitleDisplay a column containing the title of each product from your selected collection inside the section.There are no customizable settings available for this block.
PriceDisplay a column containing the price of each product from your selected collection inside the section.There are no customizable settings available for this block.
VendorDisplay a column containing the product vendor's name for each product from your selected collection inside the section.There are no customizable settings available for this block.
Product metafieldDisplay a column inside the section that contains data from your store's dynamic data sources.
  • In the Column label box, enter text to display as title text inside the block.
  • To display Column label text from a dynamic source, if available, select the Connect dynamic source icon beside the Column label box, and then choose a metafield to add. Refer to Shopify help: Metafields.
  • In the Metafield namespace and key box, enter the namespace and key values for the dynamic data source to display inside the block. Enter the namespace and key using the format custom.my_label.
  • Use the Sort label on mobile options to specify a text label for the block's product sorting area. The product sorting area displays on mobile display devices. The options are Automatic, A-Z (alphabetical), Low to high (numeric), and Old to new.
  • To remove the block from the section, select Remove block.