Articles on: Returns

How to Customize CSS in Returns Page

1.Function Description


1. You can change the style of the returns page by custom editing the CSS code to meet the different display requirements of stores.

2 .Functional permissions: Basic, Pro, Premium plan


2.CSS sample


1) Order lookup

Page title

.yq-return-page-title { text-align: center !important; }

Form

.yq-return-order-form { margin: 20px 0 !important; }

Input

.yq-return-order-input { border-color: rgba(30,30,30,1) !important }

Order form selector

.yq-return-order-form .ant-select-selector { border-color: rgba(0,0,0,0.16) !important; }

Returns policy text

.yq-return-order-policy-text { margin: 10px 0 !important; }

Returns policy button

.yq-return-order-policy-btn { color: rgba(25,70,190,1.00) !important; }

Find your order button

.yq-return-order-form button { background-color: #000 !important; }



2) Items selection/Returns reason/Select solutions

Page Title(Adjust the page title and apply it to both the Items selection page/Returns reason selection/Select solutions page)

.yq-return-order-apply-title { justify-content: center !important; }

Order item title

.yq-return-order-apply-items-title { justify-content: center !important; }

Next button

.yq-return-order-apply-next-btn { background-color: #000 !important; }

Product items

.yq-return-order-apply-product-item { border-radius: 16px !important; }

Solutions

.yq-return-order-apply-solution { padding: 16px !important; }

Returns shipping method

.yq-return-order-apply-shipment { border-radius: 12px !important;}



3) Review request

Submit button

.yq-return-order-submit-btn { background-color: #000 !important; }

Progress

.yq-return-order-apply-progress { margin: 20px 0 !important; }



4) Returns list

Create returns button

.yq-return-order-create-btn { background-color: #000 !important; }



5) After-sales status details page

Order list items

.yq-return-order-list-item { border-radius: 16px !important; }

Progress

.yq-return-order-progress { margin: 20px 0 !important; }

Tracking info

.yq-return-order-tracking-info { border-radius: 16px !important; }

Summary

.yq-return-order-summary { padding: 16px !important; }

Returns solutions

.yq-return-order-solution { margin: 20px 0 !important; }

Returns shipping method

.yq-return-order-shipping { border-radius: 16px !important; }







































































































































































Tracking info

.yq-return-order-tracking-info { border-radius: 16px !important; }


Summary

.yq-return-order-summary { padding: 16px !important; }


Returns solutions

.yq-return-order-solution { margin: 20px 0 !important; }


Returns shipping method

.yq-return-order-shipping { border-radius: 16px !important; }




Updated on: 09/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!