---
gid: c13316c6-44c3-4ba1-9fca-f99d239c173f
title: Hide action and block extensions
description: Learn how to conditionally hide action and block extensions in the Shopify admin.
---
<Repo extension="react" href="https://github.com/Shopify/example-admin--action-and-block--react" />
<Picker name="extension">
<PickerOption name="react" />
</Picker>
<Overview>
This guide is the final part in a five-part tutorial series on how to build a feature using admin action and block extensions. Before starting this guide, you'll need to build or copy the code for the issue tracker action and block from the [previous section](/docs/apps/build/admin/actions-blocks/connect-app-backend) of the tutorial.
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 an admin action and block extension that allows merchants to create and track issues in their Shopify admin. In this tutorial, you'll learn how to hide an 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 extension should be visible. If the product has more than one variant, then the extension will be visible. If the product has only one variant, then the extension will be hidden.
## What you'll learn
In this tutorial, you'll learn how to do the following tasks:
- Minimize the admin block extension when it's not relevant to the target.
- Hide the menu item that launches the admin action extension 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 [Getting started with admin actions](/docs/apps/build/admin/actions-blocks/build-admin-action) and [Getting started with admin blocks](/docs/apps/build/admin/actions-blocks/build-admin-block).
</Requirement>
</Requirements>
<StepSection>
<Step>
## Collapse an admin block extension
If an admin block is not 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 a block extension, you can return `null` inside the `AdminBlock` component of your block 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"/>
### Use the getIssues function to determine if the block extension 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"/>
### 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 extension
<Substep>
After you've updated the block extension, test that it 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 developer console page, click on the preview link for the issue tracker block extension.
1. If there are any product variants, delete them and confirm that the block extension is collapsed.
1. Add a product variant with two options and confirm that the block extension expands.
</Substep>
</Step>
<Step>
### Hide an admin action extension
Hiding an action extension 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"/>
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"/>
Create a `condition/shouldRender.js` file in the same `src` directory as the extension that you want to control.
</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.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>
<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"/>
Register your module using the global `shopify.extend` method.
</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"/>
Create a function called `getProductVariants` to fetch variants of the product in your `utils.js` file.
</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"/>
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.
</Substep>
</Step>
<Step>
## Test hiding the admin action extension
<Substep>
After you've updated the action and block extensions, 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 action extension item is not visible in the More actions menu.
1. Add a product variant with two options and confirm that the action extension item is visible in the More actions menu.
</Substep>
</Step>
</StepSection>
<NextSteps>
## Tutorial complete!
Congratulations! You learned how to hide admin block and admin extensions 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 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 extension to merchants.
</LinkCard>
</CardGrid>
</NextSteps>