Integrate a Third-party App

Integrating a third-party app with GemPages can be accomplished through multiple different scenarios:

#1 Pre-built element

Pre-built elements in GemPages are components that have been pre-designed, allowing you to easily add them to your website without having to create them from scratch. You simply drag and drop them into the desired position and customize the content as needed.

Step 1: Go to the GemPages Dashboard and select your preferred page to enter the Editor. 

Step 2: Navigate to the left sidebar and scroll down to the Shopify apps section. This is where you’ll discover all the apps equipped with pre-built elements. To streamline the process, you can make use of the search bar to quickly locate your desired app.

Step 3: Drag and drop the element into the position you prefer. Some apps might need a quick configuration—just click the element, and you’ll find the setup on the left sidebar. 

Step 4: Don’t forget to click “Save” and “Publish” to make the changes go live.

Ensure you install the app through your Shopify admin, and remember that what you drag and drop in GemPages is solely the frontend widget display from the app.

#2 Custom Code Integration

If you can’t find your app in the list of pre-built elements, simply follow these steps to integrate it with custom code.

Step 1: Begin by gaining access to the app’s code. 

You can find the code in various places. Some apps provide their code directly within the app interface. In other cases, you might need to check their help documentation or reach out to their support for the code. 

Once you have the app’s code, it’s time to put it into the Custom Code element.

In this guide, GemPages uses Kudosi (formerly Ali Reviews) to practice.

Step 2: Go to the GemPages Dashboard and select your preferred page to enter the Editor.

Step 3:  From the left sidebar, drag & drop a Custom Code element onto your preferred spot on the page.

Step 4: Choose the Edit code section and paste the app code into the box.

Step 5: Click “Save” and “Preview” to check if the code functions properly on your page.

#3 Use the Shopify App element