Hoppa till huvudinnehåll
Alla samlingarLayout (Temadesigner)
Hur designar jag med egen html?
Hur designar jag med egen html?
Uppdaterad för mer än 3 månader sedan

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]

  • [#prices]

  • [#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]

Tack/Kvittosidan

Tillgängliga variabler

  • [var::total] (= Ordervärde inkl.moms )

  • [var::display_id] (= Order.nr )

  • [var::discount_code] (= Eventuell rabattkod)

  • [currency] (=Valuta på order)

  • [sub_total] (=Total exkl. moms, frakter och avgifter)

Fick du svar på din fråga?