🖌️Adding custom CSS

Learn how to add your own CSS classes for customising the trade-in portal look and feel

Merchants are equipped with the ability to incorporate their own custom CSS classes, allowing them to tweak the trade-in portal to align with their store's unique look and feel.

How to add custom CSS classes

1. Navigate to the settings page and select the 'storefront' tab. Under the 'Trade-in portal customisation' section, you will find a 'Custom CSS' field where you can enter your classes.

2. Add your custom CSS classes. These should either target generic HTML elements like h1, h2, p, etc., or existing classes in the app. To find existing classes, please use your web browser's inspector. You can learn more about this here.

3. Reload the trade-in portal to visualize the impact of your custom classes.

4. Test and refine your modifications until you achieve your desired look and feel.

To help you get started, we've compiled a list of CSS classes that are commonly adjusted:

• .TRC-AppContainer: The main container holding all of the app's content.

• .TRC-App.TRC-TradeInWizard__Stepper: The navigation stepper within the Trade-In Wizard.

• .TRC-Header__Description.TRC-ActionButton: The action button in the header's description area.

• .TRC-TradeInWizard: The container for the Trade-In Wizard process.

• .TRC-Page__Frame: The frame that wraps around each page within the app.

• .App-TextField__Input: The input field for text within the app.

• .TRC-Header__Header: The main header for the app.

• .TRC-AppRadioInput: The radio input elements within the app.

• .TRC-TradeInCarrierServices__Card: The carrier services card within the Trade-In section.

• .TRC-AppCheckboxInput: The checkbox input elements within the app.