Properties Panel Implementation

Properties Panel is a powerful tool that allows merchants to customize the look and feel of their content. It provides a user-friendly interface for editing various properties of elements on your page, making it easy to create visually appealing designs without needing any coding knowledge.

Setup

Use @pack/react@2.2.0 or higher.

npm install @pack/react@2.2.0

Add styles to SectionFragment GQL in app/data/graphql/pack/settings.ts:

export const SECTION_FRAGMENT = `
  fragment SectionFragment on Section {
    id
    title
    status
    data
    styles // Add styles field here
    publishedAt
    createdAt
    updatedAt
  }