NOTE: The scope of our support does not cover Custom Development and any code present is given as-is and we cannot guarantee the maintenance of it or that the code will remain working in the future. If you require further help, you will need to consult a Developer to look into your options.
Please make sure to Duplicate your current Theme before making changes in the Code Editor.
If you would like the filters on your Catalog page expanded by default, without requiring a click on the Filters toggle button to display them, this can be achieved using some custom code.
End 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 type = "text/javascript" >
let detectCatalogPage = () => {
if (document.location.href.includes('/catalog')) {
let filterButton = document.querySelector('.filters-area .main-filters .b-button')
if (filterButton) {
if (!filterButton.classList.value.includes('touched')) {
filterButton.click()
filterButton.classList.add('touched')
}
}
}
setTimeout(() => detectCatalogPage(), 300)
}
detectCatalogPage();
</script>
4. The end result after pasting the code will look like this:
5. Click Save changes
6. 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 not work in all 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.
Also, 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.