Skip to main content

Setting Up Your Expandable Button

Follow these simple steps to configure your expandable button:

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

Basic Configuration

Step 1: Access the Settings

  1. Open your Shopify admin

  2. Navigate to Apps > Powerful Floating Buttons

  3. Select Expandable Button from the left sidebar

Step 2: Choose the Style Mode

Toggle between two available styles:

  • Default Style: Shows a single button that expands when clicked

  • Expanded Style: Displays all buttons in an expanded container view

Customization Options

Step 1: Customize Default Style

  1. Button Type

    • Choose between two types:

      • Basic: Simple button with customizable icon/image

      • Advanced: Custom button with editable label (character limit: 10)

  2. Icon Setup

    1. Use Preset Icons:

      • Click "Browse icon collection"

      • Select your preferred icon from the library

      • Note: Default icons will be used if no icon selection is made.

    2. Upload Custom Icon:

      • Click "Add file" or drag and drop your image

      • Supported formats:

        • PNG

        • JPG/JPEG

      • Maximum file size: 3MB

      • Note: Uploaded images will override any preset icon selection

  3. Color Configuration

    • Select from preset color schemes

    • Customize individual elements:

      • Icon color (for preset icons only)

      • Button background color

      • Button label color (for "Advanced" button type only)

    • Configure badge display (optional):

      • Toggle "Show number of widgets"

      • Set badge background color

      • Set badge text color

Step 2: Customize Expanded Style

  1. Widget Appearance

    • Choose a color scheme

    • Customize:

      • Text color

      • Icon color

      • Button background

      • Container background

  2. Border Styling

    • Set normal border color

    • Set selected border color

Widget Functionality

  1. Enable or disable widget buttons with the checkbox.

  2. Click "Edit" to customize the widget


Publish the button

  • Click "Publish" to save the configurations and make your changes live.

Did this answer your question?