Loyalty page button color

This guide explains how to set up consistent button colors across your Joy Loyalty program page, creating a cohesive brand experience.

This feature is available for: All plans

What is this feature

The Joy Loyalty button color customization feature allows you to set global color variables for all buttons across your loyalty page. Instead of having to edit button colors individually in each section, you can now set primary, secondary, and disabled button colors in one central location. These color settings automatically apply to all buttons throughout your loyalty program, ensuring visual consistency and brand alignment.

Why use this feature

Consistent button colors across your loyalty program create a more professional, cohesive customer experience. By maintaining your brand identity throughout the customer journey, you establish stronger recognition and trust with your audience. This feature saves you valuable time by allowing you to update all button colors in one central location instead of tediously modifying each section individually. With global button color settings, you can ensure your loyalty program feels like an integrated extension of your brand rather than a disconnected third-party element.

Setting up global button colors

There are two ways to access the global button color settings in Joy Loyalty:

Method 1: From the Embedded Content menu

1. From your Shopify admin, navigate to Apps > Joy Loyalty

2. In the left sidebar, click on Embedded content

3. At the top of the page, you'll see a banner with an option to "Change all button colors"

4. Click this option to be taken to the button color settings page

Method 2: Through Theme Editor

1. From your Shopify admin, navigate to Apps > Joy Loyalty

2. In the left sidebar, click on Embedded content

3. Find any block (such as the Loyalty Hero Banner) and click Edit in Theme Editor

4. In the Theme Editor, click Go to settings

5. A new tab will open with the global button color settings

Configuring button colors

On the settings page, you'll see the following customization options:

1. Primary button color: The main color for call-to-action buttons (e.g., "Sign up", "Claim reward")

2. Primary button text color: The text color that appears on primary buttons

3. Secondary button color: The color for secondary action buttons

4. Secondary button text color: The text color that appears on secondary buttons

5. Disabled button color: The color for buttons that are not currently active

To customize a color:

1. Click on the color picker next to each option

2. Select your desired color from the palette or enter a specific hex code

3. Click Save when you've finished making changes

All buttons throughout your loyalty program will automatically update to reflect your color choices.

Best practices

To create an effective color scheme for your loyalty program buttons:

• Use your brand colors: Align button colors with your overall brand palette

• Create visual hierarchy: Use bolder colors for primary actions and more subtle colors for secondary actions

• Ensure accessibility: Maintain sufficient contrast between button colors and text colors for readability

• Consider color psychology: Use colors that align with the emotion you want to evoke (e.g., green for positive actions)

Read more

The art of crafting your loyalty page's

Frequently Asked Questions

Q: Will changing the global button colors affect my existing theme settings? A: No, the global button color settings only apply to your Joy Loyalty program elements and won't affect your Shopify theme.

Q: Can I still customize individual buttons if needed? A: Yes, you can override the global settings for specific buttons by editing them directly in the Theme Editor.

Q: Will my current button colors be preserved? A: Yes, for existing stores, your current button color settings will be maintained until you choose to update them.

Q: How do these settings affect button hover states? A: The system automatically creates appropriate hover states based on your selected colors.

Q: Can I preview my color changes before saving? A: Yes, you can see how your color choices look in the settings interface before applying them.