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.