Customizing Your Email Unsubscribe Page in Yotpo Email

Customizing the page customers see when unsubscribing from your marketing emails ensures a seamless experience, even during the unsubscribe process. With Yotpo Email, you can apply key elements of your brand identity, such as your logo, colors, and fonts, to align the page’s design with your overall branding.

Unsubscribe Page Editor Overview

The unsubscribe page editor splits the unsubscribe process into 2 steps:

• Unsubscribe: The page where customers click a button to confirm they want to unsubscribe

• Confirmation: The page displayed after customers confirm their unsubscribe request

With the editor, you can customize every aspect of your unsubscribe page. For maximum flexibility, you can add custom CSS to style it further.

Accessing the Unsubscribe Page Editor

To open the unsubscribe page editor:

1. In your Yotpo main menu, go to Audience > Consent & Preferences.

2. In the Email unsubscribe page section, click Edit page.

Customizing Your Unsubscribe Page

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

• Logo

• Title, Text, and Description

• Button (available only on the Unsubscribe step and cannot be removed)

Important

To publish your customized unsubscribe page, both steps must include at least one text field that isn't empty.

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.

Step 1: Customize 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.

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

• Colors

  • 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

  • Background color: Choose the steps’ background color

    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

  • 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: Upload a background image

    Tip

    The file you upload must meet the following requirements:

    • Supported formats: JPEG, GIF, PNG

    • Maximum allowed size image: 3 MB

    • Maximum recommended size: 800 × 600 px

    If you want to use a different image on mobile devices, turn off the Use same image on mobile toggle and upload a new file.

• 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: Adjust the roundness of the corners, as well as the border width and color

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

Step 2: Customize Your Fields

After customizing the overall appearance of the page, you can make further adjustments to the fields in each step. Simply click the field you want to edit and its customization settings will appear in the sidebar.

Logo Settings

After adding a Logo field, upload an image and customize its alignment within the field, its size (small, medium, or large), and top and bottom padding. If you want to use a different image on mobile devices, turn off the Use same image on mobile toggle and upload a new file.

Text Settings

After adding a text field, such as Title, Text, or Description, 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.

Tip

The field’s text editor allows you to style your text, add links, and insert personalization tags. For more details, see Adding Dynamic Content with Personalization Tags.

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.

Step 3: Publish Your Changes

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