Simples e Seguro.
Escolha o tipo:
Insira este código no header da sua loja
Copiar
Para "construir" a vitrine em seu site, será necessário inserir o código abaixo:
Copiar
Mas não basta só o html, ela precisa de cor, customização. Para isso acontecer, você deve inserir o css abaixo, sofisticando a vitrine:
#primecase-info-taxa-descricao {
cursor: pointer;
}
#primecase-multiplicador-value {
padding: 0px 10px;
}
.primecase-box-impostos {
display: flex;
cursor: pointer;
padding: 0px 10px;
font-size: 15px;
flex-direction: row;
width: 100%;
justify-content: space-between;
}
.primecase-box-impostos span {
font-weight: 500;
}
.primecase-custom-tooltip {
cursor: pointer;
--bs-tooltip-bg: #e08e3e;
--bs-tooltip-color: #fff;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.botoes {
min-width: 180px;
margin: 20px 10px 0px 0px;
display: block;
}
.tiposOperacao {
display: flex;
}
#img-moeda-real {
width: 30px;
}
.mbr-section-title {
color: #98dee8;
}
#selected-moeda-descricao {
font-weight: 500;
}
.input-group-text {
display: none;
}
.mbr-fallback-image.disabled {
display: none;
}
.hide-primecase {
visibility: hidden;
position: fixed;
top: -100vh;
}
.containerVitrine {
position: relative;
z-index: 1;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
background: white;
padding: 16px 24px;
border-radius: 15px;
max-width: 415px;
}
.card {
z-index: 1;
}
.prime-button {
opacity: .7;
width: 100%;
margin-left: auto;
background: #000 !important;
color: white !important;
font-size: 14px !important;
display: flex;
border-radius: 0 !important;
margin: 0px;
border: 1px solid #fff;
padding: 12px 5px !important;
}
.check {
opacity: 1;
}
.custom-box-moeda {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 0.4rem;
}
.custom-box-moeda:hover {
cursor: pointer;
}
.custom-box-img {
height: 1.2rem;
}
.custom-box-img-list {
height: 1rem;
width: 30px;
}
.custom-box-list-moeda {
list-style: none;
position: absolute !important;
width: 300px;
z-index: 2;
padding: 0;
margin: 0;
box-shadow: 0 0 40px rgba(69, 71, 69, 0.2);
background-color: #ffffff;
}
.custom-box-list-moeda li {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
gap: 0.4rem;
color: #333;
height: 50px;
border-bottom: 1px solid #f2f2f2;
box-sizing: border-box;
padding-left: 16px;
padding-top: 8px;
padding-bottom: 8px;
}
.custom-box-list-moeda li:hover {
background-color: rgba(242, 242, 242, 0.4);
cursor: pointer;
}
.custom-box-list-moeda li:last-child {
border: none;
}
.primecase-tarifas {
height: auto;
width: 100%;
}
.more-view {
cursor: pointer;
}
Copiar
Após inserir o código HTML para construir o esqueleto e o CSS, precisamos agora inserir o JAVASCRIPT para todo o mecanismo funcionar.
Insira esse código no final do body.
<script src="https://hlg-ecommerce-par-web.primecase.com.br/scripts/vitrineExterna.js"></script>
Copiar
Copiado