Search
Duplicate
🔧

マイページのデザインカスタマイズ

Mikawayaのサブスクリプションのマイページを編集する方法を紹介します。カスタマイズで行える内容としてはCSSで編集できる内容のみとなっております。
マイページの各項目にidを降っていますので、アセットで追加したcssファイルでidを指定して記述してください。
※Liquidの知識がある方向けのドキュメントとなっておりますので、実際にカスタマイズを行う場合は専門のパートナーにご依頼ください

[/apps/floor-s]ご注文の定期便一覧ページ

id=mikawaya-subscription-list-xxx(xxx=項目に関連する名称)
id=mikawaya-subscription-list-item-yyy (yyy=項目に関連する名称)
※サブスク契約一覧の一つのアイテムという意味で上記Idを使用
例:
<div class="mikawaya-main-container"> <p>ご注文の定期便一覧</p> <!-- contractId=123456 --> <div id="mikawaya-subscription-list-item-section-123456"> <div id="mikawaya-subscription-list-item-image-123456"> <img src="xxx"/> </div> <div id="mikawaya-subscription-list-item-detail-name-123456"> <p>商品名</p> <p>カップ麺セット</p> </div> <div id="mikawaya-subscription-list-item-detail-count-123456"> <p>数量</p> <p>5</p> </div> </div> </div> <s>
HTML

■[/apps/floor-s/subscription/?sid=2312208540]定期便詳細ページ

id=mikawaya-subscription-lines-xxx(xxx=項目に関連する名称)
id=mikawaya-subscription-lines-item-yyy (yyy=項目に関連する名称)
※1契約の複数商品の1アイテムという意味で上記Idを使用
例:
<div class="mikawaya-main-container"> <div id="mikawaya-subscription-lines-back-buttton">         定期便一覧に戻る </div> <!--ProductVariantId=123456 --> <div id="mikawaya-subscription-lines-item-section-123456"> <div id="mikawaya-subscription-lines-item-image-123456"> <img src="xxx"/> </div> <div id="mikawaya-subscription-lines-item-detail-name-123456"> <p>商品名</p> <p>カップ麺セット</p> </div> <div id="mikawaya-subscription-lines-item-detail-count-123456"> <p>数量</p> <p>5</p> </div> </div> <p>クーポン</p>  <div id="mikawaya-subscription-lines-coupon-section"> <div id="mikawaya-subscription-lines-coupon-input"> <input type="text"> </div> <div id="mikawaya-subscription-lines-coupon-bottom"> <button>適用する</button> </div> </div> <div>
HTML
〜css設定イメージ〜
/*サブスク一覧のタイトルのスタイル修正*/ div[id="mikawaya-subscription-list-title"] p{ font-size: 18px; /*サイズ変更*/ color:gray;/*文字色変更*/ } /*サブスク一覧のボタンのスタイル修正*/ div[id^="mikawaya-subscription-list-item-bottom-"] button{ /*ボタン幅の調整*/ display: block; width: auto; height: auto; padding: 16px; margin: 0 auto; background-color: lightgray;/*ボタンの色修正*/ } /*サブスク商品詳細の画像と文言のレイアウト修正*/ div[id^="mikawaya-subscription-lines-item-section-"] { /* セレクタ名の前方一致 */ /*上下横中央寄せ*/ display:flex; justify-content:center; align-items:center; }
CSS

ShopifyのCSSの変更方法(※ファイルを修正する前にバックアップ推奨)

1、「テーマを編集」の検索窓で「css」と入力します。
2、「アセット」の「新しいアセットを追加する」をクリックします。
3、[ファイルをアップロード] → [ファイルを選択]をクリックします。ご自身のローカルからCSSファイルをアップロードしてください。
新しくCSSファイルを作成する場合は「空のファイルを作成する」でファイル名を記入します。
4、Assets内で先程作成した「ファイル名.css」があるかを確認してください。今回は「test.css」の名称を付けました。ここに追加するCSSを記述してください。
5、CSSの記述が完了したら、新しいCSSファイルを現在使用しているテーマに読み込ませます。左上の検索窓で「theme」と入力してください。「theme.liquid」ファイルをクリック。
6、「theme.liquid」ファイル内の<head>タグ内に新しいCSSファイルの定義を記述すれば、作成したcssが読み込まれます。base.cssやthema.cssなど、他のcss設定より上部に記述すると、設定が上書きされてしまうので、他のcss定義より下部に設定してください。
例:現在のテーマが[Crave]の場合
例:現在のテーマが[Dawn]の場合
例:現在のテーマが[Debut]の場合
※テーマによって設定箇所が異なりますので、ご注意ください。
「コード編集する」内の「アセット」フォルダ内theme.cssやbase.cssなどの一番下に、今回追加したidのstyle設定を追加してデザイン変更で出来ますが、別ファイルを作成して、theme.liquidファイルに新しいcssファイル名を追加するというやり方の方が安全な方法と言えます。