Use the store's font or another custom font

Shopify Theme

To change the font of your popup or smart bar to match your Shopify theme font, follow these steps:
Go to your Pop Convert popup or smart bar.
Click on Design > Custom Styles
Enable CSS and add this code:

/*Sets popup or smart bar text to match your Shopify theme font*/

#__pc_app {
--pc-font-family: inherit !important;
}

Custom Font using @import method

Pop Convert allows imported fonts from Google Fonts. To change the font of your popup or smart bar using a custom font, follow these steps:
Go to your Pop Convert popup or smart bar.
Click on Design > Custom Styles
Enable CSS and add this code:

@import url('https://fonts.googleapis.com/css2?family=Font+Name&display=swap');

Below the code, add any of these codes depending on how you want your popup or smart bar to look:

Popups

/*Sets custom font for both the header and main message*/

.pop-content-blocks {
  font-family: 'Font Name' !important;
}

/*Sets custom font for the header only*/

.pop-content-blocks h1 {
  font-family: 'Font Name' !important;
}

/*Sets custom font for the main message only*/

.pop-content-blocks p {
  font-family: 'Font Name' !important;
}

/*Sets custom font for the input text*/

.text-input {
  font-family: 'Font Name' !important;
}

/*Sets custom font for the button text*/

.form-block-submit-button {
  font-family: 'Font Name' !important;
}

/*Sets custom font for the GDPR text*/

.gdpr-text {
  font-family: 'Font Name' !important;
}

/*Sets custom font for the conversion text*/

.pop-thanks-text  {
  font-family: 'Font Name' !important;
}

Smart Bars

/*Sets custom font for main message*/

.pc-bar {
  font-family: 'Font Name' !important;
}

/*Sets custom font for the button text*/

.bar-input-form-submit-button {
  font-family: 'Font Name' !important;
}

Replace FontName with the name of the font you want to import.

Updated on: 13/12/2023