# 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/KXnzW7h7HhyvkE6QW2zI/products-layout1.jpg" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Layout 2" %}

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/YQl87KaJCXywgBAhI2TA/products-layout2.jpg" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/RA4g09zkeX3GEsdAOfk4/product-product.jpg" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/6UjZEPJAnqM9rHdRe1tf/image.png" 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FZ5rFzYYnpkrhLSJxaviF%2Fimage.png?alt=media&#x26;token=6ae8a23e-4ba3-4d2c-906f-d578cdb4c97b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FDQQ83ZaXYFVD1ilRtkLA%2Fimage.png?alt=media&#x26;token=512e563a-26a4-45a6-8898-d02ee0e63cde" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="By percent" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2Fjdw9Jxc4uGifNgpRhwEn%2Fimage.png?alt=media&#x26;token=62059762-2fee-42bf-af0e-2cb75b2f916f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="By price" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FhIRR44FmyOcnCIU0loQp%2Fimage.png?alt=media&#x26;token=61260610-2e8d-49de-b709-e7cdb8c31644" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

### 3. Product scrolling text sales

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/qsDK1rLBAk3MeOaliALN/image.png" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/Lx7C6nbMxp8cIzF7TQDr/image.png" 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FIPYWBYSMNLe8z273RIPY%2Fimage.png?alt=media&#x26;token=dd975954-8154-437f-b25c-175aa54b2a15" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F9jDAfTdLdXdS1ekY0dYY%2FScreenshot%202023-12-19%20165449.png?alt=media&#x26;token=9cb5272e-a20e-4543-a514-35c381771c05" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FXLb2vHWEJN2zHrZnkvPs%2Fimage.png?alt=media&#x26;token=276acc19-80b9-4201-94cd-8cd0816fe9fb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Hidden price" %}

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FZo2tkGykZPGZ9znlv7AR%2Fimage.png?alt=media&#x26;token=6ce70516-011b-4c52-955e-fd7ab9592e1d" alt=""><figcaption></figcaption></figure>
{% endtab %}

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

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FArB3QsJhjUI9Y279hdJ8%2Fimage.png?alt=media&#x26;token=4b8dac51-e004-4d8e-b69c-522550ced5c4" 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="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/GpWsJSCksFh63OyaV7WX/image.png" 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2Fkil4HYhZDbwiapeTNRHg%2FScreenshot%202023-12-21%20112343.png?alt=media&#x26;token=9500f6b8-a94a-4785-80f0-baf2165bfd10" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FgqPZK7lBgTTKUNSGtKt1%2FScreenshot%202023-12-21%20113044.png?alt=media&#x26;token=e3545ca9-b26c-41e2-9a88-ab0c5c562487" 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="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2Fx4YyFGRUtCyGmlPIiZeR%2FScreenshot%202023-12-22%20082411.png?alt=media&#x26;token=5dd29ef6-648c-42da-8c1e-529f0d188e17" alt=""><figcaption></figcaption></figure>