Creating Custom Themes

Template Variables

Creating Beautiful themes for your Summit Evergreen course.
Summit Evergreen lets you build your own online courses. You can create content, sell your courses to students, customize your entire course.

Getting Started
Whether you’re building a theme for yourself or a client, the Theme Development section will guide you in building stunning themes for your Summit Evergreen course. If you are new to Summit Evergreen, this section will introduce you to the right tools you need to start working with themes. Once you’re ready, head over to the Theme Templates section to learn about the various Liquid templates that make up a Summit Evergreen theme.

Twig Documentation

Twig is an open-source, PHP-based template language created by Fabien Potencier, the creator of the Symfony framework. It is similar to other templating languages like Liquid from Shopify, and it serves as the back-end for all member-facing course pages.

Full documentation for Twig can be found on the official website.

We’ve added a number of tags and filters for use in Summit Evergreen. This documentation will detail the special variables, tags and filters used in Summit Evergreen. Other Twig features can be found in the Twig documentation.

Objects

Twig objects contain attributes to output dynamic content on the page. For example, the member object contains an attribute called first_name that can be used to output the first name of the currently logged-in member.

Twig objects are also often referred to as Twig variables.

To output an object’s attribute on the page, wrap it in {{ and }}, as shown below:

Global Objects

The following objects can be used and accessed from any file in your theme, including your email templates:

Product

  • Product.name
  • Product.description
  • Product.domain
  • Product.theme_id
  • Product.theme_options
  • Product.theme_options.logo_image
  • Product.theme_options.favicon_file
  • Product.theme_options.header_scripts
  • Product.theme_options.footer_scripts
  • Product.theme_options.style

Member

  • member.first_name
  • member.last_name
  • member.name
  • member.display_name
  • member.email
  • member.timezone
  • member.timzeone_offset
  • member.created
  • member.last_login

Asset

  • asset.src(‘filename’)
    Get the URL of an asset that you have uploaded. <br> Additionally, use ‘cover’ or ‘logo’ to get your Product’s cover or logo URL
  • asset.image(‘filename’)
    Just like the src tag, but wraps the URL in an image tag.
  • asset.scripts(‘header’)
    Add the Product’s header scripts from your Product settings
  • asset.scripts(‘footer’)
    Add the Product’s footer scripts from your Product settings
  • asset.stylesheet
    Insert a link to your theme’s main stylesheet
  • asset.syllabus(‘header’)
    Insert your Product’s Syllabus
  • asset.protect(‘filename’)
    Generates a protected link for an asset that you have uploaded. Defaults to a 10 minute link, but can be edited by passing a time value as the second variable. asset.protect(‘filename’, ‘+20 minutes’)
  • asset.theme
    Returns a custom content block for the theme, or the default if passed
  • asset.productSelector
    Creates a product selector bar in the lay layout

Course Objects

Groups

  • groups.0.name
  • groups.0.modules.0.available
  • groups.0.modules.0.slug
  • groups.0.modules.0.name
  • groups.0.modules.0.lockedTime

Page

  • page.Page.name
  • page.Page.short_name
  • page.Page.slug
  • page.Page.content
  • page.Page.style_class
  • page.Page.has_comments
  • page.Page.comments

Survey

  • survey.Survey.name
  • survey.Survey.slug
  • survey.Survey.description
  • survey.Survey.redirect_url
  • survey.Survey.thankyou_messsage
  • survey.Survey.passing_score
  • survey.Survey.question_count
  • survey.QuestionGroup.0.name
  • survey.QuestionGroup.0.Question.0.position
  • survey.QuestionGroup.0.Question.0.type
  • survey.QuestionGroup.0.Question.0.content
  • survey.QuestionGroup.0.Question.0.is_required
  • survey.QuestionGroup.0.Question.0.correct_answer
  • survey.QuestionGroup.0.Question.0.Answer.0.answer
  • survey.QuestionGroup.0.Question.0.Answer.0.is_correct
  • survey.QuestionGroup.0.Question.0.Answer.0.created

Comments

  • comments.0.Comment.body
  • comments.0.Comment.created
  • comments.0.User

Menu

  • menu.has
  • menu.show
  • menu.syllabus

Session

  • session.flash

Was this article helpful?

Yes No

Related Articles