---
title: "Walkthrough: Customizing the Preference Center"
slug: "walkthrough--customizing-the-preference-center"
abstract: "Add your own personal branding to the Preference Center."
---
# Walkthrough: Customizing the Preference Center

The [Preference Center](https://doc.sitecore.com/xp/en/developers/exm/103/email-experience-manager/en/configure-the-preference-center.html) enables users to specify which marketing campaigns they want to participate in and allows them to opt-out of all future email campaigns if they so desire. You can modify the default Sitecore branding of the Preference Center and specify the preferences that are important to you. In the example below, the default branding is shown on the left and the custom branding on the right.

![Example of a customized Preference Center.](<https://doc.sitecore.com/api/markdown-image/xp/en/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20d%2092+.png>)

You can customize:

- 1 - The Preference Center title and colors
- 2 - The header logo and introduction
- 3 - The marketing categories, titles, and descriptive text
- 4 - The Unsubscribe text
- 5 - The Update Subscriptions button

This topic describes how to:

- [Define marketing campaign categories and descriptive text](https://doc.sitecore.com/xp/en/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-c99e5865-92a4-b9e4-6da3-9eac4a09e93f_section-5cc999fc62f1a-idm45444643001856 "Define marketing campaign categories and descriptive text")
- [Upload a new logo to the Media Library](https://doc.sitecore.com/xp/en/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-c99e5865-92a4-b9e4-6da3-9eac4a09e93f_section-5cd021a0bf244-idm45444640299632 "Upload a new logo to the Media Library")
- [Apply brand styles](https://doc.sitecore.com/xp/en/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-c99e5865-92a4-b9e4-6da3-9eac4a09e93f_N1557154770368)
- [Change the look and feel of the Preference Center](https://doc.sitecore.com/xp/en/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-c99e5865-92a4-b9e4-6da3-9eac4a09e93f_N1557154780913)
- [Publish your changes](https://doc.sitecore.com/xp/en/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-c99e5865-92a4-b9e4-6da3-9eac4a09e93f_section-5cd0204966b1c-idm45444640336912 "Publish your changes")

<details>
<summary><h2>Define marketing campaign categories and descriptive text</h2></summary>

Using the default layout, each category you define displays as a separate section in the Preference Center. Marketing campaign categories are added to the Preference Center by marketing category group.

![Marketing Control Panel Campaigns folder in the sitecore tree structure.](<https://doc.sitecore.com/api/markdown-image/xp/en/users/exm/103/email-experience-manager/images/Customize%20preference%20center%2092+.png>)

To define marketing campaign categories:

1. In the Content Editor, navigate to the **Marketing Control Panel** (*sitecore/System/Marketing Control Panel*).
2. Expand the **Taxonomies** folder, right-click **Marketing categories** and click **Insert, Folder** to add a marketing category group.
3. Right-click the newly created folder and click **Insert, Insert From Template**.
4. In the **Insert from Template** dialog box, navigate to *Templates/System/Analytics/Marketing Taxonomy/Marketing category* and select **Marketing category**.

    ![Insert from Template dialog box showing the marketing category.](<https://doc.sitecore.com/api/markdown-image/xp/en/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20b%2092+.png>)

5. In the **Item Name** field, type the name of the subscription category (for example, *Newsletter*) and click **Insert**.

    ![sitecore tree showing the Campaigns structure.](<https://doc.sitecore.com/api/markdown-image/xp/en/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20c%2092+.png>)

6. To define additional subscription sections, repeat Steps 3 to 5.
7. In the content tree, click one of the subscription categories that you just defined and, on the **Content** tab, in the **General** section, in the **Description** field, click the **Show editor** hyperlink.
8. In the **Rich Text Editor** dialog box, type a description of the campaign category, and click **Accept**.
9. When you have defined all the marketing categories, in the content tree, navigate to *sitecore/System/Marketing Control Panel*, expand the **Taxonomies** folder and then click **Campaign group**.
10. On the ribbon, click the **Taxonomy** tab, and then click **Deploy**.

    ![Taxonomy tab showing the Deploy button.](<https://doc.sitecore.com/api/markdown-image/xp/en/users/exm/103/email-experience-manager/images/Customize%20preference%20center%20d%2092+.png>)

</details>

<details>
<summary><h2>Upload a new logo to the Media Library</h2></summary>

For the logo to display in the Email Preference Center, you must first upload it to the Media Library and then re-publish the site.

To upload a logo:

1. In the Content Editor, in the content tree, navigate to *sitecore/Media Library/Images*.
2. On the **Folder** tab, click **Upload File**.
3. In the **Upload File** dialog box, click **Choose File**, and browse to where the logo image file is saved.
4. Select the logo file and click **Open** and then click **Upload**.
5. On the ribbon, click **Save**.

</details>

<details>
<summary><h2>Apply brand styles</h2></summary>

For your logo and images to appear in the Preference Center, you must configure them first.

To configure the logo and images:

1. In the Content Editor, in the content tree, navigate to the manager root for which you want to define Preference Center options.
2. Click the **Content** tab.
3. In the **Message Generation** section, in the **Base URL** field, specify the website address for links in email messages and for images that are hosted on the website (for example, http://your.host).
4. Select the `Embed Images` check box.
5. In the **Default Message Header** section, in the **From Address** field, type the email address of the sender (for example, SendersName@abc.com).
6. In the **Branding** section, specify the brand name and logo. Using the default settings for the Preference Center, the brand name is used in the unsubscribe message and the logo is inserted at the top of the Preference Center.
7. In the **Marketing Categories** section, double-click the marketing category group you defined in Step 2 of the [first procedure](https://doc.sitecore.com/xp/en/users/exm/103/email-experience-manager/walkthrough--customizing-the-preference-center.html#UUID-c99e5865-92a4-b9e4-6da3-9eac4a09e93f_section-5cc999fc62f1a-idm45444643001856 "Define marketing campaign categories and descriptive text") to move it to the **Selected** list.
8. Save your changes.

</details>

<details>
<summary><h2>Change the look and feel of the Preference Center</h2></summary>

You can customize the Preference Center to mirror company branding. By default, the Preference Center Marketing Group HTML displays subscription options for the marketing group and categories you defined for the marketing root.

To change the look and feel of the Preference Center:

1. In the Content Editor, with the manager root for which you want to define Preference Center options selected, click the **Content** tab.
2. Scroll down to the **Preference Center** section.
3. In the **Preference Center Title** field, specify the title of the Preference Center dialog box.
4. In the **Preference Center Intro**, click the **Show editor** hyperlink and introduce the Preference Center to users.
5. In the **Preference Center Layout HTML** section, click the **Edit HTML** hyperlink.
6. To change the colors of the header and submit button, change the following:
    - Replace the **header** section with:

        ```csharp
        header {
                    height: 90px;
                    border-top: 4px solid #9D008D;
                    background-color: rgba(0,0,0,.8);
                    padding: 0 15px;
                    color: #fff;
                  }
        ```

    - Replace the **header.before** section with:

        ```csharp
        header:before {
            position: absolute;
            right: 0;
            top: 0px;
            display: block;
            background-repeat: no-repeat;
            width: 113px;
            height: 90px;
            content: "";
            border-top: 4px #9D008D;
            }header:before {
                    position: absolute;
                    right: 0;
                    top: 0px;
                    display: block;
                    background-repeat: no-repeat;
                    width: 113px;
                    height: 90px;
                    content: "";
                    border-top: 4px #9D008D; and background-color: rgba(0,0,0,.8);
                  }
        ```

    - In the **.exmPreferenceCenter form button** section, change the **background-color** and the **border-color** attribute.
    - In the **.exmPreferenceCenter label .description .title** section, add the line `color: #9D008D;`.
7. Click **Accept** and save your changes.

</details>

<details>
<summary><h2>Publish your changes</h2></summary>

To see modifications to the Preference Center, you must publish site changes.

To publish site changes:

1. On the ribbon, click the **Publish** tab.
2. Click **Publish, Publish Site**.
3. Accept the defaults (Smart publish) and click **Publish**.
4. Once the site has been published, click **Close**.

To see your changes, in the Email Experience Manager, create an email campaign using the Left Image Block template and send it.

</details>