Custom order return app by TheOz.
Once installed on the client's site, the module will be accessible:
- from a dedicated return page
- from the
/account
section
- The return app must have been initialised by the back-end team of TheOz (this can be verified by checking an
order-returns
develop app exists)
The storefront token will be necessary to display product images.
- In Shopify's BO, go to Apps > Develop apps > Create an app.
- App name:
order-returns-ui
- App developer: [your store owner]
- Click on "Create app"
- Once created, click on "Configure Storefront API scopes"
- In Products, select
unauthenticated_read_product_listings
- In API credentials, click on "Install app" to install the app
- Take note of your Storefront API token, we'll need it later
-
In
settings_schema.json
, add the following settings -
Add your storefront token in the app, by navigating to the settings you've just created:
Online Store > Themes > [select your development theme] > Customize > Theme settings > App - Order return > Storefront token
Add relevant translations for your theme:
- In
en.json
, add English translations - In
fr.json
, add French translations - Add any other relevant translations (Dutch translations and German translations available in nl.json and de.json)
The return page is the entry point to the order return app.
-
In the live theme, create a new liquid template for pages called
order-returns
-
Follow the same step in your development theme, and copy-paste the template's content in it
-
In Shopify's BO, create a page that uses that template and publish it
-
Copy the handle of the page, and paste it in the theme settings, in :
Online Store > Themes > [select your development theme] > Customize > Theme settings > App - Order return > Return page handle
-
You can now navigate to that page, and verify that the order return module is loading. It should look like something like this:
Next, we'll take care of displaying appropriate links in the account/order
section.
- If an order can be returned, "Demander un retour" will be displayed.
- If an order has already been partially or fully returned, "Mes retours" will be displayed.
Steps:
- Add account-order-return-links.liquid to your
snippets
folder - Locate the liquid file where orders are displayed (by default Shopify displays them in
account.liquid
, but custom themes could display them inaccount-orders.liquid
or similar) - Copy-paste this code where you want the "Demander un retour" and "Mes retours" to be displayed
{%- if settings.enable_order_return_app -%}
<div>{% render 'account-order-return-links', order: order %}</div>
{%- endif -%}
The end result should look like something like this, once we have elligible orders:
-
Take note of the URL of the page where orders are listed (typically
your_store.myshopify.com/account
), and update the url suffix ("/account
in this case") in your theme settings, in :Online Store > Themes > [select your development theme] > Customize > Theme settings > App - Order return >Orders account page url suffix
-
Links appear conditionally on this page. This can be tricky for desigining the page. In the
account-order-return-links.liquid
snippet, you can temporarily remove all the wrappingif
s to force the display of theapp-return-link
links. Here's an example you can use, for design purposes only.
In certain cases a specific product will need to be returned if the new total of the order goes below a certain threshold.
Ex: the customer receives a bag for all orders over 200 eur. If the customer returns an item and the new total of that order falls below 200 eur, an error message will let her/him know (s)he needs to return the free bag as well.
Steps to activate this feature:
-
Check with TheOz' back-end team that the feature has been activated for that store
-
Tag the gifted product(s) in your Shopify BO with
RETURNS_GIFTED_PRODUCT
-
Insert a threshold amount to your theme app settings:
Online Store > Themes > [select your development theme] > Customize > Theme settings > App - Order return > Returnable gifts
- To run the app locally:
- In
index.html
, inside the<app-order-return>
component, replace :-
store-name
value with your store name (withoutmyshopify.com
, ex:order-returns
) -
storefront-token
value with your storefront token
-
- Run
npm run start
in your terminal
- In
-
Create an order in Shopify's BO
-
Link the order to a customer
Note: the customer needs to have a postal address
-
Mark the order as paid
-
Fulfill the order
-
Your order should now have 2 tags:
CLIENT_RETURN_PERIOD|XX
CLIENT_RETURN_DEADLINE|XXXX-XX-XX
- You can now test your installation by going to the return page you created. Use the email address of the customer you've linked the order to, and the order reference of your test order.
- Modify script version in page.order-returns.liquid
- Modify app version in app-order-return.tsx
- Record changes in the changelog
- Make sure
index.html
does not contain any keys - Run
npm run build
beforenpm publish