App card
App cards provide a consistent layout for presenting another app to merchants. They are used to highlight apps that can extend functionality or help merchants accomplish related tasks. App cards should educate merchants about the value of the suggested app and provide a clear, actionable way to learn more or install it.
| Used to | Examples |
|---|---|
| Suggest complementary apps | Recommend an email marketing app to subscription service users |
| Promote integrations | Highlight a social media scheduler that connects with your app |
| Guide merchants to explore new solutions | Introduce a reporting tool for advanced analytics |
Was this section helpful?
App card
<s-clickable
href="https://apps.shopify.com/planet"
border="base"
borderRadius="base"
padding="base"
inlineSize="100%"
accessibilityLabel="Download Shopify Planet"
>
<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>
Examples
App card
Default
<s-clickable href="https://apps.shopify.com/planet" border="base" borderRadius="base" padding="base" inlineSize="100%" accessibilityLabel="Download Shopify Planet" > <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>
