Shopify

Shopify is a leading e-commerce platform that provides merchants with the tools they need to sell products online efficiently. Integrating Beans with Shopify enhances this experience by enabling merchants to boost customer loyalty through a rewards system. With Beans for Shopify, you can reward customers for their purchases, encouraging repeat business and fostering a loyal customer base.

​

Setup

To begin, install the Beans app for Shopify through the Shopify App Store. Follow the Shopify guideline on how to install an app through the Shopify App Store.

​

Customer accounts

In order to get the app to work as expected, it is required to enable customer accounts for your Shopify Store. Shopify gives you the option to set customer accounts as disabled, optional or required. Beans requires customer accounts to be set to optional or required. Beans support both Classic customer accounts and New customer accounts. Here is how to enable customer accounts with Shopify: Enable customer accounts

​

Shopify OS 2.0

If you are using a Shopify Online Store 2.0 theme, it is essential to enable the Beans app in your Shopify theme. The new Online Store 2.0 is an improvement released by Shopify to facilitate full integration for app developers with a merchant’s shop.

1. From the Shopify dashboard, go to your Themes page.
2. Locate the Current theme section and click on Customize.
3. Click on Theme Settings, go to the App Embed tab, then locate the Beans Ultimate app extension and switch it on.

​

Rewards page

Beans automatically adds a rewards page to your shop. By default, you can access the page at https://example.myshopify.com/pages/rewards, assuming your website’s full URL is https://example.myshopify.com. The Shopify navigation tool let you dynamically set up a navigation menu for your website. We recommend adding the link to the rewards program in the Main menu in order to make it easy for your customers to access. Here is how to do: Editing Shopify store menu

​

Redemption

​

Minimum points required for redemption

Sets a minimum points threshold that customers must reach before redeeming rewards. By default, customers need to accumulate at least 100 points before being eligible for redemption. You can adjust this threshold higher to ensure meaningful program engagement and prevent inefficient redemptions. For example, if you set the minimum to 500 points, customers would need to earn at least 500 points before they can start redeeming rewards. How it works:

1. From the Shopify integration dashboard, navigate to Preferences.
2. Locate the Redemption section and enter your desired minimum points threshold in the Minimum Points Required field.
3. Click Save to apply changes.

​

Maximum discount per redemption

Sets a limit on how much of the total purchase price can be discounted through points. This ensures that the discounts provided through redemptions remain within acceptable limits for your business. For example, if a customer wants to buy a product priced at $10 and has 1000 points (equal to $10), but the maximum discount is set to 50%, they can only use 500 points, giving them a $5 discount. How it works:

1. From the Shopify integration dashboard, navigate to Preferences.
2. Locate the Redemption section and use the Maximum Discount Per Redemption slider to set your desired maximum discount percentage.
3. Click Save to apply changes.

​

Using discount codes with points redemption

When customers redeem points, Beans generates a discount code that automatically applies to their cart at checkout. The ability to combine this with other discount codes depends on your Shopify plan: Shopify (Classic)

• Only one discount code can be used per checkout.
• Points redemption discount codes cannot be combined with other discounts.

Shopify Plus

• Multiple discount codes can be enabled at checkout.
• Some discount codes may still be incompatible due to conflicting rules.
• Review your discount settings to ensure smooth points redemption.

​

Shopify customer tags

When you enable tiers in Beans, the system automatically adds tier-specific tags to your customers in Shopify. These tags make it easy to identify customer tier levels, create segments, track progression, and target marketing campaigns based on loyalty tiers directly in Shopify. For example, if a customer reaches the Gold tier, they’ll receive the tag Beans-Tier-Gold in their Shopify profile.

​

Storefront Display

​

Widget

The widget appears as a floating button in the corner of your storefront that displays notifications to help customers access their rewards program features, including joining the program, redeeming points, and checking their balance. How it works:

1. From the Shopify integration dashboard, navigate to Storefront display.
2. Locate and click on Widget.
3. In the Widget settings page, toggle “Enable widget” to on.
4. Adjust the widget’s position and appearance to match your brand’s style.
5. Click Save to apply changes.

​

Rewards page

The rewards page is a dedicated section on your storefront that displays your rewards program details. It allows customers to view their points balance, redeem rewards, and learn more about your program. How it works:

1. From the Shopify integration dashboard, navigate to Storefront display.
2. Locate and click on Rewards page.
3. Customize the template and settings as needed.
4. Click Save to apply changes.

Customization settings:

• Headline Text: The main title displayed at the top of the rewards page to attract customer attention.
• About Text: A small block of text that explains your rewards program purpose and welcomes customers.
• Help Text: A FAQ-style text that explains your rewards program, including common questions like “What is this?”, “How does it work?”, “How to redeem points?”, and important terms and conditions.
• Primary Color: The main color used throughout the rewards page to maintain consistent branding with your store’s theme.
• Shop Now Link: A direct link to the shopping page. It will be used as a call-to-action for customers to start earning points.
• Contrast Color: A color that contrasts with your primary color, typically black or white, to ensure text readability.

​

Referral page

The referral page is a dedicated section on your storefront that displays your referral program details. It allows customers to view and share their referral link with friends. How it works:

1. From the Shopify integration dashboard, navigate to Storefront display.
2. Locate the Referral page section.
3. Customize the template and settings as needed.
4. Click Save to apply changes.

Customization settings:

• Headline Text: The main title displayed at the top of the referral page to attract customer attention.
• About Text: A small block of text that explains your referral program purpose and welcomes customers.
• Twitter Message: The default text that appears when customers share their referral link on Twitter.
• Primary Color: The main color used throughout the referral page to maintain consistent branding with your store’s theme.
• Contrast Color: A color that contrasts with your primary color, typically black or white, to ensure text readability.

​

Redemption button

The redemption button allows customers to redeem their rewards directly from the cart or checkout page. By default, it is placed near the checkout call-to-action (CTA), allowing customers to apply their rewards before completing a purchase. How it works:

1. From the Shopify integration dashboard, navigate to Storefront display.
2. Locate the Redemption Button section.
3. Customize the template and settings as needed.
4. Click Save to apply changes.

Customization settings:

• Primary Color: The button background color.
• Contrast Color: The button text color. It should contrast with your primary color. It is recommended to use black or white to ensure text readability.

​

Referral invitation popup

The referral invitation popup appears when someone visits a referral link, encouraging them to join your rewards program using their unique link. How it works:

1. From the Shopify integration dashboard, navigate to Storefront display.
2. Locate and click on Referral Invitation Popup.
3. Customize the template and settings as needed.
4. Click Save to apply changes.

Customization settings:

• Message: A message informing customers that they are being referred and inviting them to sign up in order to get a reward.
• Call-to-Action Text: The text of the button to encourage customers to sign up.
• Primary Color: The popup’s main color. It should match your brand colors.

​

Referral reward popup

The referral reward popup notifies customers of successful referrals and encourages them to use their rewards. This confirmation popup helps maintain engagement with your referral program. How it works:

1. From the Shopify integration dashboard, navigate to Storefront display.
2. Locate the Referral Reward Popup section.
3. Customize the template and settings as needed.
4. Click Save to apply changes.

Customization settings:

• Message: A confirmation message informing customers that their referral was successful.
• Call-to-Action Text: The text of the button to encourage customers to redeem their reward.
• Primary Color: The popup’s main color. It should match your brand colors.

​

Reinstall

If you suspect the Beans plugin isn’t properly installed on your Shopify site, Beans provides a straightforward solution to address this without any negative side effects.

1. From the Beans admin dashboard, navigate to the Shopify integration home page.
2. Select Status in the integration navigation menu.
3. From the Actions dropdown on the top right, select Reinstall Beans.

​

Uninstall Beans from Shopify

Follow these steps to completely remove Beans from your Shopify store:

1. From your Shopify admin, go to Apps.
2. Find Beans in your installed apps list.
3. Click Delete to remove the application.
4. Remove the automatically created program pages:
   • Go to Online Store > Pages
   • Find and delete the “Rewards Program” page
   • Find and delete the “Referral Program” page
5. Remove the Beans authentication code:
   • Go to Online Store > Themes
   • Click Actions > Edit code
   • Open the theme.liquid file
   • Find and delete the following snippet:
   Copy

    <script>window.beans_cjs_id = '{{ customer.id }}';
    window.beans_cjs_email = '{{ customer.email }}';</script>