In this tutorial we will guide you on how to create a StoreYa theme from scratch.
Requirements for getting started
1. Sign up for a StoreYa package that supports an HTML/CSS editor (Agency Package, Private Jet Package etc.).
2. Log into your StoreYa account, import your store and connect it to your Facebook Fan Page.
3. Log back in to StoreYa.com and go to “Customize your Store” tab > Advanced Customization.
Important Background regarding StoreYa’s Themes
There are some fundamental concepts you need to understand before creating a theme.
1. Programing language
To prevent you from learning new and undocumented languages, StoreYa is using a limited version of Razor programming language from Microsoft MVC platform.
For example, if we want to display a product name, we use this code:
<h3>@product.Name</h3>
2. Sections
Those parts of the StoreYa pages that you can control using a code editor are called ‘sections’.
Currently we have:
- ‘Products Section’ on ‘Catalog Page’;
- ‘Product Details Section’ on ‘Product Page’.
These are part of the output pages that you can fully control on the HTML output.
3. Model
Each ‘Section’ contains a ‘ModelObject’. A Model is an object that contains all data required to display different elements inside the section.
4. Model Variables
Model Variables are the pieces of data you can use to present information in each section. For example: in order to show product lists, you will need to use the CatalogPageData Model. This model contains an array of ProductEntity objects. Each of those objects contains information required to present a product, like Name, Description, Image etc.
See our Api References documents to learn about all available objects.
5. Logic blocks
The editor will allow you to add logic blocks to customize the output HTML.
For example, in case you want to display the message "Contact us to get a quote, only for products which have a price over 1,000, you can use the following logic statement:
@if(product.Price>= 1000)
{
Contact us to get a quote
}
else
{
@product.Price
}
See our Theme Editor Syntax Tutorial to learn more about the syntax.
Let's Create a Theme from Scratch
1. Select one of the standard layouts and click Edit.
The new custom layout will be generated and saved under ‘My Layouts’.
2. Be sure that “Catalog Page Layout” is selected.
3. Delete everything inside the text area.
4. Click Save.
5. Click Preview.
An empty store should be shown.
6. Add the following code:
@model CatalogPageData
@foreach(var product in Model.Products)
{
@product.Name
<br/>
}
7. Click on Save and then click on Preview.
8. The following screen will be shown (a list of all products):
9. IF you wish to add an image for each of the products, add the following line:
<img src="@product.Image" style="height:30px; width:30px;" alt=""/>
So the entire code will look like this:
@model CatalogPageData
@foreach(var product in Model.Products)
{
<img src="@product.Image" style="height:30px; width:30px;" alt=""/>
@product.Name
<br/>
}
10. Click Save and then Preview.
11. You should now see:
12. Now let’s change the CSS. Click on Main CSS file on the right hand side of the screen.
13. Add the following lines at the end of the CSS file:
.productImage{ height:50px; width:50px;}
14. Now go back to the Products Layout file and change
<img src="@product.Image" style="height:30px; width:30px;" alt=""/>
To:
<img src="@product.Image" class="productImage" alt=""/>
15. The preview should look the same, but the styling is now defined inside the CSS and not inside the HTML
We hope you found this tutorial helpful, and that you can now create a store them from scratch. For further options and guidelines, please see the below references.
The References
- Theme Editor Syntax Tutorial
- API Reference
- How To’s (coming soon)
1 Comments