In-app styling settings

Some basic styling can be done in the Skafos Product Recommendations App Dashboard such as selecting a basic set of colors or choosing from a list of fonts.

Advanced styling

For more comprehensive styling, we allow you to set styles by inserting them into the head element of the page. You can completely make it your own using CSS. If you are familiar with CSS, you can inspect the page to discover all our styles.

Here is an overview of the layout and some examples of customization. We will walk through styling examples on how to style this to make it completely your own. Here is what the default Product Finder widget looks like:

The Basics

Style modifications are done by inserting a <style> element into the head content in the dashboard. This is what a style element looks like:

<style> 
</style>

Fonts

To change the font you need to first import the font you would like to use. Here as an example, I'm importing the Zen Tokyo Zoo Font. We can just copy/paste the code provided by Google:

<style> 
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');
</style>

Next, we need to apply this font to the text you want to change. Let's say, I want the font to apply to the app title and I also want the title to be bigger. I added !important to the code that Google provided in the CSS rules so that it will override any other font set from the default style.

<style> 
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');

.skafos-title {
font-family: 'Zen Tokyo Zoo' !important;
font-size: xx-large !important;
}
</style>

Let's see what this does:

Page Layout

Here is the basic layout of the product finder app with the css class names for each section:

All the content is inside the skafos-page block. It contains the following sections:

  • Title (skafos-title)

  • Filter (skafos-filter-box)

  • The Product Grid (skafos-tiles)

  • History Panel (skafos-history-panel)

Here are some simple examples of styling a product card:

Border

<style> 
.skafos-animated-product-card {
border: 3px solid lightblue !important;
border-radius: 8px !important;
}
</style>

Let's see what that does:

Things look too close to the border, let's add some padding:

<style> 
.skafos-styled-tiles-product {
border: 3px solid lightblue !important;
border-radius: 8px !important;
padding: 5px;
}
</style>

Let's see what that does:

Text Alignment

If you want to make the product description and product price align on the left, here's what you can do:

<style> 
.skafos-product-card-bottom-content {
text-align: left !important;
}
</style>

Let's check it out:

Price

Let's make the price bold and a different color. The price is in a container with class skafos-custom-price.

<style> 
.skafos-product-price {
color: darkblue;
font-weight: 700 !important;
}
</style>

Let's see what that looks like:

Buttons

You can easily change the upvote and downvote buttons icon color and give the buttons a different look:

<style> 
.skafos-interaction-button {
border-radius: 10px !important;
background-color: black !important;
}

.skafos-interaction-button>* {
fill: lightblue !important;
}
</style>

And now they look like this:

Putting it all together

Here are all the styles above put together:

<style> 
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');

.skafos-title {
font-family: 'Zen Tokyo Zoo' !important;
font-size: xx-large !important;
}

.skafos-animated-product-card {
border: 3px solid lightblue !important;
border-radius: 8px !important;
padding: 5px;
}

.skafos-product-card-bottom-content {
text-align: left !important;
}

.skafos-product-price {
color: darkblue;
font-weight: 700 !important;
}

.skafos-interaction-button > * {
fill: lightblue !important;
}
</style>

Summary Page

As you can see, you can customize the app in any ways you want if you're willing to write some CSS. If you have any question or suggestion regarding to our app customization, feel free to reach out to us.

Did this answer your question?