Using custom styles for advanced portal customization

What are custom styles?

The ReturnZap portal embed code accepts an optional attribut  custom-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/app.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:

Accessibility considerations

Custom styles override the portal's default colors, which are chosen to meet WCAG 2.2 AA contrast requirements (4.5:1 for normal text). When you override text or background colors, you are responsible for keeping that same 4.5:1 contrast ratio between text and its background, in both light and dark mode.

This applies in particular to the tokens that ship with separate light and dark defaults: --label-color, --error-color, and --unavailable-color. Overriding one of these replaces both modes, so check your value against the portal background in light and dark mode.