---
gid: c13316c6-44c3-4ba1-9fca-f99d239c173f
title: Hide admin UI extensions
description: Learn how to conditionally hide admin action and block UI extensions in the Shopify admin.
---


<Repo extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react" />
<Repo extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact" />

<Picker name="extension">
  <PickerOption name="react" />
  <PickerOption name="polaris" />
</Picker>

<Overview>
  This guide is the final part of a five-part tutorial series that describes how to build UI extensions that display as actions and blocks in Shopify admin. Before starting this guide, you'll need to build or copy the code for the issue tracker admin action and admin block from the [tutorial for connecting UI extensions to your app's backend](/docs/apps/build/admin/actions-blocks/connect-app-backend).

  Alternatively, you can complete this section immediately after completing the [build an admin action](/docs/apps/build/admin/actions-blocks/build-admin-action) and [build an admin block](/docs/apps/build/admin/actions-blocks/build-admin-block) tutorials.

  So far you've created UI extensions that add an action and block that allows merchants to create and track issues in their Shopify admin. In this tutorial, you'll learn how to hide a UI extension when it's not relevant to the target.

  To demonstrate conditional logic, we'll check the variant count of a product to determine if the UI extension should be visible. If the product has more than one variant, then the UI extension will be visible. If the product has only one variant, then the UI extension will be hidden.

  ## What you'll learn

  In this tutorial, you'll learn how to do the following tasks:

  - Minimize the block when it's not relevant to the target.
  - Hide the menu item that launches the action when it's not relevant to the target.
</Overview>

<Requirements>
  <Requirement href="/docs/apps/admin/admin-actions-and-blocks" label="Tutorials">
    You've completed or copied the code from the [admin action tutorial](/docs/apps/build/admin/actions-blocks/build-admin-action) and the [admin block tutorial](/docs/apps/build/admin/actions-blocks/build-admin-block).
  </Requirement>
</Requirements>

<StepSection>
  <Step>
    ## Collapse an admin block

    If an admin block isn't relevant on a page, then you can collapse it to minimize disruption for merchants, while still enabling them to see that they have pinned it to the page. To minimize an admin block, you can return `null` inside the `AdminBlock` component of your UI extension.

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx" tag="conditional-block-extension.has-variants"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx" tag="conditional-block-extension.has-variants"/>

      ### Use the `getIssues` function to determine if the admin block should be visible.

      Initialize a state variable called `shouldRender` and set it to `false`. You're already using the `getIssues` function to get metafield values. Using the same function, check if the product has more than one variant. If it does, then set the `shouldRender` state to `true`.
    </Substep>

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx" tag="conditional-block-extension.conditional-markup"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-conditional-block/src/BlockExtension.jsx" tag="conditional-block-extension.conditional-markup"/>
      ### Conditionally return JSX content based on the result of the getProductVariants function.

      If `shouldRender` is `true`, then render the block's content. If it's `false`, then return `null` to collapse the block.

      Use the `collapsedSummary` to provide meaningful information to the merchant about why the block is collapsed.
    </Substep>
    </Step>
    <Step>

      ## Test hiding the admin block

    <Substep>
      After you've updated the UI extension, test that the admin block collapses with the following steps:

      1.  Navigate to your app directory:

          <Codeblock terminal>
            ```bash
            cd <directory>
            ```
          </Codeblock>

      1.  To build and preview your app, either start or restart your server with the following command:

          <Codeblock terminal>
            ```bash
            shopify app dev
            ```
          </Codeblock>

      1. Press `p` to open the developer console.

      1. In the Dev Console page, click on the preview link for the issue tracker UI extension.

      1. If there are any product variants, delete them and confirm that the admin block is collapsed.

      1. Add a product variant with two options and confirm that the admin block expands.
    </Substep>
    </Step>

    <Step>
      ### Hide an admin action

      Hiding a UI extension's admin action uses a second script to control the visibility of the action in the **More actions** menu. This script only runs after the page is loaded and doesn't maintain state.

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-action/shopify.extension.toml" tag="conditional-action-extension.configuration"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-conditional-action/shopify.extension.toml" tag="conditional-action-extension.configuration"/>
      Add a field to your TOML file to specify the path to the `shouldRender` script.
    </Substep>

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js" tag="conditional-action-extension.module"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js" tag="conditional-action-extension.module"/>

      Create a `condition/shouldRender.js` file in the same `src` directory as the extension that you want to control.
    </Substep>

    <If extension="react">
      <Substep>
        <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js" tag="conditional-action-extension.target"/>

        Use the `should-render` target of the extension that you want to control.

        So, for an extensions with the target `admin.product-details.action.render`, the `should-render` target would be `admin.product-details.action.should-render`.
      </Substep>
    </If>

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js" tag="conditional-action-extension.register"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js" tag="conditional-action-extension.register"/>

      <If extension="react">
        Register your module using the global `shopify.extend` method.
      </If>

      <If extension="polaris">
        Register your module by defining an `extension` function that is the `default` `export` of the file.
      </If>
    </Substep>

     <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-action/src/utils.js" tag="conditional-action-extension.utils"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-conditional-action/src/utils.js" tag="conditional-action-extension.utils"/>

      <If extension="react">
        Create a function called `getProductVariants` to fetch variants of the product in your `utils.js` file.
      </If>

      <If extension="polaris">
        Create a function called `getVariantsCount` to use Direct API to fetch variants of the product in your `utils.js` file.
      </If>
    </Substep>

    <Substep>
      <CodeRef extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react/blob/main/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js" tag="conditional-action-extension.display"/>
      <CodeRef extension="polaris" href="https://github.com/Shopify/example-admin-action-and-block-preact/blob/main/extensions/issue-tracker-conditional-action/src/condition/shouldRender.js" tag="conditional-action-extension.display"/>

      <If extension="react">
        Use the `getProductVariants` function to determine the number of variants on the product. Return an object with a key of `display` and a Boolean value to control whether the action extension menu item is visible.
      </If>

      <If extension="polaris">
        Use the `getVariantsCount` function to determine the number of variants on the product. Return an object with a key of `display` and a Boolean value to control whether the action extension menu item is visible.
      </If>
    </Substep>
  </Step>

  <Step>
    ## Test hiding the admin action

    <Substep>
      After you've updated the UI extensions that provide your admin action and block, test them with the following steps:

      1.  Navigate to your app directory:

          <Codeblock terminal>
            ```bash
            cd <directory>
            ```
          </Codeblock>

      1.  To build and preview your app, either start or restart your server with the following command:

          <Codeblock terminal>
            ```bash
            shopify app dev
            ```
          </Codeblock>

      1. Press `p` to open the developer console.

      1. Delete any variants that were added in the previous section.

      1. If there are any product variants, delete them and confirm that the admin action is not visible in the More actions menu.

      1. Add a product variant with two options and confirm that the admin action is visible in the **More actions** menu.
    </Substep>
  </Step>
</StepSection>

<NextSteps>

  ## Tutorial complete!

  Congratulations! You learned how to hide your UI extension's admin blocks and actions when they are not relevant to a given target. Keep the momentum going with these related resources.

  <CardGrid>
    <LinkCard href="/docs/api/admin-extensions">
      #### Admin UI extension APIs

      Learn about the admin UI extension APIs.
    </LinkCard>

    <LinkCard href="https://github.com/Shopify/ui-extensions">
      #### Participate

      File any issues or feature requests on the UI Extensions GitHub repository.
    </LinkCard>

    <LinkCard href="/docs/apps/deployment/app-versions">
      #### Deploy

      Learn how to deploy your UI extensions to merchants.
    </LinkCard>
  </CardGrid>
</NextSteps>