> 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ymq-app.gitbook.io/ymq-product-options-app/getting-started/how-to-style-shopify-options-with-our-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.