Installation Guide

Milan is a clean, beautiful, and responsive e-commerce theme for the Hexo static site generator. View a demo of the theme here. Each product listed on the website is simply a post within the Hexo framework. The e-commerce functionality is powered by Snipcart, and you will need a free Snipcart account to set up this theme.

Theme installation

Unzip the folder containing the Milan theme, then place the entire milan folder within the themes folder of your Hexo blog. Your Hexo website structure should now look like this:

1
2
3
4
5
6
7
8
9
10
|-- node_modules/
|-- scaffolds/
|-- source/
|-- themes/
|-- milan/
|-- layout/
|-- source/
|-- _config.yml
|-- _config.yml
|-- package.json

Then update your blog’s main _config.yml to set the theme to milan:

1
2
3
4
# Extensions
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: milan

Theme configuration

Header menu

The theme’s header menu is configured in the theme’s _config.yml.

1
2
3
4
5
# Header
menu:
Home: /
About: /about
Contact: /contact

Favicon

The blog’s favicon can be changed by adding the URL to your favicon ico in the theme’s _config.yml.

1
2
# Favicon
favicon_url: images/favicon.ico

Default Post Image

In the event that an image is not specified for a product, the theme will use a default image instead. Specify the default image by replacing the URL here.

1
2
# Default Image for Posts
default_cover_image: images/default.jpg

Snipcart API Key

The Snipcart API Key is configured in the theme’s _config.yml. This is required in order for this theme to work. You can register for Snipcart for free to receive your public API key.

1
2
# Snipcart API Key: https://app.snipcart.com/register
snipcart_api_key: PASTE_YOUR_KEY_HERE

Google Analytics tracking

The Google Analytics Tracking ID is configured in the theme’s _config.yml.

1
2
# Google Analytics Tracking ID
google_analytics:

Social Accounts

Modify the social media links in the theme’s footer by adding or removing links here.

1
2
3
4
5
6
7
8
9
10
11
# Social Accounts
email_url: mailto:fake@email.com
twitter_url: https://twitter.com/?lang=en
facebook_url: https://www.facebook.com/
instagram_url: https://www.instagram.com/
linkedin_url:
dribbble_url:
github_url:
googleplus_url:
behance_url:
fivehundredpx_url:

Product configuration

For each post, specify product information in the front matter. Then put the product description in the body of the post.

Product name

Use the name to specify the text displayed as the name for your product.

1
name: My Awesome Product

Product ID

Use this to specify a unique ID for your product. This is required for the cart to function properly.

1
id: MY_AWESOME_PRODUCT

Product price

This determines the cost of the product. Do not include any currency symbols.

1
price: 24

Product image

Each product in this theme requires an image. If no image is provided, a default image is used. Specify your own image like this.

1
image: images/product.jpg

Example of a product post

Here is an example of a complete product post. All products must have all of these fields.

1
2
3
4
5
6
7
---
name: My Awesome Product
id: MY_AWESOME_PRODUCT
price: 24
image: images/product.jpg
---
This is the product description.

Creator

This theme was designed and created by Sharvari Desai.

Support

If you have a question, feature request or a bug you need me to fix, please email me. I will get back to you as soon as possible. If you are not satisfied with this theme, I will be happy to issue a full refund.