Floating Action Button

Generate the code for a floating action button (FAB) section that displays a fixed circular button in the [FAB_POSITION] corner of the viewport. When clicked, the FAB should expand to reveal a vertical stack of up to [MAX_ACTIONS] smaller action buttons, each configured via section blocks. Each action block should include an icon choice from a select dropdown with options such as chat, email, phone, whatsapp, and custom-url, a label text [ACTION_LABEL], a target URL or action [ACTION_TARGET], and a tooltip that appears on hover. The main FAB button should have a size of [FAB_SIZE] pixels, background color [FAB_BG_COLOR], icon color [FAB_ICON_COLOR], and display a plus icon that rotates 45 degrees into an X when the menu is open. The child action buttons should have a size of [CHILD_SIZE] pixels with background color [CHILD_BG_COLOR] and icon color [CHILD_ICON_COLOR]. The expand animation should stagger each child button with a delay of [STAGGER_DELAY] milliseconds. Include settings for z-index [Z_INDEX], bottom offset [BOTTOM_OFFSET] pixels, side offset [SIDE_OFFSET] pixels, and shadow intensity [SHADOW_INTENSITY] (none, light, medium, heavy). On mobile, optionally hide labels and show only icons. Provide the complete Liquid, CSS, and JavaScript as a section I can paste into my theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/floating-action-button.liquid), paste the generated code in, and save. Since a FAB should appear on every page, add it to your theme’s global sections group — either through the theme editor’s site-wide section list, or by editing layout/theme.liquid to include the section so it renders across the whole store.