How to Customize the Post Checkout Widget with Custom CSS

The post checkout widget used to collect birthdays in the Bee Day app allows you to style it with custom CSS. Follow these steps to personalize your widget:

Step 1: Open the Settings

Open the Bee Day app and navigate to the settings via the side menu:

Step 2: Access Post Checkout Widget Settings

Next, open the Post Checkout Widget Settings:

Step 3: Navigate to Custom CSS Section

In the settings, scroll down to the section titled Custom CSS. Here, you can insert your custom CSS to style the widget. You can target different elements within the widget using the following CSS IDs:

#birthday-form
#birthday-form-title
#birthday-form-description
#birthday-form-thank-you-message
#birthday-form-fields
#birthday-form-fields-day > input
#birthday-form-fields-month > input
#birthday-form-fields-year > input
#birthday-form-fields-button > button

Example: Changing the Button Color

To change the button color to blue, you can insert the following CSS into the Custom CSS field. Make sure to click Save Changes to apply your customizations.

#birthday-form-fields-button button {
    background-color: #46AEEE !important;
}

By following these steps, you can easily style the post checkout widget to match your brand or desired appearance. Enjoy customizing your widget!

If you need additional assistance, please reach out to our support team. We are happy to help you with any questions or issues you may have.

Updated on: 01/07/2024