[Shopify]背景画像＋リサーチ機能★トップページカスタマイズ★5分で設置(Debut)

 Shopify DIY トップページに背景画像＋リサーチ機能を追加！

Shopifyテンプレートカスタマイズ用のパーツになります。

既存のテーマのレイアウトをプロのWebページのようなおしゃれなオリジナルレイアウトにチェンジできます♪

コピペなのでノーコードで簡単に5分で設置完了です。

 

■ダウンロードファイル

・形式：テキスト（txt） ・対象テーマ：Debut

 

■5分で設置完了　画像＋検索機能テンプレート設置方法

DEMO

 

■Shopifyトップ「背景＋検索窓」機能

1. 横幅を２段階で調整
2. 背景画像の位置を３段階で調整
3. 画像の高さは６段階で調整
4. 背景のオーバーレイ
5. 検索窓のフォントサイズ
6. 検索窓のカラーピッカー
7. 検索窓の高さ調整

 

横幅の調整　２Ways

【PC】

 

【モバイル】

 

 

 背景画像の位置調整　３Ways

 

 

画像アライメントを「上・中央・下」で調整すると、背景の画像の位置を調整することができます。微調整したい場合に便利です。

 

 

画像の高さ調整　６Ways

 

画像高さを６段階で調整ができます。

• 画像に対応
• 極小
• 小
• 中
• 大
• 極大

 

 画像の背景を少し暗めにできます 

 

 検索窓のフォントサイズ・カラー・高さ調整

 

 こちらDEMOページです。

 

✔︎テンプレート設定手順

 たったの5分　新規セクション追加しコピペだけ

 

❶管理画面＞テーマ＞アクション＞コード編集＞Sectionフォルダの「新しいセクションを追加する」をクリック

❷ファイル名はなんでもOK

例えば：top-researchで作成すると、top-research.liquidファイルがセクションフォルダ内に生成されます。

❸ 上記の❷で作成したファイル内を全て削除し、ダウンロードいただいたテキストファイル内のコードを全て選択＆コピーし、セクションファイルへペースト。

 

以上で完了です！！

 

 

あとは管理画面＞テーマ＞カスタマイズ＞ホームページ画面でセクション追加を押下すると、Indexカテゴリ内にSearchブロックができてるので、そちらをクリックしお好きなところに挿入してください。