Blog

Getting Started with Custom Themes

No comments

One of our favorite things about GiftFold is the ability for our customers to fully-customize every last piece of HTML their donors see. And not just HTML; our customers can use any number of custom images, scripts, and stylesheets. With a robust theme engine using Liquid code and Amazon’s CloudFront CDN, we charities to create highly optimized and beautiful donation forms. So here’s what you need to know to get started.

Theme Structure

Modeled after Shopify’s extensive theme engine, a GiftFold theme is a collection of Liquid files and user uploaded assets. Liquid files are divided into two types: layouts and templates.

Layouts

Every theme requires a single theme layout. This is similar to the index.php in a WordPress theme. It contains the HTML doctype, head, and body elements.

Templates

Each donor-facing page in GiftFold has its own template within a theme. By default, these include the following files:

  • 404.liquid
  • 422.liquid
  • 500.liquid
  • form.liquid
  • receipt.liquid

In addition, a theme must include templates for HTML and text-based confirmation emails:

  • confirmation_email.html.liquid
  • confirmation_email.text.liquid

Assets

Whether it’s a logo, favicon, stylesheet, or JavaScript library, assets are the unique pieces of your theme which bring it to life. Assets are embedded into layouts and templates and delivered through Amazon CloudFront.

How to Use Your Own, Custom Theme

To create and use your own theme, just follow these steps:

1. Create a New Theme

Login to your GiftFold admin interface, click Themes -> New. Type in the name of your theme and click “Create Theme.” The theme will automatically populate itself with all the necessary Liquid files.

2. Style Your New Theme

To begin customizing your new theme, upload some assets. For example, you will probably want to include a favicon, some stylesheets, a logo, and some JavaScript. An easy way to get started is to upload a CSS framework like Bootstrap and JavaScript library like jQuery.

3. Upload Some Assets

When the assets have been uploaded, include them in your layout and templates by using Liquid code such as: {{ ‘logo.png’ | asset_url }} or {{ ‘style.css’ | asset_url }}. See this code example.

4. Preview It

To preview the theme, click the Preview button on the next page.

5. Publish It

To make this theme active, click the “Make default” button.

​More Information

For more information, check out our Liquid Reference or contact us.

JonGetting Started with Custom Themes

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *