スクリプトタグの挿入

タグを挿入

1. ショップ管理 > テーマ管理 >アクション>コードを編集 ec_force/shop/products/show.html.liquid ファイルをクリック
2. 下記コードを挿入

ストアIDは貴社専用に発行されたものをご入力ください

{%- comment -%}AnyGift用スクリプト追加{%- endcomment -%}
<script type="text/javascript">
  let _AnyGiftProductSettingTemp = window.AnyGift || {};
  let _AnyGiftProductSettings = {
    productCode: "{{ product.number }}",
  };
  Object.assign(_AnyGiftProductSettingTemp, _AnyGiftProductSettings);
  window.AnyGift = _AnyGiftProductSettingTemp;
</script>
<script type="text/javascript">
	window.AnyGift = {
	  storeId: 'ストアID 編集してください',
	};
</script>
<script defer src="<https://d1ioo46r7yo3cy.cloudfront.net/store.js>"></script>
{%- comment -%}AnyGift用スクリプト追加ここまで{%- endcomment -%}

マーカーを挿入

1. ショップ管理 > テーマ管理 >アクション>コードを編集 ec_force/shop/sections/products_show_content.liquid ファイルをクリック
2. 下記コードをAnyGiftボタン表示させたい箇所に挿入

{% comment %} anygiftマーカー {% endcomment %}
  <div data-anygift></div>
  <style>
  .ag-text-left.ag-w-\\[345px\\].anygift-gift-ui__container {
      width: 100% !important;
      margin-top: 20px;
  }
  .anygift-gift-ui__main-button{
      border-radius: 999px !important;
  }
  </style>

CSSでデザイン修正(任意対応)

ボタンのデザイン調整をしてください。 必要がありましたら、<style>タグで囲ったりしてください。 例

.ag-text-left.ag-w-\\[345px\\].anygift-gift-ui__container {
    width: 100% !important;
    margin-top: 20px;
}

.anygift-gift-ui__main-button {
    border-radius: 999px !important;
}