This article covers the possible customization of the retraced button verified, icons and cards.
Which customizations are possible?
The following customizations can be applied on top of visualizations (limited to only those):
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"
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. 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 color of the cards. In this example, the color of the cards will be brown.
retraced-cards {
--retraced-cards-text-color: brown;
}
Cornered cards
The property is
retraced-cards-border-radius
This property sets the border radius of the cards. In this example, the the radius is set for 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.