I Nyehandel kan du skriva din egen HTML-kod och på så sätt skapa en helt unik design för din butik. Den viktiga datan, till exempel produkter, priser och varukorg, ligger i färdiga komponenter som du placerar ut med variabler. Därför följer din butik automatiskt med i våra uppdateringar, även när du har en egen design.
Under varje del nedan hittar du de variabler som finns och vår standardmall. Mallen kan du använda som utgångspunkt.
Skriv egen HTML för en del av butiken
Så anpassar du designen för till exempel header, footer eller produktsida:
Gå till Layout -> Hantera
Välj den del av butiken som du vill anpassa
Utgå från standardmallen nedan och skriv din egen HTML runt variablerna
Placera ut variablerna där du vill att respektive komponent ska visas, till exempel
[#logo]eller[#basket-icon]Klicka på Spara
Din egen design visas sedan i butiken, och komponenterna fortsätter att uppdateras automatiskt.
Header
Följande variabler finns för headern:
[#account-icon], [#alternative-navigation], [#basket-icon], [#brand-model-year-search], [#channel-select], [#currency-select], [#customer-type-select], [#customer-type-switch], [#default-header], [#favorite-icon], [#hamburger], [#logo], [#mobile-search], [#navbar], [#reviews-total], [#search], [#search-car-id], [#social-links], [#usp]
<div class="main">
<div class="container">
<div class="left">
[#logo]
</div>
<div class="center">
[#search]
</div>
<div class="right">
<div class="actions">
[#mobile-search]
[#favorite-icon]
[#account-icon]
[#basket-icon]
[#hamburger]
</div>
</div>
</div>
</div>
[#navbar]
Vill du behålla vår vanliga header lägger du bara in [#default-header]
Main
Följande variabler finns för huvudinnehållet:
[#campaign-bar], [#default-main], [#main-content]
[#campaign-bar]
[#main-content]
Om du bara vill lägga egen HTML runt huvudinnehållet kan du använda [#default-main]. Den ger vårt vanliga beteende.
Footer
Följande variabler finns för footern:
[#account-icon], [#basket-icon], [#channel-select], [#currency-select], [#customer-type-select], [#customer-type-switch], [#default-footer], [#footer-account-links], [#footer-pages], [#hamburger], [#logo], [#mobile-search], [#navbar], [#reviews-total], [#search], [#social-links]
<footer class="page-footer">
<div class="container">
<div class="components">
<div class="component">
[#footer-pages]
</div>
<div class="component">
[#footer-account-links]
</div>
<div class="component">
[#social-links]
</div>
</div>
</div>
</footer>
Vill du behålla vår vanliga footer lägger du bara in [#default-footer].
Kategorisida
Följande variabler finns för kategorisidan:
[#aside], [#bottom-description], [#default-category], [#description], [#hello-retail], [#horizontal-filter], [#image], [#products], [#sort], [#sub-categories], [#tree], [#vertical-filter], [#viewed-products]
[#description]
<div class="container">
<section class="main-container category has-sidebar">
[#aside]
<div class="main-content">
[#horizontal-filter]
[#sort]
<section>
[#sub-categories]
[#products]
</section>
</div>
</section>
</div>
Vill du behålla vår vanliga kategorisida lägger du bara in [#default-category].
Produktsida
Följande variabler finns för produktsidan:
[#accessories], [#accordion], [#base-data], [#brand], [#buy-form], [#campaign-badge], [#categories], [#collections], [#description], [#energy-label], [#featured-properties], [#files], [#gtin], [#images], [#inventory-status], [#lipscore-list], [#lipscore-rating], [#lowest-price-information], [#meta], [#name], [#ncs-color-picker], [#package], [#packaging-code], [#price], [#prices], [#product-form-fields], [#product-question], [#product-question-form], [#product-questions], [#product-score], [#properties], [#review-stars], [#reviews], [#ribbons], [#short-description], [#similar-products], [#size-guide], [#sku], [#specification], [#tabs], [#usp], [#value-pack], [#variants], [#vehicle-fitment], [#viewed-products], [#walley-widget], [#youtube-videos]
<article class="section">
<div class="container product-detail">
<div class="product-detail__media">
[#images]
[#ribbons]
</div>
<div class="product-detail__information">
[#brand]
[#name]
<div class="price-features flex-with-pipe">
[#price]
[#review-stars]
</div>
[#package]
[#short-description]
[#variants]
[#featured-properties]
[#product-form-fields]
[#collections]
<div class="meta-usp-buy-container">
[#meta]
[#buy-form]
</div>
[#campaign-badge]
[#prices]
[#accessories]
</div>
</div>
<hr/>
<div class="container">
<div class="product-information" id="product-information">
<div>
[#similar-products]
</div>
<div>
[#accordion]
[#categories]
</div>
</div>
</div>
</article>
<hr/>
[#viewed-products]
Med variablerna kan du flytta, ta bort eller lägga till delar på produktsidan efter behov.
Produktbox
Följande variabler finns för produktboxen, alltså produktkorten i listor och kategorier:
[#brand], [#buy-form], [#buy-form-with-variants], [#energy-label], [#favorite], [#featured-properties], [#featured-rating], [#gtin], [#image], [#inventory], [#inventory-status], [#name], [#offer], [#package-size], [#packaging-code], [#primary-category], [#reviews], [#ribbons], [#short-description], [#sku], [#sku_code]
[#image]
<div class="details-wrapper">
<div class="details">
[#reviews]
[#brand]
[#primary-category]
[#name]
[#sku]
[#short-description]
[#featured-properties]
[#offer]
[#package-size]
</div>
[#inventory-status]
[#buy-form]
</div>
[#ribbons]
[#favorite]
Ändringarna slår igenom på alla produktkort i butiken.
Mobilmeny
Följande variabler finns för mobilmenyn:
[#alternative-navigation], [#close-menu], [#main-navigation], [#search]
Tack-/kvittosidan
På tack-/kvittosidan finns orderdata som du kan använda, till exempel för spårning eller konverteringsskript:
[var::currency]– valutan på ordern[var::sub_total]– totalsumma exklusive moms, frakt och avgifter[var::discount_code]– eventuell rabattkod[var::display_id]– ordernummer[var::total]– ordervärde inklusive moms[var::email_md5]– kundens e-postadress, md5-hashad
Variablerna ersätts automatiskt med värdena från den aktuella ordern.
Tips: Börja med att kopiera standardmallen för den del du vill ändra och justera den steg för steg.
Om du bara vill lägga egen HTML runt en befintlig del kan du använda default-variablerna, till exempel [#default-header], och behålla vårt vanliga beteende.
