Select your platform

Buy Button & Widget Styling in Bold Memberships

Laurel
Laurel
  • Updated

Bold Memberships offers styling settings within the in-app admin that allow you to change the storefront styling of buy buttons and membership widgets created from within the app.

This article outlines the different style settings that are available within Bold Memberships.

 

 

Widget Styling

Widget Example

 

1. Plan Title Font Styling

For steps on adjusting the plan title font for all widgets, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Page Signup Styling, make your desired styling changes from the following options that impact the membership plan name for all widgets:

    • Plan Font Size This setting allows you to adjust the font size of the plan name. Increasing the pixel size makes the plan font size bigger, while decreasing the pixel size makes the plan font size smaller.

    • Plan Font Style - This setting allows you to adjust the style of the plan name font by adding Italics or an Underline to the plan name.

    • Plan Font Color - This setting allows you to adjust the font color of the plan name. You can use a custom hex color or select a color from the color window.

    • Plan Font Weight - This setting allows you to set how thick or thin characters in the plan title text should be displayed.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

2. Plan Description Font Styling

For steps on adjusting the plan description font for all widgets, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Page Signup Styling, make your desired styling changes from the following options that impact the plan description font for all widgets:

    • Description Font Size - This setting allows you to change the size of the description font. Increasing the pixel size makes the description font size bigger, while decreasing the pixel size makes the description font size smaller.

    • Description Font Style - This setting allows you to adjust the description font style by adding Italics or an Underline to the description text.

    • Description Font Color - This setting allows you to adjust the font color of the description text. You can use a custom hex color or select a color from the color window.

    • Description Font Weight - This setting allows you to set how thick or thin characters in the description text should be displayed.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

3. Label Font Styling

For steps on adjusting each label font for all widgets, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Page Signup Styling, make your desired styling changes from the following options that impacts the labels for all widgets:

    • Label Font Size - This setting allows you to change the size of all labels. Increasing the pixel size makes each label font size bigger, while decreasing the pixel size makes each label font size smaller.

    • Label Width - This setting allows you to adjust the width of the labels. Increasing the label width allows the label text to align on the same line, while decreasing the width allows each word in labels to be on separate lines.

    • Label Alignment - This allows you to change the alignment of all labels to amend either above the input boxes or to the left of each input box.

    • Label Font Style - This setting allows you to adjust the label font style by adding Italics or an Underline to all labels.

    • Label Font Weight - This setting allows you to set how thick or thin characters in the label text should be displayed.

    • Label Font Color - This setting allows you to adjust the font color of all label texts. You can use a custom hex color or select a color from the color window.

    • Label Padding - This setting allows you to create extra space within the label text area. You can add extra space or reduce space above, below, on the left or right of all labels by increasing or decreasing the pixel size for each padding direction.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

4. Input, Registration & Interval Styling

For steps on adjusting the styling for the input fields, registration fields and the interval dropdown field for all widgets, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Page Signup Styling, make your desired styling changes from the following options that impact the input, registration and interval fields for all widgets:

    • Input Padding - This setting allows you to create extra space within the input fields. You can add extra space or reduce space above, below, on the left or right of all input fields by increasing or decreasing the pixel size for each padding direction.

    • Input Width - This setting allows you to adjust the size of the input, registration and interval fields for all widgets. Increasing the input width increases the width size of each field, while decreasing the width shrinks the input fields.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

Widget Container Styling

For steps on adjusting the overall widget style, such as the size of the widget, margins and padding, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Page Signup Styling, make your desired styling changes from the following options that impacts the widget dimensions:

    • Container Size - This setting allows you to change the overall size of the widget. Increasing or decreasing this setting adjusts both the length and width of the widget.

    • Container Margin - This setting allows you to create space outside of the widget border in all directions.

    • Container Padding - This setting allows you to create space inside of the widget border in all directions.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

 

Buy Button Styling

Buy Button Example

 

1. Plan Title Font Styling

For steps on adjusting the plan title font in all buy button modals, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the membership plan name for all buy buttons:

    • Plan Font Size - This setting allows you to adjust the font size of the plan name. Increasing the pixel size makes the plan font size bigger, while decreasing the pixel size makes the plan font size smaller.

    • Plan Font Style - This setting allows you to adjust the style of the plan name font by adding Italics or an Underline to the plan name.

    • Plan Font Color - This setting allows you to adjust the font color of the plan name. You can use a custom hex color or select a color from the color window.

    • Plan Font Weight - This setting allows you to set how thick or thin characters in the plan title text should be displayed.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

2. Plan Description Font Styling

For steps on adjusting the plan description font for all buy buttons, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the plan description font for all buy buttons:

    • Description Font Size - This setting allows you to change the size of the description font. Increasing the pixel size makes the description font size bigger, while decreasing the pixel size makes the description font size smaller.

    • Description Font Style - This setting allows you to adjust the description font style by adding Italics or an Underline to the description text.

    • Description Font Color - This setting allows you to adjust the font color of the description text. You can use a custom hex color or select a color from the color window.

    • Description Font Weight - This setting allows you to set how thick or thin characters in the description text should be displayed.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

3. Label Font Styling

For steps on adjusting each label font for all buy buttons, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the labels for all buy buttons:

    • Label Font Size - This setting allows you to change the size of all labels. Increasing the pixel size makes each label font size bigger, while decreasing the pixel size makes each label font size smaller.

    • Label Width - This setting allows you to adjust the width of the labels. Increasing the label width allows the label text to align on the same line, while decreasing the width allows each word in labels to be on separate lines.

    • Label Alignment - This allows you to change the alignment of all labels to amend either above the input boxes or to the left of each input box.

    • Label Font Style - This setting allows you to adjust the label font style by adding Italics or an Underline to all labels.

    • Label Font Weight - This setting allows you to set how thick or thin characters in the label text should be displayed.

    • Label Font Color - This setting allows you to adjust the font color of all label texts. You can use a custom hex color or select a color from the color window.

    • Label Padding - This setting allows you to create extra space within the label text area. You can add extra space or reduce space above, below, on the left or right of all labels by increasing or decreasing the pixel size for each padding direction.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

4. Input & Registration Styling

For steps on adjusting the styling for the input fields and registration fields for all buy buttons, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the input, registration and interval fields for all buy buttons:

    • Input Padding - This setting allows you to create extra space within the input fields. You can add extra space or reduce space above, below, on the left or right of all input fields by increasing or decreasing the pixel size for each padding direction.

    • Input Width - This setting allows you to adjust the size of the input, registration and interval fields for all widgets. Increasing the input width increases the width size of each field, while decreasing the width shrinks the input fields.

  3. Optional: Select Preview to view your styling changes.

  4. Select Save.

 

Buy Button Container Styling

For steps on adjusting the overall buy button style, such as the size of the widget, margins and padding, please follow these steps:

  1. From the Bold Memberships admin, select Styling.

  2. Under Modal Signup Styling, make your desired styling changes from the following options that impacts the buy button modal dimensions:

    • Container Size - This setting allows you to change the overall size of the buy button modal. Increasing or decreasing this setting adjusts both the length and width of the modal.

    • Container Margin - This setting allows you to create space outside of the buy button border in all directions.

    • Container Padding - This setting allows you to create space inside of the buy button border in all directions.

  3. Optional Select Preview to view your styling changes.

  4. Select Save.