LoginSign Up

Settings

The following is a list of li-settings modifiers available in Liquify Pro. Each modifier provides different input types in the Shopify editor. Shopify also offers additional input types. To use those, refer to the custom settings attribute documentation.

Text Input

This attribute creates a simple string input in the Shopify Theme Editor. The text of the element will be used as the default text of the attribute. The value of the attribute will be used as the label of the setting.

Webflow
li-settings:text = Heading

Shopify

Textarea Input

This attribute creates a simple string input in the Shopify Theme Editor. The content of the element with this attribute will be used as the default value of the setting in the Shopify Theme Editor. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:textarea = Welcome message

Shopify

Richtext Input

This attribute creates a multi-line text field with basic formatting options in the Shopify Theme Editor. The content of the element with this attribute will be used as the default value of the setting. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:richtext = Heading

Shopify

Image Input

This attribute creates an image picker field that automatically lists available images from the Files section in the Shopify admin, with the option to upload new ones. The value of the attribute will be used as the setting’s label in the editor.

Webflow
li-settings:image = Image

Shopify

Detailed Documentation

For a better understanding of what happens behind the scenes, we’ve prepared detailed documentation.

When using the li-settings:image attribute (as described above), several changes are made during the conversion process:

  • The <img> tag is replaced with a Shopify object and the filters | image_url: width: 1000 and | image_tag. This ensures the <img> tag is rendered on the live site as Shopify recommends.

  • All attributes from the original <img> element (e.g. class, loading) are passed into the image_tag filter, for example: | image_tag: loading: 'eager', class: 'more_image'.

  • The object is wrapped in a condition to check whether an image is applied. By default, if no image is set, the Webflow image is used as a placeholder.

Here’s how the theme builder now handles it:

Webflow
<img class="more_image" li-settings:image="Image" src="image/logo.svg" loading="eager" >
Shopify
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 1000 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
        <img src="{{'logo.svg' | asset_url }}" class="more_image" >
{% endif %}

Placeholder Tag

If you don’t want to use the Webflow image as a placeholder, you can override it with the | placeholder: 'detailed-apparel-1' filter, like this:

Webflow
li-settings:image = Image | placeholder: 'detailed-apparel-1'
Shopify
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 1000 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
        {{ 'detailed-apparel-1' | placeholder_svg_tag: 'more_image' }}
{% endif %}

This now references the Shopify placeholder library. You can find a list of all available placeholders here.

Image size

To control the size of the image loaded from the Shopify server, you can use the | image_url filter. Simply specify the desired height or width, and it will override the default | image_url: width: 1000.

Webflow
li-settings:image = Image | image_url: width: 400
Shopify
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 400 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
        <img src="{{'logo.svg' | asset_url }}" class="more_image" >
{% endif %}

Adding attributes to the image tag

To add more attributes to the image tag, simply place them on the <img> tag as shown above — they’ll be automatically included in the image_tag.

You can also reference variables or objects inside the image_tag. To do this, just add them as filters on your li-settings:image element, like this:

Webflow
li-settings:image = Image | id: product.title
Shopify
{% if section.settings.image_image %}
        {{ section.settings.image_image | image_url: width: 400 | image_tag: loading: 'eager', class: 'more_image', id: product.title }}
{% else %}
        <img src="{{'logo.svg' | asset_url }}" class="more_image" >
{% endif %}

url Input

This attribute creates a field for entering external URLs or relative paths from your Shopify theme manually. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:url = Button Link

Shopify

Checkbox

The checkbox attribute displays a checkbox input. It’s useful for enabling or disabling features, such as showing an announcement bar. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:checkbox = Show announcement

Shopify

Collection Input

A collection setting displays a picker field that automatically lists all available collections in the store. Apply this to a product item to iterate over the collection products. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:collection = Collection

Shopify

Blog

A blog setting displays a picker field that automatically shows all available blogs in the store. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:blog = Blog

Shopify

Article

An article setting displays a picker field that automatically lists all available articles in the store. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:article = Article

Shopify

Product

A product setting displays a picker field that automatically lists all available products in the store. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:product = Product

Shopify

HTML Input

An html setting provides a multi-line text field where you can enter HTML markup. The value of the attribute itself will be used as the setting’s label in the editor.

Webflow
li-settings:html = Video embed

Shopify

For even more advanced settings use our custom settings attribute.

PreviousOverviewNextSections

Last updated

Was this helpful?