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

Make sure your storefront uses @pack/react 2.2.0 or later. Check the installed version with:

npm ls @pack/react

The Blueprint already meets this. If your version is older, upgrade @pack/react. Upgrading to a new major version can include breaking changes, so read the changelog first.

Add styles to your section fragment, in app/data/graphql/pack/settings.ts in the Blueprint. The Blueprint already includes it.

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

<RenderSections> turns each section's styles into a <style> tag for that section.