How to Set Up a Dynamic Schema for Shopify App Blocks

Product: Shopify payment app.

Challenge: To bypass Shopify's static appBlock schema limitations.

Result: Achievement of dynamic behavior within the constraints of the Shopify appBlock schema. The app blocks will only show options relevant to the user's region.

DigitalSuits has integrated with a leading digital financial services company. Our dedicated team was working with the owner of products that can be named the next generation of payments, helping consumers and businesses take control of their financial futures across the globe. Our customer's main product is a Shopify payment app that allows customers to split purchases over a series of payments. The process is simple: those who elect to pay with the app are redirected to the site, where they authorize the payment by agreeing to the terms of a payment plan. After payment terms are accepted, the app transfers funds to your Stripe account upfront, and your customer repays through the app over time according to their agreement terms.

This app is available in different regions: Australia, Canada, New Zealand, and the United States. For each of these regions, the application must have a different set of settings. Client functionality was added to the store’s theme using Shopify appBlock functionality. Shopify’s AppBlock schema allows for the description of a set of configurable appBlock options that can be customized by a user in the theme editor. Unfortunately, such schema markup for Shopify can’t have a dynamic set of settings that rely on a specific condition.

Our team came up with a new way to bypass Shopify's limitations in appBlock schema declaration and allow users a seamless experience with our appBlocks across all regions.

How did we achieve it, and what was the process? The answers to these questions and even more are explained in this article devoted to schema and structured data for Shopify.

How to Set Up a Dynamic Schema for Shopify App Blocks

Setting up a dynamic Shopify app block schema can be achieved using a specific approach. While it's not directly possible to create a truly dynamic Shopify schema, you can work around schema limitations by utilizing conditional app blocks, as detailed in the Shopify documentation.

Here's a step-by-step method to attain your desired outcome:

Understand the Concept:

Conditional app blocks allow you to control the visibility of certain app blocks based on specific conditions. You'll use boolean app meta fields to determine when an app block should be accessible.

Define Your Conditions:

Let's consider an example where you need to cater to two regions: the US and Ukraine (UA). Each region will have different options for the app block.

Define App Metafields:

Set up two boolean app metafields: app.metafields.custom.showUS and app.metafields.custom.showUA. These meta fields will determine whether the app block should be shown for the respective region.

Create Separate App Blocks:

Create two separate app blocks, each tailored for a specific region with its own settings.

example (app_block_ua.liquid):

The UA app-block has two settings: 'Option,' which is defaulted to 'b,' and 'Second option,' which is defaulted to 100. This block will only be available to users if the 'app.metafields.custom.widgetUA' has been set to 'true'.

example (app_block_us.liquid):

On the other hand, the US widget has only one option available, and it's set by default to a different value compared to the UA widget. The current appBlock will only be available if 'app.metafields.custom.widgetUS' has been set to 'true'.

Dynamic Visibility:

The available_if condition in each app block in the Shopify schema references the boolean metafields. This means that the app block will only be visible if the corresponding metafield is set to true for the user's region.

Set Metafields Based on the User's Region:

Depending on the user's region, set the appropriate boolean metafield to true. For instance, if a user is in the US, set app.metafields.custom.showUS to true and app.metafields.custom.showUA to false.

By implementing this approach, you achieve dynamic behavior within the constraints of the schema app for Shopify. The app blocks will only show options relevant to the user's region, creating a tailored and user-friendly experience. But be aware that this approach might not be ideal for larger, more complex applications.

Considerations:

• Maintenance Complexity: As your app evolves and expands, managing multiple conditional app blocks and associated metafields can become complex and harder to maintain. The more conditions you introduce, the more potential combinations of app blocks you'll need to manage.

• Performance Impact: The conditional rendering of app blocks based on metafield values might have a performance impact, especially as the number of conditions increases. This can affect the loading time of the app and the overall user experience.

• Future Flexibility: As your app continues to grow and adapt, you might encounter scenarios that aren't easily accommodated by the conditional app block approach. Ensuring future flexibility and expandability should be a priority.

Takeaway

In conclusion, DigitalSuits has successfully tackled the challenge of bypassing static appBlock schema app Shopify limitations, ensuring a dynamic and region-specific user experience for the project with the Shopify payment app.

To explore the full details of this groundbreaking solution and how it can be implemented for your Shopify app or for any other inquiries, don't hesitate to reach out to the DigitalSuits team. Contact us today to take your app's user experience to the next level!