Shopify Collabs and discount links

Shopify Collabs is Shopify’s app for working with creators: each creator gets a link and often a discount code. On an Astro site with Smootify these links and codes work as on a Shopify theme: the visitor lands on your site with the creator’s code in the cart, and Collabs credits the order to the creator. This page covers the creators’ links, Shopify’s discount links and the store’s URL redirects.

1. Creators’ links

Collabs gives each creator a link on your store’s Shopify domain, such as yourstore.myshopify.com/sammy. With Smootify’s Redirect theme as the live theme of the store:

1. Shopify follows the creator’s link to the discount link Collabs set up for them.
2. The Redirect theme takes the visitor to your site, with the code as ?discount= and every other parameter of the link, Collabs’ own included.
3. Smootify puts the code in the cart, as any ?discount= link does: see Discounts, notes and progress bars.
4. At checkout the order carries the creator’s code, and Collabs credits it to the creator, with their commission.

You change nothing in Collabs, and the only thing the store needs is the Redirect theme as the live theme, as Send Shopify’s storefront visitors to your site explains. The credit comes from the code at checkout, so it does not depend on the visitor’s consent to cookies.

Sales show in Collabs, under Sales, a few hours after the order, not right away. To try it on a development store, any order works, a test payment included.

2. Discount links on your domain

The Shopify admin shares a link for any discount code, such as /discount/SAMMY10?redirect=/collections/summer. On your own domain, yourdomain.com/discount/SAMMY10 works too, once the site has a 404 page that Smootify can read:

• Smootify puts the code in the cart, then takes the visitor to the page in redirect (or return_to).
• That page must be on your site. Without it, or with an address on another site, the visitor goes to the home page.
• The other parameters of the link, such as utm_source, go along to that page.
• A language prefix works too: without redirect, /it/discount/SAMMY10 ends on the Italian home page.
• The code waits on the cart until the cart qualifies, and shows in the cart’s list of discounts from then.

3. URL redirects on your domain

The store’s URL redirects live in the Shopify admin, under Online Store → Navigation → URL redirects: Collabs writes the creators’ links there, and a store that moved from a Shopify theme keeps its old links there. Two cases open them on your own domain:

• a link written by hand on your domain, such as yourdomain.com/sammy;
• the old links of a store that moved its main domain from Shopify to your site.

That address has no page on your site, so the visitor first lands on your 404 page. There Smootify looks the address up in the store’s URL redirects and sends the visitor to its target, with the parameters of the link. This works without the Redirect theme.

To read the URL redirects, the Storefront token of your site needs Shopify’s content permission (unauthenticated_read_content):

• The Headless storefront’s token: in Shopify’s Headless channel, open the storefront’s Storefront API settings and turn the content permission on. Set up the Shopify store asks you to turn on every permission, this one included.
• The token of the Smootify app: stores that install the app now have it. A store that installed the app earlier gets it once you approve the app’s new permissions in the Shopify admin.

Without the permission the 404 page stays, and on your *.workers.dev address or the dev server the debugger says why.

4. The 404 page

The links of sections 2 and 3 need a 404 page of your own, src/pages/404.astro, that loads your layout and so Smootify. Smootify looks the address up only on a page whose html element carries data-smootify-404. The integration adds it at build time to the built 404 page, 404.html or 404/index.html, so a prerendered 404 page needs nothing more.

A 404 page rendered on demand is not in the build: spread smootify404Attrs on its html element yourself.

---
import { smootify404Attrs } from "@smootify/astro/seo";
const { notFound = false } = Astro.props;
---
<html lang="en" {...(notFound ? smootify404Attrs : {})}>

Without the attribute, Smootify does not look the address up and the visitor stays on the 404 page. The creators’ links of section 1 do not need it.

Before you publish