By default, our Skafos See Similar functionality looks like this:

Our default stylesheet for See Similar is available here on Github.

You can override any of our default styles by adding custom styles in the app setup in Shopify. For example, let's change the color from Green to Blue when the animation is completed:

This is the part of the stylesheet that controls the color when the see similar action is completed:

.seeSimilarContainer[data-see-similar-completed] {
background-color: #50CB93;
box-shadow : 3px 3px 12px 0px rgba(80, 203, 147, 0.15), -3px -3px 12px 0px rgba(80, 203, 147, 0.25);
}

If we need to change the background color, we will add this to the "Custom Styles" section:

.seeSimilarContainer[data-see-similar-completed] {
background-color: #03d7fc !important;
}

We need to use the !important flag in the color because the order of insertion of the styles is not guaranteed. We need to make sure that our override applies last.

Here is a screenshot of how it looks with the new color:

Please reach out if you have other customization questions.

Did this answer your question?