TheOz - Order return app

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

Prerequisites

• 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)

Installation

1. Create a Storefront API token

The storefront token will be necessary to display product images.

1. In Shopify's BO, go to Apps > Develop apps > Create an app.

• App name: order-returns-ui
• App developer: [your store owner]

2. Click on "Create app"
3. Once created, click on "Configure Storefront API scopes"
4. In Products, select unauthenticated_read_product_listings
5. In API credentials, click on "Install app" to install the app
6. Take note of your Storefront API token, we'll need it later

2. Update settings_schema.json

1. In settings_schema.json, add the following settings

2. 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

   

3. Add translation files

Add relevant translations for your theme:

1. In en.json, add English translations
2. In fr.json, add French translations
3. Add any other relevant translations (Dutch translations and German translations available in nl.json and de.json)

4. Create Return page

The return page is the entry point to the order return app.

1. In the live theme, create a new liquid template for pages called order-returns

   

2. Follow the same step in your development theme, and copy-paste the template's content in it

3. In Shopify's BO, create a page that uses that template and publish it

4. 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

5. You can now navigate to that page, and verify that the order return module is loading. It should look like something like this:

   

5. Include return links in account/orders

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:

1. Add account-order-return-links.liquid to your snippets folder
2. Locate the liquid file where orders are displayed (by default Shopify displays them in account.liquid, but custom themes could display them in account-orders.liquid or similar)
3. 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:

4. 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

5. 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 wrapping ifs to force the display of the app-return-link links. Here's an example you can use, for design purposes only.

6. Activate mandatory return for certain products

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:

1. Check with TheOz' back-end team that the feature has been activated for that store

2. Tag the gifted product(s) in your Shopify BO with RETURNS_GIFTED_PRODUCT

3. Insert a threshold amount to your theme app settings:

   Online Store > Themes > [select your development theme] > Customize > Theme settings > App - Order return > Returnable gifts

   

[ Dev notes ]

Running the app locally

• To run the app locally:
  1. In index.html, inside the <app-order-return> component, replace :
     • store-name value with your store name (without myshopify.com, ex: order-returns)
     • storefront-token value with your storefront token
  2. Run npm run start in your terminal

Testing the app with a test order

1. Create an order in Shopify's BO

2. Link the order to a customer

   Note: the customer needs to have a postal address

3. Mark the order as paid

4. Fulfill the order

5. Your order should now have 2 tags:

• CLIENT_RETURN_PERIOD|XX
• CLIENT_RETURN_DEADLINE|XXXX-XX-XX

6. 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.

To-do list when updating the app

• 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 before npm publish