Creating a Facebook Store Theme From Scratch

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 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:


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


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)

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=""/>

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=""/>


<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

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request


  • 0
    Amit Dave

    How do I add my company logo in the powered by on the footer.

Please sign in to leave a comment.
Powered by Zendesk