# Settings
The following is a list of `li-settings` modifiers available in space.vars.Company. 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](https://docs.liquiflow.app/section-settings/custom-settings).
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:text = Heading
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:textarea = Welcome message
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:richtext = Heading
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:image = Image
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
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 `![]()
` tag is replaced with a Shopify object and the filters `| image_url: width: 1000` and `| image_tag`. This ensures the `![]()
` tag is rendered on the live site as [Shopify recommends](https://shopify.dev/docs/api/liquid/filters/image_tag).
* All attributes from the original `![]()
` 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:
<img class="more_image" li-settings:image="Image" src="image/logo.svg" loading="eager" >
{% code title="Shopify" %}
```
{% if section.settings.image_image %}
{{ section.settings.image_image | image_url: width: 1000 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
{% endif %}
```
{% endcode %}
**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:
{% code title="Webflow" fullWidth="false" %}
```
li-settings:image = Image | placeholder: 'detailed-apparel-1'
```
{% endcode %}
{% code title="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 %}
```
{% endcode %}
This now references the Shopify placeholder library. You can find a list of all available placeholders [here](https://shopify.dev/docs/api/liquid/filters/placeholder_svg_tag).
**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`.
{% code title="Webflow" fullWidth="false" %}
```
li-settings:image = Image | image_url: width: 400
```
{% endcode %}
{% code title="Shopify" %}
```
{% if section.settings.image_image %}
{{ section.settings.image_image | image_url: width: 400 | image_tag: loading: 'eager', class: 'more_image' }}
{% else %}
{% endif %}
```
{% endcode %}
**Adding attributes to the image tag**
To add more attributes to the image tag, simply place them on the `![]()
` 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:
{% code title="Webflow" fullWidth="false" %}
```
li-settings:image = Image | id: product.title
```
{% endcode %}
{% code 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 %}
{% endif %}
```
{% endcode %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:url = Button Link
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:checkbox = Show announcement
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:collection = Collection
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:blog = Blog
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:article = Article
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:product = Product
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
#### 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.
{% columns %}
{% column width="50%" %}
{% code title="Webflow" %}
```
li-settings:html = Video embed
```
{% endcode %}
{% endcolumn %}
{% column %}
{% hint style="success" %}
Shopify
{% endhint %}
{% endcolumn %}
{% endcolumns %}
{% hint style="info" %}
For even more advanced settings use our [custom settings attribute](https://docs.liquiflow.app/section-settings/custom-settings).
{% endhint %}