Customize your Olo Loyalty Site

Detailed walkthrough on different ways to customize the design and images on your Olo Loyalty website, text messages (SMS), and Member Portal. 

Personalize your online member experiences with the power of Spendgo, while keeping your brand at the forefront.

Example site with custom logo and background

Things To Know

• Changes to your branding may take up to 4 hours to show.
• For more customizations, we recommend building a customer front-end by integrating with our Spendgo APIs. Contact your Customer Success Manager for more details.
• To view and update your site’s branding, you must be an Admin or Marketing Manager user.

---

Customize My Sign In / Create Site

Set My Logo

The Logo is displayed at the top of the Sign In/Create form.

Logo always positioned at the top of the sign in and sign up forms.

Specifications

• Dimensions: 320 pixel W x 104 pixel H
• File Format: PNG
• File Size: Use images 500 KB or less to help your site load quickly.
• Resolution: 120 MP (megapixel) limit

Instructions

1. In your Dashboard, go to Settings > Branding > Logos.
2. In the Logo Image field, drag and drop or upload your image file.

3. (Optional) For ADA Compliance, enter the Alt-text to be readable for:

a. en-US: United States English

b. en-CA: Canada English

c. fr-CA: French Canadian

4. Click Save.

Set My Square Logo

The Square Logo is used as a thumbnail in some screens.

It is also used for email communications – such as the email verification, password reset emails. Spendgo-powered email notifications are used only in mobile integrations that are not currently using the new Passwordless APIs, as well as in the reset password function triggered from the Dashboard Support portal.

Specifications

• Dimensions: 150 pixel W x 150 pixel H
• File Format: JPEG
• File Size: Use images 500 KB or less to help your site load quickly.
• Resolution: 120 MP (megapixel) limit

Instructions

1. In your Dashboard, go to Settings > Branding > Logos.

2. In the Square Logo Image field, drag and drop or upload your image file.

   

3. Click Save.

Set My Background Image

The Background Image is an optional image located behind your Sign In/Create form and Promo Image. Parts of the image may get cut-off or covered depending on your browser width. If you do not include an image the background will be white.

Example background image lays behind the form.

Specifications

• Dimensions: 1500 pixel W x 1500 pixel H
• File Format: PNG
• File Size: Use images 500 KB or less to help your site load quickly.
• Resolution: 120 MP (megapixel) limit

Recommendations

• Don't use images with text in the actual image file. It may get covered by your Promo Image or Sign In/Create form. Use the Promo Image instead to display promotional text.
  We recommend using the Promo Image for any custom text to avoid any cropping in certain browser widths. If you do decide to put text in your Promo image, also provide the Alt-text for ADA compliance.
• Keep the background simple or an abstract pattern. It should not distract from the Sign In/Create form which is the primary objective of the site.

Instructions

1. In your Dashboard, go to Settings > Branding > Sign In/Create.

2. In the Background Image field, drag and drop or upload your image file.

   

3. Click Save.

Set My Promo Image

The Promo Image is an optional image that is a good way to promote your program, market its benefits and/or how-it-works. If you do not set a Promo Image, the Sign In/Create form will be centered in the browser screen.

Example of the layout with the Promo Image enabled.
Positioned left of form in desktop and tablet browsers.

Specifications

• Dimensions: 500 pixel W x 720 pixel H
• File Format: PNG
• File Size: Use images 500 KB or less to help your site load quickly.
• Resolution: 120 MP (megapixel) limit

Instructions

1. In your Dashboard, go to Settings > Branding > Sign In/Create.

2. In the Promo Image field, drag and drop or upload your image file.

   

3. (Optional) For ADA Compliance, enter the Alt-text to be readable for:

   

4. Click Save.

Set My Custom Footer

The Custom Footer allows you to add your own legal or text displayed below your Sign In/Create form.

Example of the Custom Footer position beneath form.

Instructions

1. In your Dashboard, go to Settings > Branding > Sign In/Create.

2. Enable the Footer Text.

   

3. Enter your custom Footer Text in the text editor.
   Please note, paste only plain text into the editor to ensure consistent style and formatting on the customer's screen. You can ensure the formatting is cleared by clicking the button.
4. Click Save.

Disable My Custom Footer

1. In your Dashboard, go to Settings > Branding > Sign In/Create.

2. Turn off the Footer Text.

   

3. Click Save.

Set My Email or SMS Opt-In

Setting the Email or SMS Opt-In displays checkboxes for each respective channel to be collected during the customer’s account creation. You can also customize the message displayed in the form to include your own legal disclaimer.

Example of the Email and SMS Opt-In checkboxes enabled.

Recommendations

• Keep your disclaimer text clear, concise, and specific to the communications your customers can expect from the specific channel.
• Do not enable the channel Opt-In in your form unless you have the channel integration also enabled.

Instructions

1. In your Dashboard, go to Settings > Branding > Sign In/Create.

2. Enable the Email Opt-In and/or SMS Opt-In.

   

   
3. Enter your custom Text in the text editor.
   Please note, paste only plain text into the editor to ensure consistent style and formatting on the customer's screen. You can ensure the formatting is cleared by clicking the button.
4. Click Save.

Disable My Email or SMS Opt-In

1. In your Dashboard, go to Settings > Branding > Sign In/Create.

2. Turn off the Email Opt-In and/or SMS Opt-In.

   

   

3. Click Save.

---

Customize My Member Portal

Set My Banner Image

The Banner Image appears at the top of the Spendgo powered Member Portal. The image you provide will fill the top 156 pixels of the page up to 1020 pixels wide. In smaller browsers, your image may be cropped on the sides, but will never be distorted to fit this space.

Example of the Banner Image in Member Portal

Specifications

• Dimensions: 1020 pixel W x 165 pixel H
• File Format: PNG
• File Size: Use images 500 KB or less to help your site load quickly.
• Resolution: 120 MP (megapixel) limit

Recommendations

• The banner image is not meant to support text in the imagery. Adding text will be a risk to cropping in smaller browsers and is not ADA compliant. Instead enter any text into the About section of the page.

Instructions

1. In your Dashboard, go to Settings > Branding > Member Portal.

2. In the Banner Image field, drag and drop or upload your image file.

   

3. Click Save.

Set About Details

Located at the bottom of the My Rewards section of the Member Portal, tell your Members all about your program and how it works.

Example of your program’s about section displayed to Members

Instructions

1. In your Dashboard, go to Settings > Branding > Member Portal.

2. Enter your custom About text in the text editor.

   

   Important: paste only plain text into the editor to ensure consistent style and formatting on the customer's screen. You can ensure the formatting is cleared by clicking the button in the text editor field.

3. Click Save.

---

Related Articles

• Olo Loyalty Directory
• Passwordless Login