# Product Information {% hint style="info" %} You can drag & drop all blocks in Product Information to arrange the position you want. {% endhint %} ![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2F2nTB2LiwDKuc436ynh2j%2FScreen%20Shot%202022-08-03%20at%2012.56.10%20AM.png?alt=media\&token=32cbef9f-081d-412a-b96d-2823eac25688) You can set up product page in the settings of Product Information ![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FRAq4wADugY4tqrM5jqNf%2F28.gif?alt=media\&token=72841f47-4c82-407d-ac05-b050e3681d75) | Setting | Description | | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | Layout: | Select the width layout of the section to be either default to the body's width, 1170px, 1770px or full screen width. | | Padding Container Full Width | Determine the spacing of the left and right sides if the layout 'fullwidth' is selected. | | Show Sticky Product Information on Large Screens | Enable to let Product Information fix in on long content page when scrolling down. | | Spacing top - Desktop / Tablet / Mobile | Determine the spacing of the section from the top on Desktop, Tablet and Mobile. | | Spacing bottom - Desktop / Tablet / Mobile | Determine the spacing of the section from the bottom on Desktop, Tablet and Mobile. | #### MAIN IMAGE | Setting | Description | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Show Arrows for Desktop? | Enable to show navigation arrows on main image slider on Desktop. | | Show Arrows for Mobile? | Enable to show navigation arrows on main image slider on Mobile. | | Show Counter for Mobile? | Enable to show the slide counter on Mobile. | | Enable Parallax for Mobile? | Toggle to show the Parallax Effect of the Main image on Mobile. | | Layout |

Select the style for the main image cluster.
Style 1: The main image is for the current variant only.
Style 2: The main images are listed down.
Style 3: The main images are listed as grid.

| #### THUMBNAIL | Setting | Description | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Show Thumbnail Mobile? | Show / Hide the product image thumbnails on Mobile. | | Layout Thumbnail |

Select the layout for the thumbnail.
Layout 1: Thumbnails are vertical and to the left of the main image.
Layout 2: Thumbnails are vertical and to the right of the main image.
Layout 3: Thumbnails are horizontal and to the bottom of the main image.
Layout 4: Thumbnails are hidden.

| ### Sidebar | Setting | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Show Sidebar? | Enable to show sidebar. Note that blocks rather than Custom Collection must be added for the sidebar to appear. | | Show Collapsible Block? | Turn the blocks in sidebar to be collapsible. | | Enable Sticky? | Fix the position of the sidebar when scrolling until the end of the collection content. | | Layout | Determine how collapsible blocks are presented: Layout 1 (The collapsible blocks appear with carets), Layout 2 (The collapsible blocks appear with minus and plus icons) | | Collapsible | Select the collapse state of the collapsible blocks when the page loads. | | Position | Select the position of the side to be either to the Left or Right. | | Select Font Type | Select the font family for the title of the sidebar. | | Font Size | Determine the font size of the title of the sidebar. | | Font Weight | Select the font weight of the title of the sidebar | | Text Transform | Select the text transform for the title of the sidebar | | Font Style | Select the font style of the title of the sidebar. | ### Media | Setting | Description | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Product Image Ratio | Select the width / height ratio type of the product media such as images. | | Portrait Aspect Ratio | Determine the ratio between width and height for Portrait media. | | Show Zoomed Image? | Zoom image on hover. | | Image Fit From Frame | Choose "Full Width or Height (No Crop)" or "Full Width & Height (With Crop)" option when applying product layout "Product Horizontal Tabs No Sidebar" or template "template-horizontal-tabs" | | Gallery Popup | Decide what happens when the media is clicked | | Video Layout | Decide where to show the video: As a Popup or on Thumbnail | ### Badge | Setting | Description | | ----------- | -------------------------------------- | | Show Badges | Show product badges such as New, Sale. | ### QUANTITY | Setting | Description | | ------------- | ---------------------------------- | | Show Quantity | Show product quantity input field. | ### Subtotal | Setting | Description | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Show Sub Total | Show the live subtotal of the product price along with quantity. | | Select Style |

Select the style of the subtotal.
Style 1: The subtotal is separated from the buy button cluster.
Style 2: The subtotal is included in the buy button.

| ### Tabs | Setting | Description | | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Show Tabs? | Toggle to show / hide tabs | | Layout (Desktop) |

Select the layout for the product tabs on Desktop.
Vertical: The tabs are listed vertically and are collapsible.
Vertical With Sidebar: The tabs are listed vertically and will show sidebar if clicked.
Horizontal: The tabs are listed horizontally.
Popup: The tabs are listed vertically and will show popup if clicked.

| | Layout (Mobile) | Select the layout for the tabs on Mobile: Vertical or Popup. | | Style Layout |

Select the icon for Vertical Layout.
Style 1: The tab is presented with caret.
Style 2: The tab is presented with plus/minus icons.

| | Title Font Size | Determine the font size of the tab. | | Title Font Size Mobile | Determine the font size of the tab on Mobile. | | Title Font Weight | Select the font weight of tab | | Text Transform | Transform the text style to be normal (none), uppercase, lowercase or capitalize. | | Item Spacing Top/Bottom | Determine the spacing top and bottom of each tab. | | Product Tab Link Color | Set the color for product tab. This works for Horizontal Layout only. | | Border Color | Set the color for border of product tab. This works for Horizontal Layout only. | | Border Gradient Color | Set the gradient for border of product tab. This works for Horizontal Layout only. |