UX for discounts

This guide provides additional guidance for designing payment customizations with Shopify Functions. All apps should follow the general guidance provided by App Design Guidelines.

Anchor to Admin UI extensions vs. Remix App UIAdmin UI extensions vs. Remix App UI

To create a user interface that merchants can use to manage Function-powered discounts, developers can use an Admin UI extension or a Remix App UI. These options provide different advantages and are appropriate for different scenarios, as described below.

Anchor to Admin UI extensionsAdmin UI extensions

With Admin UI extensions, developers can build custom user interfaces that extend the Shopify admin with custom user interfaces. Admin UI extensions are built with Shopify's UI components. They're well-suited for simple interfaces that integrate tightly with Shopify's existing UI.

Benefits:

• Developers only need to build a user interface for discount controls relevant to their discount Function. For example, managing metafield values associated with a discount percentage.

• UI for common discount fields such as active dates and customer eligibility are provided by the discount page.

• Developers don't need to manage GraphQL requests to create or save discounts, since this is handled by Shopify admin.

• Since Shopify hosts the UI code for the app, developers don't need to build, deploy, or maintain web servers.

  Use Cases:

• Adding simple form inputs to the discount page that manage metafields owned by the discount. Your UI extension is inserted into the discount details page.

Anchor to Remix App UIRemix App UI

With Remix, developers can build dynamic, interactive user interfaces to manage the entire discount details page. This approach is a good choice for creating complex discount functionality.

Benefits:

• Developers can customize the entire discount configuration page.

  Considerations:

• Higher complexity, steeper learning curve.

• Developer are responsible for all GraphQL queries and mutations to create and update discounts, including all required fields.

  Use Cases:

• Creating detailed discount pages with complex, custom forms and features.

Anchor to Localizing your appLocalizing your app

After merchants install your app, the Discount Functions it offers will are accessible in the Discount Create modal, which can be found within the Discounts section of the Shopify admin interface. Learn more about localizing practices for Shopify Functions.