+813-444-3589+44 118 328 3220+49-231-976765-0 | Contact us

Input Types

There are several types of supported input types, all mapping to base types in the settings object.

 

Single-line and multiple-lines edit fields

The single-line edit field is an INPUT tag with type="text", the multi-line edit field is a TEXTAREA tag. In classless mode they will be used for URLs or other strings which don't need translation. You can add translation capability by using the class "language". In that case you shouldn't give any default values, as there will be different strings for each language

Example:


<tr>
  <th>
    <label for="homepage_url">Homepage URL</label>
  </th>
  <td>
    <textarea name="homepage_url">http://www.mywebpage.com</textarea>
  </td>
  <th>
    <label for="welcome_text">Welcome text</label>
  </th>
  <td>
    <input type="text" name="welcome_text" class="language" />
  </td>
</tr>
		

 

Checkbox

Checkboxes are used for bool options (like the question whether to show the logo or not).

Example:


<tr>
  <th>
    <label for="show_logo">Show company logo</label>
  </th>
  <td>
    <input type="checkbox" name="show_logo" value="1" />
  </td>
</tr>
		

 

Radio buttons

If the user should between some few alternatives, radio buttons are often used. You provide the various options and define the (string) values they should obtain. An INPUT tag with type="radio" is used. All radio buttons with the same name are exclusive-or, only one of them can be selected.

Example:


<tr>
  <th>
    <label for="main_font">Main font</label>
  </th>
  <td>
    <input type="radio" name="main_font" value="helvetica" /> Helvetica<br/>
    <input type="radio" name="main_font" value="times" /> Times New Roman<br/>
  </td>
</tr>
		

 

Drop-down selection box

This box is similar to radio buttons, but this would usually be used if more than some few alternatives exists, so the user can choose one element of a drop-down box rather than using up too much page by presenting all possible options as radio buttons.

Example:


<tr>
  <th>
    <label for="footer_font">Main font</label>
  </th>
  <td>
    <select name="footer_font">
      <option value="0"> Helvetica</option>
      <option value="1" selected="selected"> Times New Roman</option>
      <option value="2"> Arial</option>
    </select>
  </td>
</tr>
		

 

File uploader

For quite some themes it is necessary to have some banners and logos provided by the shop owner. You are able to provide such an upload facility by implanting a INPUT tag with type="file". The name of the element should be the filename of the target object, which can be accessed like an asset. The original filename of the file chosen by the user will be ignored.

Example:


<tr>
  <th>
    <label for="logo.png">Background color</label>
  </th>
  <td>
    <input type="file" name="logo.png" />
  </td>
</tr>
		

 

Color picker

Quite often specific colors need to be selected for the web page layout, HTML uses strings of the form "#RRGGBB". On single-line edit fields (see above) it is possible to show a color picker element for easier access when using class="color".

Example:


<tr>
  <th>
    <label for="background_color">Background color</label>
  </th>
  <td>
    <input type="text" name="background_color" class="color" value="#ffffff" />
  </td>
</tr>
		

 

Collection selector

Each web shop contains categories of products (if none are defined, at least some categories are automatically created like "all" or "bestseller"). In Liquid, these collections (or categories) are accessed via their handle, which is a string identifier (usually a web-safe version of its name). In order to select a collection e.g. for the index page display, a SELECT field using class="collection" will show a drop-down box of the available collections for the given shop. The settings variable will receive the handle to the selected collection, which can be used to the collection in Liquid.

Example:


<tr>
  <th>
    <label for="collection_featured">Collection shown on index page</label>
  </th>
  <td>
    <select name="collection_featured" class="collection" />
  </td>
</tr>
		

 

Blog and Pages selector

In order to specify a specific blog (e.g. only for showing What's New events on the index page), it is possible to select a specific blog from the shop. Pages are small snippets of HTML code, which can be assembled on the admin interface by the shop owner and displayed on various pages – either as a small part of a page or as a full featured page with this snippet as main content. Possibilities would be "About Us" (single page), "Shipping costs" (inserted into each product page), etc.

In order to select a specific blog or a specific page, you should use a SELECT tag with class="blog" or class="page". The values will be filled in automatically with the shop existing blogs and pages.

Example:


<tr>
  <th>
    <label for="blog_main_page">Blog shown on index page</label>
  </th>
  <td>
    <select name="blog_main_page" class="blog" />
  </td>
</tr>
<tr>
  <th>
    <label for="page_shipping_costs">Page for shipping costs</label>
  </th>
  <td>
    <select name="page_shipping_costs" class="page" />
  </td>
</tr>
		

If using settings, you would not access any elements via hardcoded access modifiers, but use the settings variable to access the content. E.g. you would access a specific collection by

{{ collections[settings.collection_main_page].products.size }}

The settings placeholder will provide the appropriate handle for accessing the desired collection (or blog or page).

For all shop filled in values (blogs, pages and collections), it is possible that the user chooses "None", which is a possible value for the specific options. If you access such a setting a liquid, you would do so using e.g. {{ settings.blog_main_page }}. If the user has selected "None", the value of settings.blog_main_page would be an empty string (and not "None"). You can test on whether the object exists and it is not "None" for example by


{% if settings.collection_main_page.size > 0 %}
  …
{% endif %}
		

This if-clause will be false if either the settings.collection_main_page is not defined at all, or whether it only contains an empty string.

Also, it is possible that a blog, page or collection which handle is selected doesn't exist anymore. So you should also check whether the accessed object exists. E.g.


{% if collections[settings.collection_main_page] %}
  …
{% endif %}
		

Of course you could also check whether the collection (or blog) has any entries at all (products or articles).