[Skip to main content](#vessel-content)

#   Changing the look of product page

##

- **[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")**
- [![pfotsu's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/2089-pfotsu "View pfotsu's Profile") Topic Author
- [ Offline](/forum/user/2089-pfotsu)

Less More

- Posts: 30
- Thank you received: 0
-
-

13 years 3 months ago [\#114577](#114577) by [pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")  *[Changing the look of product page](/forum/2-general-talk-about-hikashop/85492-changing-the-look-of-product-page#114577 "Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only...")* was created by *[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")*

Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only way in the php view files? Also is there a setting that would bring the text out from behind the picture.

Thanks again for your help.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1NDkyLWNoYW5naW5nLXRoZS1sb29rLW9mLXByb2R1Y3QtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")**
- [![pfotsu's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/2089-pfotsu "View pfotsu's Profile") Topic Author
- [ Offline](/forum/user/2089-pfotsu)

Less More

- Posts: 30
- Thank you received: 0
-
-

13 years 3 months ago [\#114578](#114578) by [pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")  Replied by *[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")* on topic *[Changing the look of product page](/forum/2-general-talk-about-hikashop/85492-changing-the-look-of-product-page#114578 "Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only...")*

Page I'm talking about is at [ shopredlodge.com/index.php/beartooth-pas...the-fighting-marmots](http://shopredlodge.com/index.php/beartooth-pass/product/6-the-fighting-marmots)

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1NDkyLWNoYW5naW5nLXRoZS1sb29rLW9mLXByb2R1Y3QtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Eliot](/forum/user/1824-eliot "View Eliot's Profile")**
- [![Eliot's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar1824.png)](/forum/user/1824-eliot "View Eliot's Profile")
- [ Offline](/forum/user/1824-eliot)

Less More

- Posts: 2334
- Thank you received: 403
-
-

13 years 3 months ago [\#114630](#114630) by [Eliot](/forum/user/1824-eliot "View Eliot's Profile")  Replied by *[Eliot](/forum/user/1824-eliot "View Eliot's Profile")* on topic *[Changing the look of product page](/forum/2-general-talk-about-hikashop/85492-changing-the-look-of-product-page#114630 "Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only...")*

Hi there,

You have to edit the view show_default (in Display>Views) and move what's in the div block hikashop_product_bottom_part (this code): Code:

<?php if(!empty($this->element->extraData->bottomBegin)) echo implode("\r\n",$this->element->extraData->bottomBegin); ?> <div id="hikashop_product_description_main" class="hikashop_product_description_main"> <?php //DISPLAY the product description echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description)); ?> </div> <span id="hikashop_product_url_main" class="hikashop_product_url_main"> <?php if (!empty ($this->element->product_url)) { //DISPLAY the manufacturer echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>'); } ?> </span> <?php //LAYOUT show_product_product_files $this->setLayout('show_block_product_files'); echo $this->loadTemplate(); ?> <?php if(!empty($this->element->extraData->bottomMiddle)) echo implode("\r\n",$this->element->extraData->bottomMiddle); ?> <?php if(!empty($this->element->extraData->bottomEnd)) echo implode("\r\n",$this->element->extraData->bottomEnd); ?>

Inside the hikashop_product_right_part block.

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1NDkyLWNoYW5naW5nLXRoZS1sb29rLW9mLXByb2R1Y3QtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")**
- [![pfotsu's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/2089-pfotsu "View pfotsu's Profile") Topic Author
- [ Offline](/forum/user/2089-pfotsu)

Less More

- Posts: 30
- Thank you received: 0
-
-

13 years 3 months ago [\#115318](#115318) by [pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")  Replied by *[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")* on topic *[Changing the look of product page](/forum/2-general-talk-about-hikashop/85492-changing-the-look-of-product-page#115318 "Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only...")*

Thanks,
I did move the code to the right part div, but it just stacked up everything below the images. Could you take a look at the code and see where I went wrong? Thanks, your help on this is much appreciated.

<?php
/**
* @package HikaShop for Joomla!
* @version 2.2.0
* @author hikashop.com
* @copyright (C) 2010-2013 HIKARI SOFTWARE. All rights reserved.
* @license GNU/GPLv3 [ www.gnu.org/licenses/gpl-3.0.html](http://www.gnu.org/licenses/gpl-3.0.html)
*/
defined('_JEXEC') or die('Restricted access');
?><div id="hikashop_product_top_part" class="hikashop_product_top_part">
<?php if(!empty($this->element->extraData->topBegin)) { echo implode("\r\n",$this->element->extraData->topBegin); } ?>
<h1>
<span id="hikashop_product_name_main" class="hikashop_product_name_main">
<?php
if (hikashop_getCID('product_id')!=$this->element->product_id && isset ($this->element->main->product_name))
echo $this->element->main->product_name;
else
echo $this->element->product_name;
?>
</span>
<?php if ($this->config->get('show_code')) { ?>
<span id="hikashop_product_code_main" class="hikashop_product_code_main">
<?php
echo $this->element->product_code;
?>
</span>
<?php } ?>
</h1>
<?php if(!empty($this->element->extraData->topEnd)) { echo implode("\r\n",$this->element->extraData->topEnd); } ?>
<?php
$pluginsClass = hikashop_get('class.plugins');
$plugin = $pluginsClass->getByName('content', 'hikashopsocial');
if(!empty($plugin) && (@$plugin->published || @ $plugin->enabled)) {
echo '{hikashop_social}';
}
?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
<div class="row-fluid">
<?php } ?>
<div id="hikashop_product_left_part" class="hikashop_product_left_part span6">
<?php
if(!empty($this->element->extraData->leftBegin)) { echo implode("\r\n",$this->element->extraData->leftBegin); }

$this->row = & $this->element;
$this->setLayout('show_block_img');
echo $this->loadTemplate();

if(!empty($this->element->extraData->leftEnd)) { echo implode("\r\n",$this->element->extraData->leftEnd); }
?>
</div>

<div id="hikashop_product_right_part" class="hikashop_product_right_part span6">
<?php
if(!empty($this->element->extraData->bottomBegin))
echo implode("\r\n",$this->element->extraData->bottomBegin);
?>
<div id="hikashop_product_description_main" class="hikashop_product_description_main">
<?php
echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description));
?>
</div>
<span id="hikashop_product_url_main" class="hikashop_product_url_main">
<?php
if (!empty ($this->element->product_url)) {
echo JText :: sprintf('MANUFACTURER_URL', '<a href="' . $this->element->product_url . '" target="_blank">' . $this->element->product_url . '</a>');
}
?>
</span>
<?php
$this->setLayout('show_block_product_files');
echo $this->loadTemplate();
?>
<?php
if(!empty($this->element->extraData->bottomMiddle))
echo implode("\r\n",$this->element->extraData->bottomMiddle);
?>
<?php
if(!empty($this->element->extraData->bottomEnd))
echo implode("\r\n",$this->element->extraData->bottomEnd);
?>
<?php
if(!empty($this->element->extraData->rightBegin))
echo implode("\r\n",$this->element->extraData->rightBegin);
?>
<div id="hikashop_product_vote_mini" class="hikashop_product_vote_mini">
<?php
$config =& hikashop_config();
if($this->params->get('show_vote_product') == '-1'){
$this->params->set('show_vote_product',$config->get('show_vote_product'));
}
if($this->params->get('show_vote_product')){
$js = '';
$this->params->set('vote_type','product');
if(isset($this->element->main)){
$product_id = $this->element->main->product_id;
}else{
$product_id = $this->element->product_id;
}
$this->params->set('vote_ref_id',$product_id);
echo hikashop_getLayout('vote', 'mini', $this->params, $js);
}
?>
</div>
<span id="hikashop_product_price_main" class="hikashop_product_price_main">
<?php
if ($this->params->get('show_price')) {
$this->row = & $this->element;
$this->setLayout('listing_price');
echo $this->loadTemplate();
}
?>
</span>
<?php
if(!empty($this->element->extraData->rightMiddle))
echo implode("\r\n",$this->element->extraData->rightMiddle);
?>
<?php
$this->setLayout('show_block_dimensions');
echo $this->loadTemplate();
?><br />
<?php
if($this->params->get('characteristic_display')!='list'){
$this->setLayout('show_block_characteristic');
echo $this->loadTemplate();
?>
<br />
<?php
}

$form = ',0';
if (!$this->config->get('ajax_add_to_cart', 1)) {
$form = ',\'hikashop_product_form\'';
}
if (hikashop_level(1) && !empty ($this->element->options)) {
?>
<div id="hikashop_product_options" class="hikashop_product_options">
<?php
$this->setLayout('option');
echo $this->loadTemplate();
?>
</div>
<br />
<?php
$form = ',\'hikashop_product_form\'';
if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
?>
<input type="hidden" name="popup" value="1"/>
<?php
}
}
if (!$this->params->get('catalogue') && ($this->config->get('display_add_to_cart_for_free_products') || !empty ($this->element->prices))) {
if (!empty ($this->itemFields)) {
$form = ',\'hikashop_product_form\'';
if ($this->config->get('redirect_url_after_add_cart', 'stay_if_cart') == 'ask_user') {
?>
<input type="hidden" name="popup" value="1"/>
<?php
}
$this->setLayout('show_block_custom_item');
echo $this->loadTemplate();
}
}
$this->formName = $form;
if($this->params->get('show_price')){ ?>
<span id="hikashop_product_price_with_options_main" class="hikashop_product_price_with_options_main">
</span>
<?php }
if(empty ($this->element->characteristics) || $this->params->get('characteristic_display')!='list'){ ?>
<div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
<?php
$this->row = & $this->element;
$this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form\')){ return hikashopModifyQuantity(\'' . $this->row->product_id . '\',field,1' . $form . ',\'cart\'); } else { return false; }';
$this->setLayout('quantity');
echo $this->loadTemplate();
?>
</div>
<?php } ?>
<div id="hikashop_product_contact_main" class="hikashop_product_contact_main">
<?php
$contact = $this->config->get('product_contact',0);
if (hikashop_level(1) && ($contact == 2 || ($contact == 1 && !empty ($this->element->product_contact)))) {
$empty = '';
$params = new HikaParameter($empty);
global $Itemid;
$url_itemid='';
if(!empty($Itemid)){
$url_itemid='&Itemid='.$Itemid;
}
echo $this->cart->displayButton(JText :: _('CONTACT_US_FOR_INFO'), 'contact_us', $params, hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id.$url_itemid), 'window.location=\'' . hikashop_completeLink('product&task=contact&cid=' . $this->row->product_id.$url_itemid) . '\';return false;');
}
?>
</div>
<?php
if(!empty($this->fields)){
$this->setLayout('show_block_custom_main');
echo $this->loadTemplate();
}
?>
<span id="hikashop_product_id_main" class="hikashop_product_id_main">
<input type="hidden" name="product_id" value="<?php echo $this->element->product_id; ?>" />
</span>
<?php
if(!empty($this->element->extraData->rightEnd))
echo implode("\r\n",$this->element->extraData->rightEnd);
?>
</div>
<?php if(HIKASHOP_RESPONSIVE){ ?>
</div>
<?php } ?>
<div id="hikashop_product_bottom_part" class="hikashop_product_bottom_part">

</div>

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1NDkyLWNoYW5naW5nLXRoZS1sb29rLW9mLXByb2R1Y3QtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")**
- [![pfotsu's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/2089-pfotsu "View pfotsu's Profile") Topic Author
- [ Offline](/forum/user/2089-pfotsu)

Less More

- Posts: 30
- Thank you received: 0
-
-

13 years 3 months ago [\#115322](#115322) by [pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")  Replied by *[pfotsu](/forum/user/2089-pfotsu "View pfotsu's Profile")* on topic *[Changing the look of product page](/forum/2-general-talk-about-hikashop/85492-changing-the-look-of-product-page#115322 "Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only...")*

Also, looks fine on this page
[ www.shopredlodge.com/index.php/all-shirt...the-fighting-marmots](http://www.shopredlodge.com/index.php/all-shirts/product/6-the-fighting-marmots)

but not on this page
[ www.shopredlodge.com/index.php/vive-la-r...-paris-and-red-lodge](http://www.shopredlodge.com/index.php/vive-la-red-lodge/product/36-new-york-paris-and-red-lodge)

is it a title length issue?

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1NDkyLWNoYW5naW5nLXRoZS1sb29rLW9mLXByb2R1Y3QtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

- **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")**
- [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile")
- [ Offline](/forum/user/4105-xavier)

Less More

- Posts: 13201
- Thank you received: 2322
-
-
-
- [](http://www.kidiweb.fr)
-

13 years 3 months ago [\#115395](#115395) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile")  Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Changing the look of product page](/forum/2-general-talk-about-hikashop/85492-changing-the-look-of-product-page#115395 "Hi, Im looking to modify the look of my product page. I would like the description, detail pictures, and cart info all to the right of the main picture. Is there a easy way to do this or is the only...")*

Hi,

You have to set a width to the right part of the product page.
Thanks to use the following css property:

.hikashop_product_right_part{ width: 48% !important;}

[ www.hikashop.com/fr/support/documentatio...the-display.html#css](http://www.hikashop.com/fr/support/documentation/153-customize-the-display.html#css)

Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzItZ2VuZXJhbC10YWxrLWFib3V0LWhpa2FzaG9wLzg1NDkyLWNoYW5naW5nLXRoZS1sb29rLW9mLXByb2R1Y3QtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation.

Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to?

[](/forum/topics/feed/mode-topics?format=feed&type=rss)

Time to create page: 0.264 seconds

[Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)

[](#top)