API tools faq
paste
rodrigohax

MercadoLibre v2 - Liquid

rodrigohax
Jul 28th, 2025
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.88 KB | None | 0 0
raw download clone embed print report
  1. <!--INICIO SELLO MERCADO LIBRE-->
  2. <style>
  3.  
  4. .mp_platinum {
  5.  
  6.     min-width: 290px;
  7.     max-width: 100%;
  8.     margin: 20px auto 0;
  9.     padding: 10px;
  10.     border: 0px solid #0000001a;
  11.     border-radius: 10px;
  12.     box-shadow: 0px 8px 4px -4px /*#e5e5e5*/ #fff;
  13.  
  14. }
  15.  
  16. .mp_platinum li {
  17.     list-style: none;
  18. }
  19.  
  20. .mp_platinum p {
  21.     margin: 5px;
  22. }
  23.  
  24. .ui-box-component-pdp__visible--desktop {
  25.     width: 100%;
  26.     border-radius: 8px;
  27.     border: 1px solid rgba(0,0,0,.1);
  28.     margin: 24px 0;
  29.     padding: 32px 16px 24px;
  30. }
  31.  
  32. .ui-seller-info__status-info {
  33.     display: -webkit-flex;
  34.     display: flex;
  35.     margin-bottom: 20px;
  36. }
  37.  
  38. .ui-seller-info__status-info__icon {
  39.     margin: 2px 10px 0 0;
  40.     width: 20px;
  41.     text-align: center;
  42. }
  43.  
  44. .ui-pdp-color--GREEN.ui-pdp-icon {
  45.     fill: #00a650;
  46. }
  47.  
  48. .ui-pdp-seller__status-title {
  49.  
  50.     font-size: 16px;
  51.     font-weight: 600;
  52.     color: #00a650;
  53.     padding: 0;
  54.     margin: 2px 0 -12px 0 !important;
  55.  
  56. }
  57.  
  58. .ui-seller-info__status-info__subtitle {
  59.  
  60.     font-size: 14px;
  61.     color: rgba(0,0,0,.55);
  62.     margin: 5px 0 0 0 !important;
  63.  
  64. }
  65.  
  66. .ui-thermometer {
  67.  
  68.     width: 100%;
  69.     height: auto;
  70.     margin: 0;
  71.     padding: 0;
  72.     -webkit-appearance: none;
  73.     -moz-appearance: none;
  74.     appearance: none;
  75.     overflow: hidden;
  76.     display: block;
  77.     -moz-box-sizing: border-box;
  78.     box-sizing: border-box;
  79.     vertical-align: baseline;
  80.    
  81. }
  82.  
  83. .ui-thermometer__level {
  84.     width: 20%;
  85.     height: 8px;
  86.     margin-top: 2px;
  87.     -moz-box-sizing: border-box;
  88.     box-sizing: border-box;
  89.     float: left;
  90.     border-left: 6px solid #fff;
  91. }
  92.  
  93. .ui-thermometer__level--1 {
  94.     background: #fddbdb;
  95. }
  96.  
  97. .ui-thermometer__level--2 {
  98.     background: #ffe0b8;
  99. }
  100.  
  101. .ui-thermometer__level--3 {
  102.     background: #fff8a5;
  103. }
  104.  
  105. .ui-thermometer__level--4 {
  106.     background: #ccff5d;
  107. }
  108.  
  109. .ui-thermometer[value="5"] .ui-thermometer__level--5 {
  110.     height: 12px;
  111.     margin: 0;
  112.     background: linear-gradient(to top,#09a149, #19c461);
  113. }
  114.  
  115. .ui-pdp-seller__reputation-info {
  116.     margin-top: 16px;
  117. }
  118.  
  119. .ui-pdp-seller__list-description {
  120.  
  121.     display: -webkit-flex;
  122.     display: flex;
  123.     justify-content: center;
  124.     margin: 0;
  125.     padding: 0;
  126.  
  127. }
  128.  
  129. .ui-pdp-seller__item-description {
  130.  
  131.     display: -webkit-flex;
  132.     display: flex;
  133.     -webkit-flex-direction: column;
  134.     flex-direction: column;
  135.     -webkit-align-items: center;
  136.     align-items: center;
  137.     text-align: center;
  138.     font-size: 12px;
  139.     position: relative;
  140.     line-height: 1;
  141.     padding: 8px 5px;
  142.    
  143. }
  144.  
  145. .ui-pdp-seller__sales-description {
  146.     font-size: 24px;
  147.     color: #000;
  148.     line-height: 1.2;
  149.     font-weight: 400;
  150.     display: block;
  151. }
  152.  
  153. .ui-pdp-seller__text-description {
  154.     margin-top: 8px;
  155.     line-height: 1;
  156. }
  157.  
  158. .ui-pdp-seller__item-description:after {
  159.     background: #ddd;
  160.     content: "";
  161.     height: 91%;
  162.     position: absolute;
  163.     right: 0;
  164.     top: 8%;
  165.     width: 1px;
  166. }
  167.  
  168. .ui-pdp-seller__item-description:last-of-type:after {
  169.     display: none;
  170. }
  171.  
  172. .ui-pdp-seller__icon-description {
  173.     display: inline-block;
  174.     width: 28px;
  175.     padding-top: 3px;
  176.     vertical-align: top;
  177. }
  178.  
  179. .ui-pdp-icon, .ui-pdp-icon--shipping {
  180.     fill: rgba(0,0,0,.25);
  181. }</style>
  182. <div class="mp_platinum">
  183.  
  184.  
  185.  
  186. <div class="ui-seller-info">
  187.  
  188.     <!-- Inicio del termometro  -->
  189.  
  190.     <ul aria-hidden="true" class="ui-thermometer" value="5">
  191.         <li class="ui-thermometer__level ui-thermometer__level--1"></li>
  192.         <li class="ui-thermometer__level ui-thermometer__level--2"></li>
  193.         <li class="ui-thermometer__level ui-thermometer__level--3"></li>
  194.         <li class="ui-thermometer__level ui-thermometer__level--4"></li>
  195.         <li class="ui-thermometer__level ui-thermometer__level--5"></li>
  196.     </ul>
  197.    
  198.     <!-- Final del termometro  -->
  199.      
  200.     <div class="ui-pdp-seller__reputation-info">
  201.         <ul class="ui-pdp-seller__list-description">
  202.             <li class="ui-pdp-seller__item-description">
  203.              
  204.  
  205.             <!-- Inicio cantidades de ventas  -->
  206.  
  207.             <strong class="ui-pdp-seller__sales-description">5.249</strong>
  208.  
  209.             <!-- Final cantidades de ventas  -->
  210.              
  211.                 <p class="ui-pdp-seller__text-description">Pedidos entregados en los últimos 60 días</p>
  212.             </li>
  213.             <li class="ui-pdp-seller__item-description">
  214.                 <strong aria-hidden="true" class="ui-pdp-seller__icon-description">
  215.                     <svg class="ui-pdp-icon ui-pdp-icon--message-positive ui-pdp-color--REP_SELLER_ATTENTION_GOOD" viewBox="0 0 29 24" xmlns="http://www.w3.org/2000/svg">
  216.                         <g fill-rule="evenodd" fill="none">
  217.                             <path d="M6.747 21.511l4.538-3.518h8.238c1.032 0 1.868-.98 1.868-2.19V3.21c0-1.21-.836-2.19-1.868-2.19H3.173c-1.032 0-1.869.98-1.869 2.19v14.077c0 .39.316.706.706.706H5.61v2.96a.706.706 0 0 0 1.138.558z" stroke-width="1.5" stroke="#333"></path>
  218.                             <g transform="translate(14 9)">
  219.                                 <circle cx="7.5" cy="7.5" r="7.5" fill="#39B54A"></circle>
  220.                                 <g stroke-linecap="round" stroke-width="1.059" stroke="#FFF"><path d="M3.75 7.5l2.445 2.445M6.25 9.89L11.14 5"></path></g>
  221.                             </g>
  222.                         </g>
  223.                     </svg>
  224.                 </strong>
  225.                 <p class="ui-pdp-seller__text-description">Brinda buena atención</p>
  226.             </li>
  227.             <li class="ui-pdp-seller__item-description">
  228.                 <strong aria-hidden="true" class="ui-pdp-seller__icon-description">
  229.                     <svg class="ui-pdp-icon ui-pdp-icon--time-positive ui-pdp-color--REP_SELLER_DELIVERY_TIME_GOOD" viewBox="0 0 30 26" xmlns="http://www.w3.org/2000/svg">
  230.                         <g fill-rule="evenodd" fill="none">
  231.                             <g transform="translate(1 .02)" stroke="#333">
  232.                                 <ellipse cx="10.5" cy="13.714" rx="10.5" ry="10.286" stroke-width="1.286"></ellipse>
  233.                                 <path d="M19.107 13.714h-1.59M3.42 13.714H1.83M10.5 5.143v1.59M10.563 20.571v1.59M10.5.857v2.484M8.75.857h3.637M10.313 8.801v4.944H5.24" stroke-linecap="round" stroke-width="1.102"></path>
  234.                             </g>
  235.                             <g transform="translate(15 10.02)">
  236.                                 <circle cx="7.5" cy="7.5" r="7.5" fill="#39B54A"></circle>
  237.                                 <g stroke-linecap="round" stroke-width="1.059" stroke="#FFF"><path d="M3.75 7.5l2.445 2.445M6.25 9.89L11.14 5"></path></g>
  238.                             </g>
  239.                         </g>
  240.                     </svg>
  241.                 </strong>
  242.                 <p class="ui-pdp-seller__text-description">Entrega sus productos a tiempo</p>
  243.             </li>
  244.         </ul>
  245.     </div>
  246. </div>
  247.  
  248. </div>
  249. <!--FINAL - SELLO DE MERCADO LIBRE-->
  250.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!