[bassmonster]

Hello all,
We are using version 4.2.4

i have attached pic of the product layout page. Currently, the top image has too much empty space. The more options we have on the right hand side, the more the tabs/information tab pushes down making the empty space even bigger.

is there a way to change the layout as depicted in the bottom pic?

Attached Thumbnails

• 

[CS-Market]

Hello,

The additional development is required here. Please contact us if you are interested.

Sincerely yours,
CS-Market.

[eComLabs]

It is very simple modification. Please open the design\themes\YOUR_THEME\templates\blocks\product_templates\default_template.tpl and remove the following code:

{if $show_product_tabs}
		{include file="views/tabs/components/product_tabs.tpl"}
		{if $blocks.$tabs_block_id.properties.wrapper}
			{include file=$blocks.$tabs_block_id.properties.wrapper content=$smarty.capture.tabsbox_content title=$blocks.$tabs_block_id.description}
		{else}
			{$smarty.capture.tabsbox_content nofilter}
		{/if}
{/if}

Then add:

<div style="width: {$settings.Thumbnails.product_details_thumbnail_width}px; clear: both">
	{if $show_product_tabs}
		{include file="views/tabs/components/product_tabs.tpl"}
		{if $blocks.$tabs_block_id.properties.wrapper}
			{include file=$blocks.$tabs_block_id.properties.wrapper content=$smarty.capture.tabsbox_content title=$blocks.$tabs_block_id.description}
		{else}
			{$smarty.capture.tabsbox_content nofilter}
		{/if}
	{/if}
</div>

after this code:

{hook name="products:image_wrap"}
					{if !$no_images}
						<div class="ty-product-block__img cm-reload-{$product.product_id}" id="product_images_{$product.product_id}_update">
							{assign var="discount_label" value="discount_label_`$obj_prefix``$obj_id`"}
							{$smarty.capture.$discount_label nofilter}
							{include file="views/products/components/product_images.tpl" product=$product show_detailed_link="Y" image_width=$settings.Thumbnails.product_details_thumbnail_width image_height=$settings.Thumbnails.product_details_thumbnail_height}
						<!--product_images_{$product.product_id}_update--></div>
					{/if}
				{/hook}

The code is actual for the responsive theme

[johnbol1]

Or you could change the setting for displaying the additional images to fill the space instead of scrolling

[bassmonster]

Thank you so much ecomlabs. That worked a treat.

John, where is this setting you mention please just for future reference...

[eComLabs]

Thank you so much ecomlabs. That worked a treat.

John, where is this setting you mention please just for future reference...

You are welcome!

I am not sure what John wanted to say, but he meant the Settings -> Appearance -> Display mini thumbnail images as a gallery setting