Customize Product Page

-- HikaShop version -- : 2.6.1
-- Joomla version -- : 3.4.8

Hello Again,
On the Product page I would like to move the Product Name which is currently in hikashop_porduct_top_part to the hikashop_product_right_part. I tried with moving this part of the code in show_default view to the hikashop_product_right_part but nothing changes.
The code I moved is:

<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>

Thanks a lot, Nicolas!
My "layout on product page" was set to "tabular". When revert it to "default" it worked.
Could you please point me to the right place (file/view) to obtain the same result while keeping the "tabular" layout?

I also would like to set a background-image for the hikashop_product_right_part area by adding the following at the end of the Configuration>Display>CSS>Front-end CSS File-EDIT

.hikashop_product_right_part {
background-image: url(../upload/background_image.jpg);
}

For tabular view it's file components\com_hikashop\views\product\tmpl\show_tabular.php between lines 46-62.

.hikashop_product_right_part {
background-image: url(../upload/background_image.jpg);
background-size: cover;
}

.hikashop_product_right_part {
background-image: url(../upload/background_image.jpg);
background-size: cover;
}

@media (max-width: 768px) {
    background-image: url(../upload/background_image2.jpg);
}

Thank you very much, KORZO!
This (background-image: cover;) solves the fit-to-size of the right-part area.

Now I have to figure out how to make the parts of the Product page (the top, left, right, bottom) responsive - the images and the text. Currently neither the Product image, nore the background-image on the right are responsive.
One way is probably with the @media as you suggest but I hope there is an easier one as well
I was hoping that there is some class such as responsive or similar that resizes the elements depending on the screen resolution without having to provide the images for the Product page parts in the different sizes.

EDIT: The tempalte I use is Purity III, which is a responsive template and all my other menues are responsive

Hello,
If you want your page to be responsive depending on the screen resolution, you'll automatically need to use the "@media" CSS property to adapt the display.

Thanks, Mohamed!

Could you please give an example how to automatically apply the @media property without having to provide separate images for the separate screen sizes?

Thanks a lot, Philip!
It is awesom to have you, Mohamed and Korzo guiding me towards my goal, responsive Product Page, Cart, Checkout process pages, etc.
I will play with the example and concept provided and will hopefully be able to present the result soon.
Meanwhile, if anything else becomes an obstacle I hope you don't mind to keep you posted
Cheers,

Hello Again
@media will do the part of the job.
What I can't find a way to do is to arrange .hikashop_produc_right_part after .hikashop_product_left_part when viewing on smaller (mobile) screens. Would some css do the job?
Cheers,

10x a lot, Nicolas!
Interestingly, I was trying your suggestion prior to asking here but it iddn't work. Now I tried again but this time using "!important " to the width of 100% and voila

One last thing on the Product page: where should I make a change in order to have the thumbnails one next to the other instead of one above the other (currently I have just 2 thumb images)?

Moving to the CheckOut layout the following question comes out:
How can I make the separate parts of the checkout process expandable having a "+" sign to expand each group (the group of Shipping, Payment, etc.) and the groups (steps) of the checkout process follow one after another?

Thanks again!

Thank you, Nicolas!
The thumbnails became one next to another once I did a frontend css change (DIsplay->CSS) : img {display: inline !important;}

I will write a separate post about the checkout grouping questions.

BR and good day to everyone!