Customizations

OVERVIEW

In this article, you will learn how to edit your customer portal theme and how to customize content for Order Lookup and Return Instructions. 

In this article:

  • Set Up Walkthrough
  • Visual Editor Tool
  • Style Customizations
  • Style Customizations
  • Content Customizations 
  • FAQ

Set Up Walkthrough

Visual Editor Tool

We recommend using the Visual Editor tool when setting up or modifying customer portal customizations. With this tool, you can edit and preview any changes made (in real time) to the theme style and text that affect the customer portal. If not using the Visual Editor tool, we recommend opening the returns portal in a separate window, saving changes periodically and then refreshing the portal page to review updates. 

To access the Visual Editor tool, navigate to Settings > Customizations > Visual Editor in your Loop admin.


Style Customizations

Text color 

To contrast background color/image against text in customer portal:

  1. Navigate to Settings > Customizations > Visual Editor > Style Customizations > Global Styles in your Loop admin.
  2. Select Light or Dark from the Text color dropdown.
  3. Preview & Save changes.

Corner radius

To edit the appearance of buttons and modal windows in customer portal:

  1. Navigate to Settings > Customizations > Visual Editor > Style Customizations > Global Styles in your Loop admin.
  2. Select Curved or Sharp from the Corner radius dropdown.
  3. Preview & Save changes.

Accent color picker

To change the color of buttons in the customer portal:

  1. Navigate to Settings > Customizations > Visual Editor > Style Customizations > Global Styles in your Loop admin.
  2. Use the Accent color picker to select desired color or input HEX values.
  3. Preview & Save changes.

Background color picker

To change customer portal background and accent colors:

  1. Navigate to Settings > Customizations > Visual Editor > Style Customizations > Page Background in your Loop admin.
  2. Use the Background color picker to select a desired color or input HEX values.
    1. Note: Background image will override your background color. 
  3. Preview & Save changes.

Upload Background image URL 

To attach a desired background image in the customer portal lookup page:

  1. Upload desired background image in Shopify (yourstore.myshopify.com/admin/files) and copy the hosted URL.
    1. We recommend using a 1440px x 900px image
  2. Navigate to Settings > Customizations > Visual Editor > Page Background in your Loop admin.
  3. Paste into the appropriate field, and Save your changes.
    1. Note: This image will override your background color

Upload logos and favicon images

To attach the desired logos and Favicon image in the customer portal and in Shop Now:

  1. Upload your logo and favicon images in Shopify (yourstore.myshopify.com/admin/files) and copy the hosted URL.
    1. Note: Follow the recommended sizing displayed underneath each URL field for the logo and favicon images. 
  2. Navigate to Settings > Customizations > Visual Editor > Style Customizations > Branding in your Loop admin.
  3. Paste into the appropriate field, and save your changes. 

Header and body font

To select a custom font for customer portal headers and body text:

  1. Navigate to Settings > Customizations > Visual Editor > Style Customizations > Global Styles in your Loop admin.
  2. Select the font closest to your brand from the Heading font and Main font dropdowns. 
  3. Save changes once you've made a selection. 

Content Customizations

Merchants can customize nearly all of the content customers will see in the portal by clicking Edit all content or by using the Visual Editor tool.

To customize the Lookup Page:

  1. Navigate to Settings > Customizations > Visual Editor > Text Customizations > Lookup Page in your Loop admin.
  2. Enter the desired copy in each Order lookup and Return instruction field. 
    1. Heading: appears at the top of the order lookup modal
    2. Input order placeholder: displayed as a placeholder for the order lookup fields 
    3. Lookup tooltip: shows above your support email in the order number tooltip
    4. Submit button: displayed on the button to start a return
    5. Footer: included at the bottom of every page with your support email
  3. Save changes.  

To customize any other page in the customer flow:

  1. Navigate to Settings > Customizations in your Loop admin.
  2. Click on Edit all content or Visual Editor 
  3. Find the page you'd like to customize and make the necessary change. Guide to the tabs can be found below.
  4. Save changes.

Guide to Content Tabs

There are 7 tabs in the Text Customizations tab of the Visual Editor tool. Below is a guide for which tab relates to which page in the customer experience for reference.

Global

The Global tab contains values that will appear across the customer experience, including things like the footer which will appear on every page.

Lookup Page

The Lookup Page functions essentially as the Loop landing page. Customers will look for their order on this page to begin their return. This includes gift return functionality, if you have it enabled.

Missing Information during Gift Return

Order Page

Once a customer has entered their order info, they'll land on the Order Page, where they can select the product or products they want to return. This page includes the variant exchange page.

Credit Page

If a customer chooses to return their product (i.e. they do not exchange for another variant), they will land on the Credit Page. This page includes the Shop Now, store credit, and refund outcomes, if they are turned on.

Shop Now Page

The customer will land on this page if you have Shop Now enabled, you are using the In App version of Shop Now, and the customer selects the Shop Now outcome. All copy in the Shop Now: In App experience can be edited from this tab.

Review Page

When the customer has returned everything they need and picked the outcomes they would like, they will end up on the Review Page. The copy available in this tab accounts for all outcomes: Shop Now, variant exchange, store credit, and refund.

Return Status Page

All customers that complete a return will end on the Return Status Page. The customer can find a breakdown of their transaction, a recap on return instructions, what to send back, and their return label all on this page.


FAQ

Can I use a custom font in the Loop portal? Unfortunately, at this time we do not support the ability to upload custom fonts to the returns portal. You can choose from a selection of fonts as the next best option to meet your brand’s needs.

Is there a character limit on the content fields? No, there is no character limit. However, we recommend reviewing how this will appear in the portal to make sure the formatting appears as expected.

Can I connect my sizing chart to Loop for exchanges? Loop can accommodate one sizing chart. That link can be added to the portal in Customizations. Go to Edit all content > Order Page tab > Product Exchange. You'll drop the URL to your size chart page in the Size Chart U R L box, and create a name for the link in the Size Chart Copy box. Loop is limited to one sizing chart link. If you have multiple, we recommend creating a page that contains all of your sizing charts in one place to link to.

Can I change my returns portal URL + tab content? Yes, if you are on our Pro, Plus, or Advanced plan. We recommend something like: returns.brand.com or exchanges.brand.com. Please contact support@loopreturns.com or your Onboarding/Account Manager to help with this set up.

Where will the light background logo be used? The light background logo will be used on the Return Status Page, the final page of the customer experience. If applicable, it will also show up in the Shop Now: In App experience. If you do not have Shop Now on or are using the On Store variation, this logo will not appear there.

I'm having a hard time finding the text that I want to update - is there an easier way? Utilize the Search tab on the content customizations page in your Loop admin. Search for the verbiage in which you wish to replace!

Please reach out to support@loopreturns.com with any additional questions.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.