Customizations
OVERVIEW
In this article, you will learn how to edit your customer portal theme and how to customize the content seen throughout the Loop experience.
In this article:
- Set Up Walkthrough
- Customizing Theme Styles
- Style Customizations
- Branding
- Visual editor tool
- Customizing Content
- Order lookup
- Editing all other content
- FAQ
Set Up Walkthrough
Customizing Theme Styles
Style Customizations
Text color
To contrast background color/image against text in customer portal:
- Navigate to Settings > Customizations > Theme styles in your Loop admin
- Select Light or Dark from the Text color dropdown
- Preview & Save changes
Corner radius
To edit the appearance of buttons and modal windows in customer portal:
- Navigate to Settings > Customizations > Theme styles in your Loop admin
- Select Curved or Sharp from the Corner radius dropdown
- Preview & Save changes
Accent color picker
To change the color of buttons in the customer portal
- Navigate to Navigate to Settings > Customizations > Theme styles in your Loop admin
- Use the Accent color picker to select desired color or input HEX values
- Preview & Save changes
Background color picker
To change customer portal background and accent colors:
- Navigate to Settings > Customizations > Theme styles in your Loop admin
- Use the Background color picker to select a desired color or input HEX values
- Note: Background image will override your background color
- Preview & Save changes
Upload Background image URL
To attach a desired background image in the customer portal lookup page:
- Upload desired background image in Shopify (yourstore.myshopify.com/admin/files) and copy the hosted URL.
- We recommend using a 1440px x 900px image
- JPEG and other similar file types are not compatible in this section; it must be a Shopify URL
- Navigate to Settings > Customizations > Theme styles > Background image URL in your Loop admin
- Paste into the appropriate field, and save your changes
- Note: This image will override your background color
Branding
Upload logos and favicon images
To attach the desired logos and favicon image URL in the Loop portal:
- Upload your logo and favicon images in Shopify (yourstore.myshopify.com/admin/files) and copy the hosted URL
- Note: Follow the recommended sizing displayed underneath each URL field for the logo and favicon images
- Navigate to Settings > Customizations > Theme Styles > Branding in your Loop admin
-
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:
- Navigate to Settings > Customizations > Theme Styles > Branding in your Loop admin
- Select the font closest to your brand from the Header font and Body font drop downs
-
Save changes once you've made a selection
Visual Editor
With the Visual Editor tool, you can edit and preview any changes made (in real time) to the theme style and text of your customer portal. An alternative to using this tool is to open your returns portal in a separate window and then refresh the portal page to review changes.
To access the Visual Editor tool, navigate to Settings > Customizations > Visual Editor in your Loop admin.
Customizing Content
Order lookup
The order lookup section is where you can customize the text and some visual aspects of the order lookup page of your returns portal. Below are the sections of the order lookup page you have the ability to edit:
- Heading text
- Subheading or graphic heading
- Input field placeholder
- Order number format
- Shipping Zip Code or Phone Number format (Note: if you selected multiple lookup options under the General settings section of Loop, ensure you update this field to match those selections)
- Help tooltip
- Start button
- Footer
Editing All Other Content
To edit all other text throughout the Loop portal, click on the Edit all content button. There are 7 sections across the top of the page that can be clicked into and reviewed. Using the Search feature on the far right is a quick way to locate where a certain word or phrase lives through the Loop portal.
Note: To add a language translation, please refer to our Language Translation Support article.
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.
Order Page
Once a customer has entered their order info, they'll see the Order Page, where they can select the product(s) they want to return. This page is also where edits to the variant exchange page would be made.
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 all of those outcomes are enabled.
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 copies in the Shop Now: In App experience can be edited from this tab.
Review Page
When the customer has selected their desired item(s) and corresponding outcome(s), they will next see 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 will see their downloadable shipping label (or QR code if applicable), a breakdown of their transaction, a summary of their selections and the return shipping instructions.
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 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 review our Help Center article on setting up a custom domain and contact support@loopreturns.com or your Onboarding Specialist/Merchant Success Manager to assist with this.
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 version, 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. Simply search for the word or phrase you wish to replace.
Can I change the background color of the Review Page and Return Status Page? At this time, the color of these two pages are unable to be changed and will remain white.
Can I change the name that appears next to the favicon image when the returns portal tab is open? You can edit this by going to Customizations > Edit all content > Global > Title
Please reach out to support@loopreturns.com with any additional questions.