För att skapa en unik design av din butik hos nyehandel så har vi öppnat upp möjligheten för dig att själv skriva din egen html kod. För att du också ska följa med i våra uppdateringar har vi isolerat den viktiga datan i enkla komponenter. För varje del nedan har vi lagt in vår standard mockup så att det ska bli så tydligt som möjligt.
Header
Tillgängliga variabler
[#logo]
[#search]
[#channel-select]
[#currency-select]
[#navbar]
[#hamburger]
[#account-icon]
[#basket-icon]
[#favorite-icon]
[#customer-type-select]
[#social-links]
[#usp]
[#default-header]
<header id="store-header">
<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]
</header>
Main
Tillgängliga variabler
[#campaign-bar]
[#default-main]
[#main-content]
[#campaign-bar]
[#main-content]
// Du kan också bara använda [#default-main] som då är vårt vanliga beteende om du vill omringa main med något.
Footer
Tillgängliga variabler
[#logo]
[#search]
[#channel-select]
[#currency-select]
[#navbar]
[#social-links]
[#footer-pages]
[#footer-account-links]
[#default-footer]
<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>
Kategorisida
Tillgängliga variabler
[#image]
[#description]
[#vertical-filter]
[#horizontal-filter]
[#aside]
[#viewed-products]
[#tree]
[#products]
[#sort]
[#sub-categories]
[#default-category]
[#description]
<div class="container">
<section class="main-container category has-sidebar">
[#aside]
<div class="main-content">
<section>
[#sub-categories]
[#products]
</section>
</div>
</section>
</div>
Produktsida
Tillgängliga variabler
[#images]
[#brand]
[#name]
[#price]
[#buy-form]
[#meta]
[#prices]
[#description]
[#ribbons]
[#short-description]
[#categories]
[#accessories]
[#properties]
[#featured-properties]
[#package]
[#viewed-products]
[#youtube-videos]
[#reviews]
[#review-stars]
[#usp]
[#variants]
[#accordion]
[#similar-products]
[#product-questions]
[#product-question-form]
[#campaign-badge]
[#tabs]
[#inventory-status]
[#value-pack]
[#collections]
[#product-form-fields]
[#lowest-price-information]
[#lipscore-rating]
[#lipscore-list]
[#size-guide]
<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]
Produktbox
Tillgängliga variabler
[#name]
[#reviews]
[#brand]
[#primary-category]
[#inventory-status]
[#featured-properties]
[#image]
[#sku]
[#short-description]
[#buy-form]
[#package-size]
[#ribbons]
[#favorite]
[#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]
Mobilmeny
Tillgängliga variabler
[#search]
[#close-menu]
[#main-navigation]
[#alternative-navigation]