> For the complete documentation index, see [llms.txt](https://ymq-app.gitbook.io/ymq-product-options-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ymq-app.gitbook.io/ymq-product-options-app/getting-started/how-to-style-shopify-options-with-our-app.md).

# How to style Shopify Options with our app

## Selecting a product

<figure><img src="/files/zcWStV1MLCuaXGov7Go2" alt=""><figcaption></figcaption></figure>

## Shopify options

In the first section on the product page settings it will show you the product options you set up in Shopify’s backend, we call these **Shopify Options**.

<figure><img src="/files/EVNTNAV5RAq6bfWngg6b" alt=""><figcaption></figcaption></figure>

Shopify Options use Shopify’s variant system which you use in Shopify’s backend (normal products). Think of it as our app styling the native options you already have.

* They limit each product to a max of 3 options and 100 variants.
* Allow for custom pricing for all variants.
* [Images associated with variants](https://www.relentlessapps.com/kb/why-doesnt-the-main-product-image-change-with-the-selected-variant/) (so they change when a variant is selected).
* And inventory control.

## Style options

Click on the ![](https://cdn.shortpixel.ai/spai/q_lossy+w_33+to_auto+ret_img/https://i0.wp.com/www.relentlessapps.com/wp-content/uploads/2019/01/Screen-Shot-2022-05-20-at-9.27.47-PM.png?resize=22%2C21\&ssl=1) icon to the right of the options to edit the product options.

<figure><img src="/files/ifWeHvFiqtLGvmpiLVrO" alt=""><figcaption></figcaption></figure>

## Types of options

You can choose to use the global settings for the styles of shopify options, or add special styling settings for shopify options.

{% tabs %}
{% tab title="Global setting" %}
Referring to the image below, set the style of the shopify option as a global setting.

<figure><img src="/files/rKT0KuVKNeRvz2DtpHOP" alt=""><figcaption></figcaption></figure>

You can select an option type as a global settingfor all shopify options.

<figure><img src="/files/MQuf2GioR1O70Gjwmi3H" alt=""><figcaption></figcaption></figure>

{% embed url="<https://youtu.be/6msohKwtzhY>" %}

{% endtab %}

{% tab title="Special Setting" %}
You can also do special styling for a shopify option.

<figure><img src="/files/gBXtqRBcFwI0PmyjNad0" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Click <img src="/files/xYcRGKBUqyB9V1yxTqG9" alt="" data-size="line">once you have finished editing the product option