Skip to main content

How to Start Using Themes 2.0

What is Themes 2.0?

Themes 2.0 introduces the ability to extensively customize the styling of Themes components and blocks while remaining on the upgrade path. The new architecture enables styling of out-of-the-box blocks, along with a set of atomic components for you to style and compose within your custom blocks. The robust design system based on global tokens, breakpoints, and alias tokens gives you a flexible and scalable solution to create a website that represents your brand. Additionally, all blocks that include an image have also been updated to use the latest version of the Arc Image Resizer v2, which optimizes images for web display.

Resources

What's different about using the Themes 2.0?

Blocks styling

In Themes 1.x versions, developers were limited to defining the font families and accent colors used in blocks. If further styling customizations were needed, like changing the font weight, line height, or color, the block would need to be ejected (or “forked”) and would no longer receive future updates to the Theme block. Now, with Blocks Styling, developers can add styling customizations to any design token, component, or block without needing to eject the block.

Arc Image Resizer V2

The Arc Image Resizer V2 is a more powerful and reliable option resizing service with the ability for you to add SEO-friendly names for images, which can help your site’s SEO performance. Additionally, with the new Resizer, the authentication token will be included in the image ANS and is good for all resize variations, so you won’t have to worry about storing the secret key.

Steps to start using Themes 2.0 architecture

In order to get started using the Themes 2.0 architecture, you will need to:

  • Include JSON files in your custom bundle that define your global tokens, alias tokens, components, and block styling

  • Choose Themes 2.x version when selecting a Themes version to deploy with in Theme Settings

Which version of Themes 2.x should I choose?

Which version of Themes 2.x should I choose?

See How To Run PageBuilder Engine LocallyHow To Run PageBuilder Engine Locally

For more information about Engine version updates and deprecations, see the Deprecation notice: PageBuilder Engine 3 and Engine 4 and PageBuilder Engine 5.x and Themes 2.x deprecation.Deprecation notice: PageBuilder Engine 3 and Engine 4