Skip to main content

Hide Elements from the Storefront

Control the visibility of native elements within your Storefront

Updated yesterday

As you build your Uscreen site, you may want to hide specific elements from your storefront without deleting them. This article provides workarounds on how to hide categories, content, and other elements using custom code.

โš ๏ธ WARNING: Custom code implementation is beyond the scope of our support and is used at your own risk.

These solutions may stop working after platform updates as our code structure evolves. If you encounter issues, we recommend consulting with a developer.


Hide Categories

If you want to hide a category visually from your catalog, you can use custom CSS code. This method allows you to keep the category in your system while making it invisible to users browsing your Catalog.

Step 1: Find your Category ID

  1. Navigate to Content > Organize

  2. Click Edit on the category you wish to hide

  3. Look at the URL bar and grab the ID (the numbers highlighted in the URL)

๐Ÿ”— Learn more about Getting the Category ID

Step 2: Prepare the code

Replace the asterisks in the following code with your category ID(s):

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; }

Step 3: Apply the code to your site

  1. Navigate to the Head Code

  2. Paste your code inside the HTML <style> custom code here </style>tags:

    <style>
    [data-category-id='1234']
    { display: none; }
    </style>

  3. Click Save Changes


Hide Content Thumbnail

The thumbnail of a published content (video, collection, or live stream) appears in the Catalog when at least one category is assigned.

To hide content from the Catalog:

  1. Navigate to Content > Videos/Collection/Live Streaming

  2. Find the content you wish to hide and Edit

  3. Unassign all categories

  4. Click Save Changes

๐Ÿ“ NOTE: Content without categories won't appear in the catalog, but can still be searched using the Search function.

๐Ÿ”— Learn more about Catalog Search


Hide Other UI Elements

You can hide various UI elements throughout your storefront using custom code. Here are some common examples:


Featured Category Overlay

This hides the dark/light gradient overlay from the Featured Category slider.

.themeless-featured-slide
{ display: none; }

๐Ÿ”— Learn more about Featured Category

Card Titles

This hides the content titles below each thumbnail.

.card-title
{ display: none; }

Thumbnail Badges

This hides the badges (duration/collection count) from the thumbnails.

.content-card-badge
{ display: none; }

Find Elements to Hide

To identify elements you want to hide:

  1. Right-click on the element and select Inspect (or press F12)

  2. Look for a unique identifier (ID or class) in the HTML code

  3. Create a CSS selector targeting that element

  4. Add the code to your Head Code section

๐Ÿ”— Learn more about Code Customization

๐Ÿ’ก TIP: When using custom CSS, always start with specific selectors to avoid unintentionally hiding other elements.


FAQs

Will hiding elements affect my mobile or TV apps?

Custom code only affects your website. All hidden elements using these methods will still be visible in mobile and TV apps.

Will hiding elements delete them from my site?

Hiding elements is purely visual. All content remains in your system and can still be accessed through direct links or search.

What if the custom code doesn't work?

Custom code can be affected by existing customizations on your site. If you encounter issues, we recommend consulting with a developer. Our support team cannot assist with implementing custom code.

Can I temporarily hide elements and show them later?

Yes, you can add or remove the custom CSS code at any time to show or hide elements as needed.

๐Ÿ“ NOTE: Custom code only affects your website and not mobile or TV apps, and requires the Uscreen Plus plan.

Did this answer your question?