【クリエイターモード】テンプレートCompleteでヘッダーに画像やテキストを追記したいです。方法を教えてください。 – makeshop よくある質問

HTMLとCSSの追記で表示が可能です。

＜PC表示例＞

＜スマホ表示例＞

手順1）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / モジュール管理
モジュール名「ヘッダー」

欄内に一度カーソルを置いた状態で、キーボードのCtrlとFキーを同時に押し、表示される検索窓に

<div class="header-menu">

と入力（コピー＆ペースト）し、キーボードのEnterキーを押して以下の記述を見つけてください。

</h1>
<div class="header-menu">

該当の箇所に下記のように追記してください。（赤文字の部分）

追記例）テキストの場合

</h1>
<p class="m-text">
表示させたいテキスト
</p>
<div class="header-menu">

追記例）画像の場合

</h1>
<p class="m-img">
<img src="表示させたい画像URL">
</p>
<div class="header-menu">

表示させたい画像はあらかじめ
ファイルサーバーにアップロードしてご用意ください。
「画像やCSSファイルをアップロードしたい」
https://www.support.makeshop.jp/design/?p=1215?design_board

手順2）
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通
「CSS」欄の末尾に下記を追記してください。

追記例）画像の場合の表示調節

.top-nav p.m-img img{
  height: 50px;
  width: auto;
}

なお、スマホでの表示の場合はテキスト/画像をヘッダー上部に固定するなどで
ショップバナーとの位置が重ならないように調節してください。

追記例）テキストの場合

@media screen and (max-width: 768px) {
  .top-nav p.m-text{
    width: 150px;
    position: fixed;
    top:30px;
    left: 27px;
    z-index:9000;
    font-size: 10px;
  }
}

追記例）画像の場合

@media screen and (max-width: 768px) {
  .top-nav p.m-img img{
    width: 150px;
    height: auto;
    position: fixed;
    top:20px;
    left: 55px;
    z-index:9000;
  }
}

各指定数値はショップ様のお好みで変更してください。

関連記事