Skip to content
English
Customer portal
Go to ifreturns.com
  • There are no suggestions because the search field is empty.

UI/UX Portal Configurations

This is a document where you can learn of how you can customize the portal based on your brand UI to align with your style


General page

In general page clients can configure changes that will be applied in all pages. Some of them are: 

  • General page background color -> allows to change the background color that will apply in all pages

generalcontainerbg-ezgif.com-loop-count

 
  • general-container-box-shadow
  • general-container-max-width
  • general-container-height-desktop
  • general-container-width-desktop
  • general-container-width-2xl

 

There are other pages you can customize:

Return methods page

It is a page where customers select return methods

What you can customize?: 

  1. Background color,
  2. Text color
  3. Buttons
  4. Icons

 

Product selection page

It is a page where customers can select products to return

  • Product selection page offers clients to customize the following parameters: 

Product selection message customization

It is a message that appears on top on the first page on Product selection page.

  • Warning icon -> clients can request to hide or display it

image-png-Dec-09-2025-09-51-10-6146-AM

  • FAQ icon -> clients can request to hide or display it

image-png-Dec-09-2025-09-52-33-5075-AM

  • Warning background color -> clients can ask to change the color of background warning block

image-png-Dec-09-2025-09-56-30-3812-AM

  • Warning text color -> clients can ask to change the color warning message

warningtextcolor-ezgif.com-loop-count

  • Warning text font size -> clients can ask to change the font size

--warning-text-font-sizegif-ezgif.com-loop-count

 

Product selection product item container

  • Change product item background color -> allows to change the background color of items sections

image-png-Dec-09-2025-10-09-29-9945-AM

  • Change product item border color -> allows to change the border color of items sections

image-png-Dec-09-2025-10-14-52-4791-AM

productitembordercoloe-ezgif.com-loop-count

  • Change product item background color of selected items -> allows to change the background color of item that was selected.

NOTE: Don't confuse with a non selected item and already selected item. 

  • Change product item border color of selected items -> allows to change the background color of item that was selected.

product-item-selected-border-color-ezgif.com-loop-count

 

  • Change product item border radius of selected items -> allows to change the border radius of item that was selected.

product-item-selected-border-radius2gif-ezgif.com-loop-count

 

Return methods page

Return methods page is a page where customers select a method to return an item. (Carrier for example or return to the shop)


  • Let's go one by one and see all available adjustments: 

 

Return methods selection customization

  • Address section background color -> clients can modify the color of the address section. See example below:

Returnmethodaddresssectionbgcolor-ezgif.com-loop-count

  • Return-method-address-section-text-color -> cant apply changes

  • "Change Address" button background color -> allows to change the background color of "Change address" button. 

--return-method-address-button-bg-colorgif-ezgif.com-crop

  • "Change Address" button text color -> allows to change the text color of "Change address" button. 

--return-method-address-button-text-colorgif-ezgif.com-loop-count

  • "Change Address" button text-decoration-line -> allows to change the text decoration line of "Change address" button. 
    • You can either hide the line or display it 

 

 

Return method general options

  • return-method-item-option-description-address-text-color -> cant change it, when we have a lot of addres 

  • Change icons color -> allows to set the color of general icon.

--return-method-item-option-header-icon-color-ezgif.com-crop

 

  • Change icons background color -> allows to set the background color of general icon.

--return-method-item-option-header-icon-bg-colorgif-ezgif.com-crop

 

  • Change background color of "FREE" tag -> allows to set the background color of "FREE" tag

--return-method-item-option-description-free-tag-bg-colorgif-ezgif.com-loop-count

 

  • Change text color of "FREE" tag -> allows to set the text color of "FREE" tag

--return-method-item-option-description-free-tag-text-colorgif-ezgif.com-effects

 

  • Change font weight of "FREE" tag -> allows to set the font weight of "FREE" tag

    • Values range from 100 to 900, in increments of 100:
      • 100: Thin or Hairline
      • 200: Extra Light or Ultra Light
      • 300: Light
      • 400: Normal
      • 500: Medium
      • 600: Semi Bold or Demi Bold
      • 700: Bold
      • 800: Extra Bold or Ultra Bold
      • 900: Black or Heavy 

         

--return-method-item-option-description-free-tag-font-weightgif-ezgif.com-loop-count

 

  • Change border width of "FREE" tag -> allows to set the border width of "FREE" tag

 

--return-method-item-option-description-free-tag-border-widthgif-ezgif.com-loop-count

  • Change border width color of "FREE" tag -> allows to set the border width color of "FREE" tag

 

  • Change border radius of "FREE" tag -> allows to set the border radius of "FREE" tag

    --return-method-item-option-description-free-tag-border-radiusgif-ezgif.com-loop-count

 

 

Return method recommended section

  • Change background color of recommended option header -> allows to change the background color of header

--return-method-item-recommended-option-header-bg-colorgif-ezgif.com-loop-count

 

  • Change icon color of recommended option -> allows to change the icon color

NOTE: There is a difference between general icon and recommended option icon. They are handled separately. 

--return-method-item-recommended-option-header-icon-colorgif-ezgif.com-crop

  • Change background color of icon -> allows to change the background color of icon. 

--return-method-item-recommended-option-header-icon-bg-colorgif-ezgif.com-crop

  • Change text color of header -> allows to change the text color of "Returned to shop" text in the header. 

--return-method-item-recommended-option-header-text-colorgif-ezgif.com-loop-count

 

  • Change background color of "Recommended option" tag -> allows to change the background color of "Recommended option" tag

--return-method-item-recommended-option-tag-bg-colorgif-ezgif.com-loop-count

 

  • Change text color of "Recommended option" tag -> allows to change the text color of "Recommended option" tag

--return-method-item-recommended-option-tag-text-colorgif-ezgif.com-loop-count

 

  • Change border radius of "Recommended option" tag -> allows to change the border radius of "Recommended option" tag

--return-method-item-recommended-option-tag-border-radiusgif-ezgif.com-loop-count

 

 

Return confirmation page

Is a page that appears once a customer confirms and creates a return order

  • This is what clients can customize:

Return confirmation customization

  • Confirmation title color -> allows to change color of title

  • --return-confirmation-shopping-method-text-color -> cant find it
  • --return-confirmation-shopping-method-description-text-color -> cant find it
  • Return number text color -> allows to change the color if return number text

 

Return completed

  • return-completed-feedback-text-color -> cant find

  • -return-completed-feedback-icon-display: none; -> cant find

 

 

Tracking Page

Tracking page is a page that appears after a return order is created by customer.

  • Let's have a look at what client can customize:

Tracking order general customization 

  • Tracking order card background color -> allows to change the background color of whole card. At this moment it is not possible to change color of every section separately.

--tracking-order-card-bg-colorgif-ezgif.com-loop-count

 

  • --tracking-order-card-shadow -> dont know how to snow 
  • Tracking order text color -> allows to change the text color

NOTE: There are some variables that are over the general variable and thus some parameters will not be affected 

--tracking-order-text-colorgif-ezgif.com-resize

 

Shipping details

  • Shipping details "Method" title color -> allows to change the color of "Method" title

image-png-Dec-10-2025-09-53-42-3550-AM

  • --tracking-order-shipping-details-method-description-color -> cant apply changes -

     return-method-item-option-description-schedule-text-color

 

  • Shipping details "Carrier" title color -> allows to change the color of "Carrier" title

image-png-Dec-10-2025-09-53-20-6573-AM

  • Shipping details "Carrier" description color -> allows to change the color of "Method" title

image-png-Dec-10-2025-09-51-40-9261-AM

  • Shipping details "Tracking Number" title color -> allows to change the color of "Tracking Number" title

image-png-Dec-10-2025-09-52-13-1655-AM

  • Shipping details "Tracking Number" description color -> allows to change the color of "Tracking Number" description

image-png-Dec-10-2025-09-52-51-8075-AM

  • Shipping details "Status" title color -> allows to change the color of "Status" title

image-png-Dec-10-2025-09-54-19-0300-AM

  • Shipping details "Status" description color -> allows to change the color of "Status" description

image-png-Dec-10-2025-09-54-50-0245-AM

 

Return details

  • Return details Tag status background color -> allows to change the background color of the refund Tag

--tracking-order-return-details-tag-status-bg-colorgif-ezgif.com-loop-count

  • Return details refund Tag status text color -> allows to change the text color of the refund Tag

--tracking-order-return-details-tag-status-text-colorgif-ezgif.com-loop-count

  • Return details refund Tag status border radius -> allows to change the border radius of the refund Tag

--tracking-order-return-details-tag-status-border-radiusgif-ezgif.com-loop-count

  • Return details refund Tag status border color -> allows to change the border color of the refund Tag

--tracking-order-return-details-tag-status-border-colorgif-ezgif.com-loop-count

 

Resolutions details 

  • Resolutions details Tag status background color -> allows to change the background color of the Tag

--tracking-order-resolutions-details-tag-status-bg-colorgif-ezgif.com-loop-count

  • Resolutions details Tag status text color -> allows to change the text color of the Tag

--tracking-order-resolutions-details-tag-status-text-colorgif-ezgif.com-loop-count

  • Resolutions details Tag status border radius -> allows to change the border radius of the Tag

--tracking-order-resolutions-details-tag-status-border-radiusgif-ezgif.com-loop-count

  • Resolutions details Tag status border color -> allows to change the border color of the Tag

--tracking-order-resolutions-details-tag-status-border-colorgif-ezgif.com-loop-count