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.
It's also important to take note that Custom Development is outside the scope of our support and this information is given as-is. We cannot guarantee that this help guide will work in the future and we cannot maintain your code. If you need additional help, you will need to hire a professional developer.
Select and hide a category on older themes
1. Go to your categories tab: https://www.uscreen.io/bullet/contents/categories
2. Identify the categories that you want to hide and put them at the bottom positions; in the following example we will hide the following categories: Sports / Finance / Virtual Reality
3. Navigate to the Customization tab in your Admin Area: https://www.uscreen.io/bullet/customization
4. Navigate to the Advanced dropdown and select Code editor
5. Find and select the file named theme.liquid
6. Scroll down until the line 115 or more (this might depend if you have already applied some customizations or your theme), and identify the </style> element:
7. Add two or more lines before the </style> element by pressing the Enter key, this is to give space for the new code:
8. On the blank space generated enter the following code:
.category-group:nth-last-child(-n+4){
height: 0px;
visibility: hidden;
}
*Notice that the code includes -n+4; that will determine your number of categories to be hidden based on the categories order from bottom to top.
Example 1: (-n+4 = 3 categories to hide from bottom to top)
Example 2: (-n+3 = 2 categories to hide from bottom to top)
9. Click the Save Changes button
10. Changes might not reflect immediately due to CDN caching; you can also try clearing your browser cache
Select and hide a category on newer themes
1. Go to your categories tab: https://www.uscreen.io/bullet/contents/categories
2. Identify the categories that you want to hide and put them at the bottom positions; in the following example we will hide the following categories: Sports / Finance / Virtual Reality
3. Navigate to the Customization tab in your Admin Area: https://www.uscreen.io/bullet/customization
4. Navigate to the Advanced dropdown and select Code editor
5. Find and select the file named theme.liquid
6. Scroll down until the line 79 or more (this might depend if you have already applied some customizations or your theme), and identify the </body> element. Right before it, you will want to add your own <style> </style> tag to put code in:
7. On the blank space generated enter the following code:
.category-group:nth-last-child(-n+4){
height: 0px;
visibility: hidden;
}
*Notice that the code includes -n+4; that will determine your number of categories to be hidden based on the categories order from bottom to top.
Example 1: (-n+4 = 3 categories to hide from bottom to top)
Example 2: (-n+3 = 2 categories to hide from bottom to top)
9. Click the Save Changes button
10. Changes might not reflect immediately due to CDN caching; you can also try clearing your browser cache
If you are on the Hotwire Catalog
The code will have to be adjusted differently if you are on the Hotwire Catalog. If the previous code does not work, try the Hotwire solution.
If you have 6 categories or less
/* hide the category from the filter (bottom to top) */
#category_id > option:nth-last-child(-n+1) {
display: none;
}
/* hide the category from the catalog (bottom to top) */
.category-group:nth-last-child(-n+1){
height: 0px;
visibility: hidden;
}
If you have more than 6 categories
/* hide the category from the filter (bottom to top) */
#category_id > option:nth-last-child(-n+1),
/* hide the category from the catalog (bottom to top) */
#categories_page_2>div:nth-last-child(-n+1) {
display: none;
}
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.