General

Purpose

General is a theme-internal “style guide / UI playground” reusable.

It renders a tabbed interface with reference UI patterns (typography, colors, icons, buttons, form fields, tabs, pagination/navigation) and provides helper tools to copy Tailwind/markup snippets to the clipboard.

This is primarily meant for theme developers/designers, not end-users.

Where it's rendered

No render site was found in the theme Liquid files.

This reusable can still be rendered manually for development/debugging purposes.

Inputs (Liquid render parameters)

General doesn’t require parameters, but it can read a query param to select the initial tab.

Model shape (storefront example)

Not applicable (this reusable doesn’t receive a platform model object).

Required fields

None.

Optional fields

params.tab (string)

Used to set the initial tab:

{% assign active_tab = params.tab | default: 'typography' %}
<section x-data="{ tab: '{{ active_tab }}' }" x-cloak>

Template behavior (Liquid + Alpine)

Source: Reusables/General/Default.liquid.

Creates a tab list (typography, colors, icons, buttons, fields, tabs, pag-nav).

Tab panels are shown/hidden using Alpine-driven conditional classes.

Throughout the template the UI calls helper functions from generalreusabledefault, for example:

copy(...) to copy a class string.

copyFromSibling(...) to copy markup from a sibling element.

toggleGroup(...) to expand/collapse grouped rows.

Data contract (JS runtime)

The runtime utilities live in generalreusabledefault (see Reusables/General/Default.js).

This reusable is not a single Alpine state object; instead it exposes a collection of stateless helpers plus small Alpine component factories (e.g. multiInputComponent(...)).

JavaScript

Source: Reusables/General/Default.js.

This reusable also includes an init() lifecycle method (init()) for the Alpine bits it mounts (where applicable).

init

Initializes any Alpine demo components in this reusable (where mounted) and wires demo-specific event handlers.

Clipboard helpers

copy(button, text)

Uses navigator.clipboard.writeText when available and secure.

Falls back to fallbackCopy(text).

fallbackCopy(text)

Uses the legacy document.execCommand('copy') path.

showCopiedFeedback(button)

Temporarily changes button text to Copied! and disables it.

Additional helpers used by the template:

search(...) (helper): used by some demo UIs to filter lists.

searchComponent(...) (factory): returns an Alpine-ready search state object.

slider(...) (factory): returns Alpine state for demo slider controls.

triggerVoiceSearch(...) (helper): demo voice-search integration (when available).

search

searchComponent

slider

triggerVoiceSearch

Alpine attribute utility:

isAlpineAttr(name) returns whether an attribute name is an Alpine directive (x-*, @..., :...).

isAlpineAttr

Other notes:

value is a state key used by some of the demo Alpine components/factories in this reusable.

value

HTML extraction helpers

copyFromSibling(button, withAlpine = false, templateId = null)

Copies HTML either from:

a <template> by id, or

a sibling element marked with .tobecopied.

Optionally strips Alpine attributes.

stripAlpineAttrs(el)

Removes Alpine-specific attributes (x-*, @..., :...) from a cloned node.

decodeHtmlEntities(html)

Decodes HTML entities using a temporary <textarea>.

copyRawTemplate(button, id)

Copies raw template text content.

Typography/group toggling

toggleGroup(groupName)

Shows/hides [data-group] rows for the selected group.

Color mixing tool

generateMix(state)

Validates hex inputs (base, mix, target) and sets state.result to a color-mix(...) expression.

Supporting functions:

computeBasePercentage(baseHex, mixHex, targetHex)

hexToRgb(hex)

normalizeHex(hex)

clearErrors(state)

Multi-input (tags) component

multiInputComponent(initialTags = [])

Returns an Alpine-ready object that manages tags and an input box.

Exposes:

addTag()

removeTag(index)

handleBackspace(event)

addTag

Global Alpine stores

None.

Note
Other theme UI (outside this reusable) commonly relies on stores like $store.darkMode.
Also, other components reference Root.Page.Data in Liquid; this reusable doesn’t.

Services / API calls

None.

Dependencies

Reusables/General/Default.liquid

Reusables/General/Default.js

Reusables/General/Default.json (translations)

Browser Clipboard API (navigator.clipboard) with a fallback.

Notes

This reusable may be intentionally not wired into the storefront; it’s primarily a development tool.

Some behaviors depend on window.isSecureContext (Clipboard API) and may behave differently on HTTP vs HTTPS.

How to preview it live (one-time setup)

If you want to see General rendered in the storefront (for development), you can host it inside a custom “global-data style” component:

Create a custom component based on any existing global-data component (e.g. TextWithImage).

Name it custom_generalcomponents (for consistency).

In the host component’s Default.liquid, render only:

{% render 'Reusables\\General\\Default' %}

Add that component once in the “Components” page (or any internal dev page) so you can preview it.

Note: TextWithImage is just an example host; any suitable component works.

Why this exists

This reusable is meant to be a central place for “packed” patterns/snippets for quick copy-paste (events, modals, guards, UI patterns, small utilities), so you don’t have to hunt across many components to find a specific pattern.

Examples

Manual render (for development):

{% render 'Reusables\\General\\Default' %}

Open a specific tab (via query param):

?tab=icons

?tab=buttons

?tab=pag-nav

General

Purpose#

Where it's rendered#

Inputs (Liquid render parameters)#

Model shape (storefront example)#

Required fields#

Optional fields#

Template behavior (Liquid + Alpine)#

Data contract (JS runtime)#

JavaScript#

init#

Clipboard helpers#

search#

searchComponent#

slider#

triggerVoiceSearch#

isAlpineAttr#

value#

HTML extraction helpers#

Typography/group toggling#

Color mixing tool#

Multi-input (tags) component#

addTag#

Global Alpine stores#

Services / API calls#

Dependencies#

Notes#

How to preview it live (one-time setup)#

Why this exists#

Examples#

Purpose

Where it's rendered

Inputs (Liquid render parameters)

Model shape (storefront example)

Required fields

Optional fields

Template behavior (Liquid + Alpine)

Data contract (JS runtime)

JavaScript

init

Clipboard helpers

search

searchComponent

slider

triggerVoiceSearch

isAlpineAttr

value

HTML extraction helpers

Typography/group toggling

Color mixing tool

Multi-input (tags) component

addTag

Global Alpine stores

Services / API calls

Dependencies

Notes

How to preview it live (one-time setup)

Why this exists

Examples