Using custom styles for advanced portal customization

What are custom styles?

The ReturnZap portal embed code accepts an optional attributcustom-styles which allows for custom CSS styling to be applied to nearly any element in the returns portal

This styling is intended for more advanced use cases, where requirements exceed the capabilities of the standard portal customizer.

Using custom styles

In order to apply custom styles, you must be using the embedded version of the ReturnZap returns portal as detailed here:

https://help.returnzap.com/article/29-how-to-embed-the-returnzap-customer-portal-onto-your-shopify-site

Applying custom styles can be done directly in the embed code, using the format below:

<script src="https://portal.returnzap.com/v2.js" async></script>
<return-zap 
  shop-id="[Your Shop ID]" 
  custom-styles="
    .page.lookup h1 {
      color: red;
    }
  ">
</return-zap>

In the example above, the custom-styles attribute is targeting the h1 element on the order lookup page and changing the text color to red: