Build: Shopify App Approve Customers

The build is going to be a Shopify App where merchants can approve customers. When a customer has been approved they can either:

• See products
• See prices
• Order products

Customers can register freely but before they can do anything they need the merchant’s approval.

Requirements

• Merchants have a page where they can see a list of customers that have not been approved yet.
• Merchants can approve a customer in this list.
• Merchants can configure the restrictions to three levels:
  • Products
  • Prices
  • Purchases
• When a customer is not been approved and the setting is on product level, the customer cannot see any products.
• When a customer is not been approved and the setting is on price level, the customer cannot see any prices.
• When a customer is not been approved and the setting is on purchase level, the customer cannot order any products.

I think that is it in terms of requirements. One admin page to configure and approve customers and a way to apply the restrictions.

I’m calling my app Customer Approved.

Design exploration The most difficult part is to restrict viewing the visibility of products and prices as a lot can be decided in the theme. Preferably, I return a page saying the customer has not been approved yet when they want to load the catalog, collection or a product page. I probably need to inject something in the theme. When there is a customer and he/she is approved, render the content. Otherwise show the customer login page. Let’s first look into how this can be done.

Conditonally load the content I have a couple of requirements that impacts the implementation:

• Merchants don’t need to edit their theme code.
• Changing content through JavaScript is not enough. Customers would experience a flash of content and/or see the actual content in the network response.

Shopify loads content by using the content_for_layout tag. Perhaps we can override this tag and return a different content depending on the customer’s approval status. Let’s create a snippet that is injected at the top of the theme and overrides the content_for_layout tag. Unfortunately, it didn’t seem to work in a theme extension as they don’t have access to the content_for_layout tag (source).

Let’s see what we can do to override the content_for_layout tag. Let’s do it straight in the theme to see if we can even override it.

<!-- Test for customer approval app -->
{% capture access_denied_content %}
    <h1>Access Denied</h1>
{% endcapture %}
{% assign content_for_layout = access_denied_content %}

The result is that every page shows “Access Denied” so overriding it from the theme is possible.

Injecting something in the theme Now one of the requirements is that merchants shouldn’t have to edit their theme code. Perhaps we can do that for them.

The GraphQL variant doesn’t have an option to do this so probably we need to use the REST Admin API. This can be done by leveraging the REST Admin API > Online Store > Create or Update Theme endpoint source.

Starting with Admin API 2023-04, if an app distributed through the Shopify App Store uses the Asset resource to create, edit or delete a theme's asset, you need to request the required protected access scope. In most cases, you shouldn't use the Asset resource. To learn more about when you can use the Asset resource, and how to migrate, refer to the Asset resource.

I don’t see any other option than using the Asset resource so let’s continue with that. We would probably have to set up Admin API and pages so let’s do that. Run shopify app init, follow the steps and run shopify app dev. Now we should have an Admin page for our app.