Hide a Category from the Catalog

How to hide a category from the catalog using custom code

Updated over a week ago

If you would like to hide a category visually from your catalog, there is a workaround available utilizing custom CSS code. Please also know that this does not apply to mobile or TV apps.

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.


Finding your Category ID

You'll need to have your category ID in order to implement this code. To find your category ID, simply go to your Uscreen Admin area and go to Content > Organize.

From there you will click edit on the category you wish to hide on your catalog.

Once you've clicked edit, simply look at the URL bar and grab the ID from the URL. The highlighted numbers are the Category ID.


Prepare the code

Get the category/categories ID following the previous step. Replace the asterics in the following code with your categories ids.

To hide a single category

[data-category-id='****']
{ display: none; }

To hide multiple categories

[data-category-id='****'], 
[data-category-id='*****'],
[data-category-id='*****']
{ display: none; }

This code can potentially hide three categories. If you need more, simply add more

[data-category-id='****'], on the top

Be sure to replace the asterisk * with the category ID

Applying the code to your site

Next, you'll need to go to your Website's CSS file. You can access that by going to Website > and clicking on the 3 dot menu next to Customize and clicking on Edit code.

Next, find your theme.css or similarly named .CSS file under Assets and load the file.

Next, you'll scroll to the bottom of the .CSS file and paste the code provided above, replacing *** with your category ID as shown here:

Double-check your IDs and make sure they are accurate. Ensure your code is valid and you did not add any extra spaces or lines of code.

Click Save Changes.

Now you'll notice that the specified category or categories are now hidden in your catalog.


NOTE: Code Editor requires your account to be on the Uscreen Plus plan. If you're not currently on the Uscreen Plus plan, please get in touch with sales@uscreen.tv to upgrade.

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. Our support team is unable to assist you with implementing custom coding.

Also, the code editor, code snippets, and custom HTML blocks do not affect native apps. To learn more about native app customization, please check this help guide.

Did this answer your question?