Design & Customization

Any kind of customization is possible and it’s quick and easy. The following pages cover from the basics of appearance to edit the design template and styling files.

Appearance

Click on «Customize» to easily change the basic appearance of your boutique like typography, colors and background image. These settings will be conveniently shared among any other design that you may pick up later.

Design_appearance

Changing favicon.ico

The «favicon.ico» is the small image that appears in the URL bar of your browser. It can be any image, we suggest using transparent PNG. Favicons are displayed in 16x16 size. It can be changed any time from «Customize».

Set up a different default page

By default, all boutiques are set to «Arrivals» as default page. You can customize this and use any possible page like sales, designers, or any page or collection you already created. You may be interested for example in setting your latest collection as your default page.

Design_defaultpage

Picking a Template

You can pick from a list of different designs of templates for your boutique. You can simply apply the changes by clicking on them.

Design_template

A template consists of two parts: an HTML with structure and a styling file. Both can be totally editable as is explained below.

Customizing Code

Based on any design of your choice, you can customize the template HTML code and the styling too.

We created an easy and simple method with a group of tags to cover most cases. We wanted to give absolute freedom to adapt any boutique to any desired layout.

This is a sample of a minimal template structure that covers all cases of a boutique.

<!DOCTYPE html>
<html>
<head>
  {trendnu_styles_and_scripts}
</head>

<body>
  <header>
    {boutique_logo#200}
  </header>

  <nav>
    <ul>
      {nav_bag}
      {nav_new_arrivals}
      {nav_gender}
      {nav_sales}
      
      {nav_designers_list}
      {nav_categories_list}
      {nav_collections_list}
      {nav_pages_list}
    </ul>
  </nav>

  <section>

  {list}
    {product}
    <article>
      <p>{product_thumbnail#300}</p>
      <p>
        {product_title}
        <br/>
        {if product_designer}
        <br/>
        {product_designer}
        {end product_designer}
        <br/>{product_price}
      </p>
    </article>
    {/product}
  {/list}

  {product}
    <article id="product_image">
      <p style="clear:both;">{product_image}</p>
      <p>{product_carousel}</p>
    </article>

    <article id="product_content" class="zoom">
      <h1>{product_title}</h1>
      <p>{product_description}</p>
      <p>
        {if product_materials}
        Materials: {product_materials}
        <br/>
        {end}
        {if product_tags}
        Tags: {product_tags}
        {end}
      </p>
      <p>{product_choices}</p>
      <p>{product_share_facebook} {product_share_twitter}</p>
    </article>
  {/product}

  {page}
    {if page_title}
    <h1>{page_title}</h1>
    {end page_title}
    <p>{page_content}</p>
  {/page}

  {collection}
    {if collection_title}
    <h1>{collection_title}</h1>
    {end collection_title}
    <p>{collection_content}</p>
  {/collection}

  {bag}
    <h1>Shopping cart</h1>
    {bag_item}
    <article>
      {product}
      <p>{product_thumbnail#100}</p>
      <p>{product_title}</p>
      {/product}
      <p>
      {bag_item_choice}
      {bag_item_quantity}
      </p>
    </article>
    {/bag_item}
    {if bag_item}
      {bag_total}
      {bag_checkout}
    {end bag_item}
  {/bag}

  </section>

  <footer>
    {footer_trendnu}
  </footer>

</body>
</html>

Boutique basic tags

  • {boutique_title} i.e. "jk Boutique"
  • {boutique_username} i.e. "http://jkboutique.trend.nu"
  • {boutique_url} i.e. "http://jkboutique.trend.nu" or "http://jkboutique.com" if custom domain used.
  • {boutique_description} boutique description
  • {boutique_favicon} boutique favicon url
  • {boutique_logo} boutique logo provided

navigation related

  • {nav_bag} bag link
  • {nav_new_arrivals} new arrivals link
  • {nav_gender} list women and or men links if present.
  • {nav_sales} list sales link if present
  • {nav_collections} list collections link.
  • {nav_designers_list} list ul with li for each designer if present.
  • {nav_categories_list} list ul with li for each category if present.
  • {nav_collections_list} list ul with li for each collection if present.
  • {nav_pages_list} list ul with li for each page

Rename navigation titles

You can rename title for sections such as Bag, New Arrivals, Sales, Gender by passing the new title in the tag like this.

  • {nav_bag#Shopping Cart}
  • {nav_gender#Boy,Girl}

list related

  • {list} and {/list} container for list pages
  • {item} and {/item} container for product partials inside list pages
  • {item_thumb} product thumbnail
  • {item_title} product title
  • {item_designer} product designer
  • {item_price} product price

product related

  • {product} and {/product} container for product pages
  • {product_title} product title
  • {product_description} product description
  • {product_image} product image
  • {product_carrousel} product image carrousel
  • {product_sizes} product sizes chart
  • {product_price} product price
  • {product_add_to_cart} add to cart button
  • {product_share_facebook} share facebook
  • {product_share_twitter} share twitter

page related

  • {page} and {/page} container for page pages
  • {page_title} page title
  • {page_content} page content

collection related

  • {collection} and {/collection} container for collection pages
  • {collection_title} collection title
  • {collection_content} collection content

bag related

  • {bag} and {/bag} container for bag pages
  • {bag_list} list the items in bag using {lists} partial
  • {bag_total} list the total amount to pay
  • {bag_checkout} list the checkout button
  • {bag_remove} bag "remove this item" link

Specifying width to images

It is possible to adjust the size of images like {boutique_logo} and {item_thumb} by adding #number like {boutique_logo#300} That would make the logo 300 pixels width.

using conditional tags (if)

All tags can be checked against themselves to check presence like this example below.

{if page_title}
  {page_title}
{end page_title}

This code will only render the {page_title} tag only if it is present. This is helpful to render tags only if there's content to show.