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.

The Properties Panel is not yet available for storefront on the A/B testing branch of @pack/react. We are working on integrating it and it will be available soon.

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
  }