テンプレート"Deseo"はどのように編集できますか?

Deseoテンプレートをカスタマイズしましょう!

大きな画像のスライドショーが人気のスタイリッシュなテンプレート、Deseoのカスタマイズ方法をご紹介します。

 

Contents:

  1. トップページのスライドショーの画像について
  2. ナビゲーション・メニューについて
  3. 商品情報ページ-購入オプションについて
  4. 商品情報ページ-情報タブについて

1. トップページのスライドショーの画像について

トップページのスライドショーを、ショップのブランドイメージに合うものに変更しましょう。

 

スライドショーの編集

     1.a  スライドショーの画像を変更する

     1.b  表示されるスライドの数を変更する

     1.c  スライドショーを削除する

     1.d  スライド画像にリンクを貼る

 

 

1.a スライドショーの画像を変更する

Deseoのスライドショーの画像は、下記の手順で変更することができます。

 

  1. スライドショーに使いたい画像を作成する。 サイズは「幅900px × 360px」

   slideshow.png 

   2. 画像をアップロードする。

  デザイン > 画像ファイル管理 より使用したい画像をアップロードしてください。

  

  3. アップロードした画像のURLをコピーする。

  アップロードした画像をクリックし、Image URLをコピーしてください。

  

  4. デザインページに戻り、テンプレート設定(PC) > Deseo の【編集】をクリックする。

 

  5. 表示されたページにある【2. トップ】をクリックする。

  

  6. html内のアドレスを自分が使いたい画像のURLに置き換える。

  ※ ( )内に既に書いてある画像URLを消し、設定したい画像のURLに置き換えてください。

 

html.png

 

  7. ページ下部にある【更新】をクリックして、完了。

toppage.png

 

 

1.b 画像の数を変更する

上記の箇所で、該当のイメージタグを追加・削除することで、スライド画像の数を変更できます。

画像が1枚だけの場合、イメージタグはこのようになります。

<div class="image clearfix" style="background-image: url(<{$img_url}>/templates/31/img/demo_slide_03.png);"></div>

 

 

1.c スライドショーを削除する

ショップからスライドショーを完全に削除したい場合、テンプレートから該当コードを削除してください。

削除する箇所は下記の通りです。

<div id="slider">
    <div class="image clearfix" style="background-image: url(<{$img_url}>/templates/31/img/demo_slide_01.png);"></div>
    <div class="image clearfix" style="background-image: url(<{$img_url}>/templates/31/img/demo_slide_02.png);"></div>
    <div class="image clearfix" style="background-image: url(<{$img_url}>/templates/31/img/demo_slide_03.png);"></div>
</div>

 

1.d スライド画像にリンクを貼る 

スライド画像にリンクを貼りたい場合、下記の部分を書き換えてください。

書き換え前

<div id="slider">
        <div class="image clearfix" style="background-image: url(<{$img_url}>/templates/31/img/demo_slide_01.png);"></div>
        <div class="image clearfix" style="background-image: url(<{$img_url}>/templates/31/img/demo_slide_02.png);"></div>
        <div class="image clearfix" style="background-image: url(<{$img_url}>/templates/31/img/demo_slide_03.png);"></div>
</div>

 

書き換え後

<div id="slider">
        <div class="image clearfix">
            <a href="http://xxxx.リンク先のURL">
              <img src="画像のURL" />
            </a>
    </div>
        <div class="image clearfix">
            <a href="http://xxxx">
              <img src="<{$img_url}>/templates/31/img/demo_slide_02.png" />
            </a>
    </div>
        <div class="image clearfix">
            <a href="http://xxxx">
              <img src="<{$img_url}>/templates/31/img/demo_slide_03.png" />
            </a>
    </div>
</div>

2. ナビゲーション・メニューについて

カテゴリー: トップメニューでは、親カテゴリーのみが表示され、子カテゴリーは表示されません。

'Other': 管理者ページにて、ひとつ以上のフリーページが '使用中' に設定されている場合、 'Other' がトップのカテゴリーメニューバーに表示されます。これにカーソルを合わせると、全てのフリーページのリンクが表示されます。

d074240af9676d49e210b154af949993.png

3. 商品情報ページ-購入オプションについて

定価 : 商品編集ページ にて、定価を入力すると、商品の正規の価格の下に、打ち消し線でこの金額が表示されます。

在庫:商品のオプションの在庫数の管理を設定していて、購入者が在庫のないオプションをカートに入れようとした場合、下記のようなメッセージが表示されます。

548793d637fe12212f77ef9e93554fb5.png

 

 

オプションでなく、商品自体の在庫数を管理するよう設定していて、管理者ページの在庫の設定の箇所で「表示する」に設定している場合、'inventory'という項目が表示されます。

52ba6b806854a88cdd967ba12185cd17.png

 

この項目名は下記の方法で変更することができます。

   1.管理者ページの 商品管理 > 在庫管理 > 在庫表示設定を開く

   2. '在庫を表示する'の箇所に項目名を入力する

zaiko1.png

 

 

4. 商品情報ページ-情報タブについて

'Description' タブ - 商品編集ページ で入力した、商品説明がここに表示されます。

83f48c8e8ebf6b2f2a0083a2d3248cfe.png

 

'Shipping' および 'Payment' タブ - 利用できる配送方法と決済方法が表示されます。特定の商品に利用できない配送方法・決済方法は、 商品編集ページの「利用不可決済・配送方法設定」で設定できます。

 

7f1ee1bae0b2ef7c774e8bc820ae3ed3.png

 

fc6b0e2e61b3be8f5016aec9677719de.png

 

他にご質問がございましたら、リクエストを送信してください

0 コメント

記事コメントは受け付けていません。