Buy Button & Widget Styling in Bold Memberships

Overview

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.

In this article, we are going to go over the different styling settings that are available within Bold Memberships.

Please select an accordion to view more information on the styling option below:


Widget Styling

Widget Example

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 will 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 will make the plan font size bigger, while decreasing the pixel size will make 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. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will 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 will make the description font size bigger, while decreasing the pixel size will make 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. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will impact the labels for all widgets:
    • Label Font Size - This setting allows you to change the size of all labels. Increasing the pixel size will make each label font size bigger, while decreasing the pixel size will make each label font size smaller.
    • Label Width - This setting allows you to adjust the width of the labels. Increasing the label width will allow the label text to align on the same line, while decreasing the width will allow 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. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will 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 will increase the width size of each field, while decreasing the width will shrink the input fields.
  3. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will impact the widget dimensions:
    • Container Size - This setting allows you to change the overall size of the widget. Increasing or decreasing this setting will adjust 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. Select Preview to view your styling changes (optional).
  4. Select Save.

 


 

Buy Button Styling

Buy Button Example

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 will impact 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 will make the plan font size bigger, while decreasing the pixel size will make 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. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will impact 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 will make the description font size bigger, while decreasing the pixel size will make 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. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will impact the labels for all buy buttons:
    • Label Font Size - This setting allows you to change the size of all labels. Increasing the pixel size will make each label font size bigger, while decreasing the pixel size will make each label font size smaller.
    • Label Width - This setting allows you to adjust the width of the labels. Increasing the label width will allow the label text to align on the same line, while decreasing the width will allow 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. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will impact 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 will increase the width size of each field, while decreasing the width will shrink the input fields.
  3. Select Preview to view your styling changes (optional).
  4. Select Save.

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 will impact 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 will adjust 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. Select Preview to view your styling changes (optional).
  4. Select Save.
Was this article helpful?
0 out of 0 found this helpful