オンラインストアカスタマイズ

2021年7月13日 ECサイト

ECサイトのUIを変更する方法をご説明します。

オンラインストアTOP

ライブテーマ：現在本番に上がっているテーマです。
オンラインストアの速度：表示速度が遅い場合には、改善のよちがあります。
テーマライブラリー：
　過去のテーマや、現在修正中のテーマを20個まで保存しておけます。
　キャンペーンなどが控えている際には、こちらにキャンペーン用のテーマを作っておき、
　キャンペーンスタートに合わせてリリースするなどが可能です。
無料テーマ、テーマストア：既存のテーマに変更したい場合は、こちらからテーマストアに入って選択します。

ライブテーマ＞アクション

アクションをクリックすると以下を行えます。
・表示する：オンラインストアのUIを表示します。
・名前の変更：テーマの名前を変更します。
・複製する：テーマを複製します。複製されたテーマは「コピー”ライブテーマ名”」の名前で、テーマライブラリに追加されます。
・テーマファイルをダウンロードする：
　　現在のテーマをダウンロードできます。メールで管理者に送られます。
　　ダウンロードされたテーマは、ストアにインポート可能です。
・コードを編集する：こちらはLiquidというshopify独自のコードを編集できます。普段は使用する必要はありません。
・言語を編集する：管理画面で使用している言語を修正する場合に使用します。普段は使用する必要はありません。

テーマライブラリ＞アクション
・公開する：そのテーマを本番に公開します。

UIを編集する

UIの編集画面は上記のようになっています。
左絡むのそれぞれの要素をクリックすると、UIの設定をいじることができます。

オンラインストアを検索する（テンプレート選択）

ここから、以下のページを選択し、テンプレートを編集することができます。編集できるのは、以下になります。
また、あくまでテンプレートの編集となりますので、ホームページ、固定ページ以外は、編集できる部分が限られます。
ページの名称について、変更したい部分もありますが、先日のShopifyアップデートによるものだと思われます（こちらは変更できるかを確認中）。
・Home Page（ホームページ）　→文言・画像の変更ができます
・PRODUCTS
　　・kusaba.normal
　　・kusaba_rich
・COLLECTIONS（コレクションのテンプレート）
・COLLECTIONS LIST（コレクション一覧）※このページは、現在表には出しておりません。
・Pages
　　・purchase-history（購入履歴）
　　・kusaba_screen（複製画とは_固定ページ）　→文言・画像の変更ができます
　　・kusaba_profile（作家紹介_固定ページ）　→文言・画像の変更ができます
　　・kusaba_order（注文制作について_固定ページ）　→文言・画像の変更ができます
　　・kusaba_about（陶彩画の世界_固定ページ）　→文言・画像の変更ができます
　　・contact（お問い合わせ_固定ページ）
　　・article（記事ページ）
・BLOGS
・BLOG POSTS
・Cart
・Checkout
・Others
　　・active_account　→文言の変更ができます
　　・reset_password　→文言の変更ができます
　　・ギフトカード
　　・order
　　・address
　　・login
　　・register
　　・404 Page
　　・検索
　　・account
　　・パスワード（文言の変更ができます）

編集できる箇所に関しては、さまざまな項目がありますが、各項目は複雑なものではないので、
文言を入れて表示状態を見ながら試していくと良いかと思います。

例1：ヘッダー

ロゴアライメント：ロゴの位置を調整できます。
ロゴ画像：ロゴ画像を設定できます。
ロゴの幅をカスタマイズする：幅を設定できます。
メニュー：メニューの編集ページに飛びます。
告知バー：キャンペーン情報や、注意事項等を表示する際に使用します。
　　　　　テキスト枠で、内容を入れられます。

など。

例2：スタイダー画面

スライダーの設定ができます。
PC用画像、スマホ用画像を設定できます。
商品リンク：すでにあるページへのリンク、または外部へのリンク（URLを入れる）を設定できます。
など。

トップ概要

テキストを入れる際には、キーボードの「enter」ボタンで改行できます。
余白等の設定をしたい場合には、上記のような機能を加えることが可能です。

Facebook、Instagram

Facebook、Instagramの表示は固定で配置しておりますので、設定などはありません。
Instagramの設定はアプリ「instafeed」で行っておりますが、こちらのアプリ設定を変更した場合、UIが崩れる可能性があります。ご注意ください。

Shopify上での説明ページもあります。

https://help.shopify.com/en/manual/online-store/themes/theme-editor-updates