Skip to main content

Personalization on PDPs

Some products are eligible for optional personalization (custom embroidery). When a customer opts for personalization, a modal opens allowing them to select embroidery format and text.

Personalization Modal Screenshot

Eligibility and Data Representation​

Products eligible for personalization have the following attributes:

  • enablePersonalization metafield set to "true"
  • Product Variants configured for the personalized and non-personalized states
    • Product Option named Personalization
    • Product Option Values named Not Personalized and Personalized
  • To display the free personalization badge, the product must have the badge:free personalization tag

In addition to these eligibility conditions, personalized items are always marked as Final Sale when added to cart. This is denoted by the is_final_sale line item attribute.

Saving personalization inputs​

Upon submission of the personalization modal, two things happen:

  • If the user opted for personalization, the Personalization Product Option is updated to Personalized. Otherwise if the user removed personalization from their product, the Product Option is updated to the standard Not Personalized option.
  • Personalization inputs are saved in React state in the PDP Context Provider as Shopify Attributes. Upon adding the personalized item to the cart, these attributes are added as cart line item attributes.

Components Involved​

  • PdpProvider is the main context provider for the PDP. Personalization attributes are stored as state here.
    • ProductInfo
      • PillBadges renders applicable personalization badges when eligibility is met.
    • MultiProductOptions determines if the Personalization Add On product option should be rendered based on the eligibility conditions
      • ProductOptions is the generic container for rendering any product option. The personalization Product Options are passed here.
        • ProductOption is the generic component that renders a single product option. This component contains a switch statement for rendering the AddOn component to trigger the Personalization Modal.
          • AddOn is a basic component used to format the Add On product option.
            • PersonalizationModalButton is used to trigger the Personalization Modal. It has a side effect to update the Personalization Product Option when personalization data changes.
              • PersonalizationModal contains the form that allows the customer to select embroidery format and text. Upon submission, personalization inputs are saved in React state in the PDP Context Provider as Shopify Attributes.
    • AddToCart retrieves personalization state from the PDP context and adds the personalization attributes as cart line item attributes.