加盟店様向け ドキュメント/marvle Elements SDK Docs/Shopify向け手順書
page icon

Shopify向け手順書

⚠️
Shopifyを利用した加盟店向けの、marvle Elements SDK導入の手順書になります。
本ページに記載された手順およびスクリーンショットは、Shopify側の変更により実際の画面と異なる場合があります。
 
 

1. SDKを埋め込むDOMを作成する

  1. Shopifyの管理画面の 販売チャネル → テーマ を開き、「カスタマイズ」を押します。
      2.  
  1. 商品ページを選択し、任意のレイアウトを選択します。
      2.  
  1. 任意の掲載場所で ブロックを追加 を選択し、「カスタムLiquid」を選択して追加します。
      2.  
  1. 追加したカスタムLiquidに対して、以下のコードを埋め込みます。
      2. Markdown
      ※ DOM構造やCSS等は、サイトに合わせて適宜変更してください。
 
  1. 「保存する」を押します。
      2.  

2. SDKを読み込む

⚠️
お使いのthemeによって、編集するファイルが異なる場合があります。
  1. ヘッダーにある3点リーダを押して「コードを編集」を選択します。
      2.  
  1. 「レイアウト」の中にあるtheme.liquidを開きます
      2.  
  1. <head>タグの中に含まれるように、以下のコードを配置して保存します。
      2. Markdown
       
       

3. SDKを初期化する

⚠️
お使いのthemeによって、編集するファイルが異なります。
  1. 商品ページに該当するliquidファイルを開きます。
      2.  
  1. liquidファイル内の適切な場所に、以下のコードを貼り付けて保存します。
      2. Markdown
      ※ 重要： YOUR_STORE_ID には、別途通知される加盟店IDを指定してください。
      ※ 既存のscriptタグなどと入れ子にならないよう注意してください
       
 
 
marvleダッシュボードにて商品の登録を行い、セットアップが正しく行われていると、商品ページにmarvleレンタルボタンが表示されます。