Filter Shopify content in CMS and in-browser for faster loading speeds

If your Shopify storefront has a large catalogue but your website only requires a subset of those products, you can use filters in the CMS and in-browser to reduce the amount of requests and only get the products you need.

In this doc, we will:

Add a filter in the CMS

Add a filter for in-browser

Caching content

Add a filter in the CMS

When importing your Shopify collection in the CMS, under "Shopify Items" at the top, toggle from "All Items" to "Filter".

Choose between Vendor, Collection, Product Type, or Product Tag.

When entering the value, make sure you enter the handle — remove all special characters and use dashes instead of spaces.

For example, if you have a collection called "Featured: 2025", the handle would be "featured-2025".

Add a filter in the CMS

When importing your Shopify collection in the CMS, under "Shopify Items" at the top, toggle from "All Items" to "Filter".

Choose between Vendor, Collection, Product Type, or Product Tag.

When entering the value, make sure you enter the handle — remove all special characters and use dashes instead of spaces.

For example, if you have a collection called "Featured: 2025", the handle would be "featured-2025".

Add a filter in the CMS

When importing your Shopify collection in the CMS, under "Shopify Items" at the top, toggle from "All Items" to "Filter".

Choose between Vendor, Collection, Product Type, or Product Tag.

When entering the value, make sure you enter the handle — remove all special characters and use dashes instead of spaces.

For example, if you have a collection called "Featured: 2025", the handle would be "featured-2025".

Add a filter for in-browser

In the Framer canvas, open the Framer Commerce plugin and go to Store Settings.

Under "Products" there's a dropdown for "Filter". You can follow the same steps as in the CMS, setting the filter type and value.

These filters are not connected to give you flexibility with multiple CMS collections.

Add a filter for in-browser

In the Framer canvas, open the Framer Commerce plugin and go to Store Settings.

Under "Products" there's a dropdown for "Filter". You can follow the same steps as in the CMS, setting the filter type and value.

These filters are not connected to give you flexibility with multiple CMS collections.

Add a filter for in-browser

In the Framer canvas, open the Framer Commerce plugin and go to Store Settings.

Under "Products" there's a dropdown for "Filter". You can follow the same steps as in the CMS, setting the filter type and value.

These filters are not connected to give you flexibility with multiple CMS collections.

Caching content

In the browser, we cache core Shopify data for 5 minutes to optimize the user experience and browsing speeds. If you make updates and aren't seeing changes, you can clear your session storage or open a private window to test.

Caching content