Popular custom CSS snippets

Why custom CSS?

There are a lot of different requests to change the style of the elements in Lookfy, but the built-in options are limited. If there is not an option available for a specific request, utilizing custom CSS is a highly flexible and effective way to address the request.

How to add your custom CSS code in Lookfy

From the Lookfy main menu, click App Settings, then Custom code, then you can add your css code in the Custom CSS box.

Please remember to Save your work before leaving.

Change style for the title, description of your gallery

If you want to change the font-size, font-family, color, spacing… for the title, description of your gallery, you must use custom CSS.

.kt__header .kt__title{
    font-size: 22px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #000000;
}

.kt__header .kt__subtitle{
    font-size: 18px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #000000;
}

Make the main image sticky in the Shop The Look type

@media only screen and (min-width: 768px) {
  .lookfy-gallery:not(.lookfy-mobile) .kt-embedded-row.kt-row > .kt-grid__item {
    position: sticky;
    top: 85px;
    height: 100%;
  }
  .kt-embedded-row.kt-row {
    align-items: inherit !important;
  }
}

Make corners of the gallery’s images round

.kt-image-item-box {
    border-radius: 8px;
}

Change style for the titles of items in Shop The Look

.lf-shopthelook .hotspot-item-product .hotspot-item-title a{
    font-size: 18px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #000;
}