Setting up personalized affiliate links for custom storefronts in the Collabs app

With the Collabs app, you can use personalized affiliate links, such as mystore.com/sammy, that automatically apply discounts codes during checkout. If you're using a custom storefront, then you need to meet the following requirements to use personalized affiliate links:

• send page view events to Shopify.
• handle URL redirects.
• manage the/discount route effectively for automatic discount code application.

If your storefront doesn't meet these requirements, then complete the instructions outlined on this page.

Sending page view events

The Collabs app uses the same tracking data as the Shopify admin, so your custom storefront needs to send Shopify analytics. To send analytics to Shopify, refer to the Hydrogen documentation.

Confirm that analytics are sent to Shopify

After you send analytics to Shopify, you can confirm that they work by checking the order conversion summary.

Steps:

1. From your Shopify admin, go to Orders.

2. Click any order.

3. In the Conversion summary section, click View conversion details.

4. Make sure that the customer's journey started on your custom storefront.

Handling URL redirects

The Collabs app uses your online store URL redirects to create personalized links. You can find a list of your URL redirects from your Shopify admin by going to Online Store > Navigation > View URL redirects.

You need to use Hydrogen's built-in feature storefrontRedirect utility to handle URL redirects correctly.

Confirm that URL redirects work

To confirm that your custom storefront handles URL redirects, you can open any URL redirect path in your custom storefront, and then verify that the URL redirects to the correct location.

Steps:

1. From your Shopify admin, go to Online Store > Navigation.
2. Click View URL redirects.
3. Open any URL redirect path in your custom storefront.
4. Verify that the URL redirects to the correct location.

Handling the /discount route

The Collabs app uses the /discount route to automatically apply discount codes for customers.

You can use this example of a discount route implementation from the Hydrogen template to set up and handle the /discount route.

Confirm that the /discount route is handled correctly

1. Go to mystore.com/discount/test-discount?redirect=/&dt_id=0.
2. Confirm that you're redirected to mystore.com/?dt_id=0.
3. Initiate a checkout and confirm that the checkout has the test-discount discount code applied.

Change affiliate links domain

After you meet the requirements to set up personalized affiliate links for your custom storefront, you can change the your affiliate links domain.

When you update the domain, all existing affiliate links are updated and all new affiliate links are created with the new domain.

Steps:

1. From your Shopify admin, click Settings > Apps and sales channels.

2. From the Apps and sales channels page, click Shopify Collabs.

3. Click Open app.

4. Go to Settings > Affiliates.

5. In the Storefront domain section, add your custom storefront domain.

6. In the Link personalization section, select Personalized links.

7. Click Save.