Boost Conversions with Shopify's Featured Review Checkout UI Extension

Table of Contents

1. Introduction
2. Shopify Checkout Extensibility
   1. Deprecated Functionality
   2. Checkout Extensibility
3. Using Gadget for Shopify App Development
   1. What is Gadget?
   2. Benefits of Using Gadget
   3. Sponsorship of Gadget
   4. Building a Checkout UI Extension with Gadget
4. Building an Admin App with Gadget
   1. Creating the Admin App
   2. Configuring the Review Content
   3. Displaying the Review on the Checkout Page
5. Deploying the Admin App and Extension
   1. Deploying the Admin App
   2. Setting up the Checkout UI Extension
   3. Testing and Customizing the Extension
6. Conclusion

Shopify Checkout Extensibility

In the world of Shopify, one of the most important topics recently is checkout extensibility. For Shopify Plus merchants, the ability to modify their checkout page by making edits to the checkout.liquid file in their theme code was a powerful tool. However, Shopify has now deprecated this functionality and will completely stop supporting it by next year. To replace the checkout.liquid functionality, Shopify has introduced what they call "checkout extensibility". This functionality still gives merchants the ability to modify their checkout page, but it requires some app knowledge and development. In this article, we will explore the steps to build a checkout UI extension using a tool called Gadget, an eCommerce app development platform.

Using Gadget for Shopify App Development

What is Gadget?

Gadget is an eCommerce app development platform specifically designed for Shopify. It provides developers with a comprehensive set of tools and functionalities to build and manage their Shopify apps. With Gadget, developers can focus on coding, while the platform takes care of the back end and server setup and management.

Benefits of Using Gadget

Using Gadget for Shopify app development offers several advantages:

1. Simplified app development: Gadget simplifies the process of building Shopify apps by handling various aspects of app development, such as database setup, server routes, session management, and API routes. This allows developers to focus on writing code and saves time and effort.

2. Elimination of roadblocks: Gadget helps eliminate common roadblocks and blockers that often hinder developers from getting started in the Shopify app development space. Its intuitive interface and comprehensive documentation make it easier for developers to navigate the app development process.

3. Easy integration with Shopify APIs: Gadget provides built-in functionality to integrate and interact with various Shopify APIs, such as the GraphQL API, allowing developers to fetch and update data from Shopify with ease.

4. Hosting and server management: Gadget hosts and manages the server for Shopify apps, eliminating the need for developers to set up and maintain their own servers. This simplifies deployment and ensures reliable app performance.

Sponsorship of Gadget

Gadget is the sponsor of today's video and the first official sponsor of the channel. This partnership aims to showcase the capabilities and benefits of Gadget for Shopify app development. The content shared in this article is based on personal experience and genuine belief in the usefulness of the platform.

Building a Checkout UI Extension with Gadget

In this article, we will demonstrate how to build a checkout UI extension using Gadget. The extension will allow merchants to display a simple review on the checkout page, providing social proof and potentially increasing conversions. The development process will involve creating an admin app to configure the review content and a checkout UI extension to render the review on the checkout page.

Building an Admin App with Gadget

To begin building the admin app, we will first create the app manually in the Shopify partner dashboard. Next, we will connect the app to Gadget, which will handle the backend setup and management. With Gadget, we can focus on coding and building the UI components for the app.

Creating the Admin App

To create the admin app:

1. Go to the partner dashboard and navigate to the apps page.
2. Click on "Create app" and enter a name for the app, such as "Featured Review App".
3. After creating the app, visit the Gadget website and sign up for an account.
4. Create a new app in Gadget with the same name as the admin app.
5. Connect the Gadget app to Shopify by providing the client ID and client secret, obtained from the Shopify partner dashboard.
6. Configure the required scopes for the app. In this case, the "read product" scope is necessary.
7. Save the app setup and select a development store with the checkout extensibility preview enabled.

With the admin app created and connected to Gadget, we can start building the UI components for the app.

Configuring the Review Content

The admin app will allow merchants to configure the review content displayed on the checkout page. This includes the customer name and review text. By making changes to the review content, merchants can provide social proof and enhance the shopping experience for their customers.

To implement this functionality:

1. Create a UI interface using Shopify Polaris components to design the admin app layout.
2. Implement form fields for the customer name and review text.
3. Use state variables and event handlers to capture and update the review content.
4. Use Gadget's API to save the review details to Shopify's meta fields associated with the shop.
5. Validate and sanitize the data before saving it to ensure consistency and accuracy.

By following these steps, merchants will be able to configure the review content according to their preferences.

Displaying the Review on the Checkout Page

To display the configured review on the checkout page, we will create a checkout UI extension. This extension will fetch the review details from Shopify's meta fields and render them in a designated section of the checkout page. The checkout UI extension will dynamically update the review content as merchants make changes in the admin app.

To create the checkout UI extension:

1. Use Gadget's provided tools and components for checkout UI extensions.
2. Configure the extension points in the shopify.ui.extension.toml file to specify where the code should be injected in the checkout page.
3. Access the meta fields containing the review details using Gadget's useAppMetaFields hook.
4. Parse and extract the required review details from the meta fields.
5. Use Shopify Polaris components to design the UI for displaying the review on the checkout page.
6. Implement real-time updates by subscribing to changes in the meta fields and re-rendering the review section when necessary.

By building and deploying the checkout UI extension, merchants will be able to showcase the review on the checkout page, providing customers with social proof and potentially increasing conversions.

Deploying the Admin App and Extension

Once the admin app and checkout UI extension are fully developed and tested, they can be deployed to Shopify to make them accessible to merchants. Deploying the app and extension involves publishing the app, setting up the extension in the partner dashboard, and enabling it for the desired stores.

Deploying the Admin App

To deploy the admin app:

1. Navigate to the partner dashboard and open the app page for the admin app.
2. Select the extension option and click on "Create version".
3. Follow the prompts to create and publish a new version of the app.
4. Enable the app for the desired stores in the partner dashboard.
5. Configure any additional settings or permissions required for the app.

Once the admin app is deployed and enabled, merchants will be able to install and configure it from their store's admin panel.

Setting up the Checkout UI Extension

To set up the checkout UI extension:

1. Open the partner dashboard and access the extension page for the admin app.
2. Locate the checkout UI extension and click on "Create version".
3. Follow the prompts to generate and configure the extension.
4. Enable the extension for the desired stores and customize its settings if necessary.
5. Install the extension from the online store's checkout customization options.

Once the checkout UI extension is set up and enabled, customers will see the configured review section during the checkout process.

Testing and Customizing the Extension

To ensure that the admin app and checkout UI extension are functioning correctly, thorough testing is necessary. Merchants and customers should test the app and extension in real-world scenarios to identify any issues or glitches. This testing phase also offers an opportunity to customize the extension's appearance and behavior based on feedback and usability testing.

By deploying and testing the admin app and extension, merchants can harness the full potential of Gadget and Shopify's checkout extensibility to enhance their customers' shopping experience and drive conversions.

Conclusion

With Shopify's checkout extensibility and Gadget's powerful app development platform, developers and merchants have the tools they need to build and customize their Shopify stores effectively. By creating an admin app and checkout UI extension, merchants can configure and display compelling review content on the checkout page, providing social proof and improving conversion rates. Gadget simplifies the app development process and eliminates many common roadblocks, enabling developers to focus on coding and creating superior eCommerce experiences for Shopify merchants. Try Gadget today and elevate your Shopify app development to new heights.