Introduction

Transform your Dedicated Page by infusing it with your brand's identity through tailored CSS and complementary typography.

💡 Already a pro with CSS? Check out our Advanced CSS tips & tricks →

Customizing your Dedicated Page with CSS

To use Custom CSS on your page follow these steps:

1. Click Onsite > Dedicated Page on the left sidebar
2. On the lower right side, click General Settings
3. Any CSS you write should update in real-time on the left-hand side, just click Save each time you make changes.

Adding a custom font with CSS

In the example below, we'll walk through how to add custom fonts using a Google font and the @import method.

1. Click Onsite > Dedicated Page on the left sidebar
2. Click General Settings on the bottom right. Make sure 'Default' is selected from the dropdown pickers as the primary and secondary font
3. Copy the CSS below and paste it into the Custom CSS field. We're using the Sono font from Google, but you can use your own font@import url('https://fonts.googleapis.com/css2?family=Sono:wght@300;700&display=swap');.content { font-family: 'Sono', sans-serif !important; font-weight: 300 !important;}.title, .hero-title { font-family: 'Sono', sans-serif !important; font-weight: 700 !important;}
4. Click Save and preview the page on your store.

📝 Note: Our app allows imported fonts from the following sources:

• https://fonts.googleapis.com - Google Fonts
• https://use.typekit.net - Typekit/Adobe Fonts
• https://cloud.typography.com - Hoefler & Co. fonts

Adding custom fonts from your Shopify Admin

1. Upload the file to your Shopify Store. To access the Files page, go to Content > Files
2. Copy the link of the uploaded font
3. From the BrandLift Ddashboard, go to Onsite > Dedicated Page
4. Copy the CSS below and paste it into the Custom CSS field. We're using the Suvenn font as a sample, but this should be changed to the name of your own font.

@font-face {  font-family: 'Suvenn';  src: url( 'https://cdn.shopify.com/s/files/1/0609/2213/4784/files/Suvenn.ttf?v=1678438421' )}.content {  font-family: 'Suvenn', sans-serif !important;  font-weight: 300 !important;}.title, .hero-title {  font-family: 'Suvenn', sans-serif !important;  font-weight: 700 !important;}

5. Click Save and preview the page on your store.

Common questions

Can I get help adding in my custom style or font?

Need assistance implementing these changes? Reach out to our support team via email, and we'll be glad to assist you.

Where can I find good fonts?

Visit Typekit or Google Fonts for free and affordable fonts to use.