Dynamically Change the Featured Collection Section on the Home Page (Dawn Theme)

Store Design

Topic summary

Problem Statement:
A user wants to dynamically change which collection displays in the featured collection section on their Dawn theme homepage. Custom buttons in a liquid section should trigger these collection changes—not just update headings or styling, but swap the actual collection content being shown.

Initial Challenge:
The question centers on whether Liquid alone can accomplish this dynamic switching, as the user is replicating functionality from a non-Shopify site.

Solution Provided:
A developer shared a working approach using Shopify’s Section Rendering API:

  • Fetch the section in the context of different collections using URLs like /collections/${collectionHandle}?section_id=${sectionId}
  • Use conditional logic to display a default collection on the homepage when no collection context exists
  • When buttons are clicked, the API returns HTML for the selected collection

Limitation:
This method may not function correctly if the section is placed on an actual Collection Page rather than the homepage.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

I have a featured collection section on the home page set by default to “All” Collection. I have a list of custom buttons in a custom liquid section. Each button needs to change the featured collection to another collection.

Can someone point me in the right direction? Is it possible to change the collection dynamically? Also, I do mean change the actual collection, not heading, etc, etc.

I am dupplicating an existing non-Shopify site, otherwise I wouldn’t do it this way!

1 Like
2

Thank you for the feedback, but I am not asking about the creation of collections.

I am asking whether it is possible to change the collection that a “collection section” is currently displaying on the main page using liquid?

1 Like
3

A bit late for the question, but recently solved a similar task and decided to leave some info for Shopify Developers who look for a solution.
Section Rendering API can be used in context of different pages, so if you use the given section on a home page and it has buttons for selecting another collection, you could fetch that section in the context of a clicked collection with URL similar to `const fetchUrl = /collections/${collectionHandle}?section_id=${this.sectionId};`
To make it return first collection outside the collection context, you may use a condition similar to
```
if collection == blank or collection.handle == blank
assign collection = section.settings.collection_list | first
endif
```
This way it would render the first collection on home page, but return HTML for another collection while being fetched via Section Rendering API.
Section using this mechanism would not work as expected if placed on Collection Page, I assume.