Customizing Your Email Preferences Page

Goals and Outcomes

Managing email subscriptions through a preferences page allows recipients to choose the types of emails they want to receive instead of unsubscribing entirely. This can help reduce unsubscribe rates and improve engagement. With Yotpo Email, you can customize the page to match your brand and provide a seamless customer experience.

Email Preferences Overview

The email preferences editor page splits the preferences management process into 2 steps:

• Preferences: The page where customers select the types of emails they want to receive.

• Confirmation: The page displayed after customers save their preferences.

With the editor, you can customize the preferences page layout and design including using custom CSS for a fully personalized page.

Accessing the Email Preferences Page

To open the email preferences page editor, go to Audience > Consent & Preferences and click Set up.

Customizing Your Email Preferences Page

When you open the editor, it will load the default template for each step. Steps may contain the following customizable fields:

• Image

• Title, Text, and Choices

• Button

Important

To publish your customized email preferences page, both steps must include at least one text field that isn't empty. Additionally, the first step must include a custom field section.

To add fields to a step:

1. In the Workspace area, hover over the template and click the + (plus) button.

2. Select the field you want to add.

You can easily remove a field by hovering over it and clicking the bin (remove) button.

Customizing Your Page’s Layout

Under Layout settings in the left sidebar, you can adjust the overall appearance of your steps, such as colors, fonts, and alignment. To refine your design, you can click each element in the Workspace area and customize it. Keep in mind that changes to individual fields will override your selections in Layout settings.

Note

You can reset your design at any time by clicking the Reset to default button at the top of the page editor.

The Layout settings section is organized into several sub-sections:

Colors

Here you can choose to apply the colors you have selected in your brand kit or you can choose the primary, secondary, background colors. Simply click on the color to open the color selector and choose the color you want. Colors are separated into 2 categories:

• Primary color: Choose the text color for the Title field.

• Secondary color: Choose the text color for the Description and Text fields, as well as the button color.

Additionally, you can select a field in the editor to change the color as well.

Tip

If you have your brand kit set up, you can save time by clicking Apply brand kit. To learn more, see Setting up Your Yotpo Brand Kit.

Fonts

Here you can select the primary and secondary colors fonts:

• Primary font: Choose the font for the Title field

• Secondary font: Choose the font for the Description and Text fields, as well as the button’s font

Main Image

Here you can upload a background image. Below are our image requirements:

• Supported formats: JPEG, GIF, PNG

• Maximum allowed size image: 3 MB

• Recommended maximum size: 800 × 600 px

Once you have uploaded, you can adjust the image and text to suit your needs and preferences. Additionally with the image transparency slider you can adjust the image’s opacity in the form. You can toggle the image to be viewable on mobile.

Note

Transparency setting only applies to the desktop view.

Additional Image Settings

• Position: Choose how to align the fields (this option is available only if you add an image).

• Content position: Choose how to align the content within the fields.

Corners & Outline

Here you can adjust the roundness of the corners, as well as the border width and color.

Custom CSS

Click the Add custom CSS button to open the custom CSS editor, where you can add your own styles to further customize the appearance of your page.

Tip

To get the most out of the CSS editor, make sure you're comfortable with CSS.

Customizing Your Fields

Text Settings

After adding a text field, such as Title, Text, or Choices, you’ll first need to add content. In the settings, you can customize the font, boldness, size, and color, as well as adjust the content alignment within the field. Additional options include line height, letter spacing, and more.

Choices

The custom field comes with three default choices with preset property values. The property values are the custom profile properties that will be matched to your customers after they submit the form. We recommend keeping these default choices then adding your own. When adding your own choices, the property value must be lowercase letters, numbers, and underscores only.

You can view the default choices and their matching property values in the table below:

Button Settings

In the settings, you can choose whether the button adjusts to the text length or stretches to fill the Button field. You can also customize its background color, corner roundness, and border, as well as edit the button text

Publishing Your Changes

When you're done customizing your page, click Publish in the top right corner to apply your changes.

Using the Email Preferences Personalization Tag

You can now insert the Email Preferences personalization tag into your email templates, allowing your customers to access the Email Preferences page and select their preferences.

To add a personalization tag, you simply open your email template in the email editor and click on the personalization tag icon. Then search for Manage email preferences and click to insert the tag.

Creating Matching Segments

Now that you have the Email Preferences page set up, you need to segment your customers according to their preferences. Access the Lists & Segments page then click Create audience and select Build manually to open the segment builder. Once in the builder, you can create a segment with the filter Customer attributes > Custom Profile Property and select the property value for the segment you want to build. For example, if you want to build a segment for customers interested in receiving your newsletter, you can select the property value gets_newsletter.

After building your segments according to your customers’ preferences, you can use them to ensure the right emails reach the right customers.