# Product Information

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products** from the dropdown window.

## Section settings

### General

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Section width</td><td>Select the layout width of the whole section. The options are: <br><br><mark style="color:orange;"><strong>Default (same as the body width)</strong></mark><br><mark style="color:orange;"><strong>Width (1170px)</strong></mark><br><mark style="color:orange;"><strong>Width (1770px)</strong></mark><br><mark style="color:orange;"><strong>Full width (100% of the viewport width)</strong></mark></td></tr><tr><td>Padding for 'full width' option on desktop</td><td>Determine the left and right spacing of the full width layout.</td></tr><tr><td>Enable sticky Product information on desktop/tablet.</td><td>Enable sticky Product information on desktop/tablet.</td></tr></tbody></table>

### Media

*Learn more about* [*media types*](https://help.shopify.com/manual/products/product-media)

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Media fit</td><td>Select the main image crop type. There are 3 types: <br><br><mark style="color:orange;"><strong>Original:</strong> The image will keep its current scale ratio to adapt.</mark> <br><mark style="color:orange;"><strong>Fit content:</strong> The image will scale to cover up the full area of set product card image with retained ratio.</mark> <br><mark style="color:orange;"><strong>Fill:</strong> The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio.</mark><br><br><em><mark style="color:orange;">Note: Learn more about</mark></em> <a href="https://halosoft.gitbook.io/ella-documentation/sections/all-sections-in-theme/featured-product#media"><em><mark style="color:orange;">media fit</mark></em></a><em><mark style="color:orange;">.</mark></em></td></tr><tr><td>Product image ratio</td><td>Select the desired ratio of the image: <br><br><mark style="color:orange;"><strong>Adapt to image</strong> (the original image width and height are adopted)</mark> <br><mark style="color:orange;"><strong>Portrait</strong> (the image is cropped to be portrait)</mark> <br><mark style="color:orange;"><strong>Square</strong> (the image is cropped to be square)</mark></td></tr><tr><td>Portrait aspect ratio</td><td>Determine the ratio between the width and height of the image. <br><br><em><mark style="color:orange;">Note: Only applicable to the portrait option of the product image ratio setting.</mark></em></td></tr><tr><td>Video layout</td><td>Select the layout for video media. There are 2 options:<br><br><mark style="color:orange;"><strong>Thumbnails</strong></mark><br><mark style="color:orange;"><strong>Popup</strong></mark></td></tr><tr><td>Enable zoom image</td><td>Enable the use image zoom function when hovering over the image.</td></tr><tr><td>Zoom image style</td><td>Select the style for the zoom image function. There are 2 options:</td></tr><tr><td><strong>Cursor</strong></td><td></td></tr><tr><td>Enable custom cursor</td><td>Enable the use custom cursor when hovering over the image.<br><br>Note: When the 'Enable custom cursor' setting is enabled, the Image Zoom feature will be disabled.</td></tr><tr><td>Icon color</td><td>Set the color for the icon.</td></tr></tbody></table>

### Main images

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Main image position</td><td>Select the display position of the main image. There are 2 options left or right.</td></tr><tr><td>Layout</td><td>Select the layout for the main image. There are 3 options:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark><br><mark style="color:orange;"><strong>Style 3</strong></mark></td></tr><tr><td>Show navigation arrows on desktop</td><td>Enable to show navigation arrows on desktop.</td></tr><tr><td>Show navigation arrows on mobile</td><td>Enable to show navigation arrows on mobile</td></tr><tr><td>Show slide counter on mobile</td><td>Enable to show slide counter on mobile.</td></tr><tr><td>Show parallax on mobile</td><td>Enable to show parallax on mobile.</td></tr><tr><td>Show zoom icon on mobile</td><td>Enable to show zoom icon on mobile.</td></tr></tbody></table>

### Thumbnails

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show thumbnails on mobile</td><td>Enable to show thumbnails on mobile.</td></tr><tr><td>Desktop layout</td><td><p>Select the display position of the thumbnail relative to the main image. There are 4 options:</p><p><br><mark style="color:orange;"><strong>Show thumbnails on the left</strong></mark></p><p><mark style="color:orange;"><strong>Show thumbnails on the right</strong></mark></p><p><mark style="color:orange;"><strong>Show thumbnails on the bottom</strong></mark><br><mark style="color:orange;"><strong>Hide thumbnails</strong></mark></p></td></tr><tr><td>Maximum thumbnails to show</td><td>Determine the maximum number of images displayed on thumbnails.</td></tr></tbody></table>

### Sidebar

*The sidebar displays when blocks with the prefix \[Sidebar] are added.*

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Enable sticky sidebar</td><td>Enable to show sticky sidebar.</td></tr><tr><td>Layout</td><td>Choose the layout for the sticky sidebar. There are 2 options:<br><br><mark style="color:orange;"><strong>Layout 1</strong></mark><br><mark style="color:orange;"><strong>Layout 2</strong></mark></td></tr><tr><td>Collapsible block style</td><td>Choose the collapsing styles of the blocks on the sidebar. There are 3 options:<br><br><mark style="color:orange;"><strong>Dropdown</strong></mark><br><mark style="color:orange;"><strong>Swipe right (on mobile)</strong></mark><br><mark style="color:orange;"><strong>None</strong></mark></td></tr><tr><td>Collapsible</td><td>Choose how to display blocks when the page first loads. There are 2 options:<br><br><mark style="color:orange;"><strong>Expanded by default</strong></mark><br><mark style="color:orange;"><strong>Closed by default</strong></mark></td></tr><tr><td>Position</td><td>Select sidebar position to display on left or right.</td></tr><tr><td><strong>Block heading</strong></td><td></td></tr><tr><td>Font family</td><td>Set font family for heading.</td></tr><tr><td>Font size</td><td>Set font size for heading.</td></tr><tr><td>Font weight</td><td>Set font weight for heading.</td></tr><tr><td>Text style</td><td>Set text transform for heading.</td></tr></tbody></table>

### Badge

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show product badges</td><td>Enable to show product badges.</td></tr></tbody></table>

### Quantity

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show subtotal</td><td>Enable to show subtotal.</td></tr><tr><td>Style</td><td>Select the style for subtotal. There are 2 options:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark></td></tr></tbody></table>

### Sticky add to cart

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Enable sticky add to cart</td><td>Enable to show sticky add to cart.</td></tr><tr><td>Style</td><td>Select the style for sticky add to cart. There are 2 options:<br><br><mark style="color:orange;"><strong>Style 1</strong></mark><br><mark style="color:orange;"><strong>Style 2</strong></mark></td></tr><tr><td>Always show sticky add to cart on Mobile</td><td>Enable to always show sticky add to cart on mobile.<br><br><em><mark style="color:orange;">Note: Only applicable when the 'Style' setting is set to Style 1.</mark></em></td></tr><tr><td>Show vendor</td><td>Enable to show the vender on sticky add to cart.</td></tr></tbody></table>

### Quick order list

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show quick order list</td><td>Enable to show the quick order list.</td></tr><tr><td>Show images</td><td>Enable to show the images on the quick order list.</td></tr><tr><td>Show SKUs</td><td>Enable to show the SKUs on the quick order list.</td></tr></tbody></table>

### Tabs

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Show tabs</td><td>Enable to show the product tabs.</td></tr><tr><td>Desktop layout</td><td>Select the desktop layout for product tabs. There are 4 options:<br><br><mark style="color:orange;"><strong>Vertical</strong></mark><br><mark style="color:orange;"><strong>Vertical with sidebar</strong></mark><br><mark style="color:orange;"><strong>Horizontal</strong></mark><br><mark style="color:orange;"><strong>Popup</strong></mark></td></tr><tr><td>Mobile layout</td><td>Select the mobile layout for product tabs. There are 3 options:<br><br><mark style="color:orange;"><strong>Vertical</strong></mark><br><mark style="color:orange;"><strong>Vertical with sidebar</strong></mark><br><mark style="color:orange;"><strong>Popup</strong></mark></td></tr><tr><td>Vertical layout style</td><td>Select the style for the vertical layout if you choose this option.</td></tr><tr><td><strong>Tab titles</strong></td><td></td></tr><tr><td>Font size</td><td>Set font size for the tab titles on desktop.</td></tr><tr><td>Font size on mobile</td><td>Set font size for the tab titles on mobile.</td></tr><tr><td>Font weight</td><td>Set font weight for the tab titles.</td></tr><tr><td>Text style</td><td>Set text transform for the tab titles.</td></tr><tr><td>Top/Bottom padding</td><td>Determines the height of the top and bottom inner space of the tab item.</td></tr><tr><td>Border color</td><td>Set the color for the border of tab titles.<br><br><em><mark style="color:orange;">Note: Only applicable when the 'Style' setting is set to Style 1.</mark></em></td></tr><tr><td>Border gradient color</td><td>Set the gradient color for the border of tab titles.</td></tr></tbody></table>

### Product bundle

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Enable Product Bundle</td><td>Enable to show the product bundle.<br><br><em><mark style="color:orange;">Note: Learn more</mark></em> <a href="https://halosoft.gitbook.io/ella-documentation/product-page/product-bundle"><em><mark style="color:blue;">product bundle</mark></em></a><em><mark style="color:orange;">.</mark></em></td></tr><tr><td>Background</td><td>Set the background color for the product bundle.</td></tr><tr><td>Title</td><td>Enter the title for the product bundle.</td></tr><tr><td>Title alignment</td><td>Select the alignment of the title to be either Left, Right, or Center.</td></tr><tr><td><strong>Product items</strong></td><td></td></tr><tr><td>Style</td><td>Select the style for product items.</td></tr><tr><td>Image ratio</td><td>Select the desired ratio of the image: <br><br><mark style="color:orange;"><strong>Adapt to image</strong> (the original image width and height are adopted)</mark> <br><mark style="color:orange;"><strong>Portrait</strong> (the image is cropped to be portrait)</mark> <br><mark style="color:orange;"><strong>Square</strong> (the image is cropped to be square)</mark></td></tr><tr><td><strong>Discount</strong></td><td></td></tr><tr><td>Enable bundle discount</td><td>Enable to show the bundle discount.</td></tr><tr><td>Text</td><td>Enter the text for more info.<br><br><em><mark style="color:orange;">Note: Use [discount] to show the discount rate.</mark></em></td></tr><tr><td>Text color</td><td>Set the color for more info text.</td></tr><tr><td><strong>Add all to cart button</strong></td><td></td></tr><tr><td>Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient</td><td>Set the text color, background, and border color for both the normal and hover states of the add all to cart button.</td></tr><tr><td><strong>Slider layout</strong></td><td></td></tr><tr><td>Show navigation dots</td><td>Enable to show the navigation dots.</td></tr><tr><td>Show navigation arrows</td><td>Enable to show the navigation arrows.</td></tr><tr><td><strong>Top padding</strong></td><td></td></tr><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td><strong>Bottom padding</strong></td><td></td></tr><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Top padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

### Bottom padding

<table><thead><tr><th width="334">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td>Desktop</td><td>Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Tablet</td><td>Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr><tr><td>Mobile</td><td>Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).</td></tr></tbody></table>

{% hint style="info" %}
You can drag & drop all blocks in Product Information to arrange the position you want.
{% endhint %}

<figure><img src="/files/fVY44D6Zgv7yrPi0lrXT" 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://halosoft.gitbook.io/ella-documentation/product-page/product-information.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.