03GENERAL

Opaline floating button

This page explains how “Opaline floating button” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Opaline floating button

This page explains how “Opaline floating button” actually behaves, which data it depends on, and what its settings change.

IMPLICIT BEHAVIOR

What the theme does automatically

This section only displays elements that have content. Empty elements are ignored to preserve the layout.

CONFIGURATION

Understand the settings

Button action

Define the button destination and the texts used on screen and by assistive technologies.

Linkbutton_link

Open in new tabopen_new_tab

Default: disabled

Button textlabel

Accessibility labelaccessibility_label

This text describes the assistive technologies section and is not displayed visually.

Position

Choose the location of the button and its dimensions depending on the device.

Horizontal desktop positiondesktop_side

Default: right · Options: Left, Right

Vertical desktop positiondesktop_y

Default: 78 · Range: 0–100%

Movable horizontal positionmobile_side

Default: right · Options: Left, Right

Mobile vertical positionmobile_y

Default: 84 · Range: 0–100%

Button sizebutton_size

Default: 3.6 · Range: 1–5rem

Text

Choose the display and position of the label next to the button.

Text on desktoptext_desktop

Default: hover · Options: Always visible, Visible on hover, Masked

Text on mobiletext_mobile

Default: hidden · Options: Visible, Masked

Position of text around buttonlabel_position

Default: left · Options: On the left, Right, Above, Below

Icon

Choose the source and visual of the button icon.

Icon sourceicon_source

Default: builtin · Options: Integrated icon, Picture, Custom SVG

Integrated iconicon

Default: chat · Options: Search, Menu, Account, Chat, Email, Phone, Bag, Heart, User, Sparkle, Question, View, Delivery, Return, Measurements, Care, Secure, Payment, Gift, Materials, More, Cart, Check, Diagonal arrow, Left arrow, Right arrow, Star, Quiz, X, Facebook, Pinterest, Instagram, TikTok, WhatsApp, Look, Plus, Minus, Close, Chevron left, Chevron right, Chevron down, Information, Warning, Filter, Sort, Grid, List, Zoom, Play, Pause, Copy, Share, Link, Download, Discount, Tag, Package, Stock, Store, Receipt, Calendar, Clock, Location, Globe, Leaf, Recycle, Refill, Vegan, Cruelty-free, Natural, Droplet, Bottle, Skin, Sun, Hanger, Fabric, Shoe, Diamond, Ring, Necklace, Earrings, Tea, Cup, Drink bottle, Sparkling

Icon imageicon_image

Custom SVGicon_svg

Paste a simple SVG.

Liquid glass

Adjust the intensity of the floating button glass effect.

Blur glassglass_blur

Default: 16 · Range: 0–40px

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

Section appearance

Use a dedicated paletteopaline_use_color_scheme

Default: disabled

Paletteopaline_color_scheme

Default: scheme-1

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px

Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px

COMPOSITION

Available blocks

This section has no reorderable blocks. Its content is controlled by its settings and related Shopify data.

CHECKS

Before publishing

✓
Content remains readable in every color scheme.
✓
Labels match the storefront language.
✓
Displayed promotions match Shopify rules.
✓
Interactions remain accessible by keyboard and touch.