Customizing Your Main Template
The LearningCart platform utilizes templates to help maintain brand consistency and allow for automated updates. Out of the box, your site will come with a default template which serves as a shell or a wrapper for your overall website.
Customizing your Default* Template with Content Builder
Customizing your default LearningCart template is easy for the non-technical user by utilizing our built-in editor tools. You can control basic settings such as your logo, navigation, footer, and the colors your site uses.
*Default Template: In many areas of LearningCart, such as when creating documents, quizzes, or forms you can specify the specific template you want to use. Some pages in LearningCart however, such as your shopping cart, login, or payment page will automatically use whatever template you have specified as your default. For the system to work properly you must always have a default template specified.
Customizing your Logo
Customizing your site to include your logo is quick and easy. In the admin navigate to ‘Website > Templates’. Here is where you will find the main template used for the look and feel of your front-end website. Choose the desired template and click ‘Edit’ then click ‘Launch Content Builder’. Click on the logo placeholder and a toolbar will appear. Click on the image icon and choose your logo file. To adjust sizing and formatting, click on the three dots in the bottom toolbar then click ‘Settings’. Adjust the dimensions of the logo box. Then click ‘Spacing’ to add any padding or margin that you would like.
Customizing your Footer
The page footer is another common area that customers want to update. Navigate to ‘Website > Templates’. Here is where you will find the main template used for the look and feel of your front-end website. Choose the desired template and click ‘Edit’ then click ‘Launch Content Builder’. In the top left-hand corner of your screen, click the ‘Add’ icon. Your LearningCart site comes with predesigned sections and page blocks. Click ‘More’ then click ‘Footer’. Choose the footer you would like to work with.
To change the footer background color, click on the wrench icon that appears at the bottom of the box. Under Background Color, click the half-filled circle. You will see a color palette available. When you choose a color, additional tones of that color will populate in the bottom section. To access even more color options, click the three dots just above the formula bar. If you have a unique brand color you would like to add, you can enter the RGB formula in the formula bar and click the arrow to enter. To exit the color section, simply click anywhere outside of the color box.
To adjust specific text areas, click on the text area then click on the three dots in the bottom toolbar. This will bring you to your text settings where you can adjust color, size, alignment, letter spacing, font family, and padding.
To customize your social media handles, click on the social media icon you would like to work with, then click the hyperlink icon. Add your page handle then click ‘Okay’.
To update the email address, click the mail icon, then change the address after ‘mailto:’ then click ‘Okay’.
Changing Template Colors
Updating your site to match your desired colors is quick and easy. Navigate to ‘Website > Templates’. Here is where you will find the main template used for the look and feel of your front-end website. Choose the desired template and click ‘Edit’ then click ‘Launch Content Builder’. Click on ‘Set Colors’ in the upper left-hand corner. Here you have a series of color and text size options that will apply universally throughout the site. You can change the hue by sliding the white bar over the color spectrum and adjust the tone of the color by moving the black dot around the square. If you have a custom brand color, you can enter the hex code in the formula bar. When you have finished, click ‘Update’.
Adding a Favicon
Favicons are small but make a huge impact. To add a favicon to your site, navigating to ‘Website > Templates’. Here is where you will find the main template used for the look and feel of your front-end website. Choose the desired template and click ‘Edit’. Below the button for the Content builder, you will see a line that says ‘Show Advanced Fields’. Click to open the advanced fields. At the bottom you will see an area called Template files. This is where you can add additional files for your Template such as CSS, JS, and…you guessed it…a favicon. Click ‘Add File’ then add your description such as YOUR NAME Favicon. Choose favicon from the file type dropdown then click ‘Browse’. You can choose an image that has already been uploaded to your site or choose a file from your local device by clicking ‘Choose File’. Once you have your image selected, click ‘Upload’ then click ‘Add’.
Editing your Template's Code
LearningCart gives you complete control of the underlying code that is used to generate your template. This allows you to add things like live chat widgets, tracking code, or completely redesign how your template looks. To edit one of your existing templates, navigate to ‘Website > Templates’. We recommend before you make any changes you click ‘Download’ to download a copy of your desired template. This allows you to easily roll back your changes if you encounter any issues. Once you have saved a copy, click ‘Edit Template’ then click ‘Launch Content Builder’. On the left-hand side, you will see the HTML symbol. Click to open the code for this template.
Adding Additional Code to your Template's Universal Header
While LearningCart has been built to help you organize any additional integrations or tracking code, you may still wish to add unique code into your template’s universal header. You can do that by navigating to ‘Website > Templates’. Here is where you will find the main template used for the look and feel of your front-end website. Choose the desired template and click ‘Edit’. Below the button for the Content builder, you will see a line that says ‘Show Advanced Fields’. Click to open the advanced fields and you will be brought to an area that allows you to enter ‘Additional <head> content’. Add your code and click ‘Save’.
System Placeholders
The LearningCart template system uses standard HTML/CSS/JavaScript. The unique thing about your LearningCart templates is they contain placeholders where our system will automatically insert content generated by our system. For example, in your template you will see [content] which designates where our system will insert the content of that page or [navigation] where the site's navigation menu will automatically be inserted.
General Template Variables
• [navigation] - The area that will automatically be replaced with the navigation from your root directory.
• [content] - The main content area of your page.
• [breadcrumbs] - Navigational breadcrumbs that are automatically generated based on the customer's location within our system.
• [loggedin] [endloggedin] - Any content that should be shown to customers only when they are logged in, can be placed between these tags.
• [loggedout] [endloggedout] - Any content that should be shown to customers only when they are not logged in, can be placed between these tags.
• [addtocart] – On a product page this will show all the associated product information such as date and time, price, and seat quantity and an add to cart button.
You can apply the CSS class: lc-loggedout-hidden anywhere in the system where you want an element to not display if the user is logged out. Similarly, you can apply the CSS class lc-loggedin-hidden to any element you want to hide when the user is logged in. This will function anywhere in the system that HTML is supported.
For information on how to edit system messages that are displayed by LearningCart, please see System Text and Messaging.
Creating a New Template
To create a new HTML template, click Website then click Templates. Here you can either download or copy the Default template and make your desired changes or use the link at the top of the manage templates page to download a sample HTML template. The sample template includes helpful comments as well as indicators of which items are required. The sample template can be customized however you desire. Once you have saved your changes you can return to the Manage Templates page, give your new template a name, select the file you saved, and load the template into LearningCart.
To create a new template using the Content Builder, you can copy a previous template and make changes, or click 'Add Template'. Enter the name of your new template then choose the Content Builder editor type. If you are managing multiple sub portals, you can choose which sites will use this new template as the default. When finished, click 'Add'.
