# 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="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FPbiKAg7PbpfIVO0bx2i4%2Fimage.png?alt=media&#x26;token=3525b4c1-a503-4ed6-839e-6e92b140cabe" alt=""><figcaption></figcaption></figure>