How to customize the texts and design for the Return experience?

Customizing the Return pages can be made both in terms of language and design. 

To make text adjustments, please follow the A section of this article.

To change the template design, please follow the B section of this article.

A. Adjust texts for Return pages

If you'd like to change the texts for the Return experience, this can be made inside your WeSupply account using the Translation settings.

Step 1

Log into your WeSupply account and go to Settings -> Branding -> Translations:

Step 2

From the Messages dropdown menu -> select Order View Page:

Step 3

Search for returns texts and start changing the desired ones by clicking on them:

Step 4

Once changing the text, click Apply for the new text to be saved and displayed for your customers when initiating returns.

Note: To remove any text, you can delete the entire line of text and nothing will be displayed for customers.

To Restore the text to its default version, click Restore to default button.

B. Customize design for Return pages

While the Return experience is managed in the Order Detail Page instance, and there is no separate template inside WeSupply for Returns, you can still customize the design for Returns by following the steps below.

Step 1

First, you will need a test order imported into the WeSupply system.

Place a test order and ship the order using an already delivered tracking number to mark it as Delivered.

Step 2 

Next, on the frontend, as an end customer, you need to start a return.

For each return step, you can inspect specific elements to be able to target them.

Step 3

On the element that you'd like to change the design for, click right and select Inspect:

Step 4

After inspecting the element, on the right-hand side, under Styles, you can spot the name of the element and its current styling:

Here, the button element .return-page-nav .md-button.return-option-btn has its default background-color set to #000000:

.return-page-nav .md-button.return-option-btn {
width: 100%;
border: 1px solid #000000;
margin: 5px 0;
color: #ffffff;
background-color: #000000;
padding: 0.8rem 1rem 0.8rem !important;
}

By targeting the button element .return-page-nav .md-button.return-option-btn, the desired CSS styling can be applied.

For example, the button's default background color can be changed to another color #8a4d89 as seen below:

.return-page-nav .md-button.return-option-btn {
width: 100%;
border: 1px solid #000000;
margin: 5px 0;
color: #ffffff;
background-color: #8a4d89;
padding: 0.8rem 1rem 0.8rem !important;
}

Step 5

Now, log in to your WeSupply account and go to Settings -> Branding -> Pages -> Order View -> click Edit Template:

Step 6

On the Order View template, Colors changes will be applied for the Header and Footer of the Return pages as well:

Step 7

Scrolling down to the bottom of the Design tab, there is a Global Custom CSS, which can be used mainly for achieving a fully customized Return Page (custom fonts, CSS styling for targeted elements, etc.).

Here, it was inserted the following CSS block to change the color of the .return-page-nav .md-button.return-option-btn element:

.return-page-nav .md-button.return-option-btn {
width: 100%;
border: 1px solid #000000;
margin: 5px 0;
color: #ffffff;
background-color: #8a4d89;
padding: 0.8rem 1rem 0.8rem !important;
}

Once the styling is inserted in the Global Custom CSS box, changes can be viewed on the frontend:

How to change the checkmark image from the Return confirmation page?

Step 1

On the Return confirmation page, click right on the checkmark image and select Inspect.

Step 2

On the right-hand side of the browser's console, you'll be able to see the styling of the current image.

Step 3

To change the checkmark image, for .return-page-nav .all-set-div img element, insert the following block containing the URL of the new image:

content: url(https://thumbs.dreamstime.com/b/blue-check-mark-icon-tick-symbol-tick-icon-vector-illustration-vector-illustration-isolated-black-background-blue-check-mark-143227416.jpg);

Step 4

Into your WeSupply account -> Settings -> Branding -> Pages -> Tracking Page -> Edit Template -> Custom Global CSS -> paste the CSS block using the URL of the desired image -> Save:

.return-page-nav .all-set-div img {
height: 128px;
width: auto;
content: url(https://thumbs.dreamstime.com/b/blue-check-mark-icon-tick-symbol-tick-icon-vector-illustration-vector-illustration-isolated-black-background-blue-check-mark-143227416.jpg);
}

Once Saved, the new image will be displayed on the Return confirmation page.