The Featured Collection section lets you display products from one selected collection on a page. You can use it to showcase best sellers, new arrivals, featured products, seasonal items, or any curated collection.
You can also manually select products for the section if you want to show a custom product list instead of using the full collection order.
How to Set Up the Featured Collection Section in Concept
Steps:
Add the Featured Collection section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
Open the template where you want to display the section.
-
Click Add section.
-
Select Featured Collection.
-
Drag the section to the position where you want it to appear.
-
Click Save.
After adding the section, you can choose the collection, adjust the product layout, and customize the section heading.
Choose a collection or selected products
-
Open the Featured Collection section settings.
-
Use the Collection setting to choose the collection you want to display.
-
Use the Products setting if you want to manually choose specific products.
-
Leave Products blank if you want the section to automatically display products from the selected collection.
-
Click Save.
When products are selected manually, the section displays those products instead of automatically pulling products from the selected collection.
Configure the product layout
-
Use Product limit to control how many products are shown in the section.
-
Use Columns to choose how many product cards appear per row on desktop.
-
Enable Carousel on desktop if you want products to display in a horizontal carousel instead of a full grid.
-
Enable Show “View all” button if you want customers to open the full collection page.
-
Use Columns on mobile to choose whether mobile shows one or two product cards per row.
-
Enable Swipe on mobile if you want customers to swipe through the product cards on mobile.
-
Click Save.
The section can display up to 12 products.
Customize the section heading
-
Use Heading to add the main title above the product grid.
-
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 buttons in this section.
-
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 Featured Collection section
-
Preview the storefront after setting up the section.
-
Check that the correct products appear.
-
Check that the product limit, desktop columns, and mobile columns look correct.
-
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 it is enabled and the selected collection has more products than the product limit.
Troubleshooting
The section does not show any products
-
Make sure a collection has been selected.
-
If you use the Products setting, make sure selected products are active and available on the Online Store sales channel.
-
If you use the Collection setting only, make sure the selected collection contains products.
-
Make sure the section is not hidden in the theme editor.
-
Refresh the storefront preview after saving changes.
The View all button does not appear
-
Make sure Show “View all” button is enabled.
-
Make sure a collection has been selected.
-
Make sure the selected collection has more products than the section Product limit.
-
The button links to the selected collection page.
The carousel arrows do not appear
-
Make sure Carousel on desktop is enabled.
-
Make sure the section has enough products to scroll.
-
Check the section on desktop, because this setting only controls the desktop carousel.
-
For mobile, use Swipe on mobile instead.
Product card information looks different than expected
-
Product cards in this section use the global product card settings from the theme.
-
Open Theme settings > Product cards to adjust product card image ratio, secondary image, vendor, ratings, color swatches, quick add, quick view, badges, sold-out display, and other product card options.
-
Click Save and refresh the storefront preview after making changes.
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.
بانٹیں:
How to Set Up the Featured Collections Section in Concept
How to Set Up the Search Drawer in Concept