Build your static website

Juice is an intuitive, elegant, and lightweight Zola theme for product websites.

Star Fork
Explore More ⇩


Juice is an intuitive, elegant, and responsive Zola theme for product sites.


Zola is a prerequisite. Please refer to the Zola installation docs.

First download this theme to your themes directory:

$ cd themes
$ git clone

or add as a submodule

$ git submodule add  themes/juice

and then enable it in your config.toml:

theme = "juice"



Juice is designed for product websites, hence we let hero part fills whole of screen. You can customize your hero by using hero block in the templates/index.html.

{% extends "juice/templates/index.html" %} {% block hero %}
<div>Your cool hero html...</div>
{% endblock hero %}


Every markdown file located in content directory will become a Page. There also will display as a navigate link on the top-right corner. You can change the frontmatter's weight value to sort the order (ascending order).

title = "Changelog"
description = "Changelog"
weight = 2

CSS variables

You can override theme variable by creating a file named _variables.html in your templates directory.

  :root {
    /* Primary theme color */
    --primary-color: #fed43f;
    /* Primary theme text color */
    --primary-text-color: #543631;
    --primary-text-color-over: #000;
    /* Primary theme link color */
    --primary-link-color: #f9bb2d;
    /* Secondary color: the background body color */
    --secondary-color: #fcfaf6;
    --secondary-text-color: #303030;
    /* Highlight text color of table of content */
    --toc-highlight-text-color: #d46e13;
    --toc-background-color: white;
    --code-color: #4a4a4a;
    --code-background-color: white;
    --shadow-color: #ddd;
    /* Font used for headers (h1 & h2) */
    --header-font-family: "Fira Sans", sans-serif;
    /* Font used for text */
    --text-font-family: "Fira Sans", sans-serif;


The same way as changing the hero block in the templates/index.html, you can change the favicon.

{% extends "juice/templates/index.html" %} 

{% block favicon %}
<link rel="icon" type="image/png" href="/favicon.ico" />
{% endblock favicon %}


If you changed the --xy-font-family-variable in _variables.html, you have to load the mentioned fonts in the templates/index.html.

{% extends "juice/templates/index.html" %}

{% block fonts %}
  href="[email protected]/css/fork-awesome.min.css"
{% endblock fonts %}

Juice has a sidebar on the right side of the screen. You can customize it by using sidebar block in the templates/index.html.

{% extends "juice/templates/index.html" %} 

{% block sidebar %}
  Your cool sidebar
{% endblock sidebar %}


You can customize some builtin property in config.toml file:

juice_logo_name = "Juice"
juice_logo_path = "juice.svg"
juice_extra_menu = [
    { title = "Github", link = ""}
repository_url = ""


Juice have some builtin shortcodes available in templates/shortcodes directory.

The repository_url is required.


Please see the showcases page.


Thank you very much for considering contributing to this project!

We appreciate any form of contribution: