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

Business Catalyst Design and CSS Tutorials

  • 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
  • Featured Product Carousel - Using Liquid and Slick Carousel

    Here's a simple implementation for a featured product carousel that uses native Business Catalyst functionality, some liquid markup and a powerful open-source plugin called Slick Carousel.

    View Tutorial
  • Better BC Forms Using Foundation 6

    This tutorial introduces the concept of customizing the default code output of BC web forms utilizing Foundation 6 markup. This will allow you to create better looking and functioning forms quickly over the default web forms.

    For more information about Foundation...

    View Tutorial
  • Liquid Menus

    Gain more control of your menus by breaking out of the module menu 2 file layout. In this video Chad guides you through creating a pure liquid menu, allowing you to easily achieve layouts otherwise needing additional work; may that...

    View Tutorial
  • Versatile Web Apps Powered by Liquid and Optional Fields

    This tutorial will present an interesting concept that involves creating a single web app that can have multiple design differences or pieces of functionality. By leaving many fields optional, we can leverage the power of liquid to dynamically control the...

    View Tutorial