This article covers the possible customization of the retraced cards, icons and verified button.
Which customizations are possible?
The following customizations can be applied on top of visualizations (limited to only those):
Icons with description and the transparency report button can’t be customized.
White label
The property is
show-retraced-logo
This property controls the visibility of the retraced logo. To hide the logo, set it to
"false"
It works on the cards and the verified button.
In this example, the retraced logo will be hidden:
<retraced-button-verified show-retraced-logo="false"></retraced-button-verified>
Custom font
The property is
--retraced-elements-font-family
This property sets the font family of the cards and icons. In this example, the font is set as
retraced-cards {
--retraced-elements-font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
}
Custom color
The property is
color
This property sets the color of the icons. In this example, the color of the icons will be red.
<retraced-icons color="#FF0000"></retraced-icons>
The property is
--retraced-cards-text-color
This property sets the text color of the cards. In this example, the color of the cards will be brown.
retraced-cards {
--retraced-cards-text-color: brown;
}Icon display style
The property is variant. It sets how the icons are shown:
variant="label"(default): the icon with the text “Supply chain data · View details”variant="icon": only a round icon button, with a tooltip on hover
In this example, only the icon button is shown:
<retraced-icons variant="icon"></retraced-icons>
Cornered cards
The property is
--retraced-cards-border-radius
This property sets the border radius of the cards. In this example, the radius is set to 10px.
retraced-cards {
--retraced-cards-border-radius: 10px;
}The retraced-cards is a custom HTML element that allows you to style cards with custom properties.
Where can I insert these css variables?
CSS variables, (also known as CSS custom properties), are accessible globally across your project. This means you can define them in any CSS file that's linked to your HTML, and they will be available throughout your entire project.
However, it's a good practice to define them in a central location, such as a main or global stylesheet, to maintain consistency and avoid confusion. This way, you can easily find and update them when needed.
For specific platforms like Shopify or WooCommerce, you can find our recommendation below.
Shopify
Add the CSS variables in the retraced.liquid file.
WooCommerce
Add the CSS variables in your theme's main stylesheet, typically named style.css . If your theme has a custom CSS option, you can also use that to add your CSS variables.
Note that we are not supporting out of the box WooCommerce integration. Our custom integration is a generic one, that you can use to integrate with.