Theme Canvas

The partners can create multiple regions on a page and each region is called Canvas. Each canvas functions as a customizable area on the page that groups related sections together. Canvas enables better layout control and improves visual organization across different screen sizes. These canvases are typically associated with a specific page (such as the home, product and, cart) and act as containers to organize sections more intuitively.

The partners define canvases entirely, and the seller can only customize the content within them. Partners define canvas layout per screen size (e.g., mobile, desktop). The layout is responsive, meaning the arrangement of canvases adapts automatically based on the screen size. It is achieved through custom CSS to ensure that the canvases are styled and positioned appropriately across different devices, providing a consistent and intuitive editing experience. They determine how many canvases a page should have, what each canvas is called, and how the layout should adapt across different screen sizes.

In the Theme Editor, sellers can view a page that is divided into multiple canvases, each representing a distinct region of the layout. Within each canvas, the associated sections are displayed, making it easier to manage and organize content.

Common Mistakes when Defining Canvas

• If new canvases are defined in the theme but do not match any of the canvas values in the existing sections, those sections will move to the default canvas.
• If a section does not have a canvas key defined, a default canvas will be created and such sections will be moved to the defaualt canvas.

Example

In this example, we are implementing the canvas in home page. The theme will have two canvases, namely: Left Side and Right Side.

1. The partners will define two canvases (left_side and right_side) within the theme’s schema in the home.jsx file. This setup allows for distinct sections to be grouped and rendered separately on the same page.

export const sections = JSON.stringify([
  {
    canvas: {
      value: "left_side",
      label: "Left Panel",
    },
    attributes: {
      page: "home",
    },
  },
  {
    canvas: {
      value: "right_side",
      label: "Right Panel",
    },
    attributes: {
      page: "home",
    },
  },
]);

2. The next step is to render the sections based on their canvas assignment. Using the SectionRenderer component from fdk/components. Sections associated with a specific canvas—left_side and right_side—are grouped and rendered inside separate containers.

import { SectionRenderer } from "fdk/components";

<div style={{ display: "flex" }}>
    <SectionRenderer
        sections={sections.filter(section => section.canvas === "left_side")}
        fpi={fpi}
        globalConfig={globalConfig}
    />
    <SectionRenderer
        sections={sections.filter(section => section.canvas === "right_side")}
        fpi={fpi}
        globalConfig={globalConfig}
    />
</div>

tip

You have successfully created the canvases.