Skip to main content

Configuring Button Functions

Learn about function compatibility and get setup instructions for each button type.

Jennifer Wong avatar
Written by Jennifer Wong
Updated over a month ago

Function Compatibility Chart

This table shows which functions are available (✓) or unavailable (✗) for Primary Button and Expandable Button Widget configurations:

Primary Button

Expandable Button Widget

Gorgias

✅

❌

Growave

✅

❌

Klaviyo

✅

✅

Loyalty Lion

✅

❌

Page

✅

✅

Pop Up

❌

✅

Scroll to Top

✅

✅

Smile

✅

❌

Whatsapp

✅

✅

Setup Guidelines by Function

Follow these configuration steps for each button function:

Gorgias

  1. Select "Gorgias" from the function dropdown

  2. No additional configuration needed

‼️ Important

Before using this function, you must:

  1. Install the Gorgias app from the Shopify App Store

  2. Enable Gorgias in your theme settings:

    1. Go to your Shopify admin

    2. Navigate to Online Store > Themes

    3. Click "Customize" on your active theme

    4. Enable Gorgias integration

Growave

  1. Select "Growave" from the function dropdown

  2. No additional configuration needed

‼️ Important

Before using this function, you must:

  1. Install the Growave app from the Shopify App Store

  2. Enable Growave in your theme settings:

    1. Go to your Shopify admin

    2. Navigate to Online Store > Themes

    3. Click "Customize" on your active theme

    4. Enable Growave integration

Klaviyo

  1. Select "Klaviyo" from the Widget Function dropdown

  2. Configuration:

    1. Klaviyo Form ID: Enter your Klaviyo form ID

    2. Note: You'll need to get this ID from your Klaviyo account

💡 Get the Klaviyo Form ID

  1. Logged in to the Klaviyo Dashboard

  2. Click “Sign-up forms” in the left side menu

  3. Choose the form and click the 3-dot “action” button

  4. Click “Edit”

  5. Copy the form ID from the URL

Loyalty Lion

  1. Select "Loyalty Lion" from the function dropdown

  2. No additional configuration needed

‼️ Important

Before using this function, you must:

  1. Install the Loyalty Lion app from the Shopify App Store

  2. Enable Loyalty Lion in your theme settings:

    1. Go to your Shopify admin

    2. Navigate to Online Store > Themes

    3. Click "Customize" on your active theme

    4. Enable Loyalty Lion integration

Page

  1. Select "Page" from the function dropdown

  2. Enter the destination URL, examples:

    1. https://example.com

    2. example.com

    3. /products

    4. //cdn.example.com

Pop Up

  1. Select "Pop-up" from the Widget Function dropdown

  2. Configure Pop-Up Settings:

Pop-Up Styling

  • Background Color: Set the pop-up window background (hex code, e.g., #000000)

  • Text Color: Set the text color (hex code, e.g., #FFFFFF)

  • Button Background: Set the button background color (hex code)

  • Button Label Color: Set the button text color (hex code)

Pop-Up Content:

  • Title: Add your pop-up heading (max 25 characters)

  • Description: Add your pop-up message (max 280 characters)

Pop-Up Button Settings:

  • Button Label: Text shown on the button (max 20 characters)

  • Button URL: Enter either:

    • Full URL (https://...)

    • Relative path (e.g., /products/product-name)

Pop Up Image (Optional):

  • Click "Add file" or drag and drop to upload an image

  • Option to hide image in mobile view

Scroll to Top

  1. Select "Scroll to Top" from the function dropdown

  2. No additional configuration needed

Smile

  1. Select "Smile" from the function dropdown

  2. No additional configuration needed

‼️ Important

Before using this function, you must:

  1. Install the Smile app from the Shopify App Store

  2. Enable Smile in your theme settings:

    1. Go to your Shopify admin

    2. Navigate to Online Store > Themes

    3. Click "Customize" on your active theme

    4. Enable Smile integration

  3. Enable JavaScript SDK in the Smile.io dashboard

WhatsApp Chat

1. Select "WhatsApp" from the Widget Function dropdown

2. Configure WhatsApp Settings:

WhatsApp Number:

  • Enter your number without any special characters

  • Format: 15551234567

  • Do not include: +, (), or -

  • Example: If your number is +1 (555) 123-4567, enter as 15551234567

WhatsApp Message:

  • Add a pre-filled message that will appear in the chat

💡 Pro Tips:

  1. Double-check your WhatsApp number format to ensure it works

  2. Test the button to verify that the correct WhatsApp account opens

  3. Keep pre-filled messages short and clear

Did this answer your question?