How to Set Up the Collection List Section in Concept

The Collection List section lets you display a curated group of collections on a page. You can use it to highlight popular categories, seasonal collections, product groups, or any collection links you want customers to browse quickly. Each collection is added as a separate Collection block. You can also customize the collection card image, title, description, layout style, carousel behavior, colors, and spacing. How to Set Up the Collection List Section in Concept Steps: Add the Collection List section From your Shopify admin, open Online Store > Themes. Click Customize on your Concept theme. Open the template where you want to display the collection list. Click Add section. Select Collection List. Drag the section to the position where you want it to appear. Click Save. After adding the section, you can add collection blocks and configure the card layout. Add collections to the section Open the Collection List section in the theme editor. Click Add block. Select Collection. In the Collection setting, choose the collection you want to display. Repeat the same process for each collection you want to show. Drag the blocks to reorder the collection cards. Click Save. Each Collection block creates one collection card in the section. Customize each collection card Open a Collection block inside the section. Use Collection to select the collection linked to the card. Use Image if you want to override the default collection image. Use Title if you want to show a custom title instead of the collection title. Use Description if you want to add short supporting text under the title. Enable Overlay text on image if you want the title and description to appear over the image. When overlay content is enabled, use the block color settings to adjust the text color, overlay color, and overlay opacity. Click Save. If no custom image is selected, the section uses the image source from the section-level Image type setting. Configure the collection card layout Open the Collection List section settings. Use Style to choose how collection cards are displayed. .Select Standard for a simple card layout. .Select Card for a card-style layout. .Select Overlap if you want the content to visually overlap the media area. Use Image type to choose whether the card image comes from the Collection image or the First product image. Use Image ratio to control the card image shape. Enable Show product count if you want to display the number of products in each collection. Click Save. The Image type setting applies to collection cards unless a specific block uses a custom image override. Configure desktop and mobile layout Use Number of columns on desktop to choose how many collection cards appear per row on desktop. Enable Carousel on desktop if you want the collection cards to display as a horizontal carousel on desktop. Use Columns on mobile to choose whether mobile displays one or two cards per row. Enable Swipe on mobile if you want customers to swipe through collection cards on mobile. Enable View all if you want to show a button that links to the full collections page. Click Save. The View all button appears when enabled and there are more collections available than the collections shown in the section. Customize the section heading Use Heading to add the main title above the collection list. Use Heading size to adjust the title size. Use Heading alignment to align the heading to the left, center, or right. Use Heading tag to choose the HTML heading tag for SEO and page structure. Use Subheading to add small text above or near the heading. Use Description to add supporting text below the heading. Use the highlight settings if you want part of the heading to use a highlight style. To highlight text, select the text inside the heading field and apply italic formatting. The theme will apply the selected highlight style to that text. Click Save. Adjust colors and section spacing Use Text to change the section text color. Use Background or Background gradient to change the section background. Use Highlight or Highlight gradient to style highlighted heading text. Use Button text, Button background, and Button gradient to style the View all button. Use Top padding and Bottom padding to adjust the spacing around the section. Enable Show section divider if you want a divider line around the section. Enable Make section full width if you want the section to span the full browser width. Enable Make section rounded if you want rounded corners around the section. Click Save. Preview the Collection List section Preview the storefront after setting up the section. Check that each collection card links to the correct collection page. Check that the selected card style and image ratio look correct. Check that custom images, titles, and descriptions appear correctly. Check that carousel arrows appear when Carousel on desktop is enabled. Check that mobile swipe works when Swipe on mobile is enabled. Check that the View all button appears only when needed. Troubleshooting A collection card does not show the expected image Make sure the collection has a collection image if Image type is set to Collection image. Make sure the collection has at least one product with an image if Image type is set to First product. Check whether the block has a custom Image selected. A block image overrides the section image type. Save changes and refresh the storefront preview. The collection title or description looks different than expected Open the related Collection block. Check whether a custom Title is entered. Check whether a custom Description is entered. If the custom title is blank, the theme uses the collection title. If the custom description is blank, no custom description appears for that card. The View all button does not appear Make sure View all is enabled in the section settings. Make sure the section does not already show all available collections. The button links to Shopify’s main collections page. The carousel or mobile swipe does not work Make sure Carousel on desktop is enabled for desktop carousel behavior. Make sure Swipe on mobile is enabled for mobile swipe behavior. Check that there are enough collection cards to scroll. Refresh the storefront preview after saving changes. Overlay text is hard to read Open the related Collection block. Enable Overlay text on image only when you want the content to appear over the image. Adjust Text, Overlay, and Overlay opacity in the block color settings. Use an image with enough contrast behind the text. Need Further Assistance If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.