Input Settings

Anatomy

Input allows developers to specify a set of configurations that merchants can adjust to customize a component. Each setting provides a specific control, from simple text inputs to complex selectors.

Input settings are generally composed of standard attributes. We can classify them into two main categories:

• Basic Inputs

• Resource Picker Inputs

Overview

A quick look at an input configs type:

WEAVERSE_EMBEDED_CODE

Attributes Details

Here's a breakdown of the available attributes in an input setting:

• condition

  The condition attribute enables developers to define conditions under which an input will be displayed. It supports the following operators:

  • eq: equals

  • ne: not equals

  • gt: greater than

  • gte: greater than or equal to

  • lt: less than

  • lte: less than or equal to

  The format is as follows: bindingName.conditionalOperator.value.

  Examples:

  • clickAction.eq.openLink - Displays the input if the clickAction is set to openLink.

  • imagesPerRow.gt.1 - Displays the input if the number of imagesPerRow is greater than 1.

• helpText

  The helpText attribute can utilize HTML, offering more expressive help instructions. This allows for the inclusion of links, emphasis using bold or italics, lists, and more.

  Example:

  WEAVERSE_EMBEDED_CODE

  Will appear as:

  

Basic Inputs

text

The text input allows merchants to enter a single line of plain text. It's frequently used for capturing headings, button text, or short promotional messages.

Return: string - The inputted text value.

Example:

WEAVERSE_EMBEDED_CODE

Output:

textarea

The textarea input provides a multi-line text box suitable for longer descriptions, like testimonials, user reviews, or shipping and return policies.

Return: string - The inputted multiline text value.

Example:

WEAVERSE_EMBEDED_CODE

Output:

switch

The switch input provides a toggle option. This can be useful for enabling or disabling product availability, promotional features, or customer reviews.

Return: boolean - Indicates whether the switch is turned on (true) or off (false).

Example:

WEAVERSE_EMBEDED_CODE

Output:

range

The range input lets merchants select a value within a set range. This can be used for adjusting quantities, setting percentages, or customizing display sizes.

Return: number - The selected value within the defined range.

Example:

WEAVERSE_EMBEDED_CODE

Output:

configs details:

select

The select input provides a dropdown list, allowing merchants to select one option from a predefined list of options.

Return: string - The selected option's value.

Example:

WEAVERSE_EMBEDED_CODE

Output:

configs details:

toggle-group

The toggle group input allows merchants to make a selection from a group of toggleable options (only one choice is allowed).

While it functions similarly to the select input, its UI is distinct, showcasing options as toggle buttons. This makes it particularly useful and user-friendly for cases with fewer options, allowing for a more intuitive selection process.

Return: string - The chosen option's value.

Example (Display as Text):

WEAVERSE_EMBEDED_CODE

Output:

Example (Display as Icon):

WEAVERSE_EMBEDED_CODE

Output:

configs details

💡 Note:

• We use Phosphor Icons library for the icons.

• The value of an icon is the name of the React component (e.g: AddressBook, AlignTopSimple...)

• Not all icons are supported yet. Please let us know if you need an icon that is missing from your configs.

richtext

The richtext input allows merchants to craft content using a rich text editor, providing flexibility and more advanced text formatting options.

Return: string - A string containing rich-text (HTML) formatted content.

Example:

WEAVERSE_EMBEDED_CODE

Output:

🌟 Pro Tip: our richtext input comes with AI-powered content generation capabilities, allowing merchants to effortlessly craft top-notch content, from descriptions to promotional texts and more.

image

The image input offers merchants the ability to select or upload images.

Here's how it works:

• Media Manager: on open, it displays the Media Manager modal with all images from the Files page of the merchant's Shopify Admin.

• Uploading Images: any image a merchant uploads through this input is saved to the Files page as well.

• Enhancing SEO: merchants can edit the alt text of the images they've uploaded.

Return: object - A WeaverseImage (type can be imported from @weaverse/hydrogen package).

WeaverseImage type definition:

WEAVERSE_EMBEDED_CODE

Example:

WEAVERSE_EMBEDED_CODE

📌 Note: The defaultValue in the input configuration can either be:

• an object of the WeaverseImage type (where all properties are optional except for the url)

• or a string representing the image URL

Output:

Usage

We highly recommend developers to utilize the Image component from the @shopify/hydrogen package to render images. It's optimized to work with the data returned from the image input, ensuring efficient image delivery.

Here's a simple example:

WEAVERSE_EMBEDED_CODE

color

The color input type allows merchants to select a color using a color picker. This can be handy for design-related settings, such as background color, text color, border color, etc.

Return: string - A color in hex format (e.g., #RRGGBB or #RRGGBBAA if alpha is set).
​Example:

WEAVERSE_EMBEDED_CODE

Output:

datepicker

The datepicker input type provides merchants with a way to select a specific date and time, making it ideal for scheduling content, setting event dates, or determining promotional periods.

Return: number - A timestamp of the selected date and time.

Example:

WEAVERSE_EMBEDED_CODE

Output:

💡 Parsing: The returned timestamp should be transformed into a readable date-time string, for example:

WEAVERSE_EMBEDED_CODE

map-autocomplete

The map-autocomplete input provides merchants with a location-based autocomplete functionality. As merchants type in the input, a dropdown list of suggested places appears.

Return: string - The selected location or place name from the dropdown suggestions.

Example:

WEAVERSE_EMBEDED_CODE

Output:

position

The position input enables merchants to select a content alignment from a predefined subset of positions using intuitive directional arrows.

Return: string - The selected content position from the available choices.

The position can be one of the following values: top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right

Example:

WEAVERSE_EMBEDED_CODE

Output:

Resource Picker Inputs

product

The product input provides merchants with an intuitive search and select interface to choose a specific product from their store.

Return: object - A WeaverseProduct object (type can be imported from @weaverse/hydrogen package).

WeaverseProduct type definition:

WEAVERSE_EMBEDED_CODE

Example:

WEAVERSE_EMBEDED_CODE

Output:

product-list

The product-list input provides merchants with an intuitive search and select interface to choose multiple products from their store.

Return: array - An array of WeaverseProduct object with their respective IDs and handles.

Example:

WEAVERSE_EMBEDED_CODE

Output:

collection

The collection input provides merchants with an intuitive search and select interface to choose a specific collection from their store.

Return: object - A WeaverseCollection object (type can be imported from @weaverse/hydrogen package).

Example:

WEAVERSE_EMBEDED_CODE

Output:

collection-list

The collection-list input provides merchants with an intuitive search and select interface to choose multiple collections from their store.

Return: array - An array of WeaverseCollection object with their respective IDs and handles.

Example:

WEAVERSE_EMBEDED_CODE

Output:

blog

The blog input provides merchants with an intuitive search and select interface to choose a specific blog from their store.

Return: object - A WeaverseBlog object (type can be imported from @weaverse/hydrogen package).

Example:

WEAVERSE_EMBEDED_CODE

Output:

Querying Storefront Data

After using the Resource Picker inputs, you might notice that the returned data is limited, typically just the id and handle of the selected resource. In most cases, you'll need more detailed data for your components or routes.

This is where the Weaverse client comes in handy. Using its storefront.query function, you can fetch the full set of data related to your selection from Shopify's Storefront API.

To learn more about how to effectively fetch and utilize data within Weaverse, refer to our dedicated section on Data Fetching & Caching.

Next Steps

Now that you have a solid understanding of Input Settings, let's learn how to render a Weaverse page in the next article: Rendering a Weaverse Page.