If you would like the filters on your Catalog page expanded by default, without requiring clicking the Filters toggle button to display them, this can be achieved using some custom code.
Important: Before you begin, make sure you make a backup of your theme. We cannot help restore a previous version if you attempt this custom code change and something goes wrong.
Result example (expanded filter view)
Expand the Catalog filter options
1. Go to the Website tab: https://www.uscreen.io/bullet/website
2. Click the 3-button menu and select Checkout Snippet
3. Navigate to the Head Code Snippet area and paste the code below:
<script>
/*
###############################
# new catalog, Open filters
# ! Not recommended to change the code below !
###############################
*/
const openCatalogFilter = () => {
const filterButton = document.querySelector(".toggle-filters");
const isSecondaryFiltersHidden = document.querySelector(
".secondary-filters.hidden"
);
if (filterButton && isSecondaryFiltersHidden) {
if (!filterButton.classList.value.includes("touched")) {
filterButton.click();
filterButton.classList.add("touched");
}
}
};
document.addEventListener("turbo:load", function (e) {
openCatalogFilter();
});
</script>
4. Click Save changes
5. Changes might not reflect immediately due to CDN caching; you can also try clearing your browser cache.
NOTE:
This is a custom code suggestion and might only work in some cases, as this could be limited by the existing customizations applied to your page. If you have difficulty implementing this, we recommend consulting your developer or hiring one to assist you to ensure your customizations do not break. Our support team is unable to assist you with implementing custom coding.
⚠️ The code editor, code snippets, and custom HTML blocks do not affect native apps. To learn more about native apps customization, please check this help guide.