Help & Documentation

Loading CSS Files

First, create a CSS file by clicking on the "add new file" button.

Once you have created and populated a CSS file, you can link it in your theme by using solid.css() as follows:

The function above will generate the following result in your template:

The solid.css() function takes two arguments:

Example 1: generate stylesheet link for screen.css.

Example 2: load file reset.css and screen.css (in that order) and put the media attribute to "screen"

An alternative way to link CSS files is by uploading them with the "assets manager" and just linking them with normal CSS code as you would normally do in HTML.

If you want to upload CSS files (or other files) e.g. when using a jQuery plugin that has a uses a number of files, you can do so like this:

After clicking the "manage my assets" button on the right side of your screen, you can organize your assets in any way you want. Create subfolders for CSS, Js, images, ... if you want and upload the files to the location of your preference. In this example, we'll just upload a CSS file in a folder called CSS.

Now that you have uploaded an asset to your assets folder, you can link to it in the same way you are used to build html templates. Just make sure you include a reference to your assets folder {{ solid.assets_url }}.

back to top

Loading JavaScript files

Loading JavaScript files works in a similar way as loading css files. Call the function solid.js() and pass in the name of the file you want to load as a parameter, like this:

This will result in the following in your template:

Example: load multiple js-files at once

This will output two links to your javascript files:

If you rather want to upload your JavaScript files to your assets folder and link to them, please read the section above about loading CSS-files. The process for linking JavaScript (or any other file) is the same as described above.

back to top

Including/embedding partials

When you are creating templates, you will probably be repeating yourself over time. For example, it's common to have the same footer or header on every template. You can save yourself some work by creating an include file for pieces of your code that are repeated in more than one template.

If you want to create a footer and include it in your templates, do the following:

First, create a partial called "footer", which will include a little copyright notice that we want to reuse in all our templates.

Next, put some content in the footer partial and save the file.

Now you have created a partial that you can re-use anywhere in your templates. For example, we'll want to re-use the footer in our index template, our homepage.

At the bottom of our index page, we'll load or include the partial we just created.

You are not limited to use this for footers or header. We use the embed() method to embed the same CSS file in all templates or to use the Google Font API in all our pages. Be creative!

back to top

Products

The products template can be used to display details about a single product. The product tag can be used to access all information about your products or about one single product.

You can get the following data from any product in your store:

back to top

Loop over multiple products

Take a look at the following example. product.getList() will load all your products, after which you can loop over them.

Note the use of {{product.url}} in the example above. When displaying a listing of products in your store, you can use the "url" property to get a URL in the following format: http://www.myshop.com/product/46/ipad/. This will link a product to its detail page. See the next chapter for more about loading a single product.

back to top

Load a single product

To display the details of a single product, you need to edit the "product" template and get the current product details. This can easily be accomplished as follows:

Instead of .name, you can now use any of the available product attributes.

Please note that the product.get() function normally requires a "nicename" parameter. When you are on the product template, on a url like http://demostore.solidshops.com/product/productname, we will automatically read out the nicename "productname" from your url.

If you want to, you can pass in the nicename of a product in the function product.get(nicename) like so:

back to top

Filter parameters

It's possible to limit the products that are loaded, to only products that are e.g. in a certain category or that have a specific id. You can define filters or options like this:

Then call the getProducts() function as usual, but pass the options, like this:

Available filter attributes

back to top

Custom fields

You can add custom fields to your products. See our documentation here for details on how to easily add custom fields to your products.

To read out custom product data in your store templates, you can do the following. Please note that the examples below will only work if you already have a field group with custom fields linked to your products.

Load a product, just like you would normally do. Then, you can loop over all custom fields that are linked to a product, like so:

This will loop over all available custom fields and fields in a standard Key-Value array loop. The following screenshot gives you a visual representation of how the custom fields are structured.

If you don't want to loop over all your custom fields but need quick access to just one of your custom product fields, you can do the following:

If you don't want the value but the field label, use .label:

back to top

Pagination

If you have e.g. 50 products in your store and want to show them per 10 on a page you can use the pagination object. For pagination to work, you need to set the "pagination" parameter to "true" when you load products. See the getProducts() function just above for that.

The pagination object has the following attributes that you can use.

back to top

Add product to cart

To add a product to your shopping cart, we need to create a small form tag with a submit button, per product. This concept can be used in the "page" system template for one product or even in a list of products.

The following is necessary to add a product to a shopping cart:

1. form with action="/cart/add/{{product.id}}
2. a submit button within that form

Please notice the reference to the product id you want to add to the cart. In the following example we have added a text field named 'quantity' to allow a user to select the quantity to add. If you don't add the quantity text field, 1 will be the default quantity to add to the cart.

The product id is available when loading products using either the product.getList() or the product.get() method.

When adding products that contain variants to your cart, you have to make sure you give your users the chance to select a certain variant. You could build select boxes automatically for your products variants using the following code:

The name of your select box is important. The name value should be in the format variant_1 where 1 is the id of the variant type.

back to top

Pages

The pages tag can be used to access all information about your pages or about one single page. You can get the following data from any page in your store:

back to top

Loop over multiple pages

Take a look at the following example. page.getList() will load all your pages, after which you can loop over them.

Note the use of {{page.url}} in the example above. When linking to a page, you can use the "url" property to get a URL in the following format: http://www.myshop.com/pages/46/my-page-title/. This will link a page to its detail page. See the next chapter for more about loading a single page.

back to top

Load a single page

To display the details of a single page, you need to edit the "page" template and get the current page details. This can easily be accomplished as follows:

Instead of .name, you can now use any of the available page attributes.

Please note that the page.get() function normally requires a "nicename" parameter. When you are on the page template, on a url like http://demostore.solidshops.com/page/pagename, we will automatically read out the nicename "pagename" from your url. If you want to, you can pass in the nicename of a page in the function page.get(nicename), like so:

back to top

Filter parameters

Filter attributes It's possible to limit the pages that are loaded, by limiting the amount of pages loaded or by limiting them by ID. You can define filters or options like this:

Then call the getPages() function as usual, but pass the options, like this:

Available filter attributes

back to top

Categories

Available filter attributes

Here's an example to get you on your feet quickly when looping over all your existing product categories. The following example could be useful when building a navigation menu.

If you are using subcategories, you can render these out as well, like so:

A much used technique is the following: image you have a "category" template where you show an overview of products in a certain category or subcategory. You can load the current category your user is browsing by adding the following line to your template:

We will automatically populate the category object with the details of that category, even when it's a subcategory. When you are browsing a subcategory "shirts", you can easily print out something like:

That's great, but for search engine rankings it can be a good idea to show the breadcrumb structure with the parent category info added to it as well, like this:

back to top

Load a single category

To display the details of a single category, you need to edit the "category" template and get the current category details. This can easily be accomplished as follows:

Instead of .name, you can now use any of the available category attributes.

Please note that the category.get() function normally requires a "nicename" parameter. When you are on the category template, on a url like http://demostore.solidshops.com/category/categoryname, we will automatically read out the nicename "categoryname" from your url. If you want to, you can pass in the nicename of a category in the function category.get(nicename)

back to top

Orders

The order variables are mostly used when customizing email templates to send out with every new order that comes in. See the code sample below for an example of how to use these variables.

Here's an example of how you can build up a custom confirmation email by using the available variables for an order that a customer places in your store.

back to top

Shop

You can get general information such as the current currency, the home url, ... from you shop. There is no object "shop" so the syntax is a bit different than what you are used to. The following variables are available:

Example: create a home link

This will output:

Example: link to images and backgrounds in your assets folder

In HTML:

In CSS:

back to top

Cart

Just like you can loop over products, categories and pages, you can also render your shopping cart in any layout you want. Call the shopping cart data like this:

As you might have notice you can write anything you want instead of "cart". That's just a variable name. The cart will be filled with items, once somebody has added a product to the cart.

To loop over all items in your cart, you could do something like this:

Here's a complete shopping cart example to get you started:

Please note the line where we have added a field with name="quantity_{{ item.id }}". When you name the field that way, SolidShops can automatically detect what product (and variant if you used one) you are changing the amount for.

If you want to give the user the opportunity to select his ship-to country, you can do this by calling the method solid.htmlShippingCountries(). This will roll out a list of available destinations to ship to, based on your shipping preferences.

back to top

Remove item from cart

Sometimes or even most of the times you may want to provide a "remove item" option in your shopping cart. We will need a form that posts the correct product ID that has to be removed, like so:

This link (or it can be an image, as long as it links to the correct url) needs to be available next to every item in your shopping basket, so you can e.g. put it in a table within your {% for item in cart.items %} loop.

back to top

Custom cart attributes

You can add up to 5 attributes to each cart item and 5 to the cart itself. These attributes are used to add some extra customer fields to the cart. Some implementations are fields like "customer engraving","cartnote","deliverydate".

item attributes:

For each item in your shopping cart you can define up to 5 attributes.

product / add to cart:

cart template:

cart attributes:

For each item in your shopping cart you can define up to 5 attributes.

cart template:

back to top

Search form

The search template file can be used to display search results in your store. Building a basic search form for your online store can be done as follows:

You can place this form anywhere in your store. It's important to use the correct action "/search" as we will post your query to your search template through the URL. Also make sure that your search text field has the attribute name="query" in it. That way we know where to get your search term.

When somebody searches for e.g. "apples" by submitting the search form above, the user will be redirected to e.g. http://yourstore.solidshops.com/search/computers

Now we need to build up the search results page, in the same consistent way we build up the products, pages and categories pages. You can find the "search" template in your theme files.

To build up a list of products that match the search term, first we need to get the search term from the url by using url segments. Take a look at the following example:

The example above gets url segment number 2 from our url http://yourstore.solidshops.com/search/computers. Now we have a search parameter "computers" which we pass to the products options.
If you want you can pass along more parameters to build in pagination or order products in a certain way. See here for more product filter attributes.

back to top

Contact form

Some stores require a custom contact form. You can build a contact form in any of your templates. Below is a fully working example of a contact form. Let's take a look at how it's been built and how it works.

You wil need the following to create a custom contact form:

1. form action="/sendmail" method="post": this will process the form and mail it to your store's contact email address.
2. input fields: use whatever and as much input fields as you need. Just make sure you give them a clear name tag.
3. captcha tags: these are required to prevent spam robots from sending fake emails to you.

If you want to make some fields required, you can do so by using javascript.

In the example above, you can see that we check url segment 3 against the word "false". When a users submits your form, we check whether or not the captcha was correct. When correct, we send and email to the contact email address you provided in your general store settings and we will create a URL like http://yourstore.solidshops.com/contact/status/true. This way you can detect if your form was sent and inform your user about this action. If the form submission fails (because of a bad captcha), we will return a URL http://yourstore.solidshops.com/contact/status/false

back to top