Para facilitar la personalización de la identidad visual de su tienda virtual, disponimos de la capaOverlay SmartHint CSS patrón para que sea posible esta personalización.

Abajo, used encontrará el Overlay SmartHint CSS patrón en los dos formatos. Son ellos:

OVERLAY “NO TE VAYAS” E “PROMOción RELÂMPAGO”.

Em caso de dudas o de retornar para el CSS padrão, basta copiar el código abajo y colocar en el campo “Regras de CSS” en laconfiguración del Overlay.

CSS patrón do Overlay tipo “NO TE VAYAS”:

.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 patrón del 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;
 }

Personalizando este CSS, es posíble aproximar el Overlay con la identidad visual de su tienda virtual.

Si usted tiene dudas, entre en contacto con nosotros haciendo clic aqui.

Compartilhar: