Assets are resource files that are referenced in the theme. Resources include JS, CSS, Images, Font files. Storehippo themes contain two types of assets:
- Theme Specific Assets
- Global Assets
Theme Specific Assets
These assets are specific to the theme, you can edit assets file using StoreHippo admin panel. In order to edit an existing asset file, you need to go to Site > Themes section in StoreHippo Admin Panel. Click on the ellipsis button against the default theme andchooseManage assets from the drop down. On clicking Manage assets, the following window appears:
StoreHippo provides some pre-defined assets for yore theme. You can edit them or add a new asset for that particular theme.
Adding a new asset
To add a new asset for your theme, click on the Add New button in the top right corner. You can either create an asset or upload the file. The window appears is given below:
Uploading file
Select the option to upload a file. Choose a file to upload.
Creating new file
To create a new file, follow the below-mentioned steps:
- Select the option to create a new file.
- Provide the name of the file.
- Enter the content of the file.
If you add a new asset file, you need to include it in default layout of the theme in order to use it in themes.
The syntax for including it in default layout is:
<!--for js file-->
<script src="{{app.js|asset}}"></script>
<!--for css file-->
<link href="{{app.css|asset}}" rel="stylesheet" media="screen">
Global Assets
StoreHippo provides a lot of global assets for commonly used libraries so that you do not have to upload them again and again.
Following are few examples of the global assets:
- bootstrap-3.0.2.min.css
- font-awesome-4.0.3.min.css
<link href="{{font-awesome-4.0.3.min.css|global_asset}}" rel="stylesheet" media="screen">
<link href="{{bootstrap-3.0.2.min.css|global_asset}}" rel="stylesheet" media="screen">