Store Badge Creator: Explain how to adjust the size of the store badge

[softworkz]

Type of issue

Missing information

Feedback

The badge image appears to ignore any sizing applied to the badge element (ms-store-badge), which makes it impossible to include it in an html layout.
Please add information how to adjust the badge size.
Thanks

Page URL

https://learn.microsoft.com/en-us/windows/apps/publish/microsoft-store-app-badge

Content source URL

https://github.com/MicrosoftDocs/windows-dev-docs/blob/docs/hub/apps/publish/microsoft-store-app-badge.md

Author

@GrantMeStrength

Document Id

9c3935cd-075c-8799-0d27-5117533cd22e

[GrantMeStrength]

Hi Ankur - Hoping you can take a look at this issue. Thanks!

[AnkurSinganjude]

@rudyhuyn can you please help with this question?

[JudahGabriel]

Hi, I work on the badge.

From the badge generator, you can either use the badge web component -- which does fancy things like rendering the badge in the user's language and honors the user's browser dark/light mode setting -- or you can use a plain HTML badge.

Web component badge that detects browser theme and language:

<script type="module" src="https://get.microsoft.com/badge/ms-store-badge.bundled.js"></script>
<!-- replace 9nksqgp7f2nh with the ID of your app -->
<ms-store-badge
	productid="9nksqgp7f2nh"
	window-mode="direct"
	theme="auto"
	size="large"
	language="en-us">
</ms-store-badge>

Alternately, you can use the plain image badge, no script required:

<a href="https://apps.microsoft.com/detail/9nksqgp7f2nh?mode=direct">
   <img src="https://get.microsoft.com/images/en-us%20dark.svg" width="200"/>
</a>

To style the web component, you can use CSS parts:

ms-store-badge::part(img) {
    max-height: 52px;
}

Or if you prefer the plain image badge, you style it like you would any other element.

You can read more about styling and badge options on our App Badge repo.

Hope this helps!

p.s. I'll update the Microsoft Docs site with this info.

[JudahGabriel]

I've submitted this PR to fix the issue.