If you would like to hide a category visually from your catalog, there is a workaround available utilizing custom CSS 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.

Select and hide a category

1. Go to your catalog page

2. Visualize and identify the position from top to bottom where you category it's located as this will help you identify how we are going to implement the hide style rule

3. Then depending on your browser do the following to open the web browser developer tools:

-Google Chrome: Right click, select Inspect

-Firefox: Right click, select Inspect Element

-Edge: Right click, select Inspect

4. Once there you will be presented with a window like the following:

5. On the left of the Elements tab, there are two icons, select the one with an arrow; this is the inspector tool option.

6. Once you've selected the inspector tool, navigate to the title of the category that you want to hide and click on it; you should be presented with a popover window like the following:

7. Notice how on the Elements tab, your selected category title will be highlighted with blue:

8. Then you will have to go three elements up and select the element with the class: category-group.

9. Once you have selected the corresponding category-group, you will notice the it will be highlighted in blue in your browser widow:

10. To obtain the CSS selector, you will need to right click the element (indicated by the blue line), select Copy then Copy Selector:

11. Paste this to your clipboard in a notepad or text editor so you won't lose the selector:

12. Then after that selector just put the following code: { display: none; }

13. Navigate to the Customization tab in your Admin Area: https://www.uscreen.io/bullet/customization

14. Navigate to the Advanced dropdown and select Code editor

15. Find and select the file named theme.liquid

16. Scroll down until the line 129 or more (this might depend if you have already applied some customizations), and identify the </style> element:

17. Add two or more lines before the </style> element by pressing the Enter key, this is to give space for the new code:

18. On the blank space generated enter your code saved on the Notepad or text editor:

19. Click the Save Changes button

20. Changes might not reflect immediately due to CDN caching; you can also try clearing your browser cache


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.

Did this answer your question?