New tutorials covering BC.Next, Liquid, BC Apps and more.

Business Catalyst Design and CSS Tutorials

  • Hero Web App with CTA or Video Modal

    Brian shows you how to create a flexible hero image section web app that can contain a standard button call to action or a YouTube/Vimeo video lightbox. This functionality is made possible through Liquid and the free, open-source Magnific Popup...

    View Tutorial
  • Building out Templates in Business Catalyst

    Learn how we take HTML/CSS/JS themes or templates and integrate them into Business Catalyst using the latest techniques. We'll also show you how we setup our site structure, methodologies behind it and walk you through our workflow for template development.

    View Tutorial
  • Web App Detail View with Dynamic Category Navigation

    This tutorial will show you how to use Liquid to create a dynamic navigation for categorized web apps that is persistent across the list view and detail view.
    We've added a little bit of extra functionality using the latest version...

    View Tutorial
  • Dynamic Menu with Featured Links Web App

    Here's an intuitive method for integrating web apps and dynamic menus. In this case, we're going to be creating a single dynamic menu and outputting web app items, or calls to action, within each dropdown that correspond with that particular...

    View Tutorial
  • Responsive Images and Page Speed

    This tutorial reviews several methods for achieving responsive images and evaluates them using Googles Page Speed tool. There's no definitive answer here, but you may find one of the techniques useful for your client's site.

    View Tutorial
  • Building Business Catalyst Sites With Components Series

    Two part series: Introduction to components & building components with web app and liquid

    Introduction to components – a new concept for building sites on Business Catalyst. Design and develop a collection of web components for your clients to use across...

    View Tutorial
  • Sticky Product CTA Bar

    This cool enhancement for your product detail pages provides a contextual, docked bar at the bottom of the window that shows the product you're viewing, the selected attribute, price and an add to cart button. This is an intuitive way...

    View Tutorial
  • Advanced FAQs Module

    In this tutorial we'll be taking the standard Business Catalyst FAQ's module and expanding upon it by creating categorized lists of faqs as well as generating a dynamic sticky anchor navigation to get to each section. This is all done...

    View Tutorial
  • Dynamic Web App List with Category Navigation

    Here we have an implementation of a dynamically created web app list with category navigation. Use the powerful liquid approach provided to build a single-category filtering engine that displays classified web app items on a single page without the need...

    View Tutorial
  • Responsive Web Forms from BC Output

    In this video Chad goes over how to make your web forms responsive. BC out of the box will give your forms useful module tags so you can easily implement your forms on your pages/templates but the code that it...

    View Tutorial
  • Dynamic Ecommerce Catalog Menus

    This solution will allow you to build a dynamic, self-generating, collapsible menu for all of your e-commerce catalogs. This means no more manually building your shop menus with the BC menu module, as this implementation mirrors the exact hierarchy of...

    View Tutorial
  • Custom Web App List Pagination Using Liquid

    This tutorial provides an easy way to render custom web app listview pagination complete with previous and next buttons as well as a page jump dropdown that lets you get from page to page quickly. This is a mobile friendly...

    View Tutorial
  • Media Downloads List Using a Custom Template and Icons

    This tutorial will guide you through setting up your media downloads and displaying them using a custom template as well as replacing the default file type icons with a vector based icon font like FontAwesome.

    View Tutorial
  • Create a Custom Twitter Feed (Updated)

    **This tutorial has been updated to reflect a change in the latest Twitter API as of December 2016.

    In this tutorial, Brian shows you how to easily create a customizable twitter feed for your Business Catalyst sites with minimal effort. No...

    View Tutorial
  • Responsive Typography for the Modern Web

    Brian explains some important aspects to getting a better understanding of responsive typography, as well as an easy and modular method for creating great typographical hierarchy and rhythm across all devices.

    View Tutorial
  • Email Marketing Template Install

    After purchasing the Email Marketing Template, Chad shows you the ins and outs of installing and customizing this fantastic resource for your clients.

    The Email Marketing Template pack is available for download with a one-time purchase at the BC App Store!

    View Tutorial
  • Infinite Load for eCommerce Products | Pagination

    In this week’s pro tutorial learn how to implement and customize a “load more” button, sometimes referred to as an “Infinite List” or “Auto load” on Business Catalyst eCommerce Products on Catalog pages.

    This method is easy to implement and is...

    View Tutorial
  • Updated Checkout UX

    In this tutorial, learn how to take your default checkout form and make it into something that your users can enjoy. They will have the ability to sign in and see their details, or just simply checkout while creating their...

    View Tutorial