Para facilitar a customização da identidade visual da sua loja virtual, disponibilizamos a camada Overlay SmartHint CSS padrão para que seja possível esta customização.

Abaixo, você encontrará o Overlay SmartHint CSS padrão nos dois formatos. São eles:

OVERLAY “NÃO VÁ EMBORA” E “PROMOÇÃO RELÂMPAGO”.

Em caso de dúvida ou até mesmo retorno para o CSS padrão, basta copiar o código abaixo e colar no campo “Regras de CSS” na configuração do Overlay.

CSS padrão do Overlay tipo “NÃO VÁ EMBORA”:

.title {
 margin-bottom: 20px;
 color: #f01818;
 font-size: 23px;
 }

.overlay-message {
 color: #000;
 font-size: 16px;
 }

.main-line {
 margin-bottom: 20px;
 }

.products {
 margin-left: 0 !important;
 margin-right: 0 !important;
 }

.logo {
 margin-top: 10%;
 vertical-align: middle;
 }

.logo img {
 max-height: 90px;
 }

.product {
 width: 24%;
 float: left;
 margin-bottom: 10px;
 }

.product .product-inner {
 border: 1px solid;
 border-radius: 10px;
 margin-left: 5px;
 margin-right: 5px;
 }

.product .info {
 min-height: 50px;
 }

.product .name {
 font-size: 13px;
 color: #000 !important;
 }

.product .name a {
 font-size: 13px;
 color: #000 !important;
 }

.product .name a:hover {
 text-decoration: none;
 color: #000 !important;
 }

.product .ms-vip-price-container {
 min-height: 50px;
 }

.product .price {
 color: #adada6;
 text-decoration: line-through;
 }

.product .sale-price {
 font-size: 20px;
 font-weight: bold;
 color: #f01818;
 }

.product .button {
 margin-bottom: 10px;
 }

.image {
 width: 100%;
 }

body {
 background-color: transparent !important;
 text-align: center;
 }

.modal-body {
 margin: 15px;
 padding: 0 !important;
 }

.btn-lg {
 font-size: 25px !important;
 }

.discount-coupon {
 font-weight: bold;
 color: #fff;
 background-color: #565656;
 padding: 5px;
 }

.slick-dotted.slick-slider {
 margin-top: 10px;
 }

.slick-slide {
 height: auto !important;
 }

.slick-next {
 right: -16px !important;
 }

.slick-prev {
 left: -16px !important;
 }
 

CSS padrão do Overlay tipo "OFERTA RELÂMPAGO":

.title {
 margin-bottom: 20px;
 color: #f01818;
 font-size: 23px;
 }

.main-line {
 margin-bottom: 20px;
 }

.counter-box {
 color: #fff;
 background: #f01818;
 border-radius: 10px;
 text-align: center;
 width: 180px;
 display: inline-block;
 }

.normal-price {
 color: #adada6;
 text-decoration: line-through;
 }

.promotion-price {
 font-size: 20px;
 font-weight: bold;
 color: #f01818;
 }

.product-image {
 width: 100%;
 }

body {
 background-color: transparent !important;
 text-align: center;
 }

.modal-body {
 margin: 15px;
 }

.logo {
 margin-top: 10px;
 }

.logo img {
 max-width: 66%;
 }


 .flip-clock-wrapper {
 margin-left: 0 !important;
 }

.flip-clock-wrapper ul {
 float: none !important;
 display: inline-block;
 }

.discount-coupon {
 font-weight: bold;
 color: #f01818;
 }

Customizando este CSS, é possível aproximar o Overlay com a identidade visual de sua loja virtual.

Tendo dúvidas, entre em contato conosco clicando aqui.