Settings
The following is a list of li-settings modifiers available in Liquiflow. 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.
li-settings:text = HeadingShopify
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.
li-settings:textarea = Welcome messageShopify
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.
li-settings:richtext = HeadingShopify
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.
li-settings:image = ImageShopify
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: 1000and| 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 theimage_tagfilter, 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:
<img class="more_image" li-settings:image="Image" src="image/logo.svg" loading="eager" >{% 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:
li-settings:image = Image | placeholder: 'detailed-apparel-1'{% 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.
li-settings:image = Image | image_url: width: 400{% 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:
li-settings:image = Image | id: product.title{% 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.
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.
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.
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.
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.
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.
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.
Shopify
For even more advanced settings use our custom settings attribute.
Last updated
Was this helpful?