Documentação

MONTANDO UM TEMA

Somente é possível montar um pacote de tema baixando e editando um pacote de tema. No exemplo abaixo, foi usado como base o tema Minimalista.

Indice

Elementos básicos de uma loja virtual Elementos comuns no header Elementos comuns no footer Elementos comuns na home

ELEMENTOS BÁSICOS DE UMA LOJA VIRTUAL

A estrutura básica do tema do MercadoShops permite alteração, via html, de três partes da loja virtual: o cabeçalho/header (header.html) e o rodapé/footer (footer.html), que estarão presentes em todas as páginas, e a página principal/home (home.html).

ELEMENTOS COMUNS NO HEADER

O header é o cabeçalho da loja virtual e estará presente na página principal, páginas de categorias, páginas de produto, página de resultado de busca e carrinho.

LOGO (uso da variável $hasLogo)

No administrador do MercadoShops, deve-se inserir o logo da loja.

Administrador > Minha Loja > Logo

Esse logo será acessado pela variável $hasLogo nas páginas editáveis e nas páginas de checkout, a forma de uso dessa variável pode ser

#if( $hasLogo )
  <figure class="component img-logo">
    <a href="/" title="Inicio">
      <img src="/images/logo.jpg?" alt="loja" title=”loja" />
    </a>
  </figure>
#else
  <div class="component txt-logo">
    <a href="/" title="Inicio" class="logo">loja</a>
  </div>
#end

Caso nenhum logo seja cadastrado, o MercadoShops exibirá o nome da loja configurado em:

Minha Conta > Preferências > Dados

Mesmo que um logo seja carregado como uma imagem no pacote de arquivos, é importante que um logo seja cadastrado. Esse logo também será usado nas páginas de Checkout da plataforma.

CARRINHO (uso da variável $shopHasCart)

Essa variável é o botão que exibe o carrinho. O uso pode será assim:

#if( $shopHasCart )
  <div id="cart" class="component cartButton">
    <span id="mini-cart-container" class="bg-cart">
      <a href="/cart" title="Ver carrinho" rel="nofollow" class="ch-btn chsecondary button">Ver carrinho</a>
    </span>
  </div>
#end
MENU INSTITUCIONAL (uso da variável $menuItem e $menuItemList

As variáveis $menuItem e $menuItemList estão relacionadas aos itens do menu institucional, por exemplo as páginas: Quem Somos, Pagamento, Contato etc.

Para listar as páginas, deve-se usar as variáveis dessa forma:

<ul>
#foreach( $menuItem in $menuItemList )
  #if( $menuItem.isFirstItem )
  <li class="first_background">
    <a href="$menuItem.target" title="" class="link" dataname="$menuItem.name" data-isFirstItem="$menuItem.isFirstItem" datatarget="$menuItem.target" data-noFollow="$menuItem.noFollow" datalinkTarget="$menuItem.linkTarget">$menuItem.name</a>
  </li>
  #else
  <li class="background_institucional">
    <a href="$menuItem.target" #if($menuItem.noFollow) rel="nofollow" #end title="" class="link" target="$menuItem.linkTarget" data-name="$menuItem.name" data-isFirstItem="$menuItem.isFirstItem" data-target="$menuItem.target" datanoFollow="$menuItem.noFollow" datalinkTarget="$menuItem.linkTarget">$menuItem.name</a>
  </li>
  #end
#end
</ul>
BUSCA

Para a inserção do campo de busca, devemos criar um formulário em HTML, seguindo o modelo abaixo:

<div id="searchWrap" class="searchWrapper clearfix">
  <div class="component searchBar">
    <form id="searchForm" method="get" action="/jm/com.mercadoshops.web.frontend.page.PageController">
      <input type="hidden" name="view" value="result">
      <input id="search" type="search" name="q" value="" class="inputField">
      <input type="submit" value="Buscar" class="ch-btn chsecondary button">
    </form>
  </div>
</div>
MENU DE CATEGORIAS

Dentro da <DIV> destinada ao menu de navegação, a estrutura abaixo deve ser mantida. É importante notar que a estrutura tem 3 níveis de categorias e a recomendação é que os 3 níveis sejam mantidos.

<div class="navegacao_barra">
    <ul>
        #foreach( $categoryLevel1 in $level1CategoryList )
        <!-- 1º nível -->
        <li>
            #if( $selectedCategory == $categoryLevel1.id || $categoryLevel1.isInSelectedPath )
            <a href="$categoryLevel1.url" title="$categoryLevel1.name">$categoryLevel1.name</a>
            #else
            <a class="link link-categ" href="$categoryLevel1.url" title="$categoryLevel1.name"> $categoryLevel1.name </a>
            #end
            #if( $categoryLevel1.hasSubCategories )
            <!-- 2º nível -->
            <ul class="categoriesL2">
                #foreach( $categoryLevel2 in $categoryLevel1.subCategories )
                <li>
                    #if($selectedCategory == $categoryLevel2.id)
                    <a href="$categoryLevel2.url" title="$categoryLevel2.name">$categoryLevel2.name </a>
                    #else
                    <a class="link link-categ" href="$categoryLevel2.url" title="$categoryLevel2.name"> $categoryLevel2.name </a>
                    #end
                    #if( $categoryLevel2.hasSubCategories )
                    <!-- 3º nível -->
                    <ul class="categoriesL3">
                        #foreach( $categoryLevel3 in $categoryLevel2.subCategories )
                        <li>
                            #if($selectedCategory == $categoryLevel3.id)
                            <a href="$categoryLevel3.url" title="$categoryLevel3.name">$categoryLevel3.name </a>
                            #else
                            <a class="link link-categ" href="$categoryLevel3.url" title="$categoryLevel3.name"> $categoryLevel3.name</a>
                            #end
                        </li>
                        #end
                    </ul>
                    #end
                </li>
                #end
            </ul>
            #end
        </li>
        #end
    </ul>
</div>

Para criar um menu dropdown, e tornar o menu responsivo, pode-se seguir a estrutura abaixo:

<div class="navegacao_dropdown">
    #if( $hasOnlyOneCategory )
    <!-- se houver apenas 1 categoria, exibirá botão “Todos os produtos -->
    <a href="$uniqueCategory.url" class="no-categ link ch-btn ch-secondary
button">Todos os produtos</a>
    #else
    <!-- senão, exibirá menu dropdown -->
    <div id="categDrop" class="component categoriesList ch-dropdown">
        <p class="button">Categorias</p>
        <ul style="display:none;">
            <!-- lista as categorias de 1º nível -->
            #foreach ( $categoryLevel1 in $level1CategoryList )
            <li>
                <a href="$categoryLevel1.url">$categoryLevel1.name</a>
            </li>
            #end
        </ul>
    </div>
    #end
</div>

Cuidado ao manipular as classes do código acima. Algumas classes são usadas pelo script do MercadoShops para montar o menu dropdown.

Para a versão responsiva, deve-se copiar, para o arquivo personalized.css, o código CSS abaixo:

.navegacao_dropdown {
    display: none;
}

.navegacao_barra {
    display: block;
}

/* NAVEGAÇÃO MOBILE – max-width pode ser alterado conforme o grid */
@media screen and(max - width: 950 px) {
    .navegacao_dropdown {
        display: block;
    }
    .navegacao_barra {
        display: none;
    }
}

Novas propriedades podem ser inseridas nas regras.

O footer é o rodapé da loja virtual e estará presente na página principal, páginas de categorias, páginas de produto, página de resultado de busca e carrinho.

Alguns elementos podem ser repetidos no header, no footer e na home.

PAGAMENTO

O MercadoShops aceita, basicamente, o MercadoPago. Para colocar os selos de cartões e meios de pagamento aceitos pelo MercadoPago, a forma recomendada é:

Acessar o link abaixo, escolher o formato do banner, copiar o código e colar no HTML do footer da loja.

https://www.mercadopago.com/mlb/com.mercadopago.web.landing.LandingController?id=banners#!mediosde-pago

Como exemplo, temos o cógigo:

#if($!show_mp_methods)
<img src="https://imgmp.mlstatic.com/orgimg/MLB/MP/BANNERS/tipo2_468X60.jpg?v=1" alt="MercadoPago - Meios de pagamento" title="MercadoPago - Meios de pagamento" width="468" height="60"/>
#end

O código abaixo, encontrado no arquivo baixado, pode ser excluído.

#if(("BR" != "VE") && ($!show_mp_methods))
  <div class="component promoMP payMethod clearfix">
  <p class="pay-safe-column">Compre seguro com:</p>
  <ul class="banks-mlb clearfix">
    <li class="cards-mlb"><span class="visa-mlb">Visa</span></li>
    <li class="cards-mlb"><span class="master-mlb">MasterCard</span></li>
    <li class="cards-mlb"><span class="hipercardmlb">Hipercard</span></li>
    <li class="cards-mlb"><span class="elo-mlb">Elo</span></li>
  </ul>
  </div>
#end

Na aba “Meios de Pagamentos” (Administrador > Minha Conta > Preferências > Meios de Pagamento), é possível configurar alguns detalhes de pagamentos. Entretanto, o código acima fica contido no código e não é dinâmico.

DADOS

Os dados devem ser preenchidos no administrador da plataforma, em:

Minha Conta > Preferências > Dados

 

DADOS FISCAIS
#if($hasFiscalData)
  #if($fiscalData.companyName) <!—- NOME DA LOJA -->
    $SEU.escapeHtml($fiscalData.companyName)
  #end
  #if($fiscalData.documentNumber) <!—- DOCUMENTO -->
    #if($fiscalData.documentType)
      $SEU.escapeHtml($fiscalData.documentType): <!—- Tipo -->
    #end
    $SEU.escapeHtml($fiscalData.documentNumber) <!—- Número. -->
  #end
#end
DADOS DE CONTATO

No administrador, a opção “Mostrar meus dados de contato no rodapé da minha loja” deve estar marcada e o código deve ser usado.

#if($showContactFooter)
  #if( $showAddres ) <!—- Endereço -->
    $address
  #end
  #if( $showPhone ) <!—- Telefone de Contato -->
    $phone
  #end
#end

Link para o MercadosShops

Ainda no Footer, recomendamos o uso do link para o MercadoShops:

<a href="http://www.mercadoshops.com.br" target="_blank">MercadoShops</a>

ELEMENTOS COMUNS NA HOME

BANNER

Na aba “Página Principal” (Minha Loja > Página Principal) do administrador do MercadoShops é possível adicionar até 5 banners. Esse banners podem ter até 1mb e nos formatos .jpg, .gif e .png.

Com o código é possível exibir os banners cadastrado na Home do site:

<div class="banner">
    #if($showContent)
    <div class="box-content-list ch-g1">
        #if($showContentImage)
        <div class="ch-carousel" data-max-items="1">
            <ul class="content-list">
                #foreach ($contentImage in $contentImageList)
                <li style="height: $contentImageMaxHeight">
                    <article class="component article clearfix">
                        <figure>
                            <span>
                              #if($contentImage.hasLink)
                              <a href="$contentImage.link" rel="nofollow" target="_blank">
                              #end
                              		<img src="$contentImage.src" alt="$contentImage.alt">
                              #if($contentImage.hasLink)
                              </a>
                              #end
                            </span>
                        </figure>
                    </article>
                </li>
                #end
            </ul>
        </div>
        #elseif ($showContentText)
        <div>$contentText</div>
        #end
    </div>
    #end
</div>

No banner, alguns ajustes de CSS podem ser necessários, para o banner ocupar toda a largura da página, por exemplo, é preciso alterar as seguintes classes:

.ch-carousel ul {width: 100%}
.content-list li {margin: 0 auto; width: 100%;}

/* NAVEGAÇÃO MOBILE – desabilita a exibição do banner em mobile */
@media screen and (max-width: 950px) {
  .banner {display: none;}
}
VITRINES DE PRODUTOS

A página principal do MercadoShops tem 3 vitrines:

Essas vitrines são administradas dentro de “Minha Loja”, “Página Principal”.

Para as 3 vitrines, é importante adicionar a seguinte regra de correção do decimal no CSS:

.component .decimal {
  display: inline-block;
}

Os códigos listados podem estar dentro de uma div wrapper ou algum elemento para que a largura do grid seja respeitada. Além dessa div, pode ser inserido um título para as vitrines, por exemplo:

<h3 class="title-component">Novidades</h3>

A arquitetura básica de uma vitrine é:

Galeria de Produto (ul) > Produto Item (li)

Já o Produto Item, possuí uma arquitetura de exibição que pode ser modificada entre as vitrines:

Produto Item > Imagem do Produto > Título do Produto > Preço > Parcelamento

Além de outras informações, como promoções e frete.

ANÚNCIOS DESTACADOS

Essa vitrine está limitada a seleção de até 10 produtos em carrossel. O código para exibição dos anúncios

<section class="component prominentProd prodCarousel ch-g1">
    <div class="ch-carousel" data-max-items="$outstandingMaxItemsPerPage">
        <ul>
            #foreach ($outstandingItem in $outstandingItemList)
            <!-- Item -->
            <li>
                <article class="clearfix">
                    <!-- Título do Produto -->
                    <h2>
                        <a title="$outstandingItem.title" href="$outstandingItem.url" class="title">$outstandingItem.title</a>
                    </h2>
                    <figure>
                        <!-- Foto do Produto -->
                        <a href="$outstandingItem.url" title="$outstandingItem.title" class="link">
                        #if( $outstandingItem.hasImages )
                        <img src="$outstandingItem.imageUrl" alt="$outstandingItem.title" title="$outstandingItem.title">
                        #else
                        <img alt="Sem Foto" title="Sem Foto" src="$outstandingItem.imageUrl"/>
                        #end
                        </a>
                        <!-- Verifica se está em promoção e qual o tipo de desconto -->
                        #if($outstandingItem.hasPromotion)
                          #if($outstandingItem.promotion.isDiscountTypePrice)
                          <p class="promoRibbonHomeStarred"><span>$outstandingItem.promotion.discountPercent</span>&#37; <strong>OFF</strong></p>
                          #elseif ($outstandingItem.promotion.isDiscountTypeQuantity && "BR" != "BR")
                          <p class="promoRibbonHomeStarred"><strong class="promoQtyBuy">$outstandingItem.promotion.quantityTake<span class="promoQtyBuyX">x</span>$outstandingItem.promotion.quantityBuy</strong></p>
                          #end
                        #end
                    </figure>
                    #set ($galleryItem = $outstandingItem)
                    #set ($galleryPromotion = $outstandingItem.promotion)
                    <dl id="homePrice">
                        <!-- Detalhes do preço -->
                        #if ($galleryItem.hasPriceWithDiscount())
                        <del class="chprice price">
                            #end
                            <dd>
                                #if( $RegionalConfig.useDecimals($country) )
                                <span class="#if (!$galleryItem.hasPriceWithDiscount())ch-price #end price">
                                  $CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPrice()[0]<span class="decimal">,</span><sup>$galleryItem.getSplitPrice()[1]</sup>
                                </span>
                                #else
                                <span class="#if (!$galleryItem.hasPriceWithDiscount())ch-price #end price">
                                	CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPrice()[0]
                                </span>
                                #end
                            </dd>
                        #if ($galleryItem.hasPriceWithDiscount())
                        </del>
                        #end
                        #if ($galleryItem.hasPriceWithDiscount())
                        	#if ($galleryItem.hasPriceWithDiscount())
                            <ins>
                            #end
                            <dd>
                            #if( $RegionalConfig.useDecimals($country) )
                              <span class="ch-price price">
                                $CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPriceWithDiscount()[0]
                                <span class="decimal">,</span>
                                <sup>$galleryItem.getSplitPriceWithDiscount()[1]</sup>
                              </span>
                              #else
                              <span class="ch-price price">$CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPriceWithDiscount()[0]
                              </span>
                              #end
                              </dd>
                              #if ($galleryItem.hasPriceWithDiscount())
                                </ins>
                              #end
                            #end
                     </dl>
                    <!-- Parcelamento -->
                    #set ($psjItem = $outstandingItem)
                    #if($shop.hasDeductions() && $psjItem && $psjItem.preferredInstallment.isHasZeroRate() && $psjItem.preferredInstallment.installments > 1)
                    <div class="semjuros-container">
                        #set($price = $PriceUtils.getInstallmentsPriceWithDeduction($shop.locale.country, $psjItem.currencyId, $psjItem.discountPrice, $psjItem.preferredInstallment.installments))
                        <i class="ch-icon-credit-card"></i> $psjItem.preferredInstallment.installments $i18n.tr("cuotas de") #if($RegionalConfig.useDecimals($shop.locale.country))
                        <span class="ch-price price">
							$CurrencyHelper.getCurrencySymbol($shop.locale)
							$price[0]<span class="decimal">,</span><sup>$price[1]</sup>
                        </span>
                        #else
                        <span class="ch-price price">
						$CurrencyHelper.getCurrencySymbol($shop.locale)
						$price[0]
						</span>
                        #end
                        <span id="semjuros-installment-text" class="semjuros ms-promo-text__lower"> $i18n.tr("Sin interés")</span>
                    </div>
                    #end
                    #if($outstandingItem.hasPromotion && $outstandingItem.promotion.isDiscountTypeQuantity && "BR" == "BR")
                    <p class="promoTagMlb">Leve $outstandingItem.promotion.quantityTake pague $outstandingItem.promotion.quantityBuy
                    </p>
                    #end
                    <!-- Frete -->
                    #if($outstandingItem.hasPromotion && $outstandingItem.promotion.isFreeShipping && $outstandingItem.send)
                    <div class="promotionFreeShippingStarred">
                        <span class="arrow-left"></span>
                        <span class="freeShippingText">Frete grátis</span>
                    </div>
                    #end
                    <!-- Subtítulo -->
                    <div class="itemFeatures">
                        $outstandingItem.subtitle
                    </div>
                </article>
            </li>
            #end
        </ul>
    </div>
</section>
VITRINE DE NOVIDADES

Nessa vitrine o MercadoShops exibe 2 produtos selecionados no administrador da plataforma.

O código para exibição dessa vitrine é:

<div class="component newsProduct">
    <h3 class="title-component">Novidades</h3>
    <div class="ch-carousel" data-max-items="$newsMaxItemsPerPage">
        <ul class="list-prod">
            #foreach ($newsItem in $newsItemList)
            <li>
                <figure>
                    <a href="$newsItem.url">
                      #if($newsItem.hasImages)
                      <img src="$newsItem.imageUrl" title="$newsItem.title" />
                      #else
                      <img src="$newsItem.imageUrl" alt="Sem Foto" title="Sem Foto">
                      #end
                      #if( $newsItem.showLastAvailable )
                      <span class="lastProd last-BR">Últimos disponíveis</span>
                      #end
                    </a>
                    #if($newsItem.hasPromotion)
                      #if($newsItem.promotion.isDiscountTypePrice)
                      <p class="promoRibbonNews"><span>$newsItem.promotion.discountPercent</span>&#37;
                          <strong>OFF</strong>
                      </p>
                      #elseif ($newsItem.promotion.isDiscountTypeQuantity && "BR" != "BR")
                      <p class="promoRibbonNews"><strong class="promoQtyBuy">$newsItem.promotion.quantityTake<span class="promoQtyBuyX">x</span>$newsItem.promotion.quantityBuy</strong></p>
                      #end
                    #end
                </figure>
                <h2><a href="$newsItem.url" title="$newsItem.title" class="title">$newsItem.title</a></h2>
                #set ($galleryItem = $newsItem) #set ($galleryPromotion = $newsItem.promotion)
                <dl id="homePrice">
                    #if ($galleryItem.hasPriceWithDiscount())
                    <del class="ch-price price">
                    #end
                      <dd>
                        #if( $RegionalConfig.useDecimals($country) )
                        <span class="#if(!$galleryItem.hasPriceWithDiscount())ch-price #end price">
                          $CurrencyHelper.getCurrencySymbol("$shop.locale.country","$galleryItem.currencyId") $galleryItem.getSplitPrice()[0]<span class="decimal">,</span><sup>$galleryItem.getSplitPrice()[1]</sup>
                        </span>
                        #else
                        <span class="#if(!$galleryItem.hasPriceWithDiscount())ch-price #end price">
                          $CurrencyHelper.getCurrencySymbol("$shop.locale.country","$galleryItem.currencyId") $galleryItem.getSplitPrice()[0]
                        </span>
                        #end
                      </dd>
                    #if ($galleryItem.hasPriceWithDiscount())
                    </del>
                    #end
                    #if ($galleryItem.hasPriceWithDiscount())
                        #if ($galleryItem.hasPriceWithDiscount())
                        <ins>
                        #end
                    <dd>
                    #if( $RegionalConfig.useDecimals($country) )
                    <span class="ch-price price">
                      $CurrencyHelper.getCurrencySymbol("$shop.locale.country","$galleryItem.currencyId") $galleryItem.getSplitPriceWithDiscount()[0]<span class="decimal">,</span><sup>$galleryItem.getSplitPriceWithDiscount()[1]</sup>
                    </span>
                    #else
                    <span class="ch-price price">
                      $CurrencyHelper.getCurrencySymbol("$shop.locale.country","$galleryItem.currencyId") $galleryItem.getSplitPriceWithDiscount()[0]
                    </span>
                    #end
                    </dd>
                      #if ($galleryItem.hasPriceWithDiscount())
                      </ins>
                      #end
                    #end
                </dl>
                #set ($psjItem = $newsItem)
                #if($shop.hasDeductions() && $psjItem && $psjItem.preferredInstallment.isHasZeroRate() && $psjItem.preferredInstallment.installments > 1)
                <div class="semjuros-container">
                    #set($price = $PriceUtils.getInstallmentsPriceWithDeduction($shop.locale.country, $psjItem.currencyId, $psjItem.discountPrice, $psjItem.preferredInstallment.installments))
                    <i class="ch-icon-credit-card"></i> $psjItem.preferredInstallment.installments $i18n.tr("cuotas de")
                    #if($RegionalConfig.useDecimals($shop.locale.country))
                    <span class="ch-price price">$CurrencyHelper.getCurrencySymbol($shop.locale)$price[0]<span class="decimal">,</span><sup>$price[1]</sup></span>
                    #else
                    <span class="ch-price price">$CurrencyHelper.getCurrencySymbol($shop.locale)$price[0]</span>
                    #end
                    <span id="semjuros-installment-text" class="semjuros mspromo-text__lower">$i18n.tr("Sin interés")</span>
                </div>
                #end
            </li>
            #end
        </ul>
    </div>
</div>
GALERIA

A galeria é a principal vitrine do MercadoShops. Exibe até 12 produtos, selecionados ou aleatórios.

O código para exibição dessa vitrine é:

<nav class="component itemGallery clearfix">
    <h3 class="title-component">Galeria de Produtos</h3>
    <ul class="item-gallery">
		#foreach ($galleryItem in $galleryItemList)
        <li class="background $promotionCssClass">
            <article class="clearfix $promotionCssClass">
                <h2> <a href="$galleryItem.url" title="$galleryItem.title" class="title">$galleryItem.title</a> </h2>
                <ul class="itemData clearfix">
                    <li>
                        <figure class="background">
                          	<a class="link" title="$galleryItem.title" href="$galleryItem.url">
                              	#if( $galleryItem.hasImages )
                              	<img class="" alt="$galleryItem.title" title="$galleryItem.title" src="$galleryItem.imageUrl">
                                #else
                                <img class="" alt="Sem Foto" title="Sem Foto" src="$galleryItem.imageUrl">
                                #end
                                #if( $galleryItem.showLastAvailable )
                                <span class="lastProd last-BR">Últimos disponíveis </span>
                                #end
                            </a>
                            #if($galleryItem.hasPromotion)
                            	#if($galleryItem.promotion.isDiscountTypePrice)
	                            <p class="promoRibbonHome"><span>$galleryItem.promotion.discountPercent</span>&#37; <strong>OFF</strong> </p>
                                #elseif ($galleryItem.promotion.isDiscountTypeQuantity && "BR" != "BR")
	                            <p class="promoRibbonHome"><strong class="promoQtyBuy">$galleryItem.promotion.quantityTake<span class="promoQtyBuyX">x</span>$galleryItem.promotion.quantityBuy</strong></p>
                                #end
                            #end
                        </figure>
                    </li>
                    #set ($galleryPromotion = $galleryItem.promotion)
                    <dl id="homePrice">
                    	#if ($galleryItem.hasPriceWithDiscount())
                      	<del class="ch-price price">
                        #end
                        <dd>
                    		#if( $RegionalConfig.useDecimals($country) )
                          	<span class="#if (!$galleryItem.hasPriceWithDiscount())ch-price#end price">
                        		$CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPrice()[0]<span class="decimal">,</span><sup>$galleryItem.getSplitPrice()[1]</sup>
                            </span>
                            #else
                           	<span class="#if (!$galleryItem.hasPriceWithDiscount())ch-price#end price">
                              	$CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPrice()[0]
                            </span>
                           	#end
                    	</dd>
                        #if ($galleryItem.hasPriceWithDiscount())
                        </del>
                        #end
                        #if ($galleryItem.hasPriceWithDiscount())
                        	#if ($galleryItem.hasPriceWithDiscount())
                            <ins>
                            #end
                              <dd>
                              #if( $RegionalConfig.useDecimals($country) )
                              <span class="ch-price price">
                                  $CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPriceWithDiscount()[0]<span class="decimal">,</span><sup>$galleryItem.getSplitPriceWithDiscount()[1]</sup>
                              </span>
                              #else
                                  <span class="ch-price price">
                                      $CurrencyHelper.getCurrencySymbol("$shop.locale.country", "$galleryItem.currencyId") $galleryItem.getSplitPriceWithDiscount()[0]
                                  </span>
                              #end
                              </dd>
                            #if ($galleryItem.hasPriceWithDiscount())
                            </ins>
                            #end
                        #end
                    </dl>
                    #set ($psjItem = $galleryItem)
                    #if($shop.hasDeductions() && $psjItem && $psjItem.preferredInstallment.isHasZeroRate() && $psjItem.preferredInstallment.installments > 1)
                    <div class="semjuros-container">
                    	#set($price = $PriceUtils.getInstallmentsPriceWithDeduction($shop.locale.country, $psjItem.currencyId, $psjItem.discountPrice, $psjItem.preferredInstallment.installments)) <i class="ch-icon-credit-card"></i> $psjItem.preferredInstallment.installments $i18n.tr("cuotas de")
                    	#if($RegionalConfig.useDecimals($shop.locale.country))
                    	<span class="ch-price price"> $CurrencyHelper.getCurrencySymbol($shop.locale) $price[0]<span class="decimal">,</span><sup>$price[1]</sup> </span>
                    	#else
                        <span class="ch-price price"> $CurrencyHelper.getCurrencySymbol($shop.locale) $price[0] </span>
	                    #end
                        <span id="semjuros-installment-text" class="semjuros mspromo-text__lower"> $i18n.tr("Sin interés") </span>
                    </div>
                    #end
                    #if($galleryItem.hasPromotion && $galleryItem.promotion.isDiscountTypeQuantity && "BR" == "BR")
                    <p class="promoTagMlb">Leve $galleryItem.promotion.quantityTake pague $galleryItem.promotion.quantityBuy</p>
                    #end
                    #if($galleryItem.hasPromotion && $galleryItem.promotion.isFreeShipping && $galleryItem.send)
                    <div class="promotionFreeShippingSmall">
                      <span class="arrow-left"></span> <span class="freeShippingText"> Frete grátis </span>
                    </div>
                    #end
                </ul>
            </article>
        </li>
    	#end
	</ul>
</nav>
OUTROS ELEMENTOS

Nos arquivos do pacote de tema do MercadoShops, podem ser inseridos diretamente em html, elementos que não serão administrados pela plataforma, como por exemplo: links para redes sociais, scripts de Facebook e outras redes sociais, outros dados de contato, banners etc..

Vale lembrar que, se esses elementos estáticos possuírem imagens, essas imagens deverão estar na pasta de imagens (descrita em “Conteúdo dos pacotes de tema”) ou hospedadas em outro servidor.

OUTRAS PÁGINAS

A alteração em outras páginas, como página de categoria, produtos, carrinho etc., deve ser feita via CSS, copiando as classes para o arquivos personalized.css (ver Modificações para páginas não editáveis).