App card
Some tasks are better handled by specialized apps. The app card composition provides a consistent way to recommend complementary apps that extend your functionality or help merchants accomplish related tasks.
Use app cards to suggest integrations, recommend partners, or highlight apps that work well alongside yours. This composition follows proven design guidelines that help your app feel native to the Shopify admin. See Built for Shopify requirements for more details on these guidelines.
Anchor to ExamplesExamples
Anchor to Display a tappable app card with thumbnail and contentDisplay a tappable app card with thumbnail and content
Merchants can discover and install complementary apps that extend your app's functionality. This pattern displays a tappable app card with thumbnail and content layout. The clickable component wraps the card, the thumbnail shows the app icon, and the grid aligns the content.
Preview
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
/>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Download Shopify Planet"
/>
</s-stack>
</s-grid>
</s-clickable>
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
></s-thumbnail>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Download Shopify Planet"
></s-button>
</s-stack>
</s-grid>
</s-clickable>
jsx
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
/>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Download Shopify Planet"
/>
</s-stack>
</s-grid>
</s-clickable>html
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
></s-thumbnail>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Download Shopify Planet"
></s-button>
</s-stack>
</s-grid>
</s-clickable>Use href attributes to navigate merchants to the App Store when they click the card or install button.
Preview
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
/>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Install Shopify Planet"
/>
</s-stack>
</s-grid>
</s-clickable>
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
></s-thumbnail>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Install Shopify Planet"
></s-button>
</s-stack>
</s-grid>
</s-clickable>
jsx
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
/>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Install Shopify Planet"
/>
</s-stack>
</s-grid>
</s-clickable>html
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
>
<s-grid gridTemplateColumns="auto 1fr auto" alignItems="stretch" gap="base">
<s-thumbnail
size="small"
src="https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png"
alt="Shopify Planet icon"
></s-thumbnail>
<s-box>
<s-heading>Shopify Planet</s-heading>
<s-paragraph>Free</s-paragraph>
<s-paragraph>
Offer carbon-neutral shipping and showcase your commitment.
</s-paragraph>
</s-box>
<s-stack justifyContent="start">
<s-button
href="https://apps.shopify.com/planet"
icon="download"
accessibilityLabel="Install Shopify Planet"
></s-button>
</s-stack>
</s-grid>
</s-clickable>Was this page helpful?