Catalog components
Build your product listing page with Shopify-powered components including Filter, Search, Sort, and Favorite.
Global components in this doc:
Midweight Tee
£89
Gemini Sun
£319
Coal Watch
£499
Catalog Display
Connect this component to your CMS collection on the canvas to unlock Shopify-powered Filtering, Sorting, Favoriting, and Searching, along with simplified dynamic category page setup using your Framer CMS.
Controls
CMS Source
Connect instance to your Framer Commerce CMS Collection with all your Shopify items and no CMS filters applied.
Empty State
Connect instance to your empty state design.
Display
Choose between All (all items from collection) and Favorites (only display items favorited by the user).
Filter Type
Choose between All (default), Collection, Product Type, Product Tag. To create dynamic category pages, connect this variable to your "Categories" CMS collection for dynamic filtering, matching the values set in Shopify.
Filter Value
Set the value as set on Shopify, corresponding the Filter Type as set above. To create dynamic category pages, connect this variable to your "Categories" CMS collection for dynamic filtering, matching the values set in Shopify.
Default Sort
Choose how this component displays items by default –– by Relevance (default CMS order), Price, Recency, or Best Selling.
Search
Eable or disable searching for this component. If enabled, decide if the component should render all items and narrow with search, or start empty and expand. You can also set the Scope of which Shopify properties it searches.
Pagination
Enable or disable Pagination. Choose between "Load more" and "Next/Prev". Set item limits per page.
Layout
Customize your layout including native Stack and Grid configurations, gap, and padding.
Metafields
If enabled, when a user searches or filters with with a color variant, it will also check metafields using the format of custom.fc_color. For example, filtering for variant Color = Blue will also include items with custom.fc_color = blue. An item will appear in the results if it matches either the variant or the metafield.
Catalog Display
Connect this component to your CMS collection on the canvas to unlock Shopify-powered Filtering, Sorting, Favoriting, and Searching, along with simplified dynamic category page setup using your Framer CMS.
Controls
CMS Source
Connect instance to your Framer Commerce CMS Collection with all your Shopify items and no CMS filters applied.
Empty State
Connect instance to your empty state design.
Display
Choose between All (all items from collection) and Favorites (only display items favorited by the user).
Filter Type
Choose between All (default), Collection, Product Type, Product Tag. To create dynamic category pages, connect this variable to your "Categories" CMS collection for dynamic filtering, matching the values set in Shopify.
Filter Value
Set the value as set on Shopify, corresponding the Filter Type as set above. To create dynamic category pages, connect this variable to your "Categories" CMS collection for dynamic filtering, matching the values set in Shopify.
Default Sort
Choose how this component displays items by default –– by Relevance (default CMS order), Price, Recency, or Best Selling.
Search
Eable or disable searching for this component. If enabled, decide if the component should render all items and narrow with search, or start empty and expand. You can also set the Scope of which Shopify properties it searches.
Pagination
Enable or disable Pagination. Choose between "Load more" and "Next/Prev". Set item limits per page.
Layout
Customize your layout including native Stack and Grid configurations, gap, and padding.
Metafields
If enabled, when a user searches or filters with with a color variant, it will also check metafields using the format of custom.fc_color. For example, filtering for variant Color = Blue will also include items with custom.fc_color = blue. An item will appear in the results if it matches either the variant or the metafield.
Catalog Display
Connect this component to your CMS collection on the canvas to unlock Shopify-powered Filtering, Sorting, Favoriting, and Searching, along with simplified dynamic category page setup using your Framer CMS.
Controls
CMS Source
Connect instance to your Framer Commerce CMS Collection with all your Shopify items and no CMS filters applied.
Empty State
Connect instance to your empty state design.
Display
Choose between All (all items from collection) and Favorites (only display items favorited by the user).
Filter Type
Choose between All (default), Collection, Product Type, Product Tag. To create dynamic category pages, connect this variable to your "Categories" CMS collection for dynamic filtering, matching the values set in Shopify.
Filter Value
Set the value as set on Shopify, corresponding the Filter Type as set above. To create dynamic category pages, connect this variable to your "Categories" CMS collection for dynamic filtering, matching the values set in Shopify.
Default Sort
Choose how this component displays items by default –– by Relevance (default CMS order), Price, Recency, or Best Selling.
Search
Eable or disable searching for this component. If enabled, decide if the component should render all items and narrow with search, or start empty and expand. You can also set the Scope of which Shopify properties it searches.
Pagination
Enable or disable Pagination. Choose between "Load more" and "Next/Prev". Set item limits per page.
Layout
Customize your layout including native Stack and Grid configurations, gap, and padding.
Metafields
If enabled, when a user searches or filters with with a color variant, it will also check metafields using the format of custom.fc_color. For example, filtering for variant Color = Blue will also include items with custom.fc_color = blue. An item will appear in the results if it matches either the variant or the metafield.
Style
Tee
Shirt
Sweater
Size
XS
S
M
L
XL
XXL
Color
Cobalt
Lime
Pink
Sky
Filter Button
Create custom filters that update your Catalog Display in real time and sync with the URL for easy sharing and bookmarking. Set the Shopify property and value, add optional display text, and customize styles including checkboxes, buttons, or image/color swatches.
Controls
Style
Choose between Checkbox, Button, and Swatch (Color/Image). Completely customize the style and layout of the filter, including size, radius, icons, and more.
States
Customize the appearance of the three button states – Default, Hover, Selected.
Property
Choose which Shopify property to filter by: Variant, Product Type, Product Tag, Collection, Price, On Sale, Discount, In Stock, and Subscriptions.
Property Values
Each property has unique controls, specific to the function the filter. You can set price ranges, variant values, and more.
Display Text
If set, display text will be used instead of the configured property values. For example, your Shopify size may be "Small" to filter by, but want to display "S" to the user.
Filter Button
Create custom filters that update your Catalog Display in real time and sync with the URL for easy sharing and bookmarking. Set the Shopify property and value, add optional display text, and customize styles including checkboxes, buttons, or image/color swatches.
Controls
Style
Choose between Checkbox, Button, and Swatch (Color/Image). Completely customize the style and layout of the filter, including size, radius, icons, and more.
States
Customize the appearance of the three button states – Default, Hover, Selected.
Property
Choose which Shopify property to filter by: Variant, Product Type, Product Tag, Collection, Price, On Sale, Discount, In Stock, and Subscriptions.
Property Values
Each property has unique controls, specific to the function the filter. You can set price ranges, variant values, and more.
Display Text
If set, display text will be used instead of the configured property values. For example, your Shopify size may be "Small" to filter by, but want to display "S" to the user.
Filter Button
Create custom filters that update your Catalog Display in real time and sync with the URL for easy sharing and bookmarking. Set the Shopify property and value, add optional display text, and customize styles including checkboxes, buttons, or image/color swatches.
Controls
Style
Choose between Checkbox, Button, and Swatch (Color/Image). Completely customize the style and layout of the filter, including size, radius, icons, and more.
States
Customize the appearance of the three button states – Default, Hover, Selected.
Property
Choose which Shopify property to filter by: Variant, Product Type, Product Tag, Collection, Price, On Sale, Discount, In Stock, and Subscriptions.
Property Values
Each property has unique controls, specific to the function the filter. You can set price ranges, variant values, and more.
Display Text
If set, display text will be used instead of the configured property values. For example, your Shopify size may be "Small" to filter by, but want to display "S" to the user.
Search
Search
Add a custom-designed search field to your store. Supports live updates in the Catalog Display, or enable pressing Enter to redirect to a dedicated search page.
Controls
Text
Set text styles and placeholder string
Styles
Set search bar styles and colors for default, hover, and focus states.
Search Icon
Sear Search Icon visibility and styles. Customize a default icon or upload your own.
Clear
Set "Clear field" visibility and styles. Choose between text or icon. Customize the icon or upload your own.
Behavior
Enable or disable updating of results in real-time and set the delay in milliseconds before it updates. Enable or disable opening a dedicated search page when the user presses Enter, and set the page slug of your Search page.
Search
Add a custom-designed search field to your store. Supports live updates in the Catalog Display, or enable pressing Enter to redirect to a dedicated search page.
Controls
Text
Set text styles and placeholder string
Styles
Set search bar styles and colors for default, hover, and focus states.
Search Icon
Sear Search Icon visibility and styles. Customize a default icon or upload your own.
Clear
Set "Clear field" visibility and styles. Choose between text or icon. Customize the icon or upload your own.
Behavior
Enable or disable updating of results in real-time and set the delay in milliseconds before it updates. Enable or disable opening a dedicated search page when the user presses Enter, and set the page slug of your Search page.
Search
Add a custom-designed search field to your store. Supports live updates in the Catalog Display, or enable pressing Enter to redirect to a dedicated search page.
Controls
Text
Set text styles and placeholder string
Styles
Set search bar styles and colors for default, hover, and focus states.
Search Icon
Sear Search Icon visibility and styles. Customize a default icon or upload your own.
Clear
Set "Clear field" visibility and styles. Choose between text or icon. Customize the icon or upload your own.
Behavior
Enable or disable updating of results in real-time and set the delay in milliseconds before it updates. Enable or disable opening a dedicated search page when the user presses Enter, and set the page slug of your Search page.
Favorite
Favorite Button
Allow users to favorite items and persist them in the Catalog Display, even after they return to your site. Connect to native design component instances for active and inactive states.
Controls
Product ID
Connect to the Product ID variable in your CMS.
Default State
Connect to your default favorites button design.
Active State
Connect to your active favorites button design.
Favorite Button
Allow users to favorite items and persist them in the Catalog Display, even after they return to your site. Connect to native design component instances for active and inactive states.
Controls
Product ID
Connect to the Product ID variable in your CMS.
Default State
Connect to your default favorites button design.
Active State
Connect to your active favorites button design.
Favorite Button
Allow users to favorite items and persist them in the Catalog Display, even after they return to your site. Connect to native design component instances for active and inactive states.
Controls
Product ID
Connect to the Product ID variable in your CMS.
Default State
Connect to your default favorites button design.
Active State
Connect to your active favorites button design.
Sort by Price
Sort Dropdown
Allow users to sort items in your Catalog Display. Connect to a native design component, and this button will open a dropdown with configurable options — such as Default (Relevance), Alphabetical, Price, Newest, or Best Selling.
Controls
Component
Connect to your button design. Inside your referenced button, use {{param}} in a text layer to display the sort value.
Default Sort
Choose your default sorting method that matches what's set on your Catalog Display component.
Sort Values
Set your display text for each sort parameter –– Title (A-Z), Title (Z-A), Price (Low), Price (High), Newest, Best Selling. If you leave a field empty, it won't be included in the dropdown.
Sort Dropdown
Allow users to sort items in your Catalog Display. Connect to a native design component, and this button will open a dropdown with configurable options — such as Default (Relevance), Alphabetical, Price, Newest, or Best Selling.
Controls
Component
Connect to your button design. Inside your referenced button, use {{param}} in a text layer to display the sort value.
Default Sort
Choose your default sorting method that matches what's set on your Catalog Display component.
Sort Values
Set your display text for each sort parameter –– Title (A-Z), Title (Z-A), Price (Low), Price (High), Newest, Best Selling. If you leave a field empty, it won't be included in the dropdown.
Sort Dropdown
Allow users to sort items in your Catalog Display. Connect to a native design component, and this button will open a dropdown with configurable options — such as Default (Relevance), Alphabetical, Price, Newest, or Best Selling.
Controls
Component
Connect to your button design. Inside your referenced button, use {{param}} in a text layer to display the sort value.
Default Sort
Choose your default sorting method that matches what's set on your Catalog Display component.
Sort Values
Set your display text for each sort parameter –– Title (A-Z), Title (Z-A), Price (Low), Price (High), Newest, Best Selling. If you leave a field empty, it won't be included in the dropdown.
Load more
Pagination Button
Use this button to load more results when pagination is enabled in your Catalog Display. It automatically hides when all results are loaded. Just connect it to a native design component.
Controls
Type
Choose the function of your button –– Load more, Next, or Previous. Make sure this property matches the pagination type set in CatalogDisplay.
Instance
Connect your button design.
Pagination Button
Use this button to load more results when pagination is enabled in your Catalog Display. It automatically hides when all results are loaded. Just connect it to a native design component.
Controls
Type
Choose the function of your button –– Load more, Next, or Previous. Make sure this property matches the pagination type set in CatalogDisplay.
Instance
Connect your button design.
Pagination Button
Use this button to load more results when pagination is enabled in your Catalog Display. It automatically hides when all results are loaded. Just connect it to a native design component.
Controls
Type
Choose the function of your button –– Load more, Next, or Previous. Make sure this property matches the pagination type set in CatalogDisplay.
Instance
Connect your button design.
40
Results
Result Counter
Display the active count of items currently shown in the Catalog Display, including filtered results. You can also configure a unique string for a dedicated Search page.
Controls
Without Search
Set the string when displaying active number of items in Catalog Display, using {{#}} for the number of results.
With Search
Set the string when displaying search results, using {{#}} for the number of results.
Result Counter
Display the active count of items currently shown in the Catalog Display, including filtered results. You can also configure a unique string for a dedicated Search page.
Controls
Without Search
Set the string when displaying active number of items in Catalog Display, using {{#}} for the number of results.
With Search
Set the string when displaying search results, using {{#}} for the number of results.
Result Counter
Display the active count of items currently shown in the Catalog Display, including filtered results. You can also configure a unique string for a dedicated Search page.
Controls
Without Search
Set the string when displaying active number of items in Catalog Display, using {{#}} for the number of results.
With Search
Set the string when displaying search results, using {{#}} for the number of results.
Filters
40
Filter Counter
Display a live count of all active filters, or narrow it down to show counts for a specific property.
Controls
Type
Display counter for All filter types or specify a property group.
When 0
Show or hide the component when no counter is 0.
Format
String to display, using {{value}} for the number of active filters.
Filter Counter
Display a live count of all active filters, or narrow it down to show counts for a specific property.
Controls
Type
Display counter for All filter types or specify a property group.
When 0
Show or hide the component when no counter is 0.
Format
String to display, using {{value}} for the number of active filters.
Filter Counter
Display a live count of all active filters, or narrow it down to show counts for a specific property.
Controls
Type
Display counter for All filter types or specify a property group.
When 0
Show or hide the component when no counter is 0.
Format
String to display, using {{value}} for the number of active filters.
Clear filters
Filter Reset Button
Let customers clear all filters with a single click. Just connect this to a native design component instance.
Controls
Button
Connect to button design instance.
No Filters
Show or hide the button when no filters are active.
Filter Reset Button
Let customers clear all filters with a single click. Just connect this to a native design component instance.
Controls
Button
Connect to button design instance.
No Filters
Show or hide the button when no filters are active.
Filter Reset Button
Let customers clear all filters with a single click. Just connect this to a native design component instance.
Controls
Button
Connect to button design instance.
No Filters
Show or hide the button when no filters are active.
See all results
Search Button
Allow customers to click into a dedicated Search page to view all Search results.
Active Button
Connect instance to your natively designed button.
Disabled Button
Connect instance to your natively designed button with a disabled state to display when the search bar is empty. If not set, the button will hide instead.
Slug
Set the slug of your dedicated search page to direct to. For example, if your URL is mystore.com/search, enter "search"
Search Button
Allow customers to click into a dedicated Search page to view all Search results.
Active Button
Connect instance to your natively designed button.
Disabled Button
Connect instance to your natively designed button with a disabled state to display when the search bar is empty. If not set, the button will hide instead.
Slug
Set the slug of your dedicated search page to direct to. For example, if your URL is mystore.com/search, enter "search"
Search Button
Allow customers to click into a dedicated Search page to view all Search results.
Active Button
Connect instance to your natively designed button.
Disabled Button
Connect instance to your natively designed button with a disabled state to display when the search bar is empty. If not set, the button will hide instead.
Slug
Set the slug of your dedicated search page to direct to. For example, if your URL is mystore.com/search, enter "search"
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025
Stay updated
Release notes, promos, & more
© Copyright Butter Supply Inc. 2025