Customizing the Design of the Product Detail Page

The HTML elements inserted into the product detail page have classes starting with "anygift" that are set for customization in each store. By editing the theme and applying styles to classes starting with "anygift" in any CSS file loaded on the product page, it is possible to customize the design.

<aside> 💡 Please note that classes other than those starting with "anygift" may be subject to change in future updates. It is not recommended to apply styles to those classes.

</aside>

The HTML for the gift purchase UI (form) that is inserted into the product detail page.

<div class="mb-5 anygift-wrapper">
  <div class="flex items-center w-full anygift-option-button-area">
    <button type="button" class="flex justify-center items-center py-4 w-1/2 text-2xl text-gray-700 hover:text-gray-600 active:text-gray-900 anygift-option-button">
      <div class="flex justify-center items-center mr-2 w-[22px] h-[22px] rounded-full border-2 border-gray-300 border-solid anygift-option-button__circle">&ensp;</div>
      <div class="leading-none text-black anygift-option-button__caption">通常購入する</div>
    </button>
    <button type="button" class="flex justify-center items-center py-4 w-1/2 text-2xl text-gray-700 hover:text-gray-600 active:text-gray-900 anygift-option-button">
      <div class="flex justify-center items-center mr-2 w-[22px] h-[22px] rounded-full border-2 border-gray-300 border-solid anygift-option-button__circle">
        <div class="w-[16px] h-[16px] bg-[#EB7E7E] rounded-full anygift-option-button__circle-dot">&ensp;</div>
      </div>
      <div class="leading-none text-black anygift-option-button__caption">eギフトで贈る</div>
    </button>
  </div>
  <div class="pt-4 mt-3 w-full border-t border-gray-100 border-solid anygift-form-area">
    <div class="mb-6 text-[13px] text-left text-black anygift-description-area">
      <div class="py-2 mb-3 anygift-about-area">
        <a target="_blank" rel="noreferrer" class="text-[#0C92F2] underline anygift-about-link" href="<https://anyreach.notion.site/AnyGift-45340047b9264ebdbd27677fe929cb70>">eギフトとは？</a>
      </div>
      <div class="anygift-description">※受け取り期限は購入完了から6日後の23:00です</div>
      <div class="anygift-description">※期限までに受け取り手続きをされない場合は、購入者の住所に送られます</div>
    </div>
    <div class="mb-1 text-[13px] text-left anygift-form-label">メッセージを入力してください</div>
    <textarea rows="4" placeholder="誕生日おめでとう！いつも感謝しています。
      このプレゼントを受け取ってください！" class="block py-2 px-2 mb-4 w-full text-[13px] bg-gray-200 rounded border border-gray-200 border-solid focus:outline-gray-500 anygift-form-message-input"></textarea>
    <div class="mb-1 text-[13px] text-left anygift-form-label">贈り主名を入力してください</div>
    <input type="text" placeholder="あなたの名前を入力してください" class="block py-2 px-2 mb-4 w-full text-[13px] bg-gray-200 rounded border border-gray-200 border-solid focus:outline-gray-500 anygift-form-from-input" value="">
  </div>
</div>

The HTML for the validation pop-up UI for the cart. (This is the same for all)

<div class="py-20 px-8 mx-auto w-full max-w-[480px] anygift-validation-modal-wrapper">
  <div class="mb-5 text-[18px] font-bold text-center text-[#d42828] whitespace-pre-wrap anygift-validation-modal-main-message">
    すでに商品がカートに入っています
  </div>
  <div class="mb-20 text-[15px] font-semibold text-center whitespace-pre-wrap anygift-validation-modal-sub-message">
    通常購入とeギフトで贈る商品を同時に購入できません。 eギフトで贈る商品は1つずつご購入ください。
  </div>
  <div class="flex justify-center mb-10">
    <button class="py-5 px-8 w-full max-w-[280px] text-[15px] font-bold text-center text-white bg-gray-100 bg-gradient-to-r rounded-full from-anygift-darkgrad-blue to-anygift-darkgrad-green anygift-validation-modal-back-button" type="button">
      商品画面に戻る
    </button>
  </div>
  <div class="flex justify-center text-[16px] font-semibold text-black anygift-validation-modal-detail-message">
    eギフトについて詳しくは
    <a target="_blank" rel="noreferrer" class="underline anygift-validation-modal-detail-link" href="<https://anyreach.notion.site/AnyGift-45340047b9264ebdbd27677fe929cb70>">
      こちら
    </a>
  </div>
</div>

An example of a CSS file that can be used for customization

.anygift-form-label {
  color: #666;
  font-weight: bold;
  text-align: center;
}

.anygift-form-message-input {
  font-size: 16px;
}