How to Embed the ReturnZap Customer Portal Onto Your Shopify Site
Adding ReturnZap's self-serve, customer facing returns portal to your Shopify lets your customers initiate returns directly, without contacting your customer service teams.
The returns portal gives you the option to automatically issue RMA numbers, return shipping labels, and shipping instructions to your customers.
Here's how to set it up.
How to set up your ReturnZap Portal
Within the ReturnZap app, navigate to Settings > Portal
You'll have two options to integrate the ReturnZap returns portal into your site:
Option 1: Using the standalone portal via link
When you install ReturnZap, we will automatically create a link to the returns portal at www.[your-domain]/a/returnzap
You can see this portal in action by clicking the button to "Launch the Portal"
ReturnZap will use a URL ending in /a/returnzap by default. This uses a URL format called the Shopify App Proxy.
You can change this by navigating to Apps > Apps and Sales Channel Settings > ReturnZap > View Details > App Proxy.
This portal is set up automatically and ready to use. You can add a link to this page from your returns policy page, or in a link in your Shopify footer.
The process to modify your Shopify footer can vary by theme, but it can often be changed by navigating to Online Store > Navigation from the Shopify admin.
Option 2: Embedding the portal into an existing page on your Shopify site
You can also choose to embed the ReturnZap portal into any page on your Shopify store using a small snippet of javascript code.
Copy and paste all of the code displayed by either selecting it all and copying, or clicking the "Copy Snippet" button.
To embed the ReturnZap portal into a page on your Shopify store, from the Shopify admin sidebar, navigate to Online Store > Pages and select the page where you would like to host the ReturnZap portal.
For detail on how to create a page within your Shopify storefront go to the Shopify help page here: Shopify Help - Add a new webpage to your online store
Once you are in page edit mode on the page you would like to use, click the icon to toggle to HTML/Page Source editing:
Once in this section, copy and paste the ReturnZap code where you would like it to display on your page.
Save changes to your page, and click to view your page. The ReturnZap portal should now be embedded directly in your page.
The Shopify page editor will sometimes delete a portion of the ReturnZap javascript code. You may need to delete and re-save a few times. Subsequent changes to the page where the portal is embedded may also result in having to add the script again.
Changing the Portal Look and Feel to Match Your Brand
The portal will default to standard ReturnZap portals, in neutral blue.
You can edit the ReturnZap portal to change font colors, text color, button colors, etc to match your brand and storefront look and feel.