{"id":1655,"date":"2021-03-21T07:10:05","date_gmt":"2021-03-21T07:10:05","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/set-image-gallery-fotorama-thumbnail-as-vertical-view-in-magento-2\/"},"modified":"2025-05-22T10:49:07","modified_gmt":"2025-05-22T05:19:07","slug":"set-image-gallery-fotorama-thumbnail-as-vertical-view-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/set-image-gallery-fotorama-thumbnail-as-vertical-view-in-magento-2\/","title":{"rendered":"How to Set Image Gallery Fotorama Thumbnail as Vertical View in Magento 2"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The online store design is important for user experience and driving sales. It is quite essential to make sure that visitors find the product details on the web page easily.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keeping this point in mind, I have come up with a solution to&nbsp;<em><strong>set image gallery Fotoroma thumbnail as vertical view in Magento 2<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By&nbsp;<a href=\"https:\/\/developer.adobe.com\/commerce\/frontend-core\/javascript\/\" target=\"_blank\" rel=\"noreferrer noopener\">default<\/a>, the image gallery Fotoroma thumbnail is set in horizontal view in Magento 2 as shown here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/03\/Horizontal-1024x525.png\" alt=\"How to Set Image Gallery Fotorama Thumbnail as Vertical View in Magento 2 1\" class=\"wp-image-13815\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">However, some images may look better when shown in the vertical view. Or else, the vertical view may be more suitable based on your Magento 2 store theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hence, you may want to change the image gallery Fotoroma thumbnail from horizontal view to vertical view in Magento 2 which can be done using the below method:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Method to Set Image Gallery Fotorama Thumbnail as Vertical View in Magento 2:<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In the&nbsp;<strong>view.xml&nbsp;<\/strong>at&nbsp;<strong><strong>app\\design\\frontend\\Themes\\Yourtheme\\etc<\/strong><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Find the below line<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;var name=\"navdir\">horizontal&lt;\/var><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Replace with below code:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;var name=\"navdir\">vertical&lt;\/var><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once you implement the above code, the image gallery will be displayed as a vertical view like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2021\/03\/Vertical-View-1024x454.png\" alt=\"How to Set Image Gallery Fotorama Thumbnail as Vertical View in Magento 2 2\" class=\"wp-image-13817\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Also, do share the post with Magento 2 store owners via social media to help them enhance the layout of the product page in their online store.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The online store design is important for user experience and driving sales. It is quite essential to make sure that visitors find the product details&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1655","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1655"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1655\/revisions"}],"predecessor-version":[{"id":14427,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1655\/revisions\/14427"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}