# Product

{% embed url="<https://youtu.be/Ab25o-pHxuU>" %}

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Product**
3. Make necessary changes
4. **Save**
   {% endhint %}

### 1. Layout and image

There are 2 layouts to select.&#x20;

{% tabs %}
{% tab title="Layout 1" %}

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

{% tab title="Layout 2" %}

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

Thumbnail images can use for products with no image. Additionally, text and image ratio are easy to adjust.

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

### 2. Content and Badges

You can control what to show on the product card.

#### Content

* **Quick view button:** let customers preview product information without needing to go to the product page
* **Add to cart button:** add the product to customers' cart
* **Wishlist button:** let customers add their favorite products to the list
* **Compare button:** let customers add products to the comparison page to check the differences and similarities among stores' products
* **Show product type**
* **Show product reviews**
* **Show second image on hover:** display a different image when the computer mouse hovers over the product.
* **Content center:** center-align the text (product names, prices, ratings, etc.).
* **Show product vendors:** display product vendors above the names of the products.

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

#### Badges

Customize the Sale label by choosing whether to turn it on or off, and selecting the preferred display format: text label, percentage label, or price label.

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

{% tabs %}
{% tab title="Text sale" %}

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

{% tab title="By percent" %}

<figure><img src="/files/0qwLAZIdpIAIwvV4o3dG" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="By price" %}

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

### 3. Product scrolling text sales

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

From version 1.7.0, we've added a new function for text scrolling in products, a feature designed to boost your sales. Please go to this link to check demo: <https://umino-demo-v2.myshopify.com/?preview_theme_id=154227638569>.&#x20;

To set up the scrolling sale text, please follow these steps:

Go to **Theme setting** => **Product** => **Product scrolling text sale** and check "**Show scrolling text sale.**" Additionally, we provide various options to make customization easy for you.

<div align="center" data-full-width="false"><figure><img src="/files/nQI0SME9ltqTD3xVeYA5" alt=""><figcaption></figcaption></figure></div>

{% embed url="<https://youtu.be/-muJh3yeUz0>" %}

### 4. Catalog mode

Enable catalog mode will hide "Add to cart" button

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

{% tabs %}
{% tab title="Default product" %}

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

{% tab title="Hidden 'Add to cart' button" %}

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

{% tab title="Hidden price" %}

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

{% tab title="Hidden "Add to cart" button and price " %}

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

### 5. Color swatches

Color swatches is used to provide a visual representation of various options available for a product. For instance: color, material, ...

Please use this [link](https://blueskytechcos-organization.gitbook.io/umino-shopify/global-settings/product-swatches) to configure color swatches for a product before it can be displayed.&#x20;

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

### 6. Option name

Match the option names to the corresponding language to ensure the **Color swatches** feature works correctly with different languages.&#x20;

For example, using "Couleur" as the option name in an English context may cause issues.

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

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

To add multiple option names at once, simply separate them with commas. This allows you to define multiple option names simultaneously, making it more efficient to set up your desired options.

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


---

# Agent Instructions: 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://blueskytechcos-organization.gitbook.io/umino-shopify/theme-settings/product.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.