いつもお世話になります。
カラーミーを利用しております、TOPページから商品ページのレイアウトなどのテンプレートはオープン時に業者に作成してもらいました。今までは画像1のように商品詳細画像サイズが横長のため、他のサイトと画像を共有できないため、正方形に変更したく、カラーミーに確認したところ、「HTML・CSS編集によるデザインカスタマイズが影響している」とのことでCSSにて変更しました。
画像2が変更後のページですが、横幅を小さくしたため、拡大用商品画像が右横に配列されてしましました。
画像1のように商品詳細画像の下に拡大用商品画像を配列したいのですがどうすればいいのでしょうか。
また、商品詳細画像も拡大画像にすることはできないでしょうか？

HTML・CSSのことはほとんどわからないのですが、CSS編集に商品詳細レイアウトがありましたので下記にサイズ変更しました。
---------------------------------------------------------------------
#detail .main_img {
width395px;
height395px;
---------------------------------------------------------------------

下記は
商品詳細レイアウトの部分の詳細です。

#detail {
text-align:center;
color:<{$font_color}>;
}

#detail .expl {
line-height:150%;
text-align: left;
margin: 10px 10px 5px 10px;
}

#detail .main_img {
width395px;
height395px;
float:left;
padding: 4px;
border:1px #dacdb9 solid;
margin-bottom:15px;
}

#detail .sub {
float: left;
width: 188px;
text-align: center;
}

#detail .sub img {
width: <{$productimg_border}>px;
padding: 4px;
border:1px #dacdb9 solid;
}

#detail .table {
width: 400px;
background:transparent url(http://img.shop-pro.jp/tmpl_img/26/detail_table_bg.jpg) left top repeat-y;
text-align:left;
margin:20px auto 30px;
}

#detail .table .cell_1 {
width: 130px;
height: 28px;
color: #6d2916;
font-weight:bold;
border-right: 2px #ffffff solid;
border-bottom:2px #ffffff solid;
}

#detail .table .cell_2 {
width: 270px;
height: 28px;
color: #6d2916;
background:#f2ebe0;
border-bottom:2px #ffffff solid;
}

#detail .table .cell_mar {
margin: 0px 5px 0px 15px;
}

作ってもらった業者にお願いするのが一番早いのですが、今後、出来るだけ自分で出来ればと思っておりますのでご指導をお願いいたします。