Skip to main content
Settings > Custom HTML & CSS から、HTML と CSS を使って Upcart の cart drawer をカスタマイズできます。
  • Upcart では AI アシスタント Fin によるサポートを提供していますが、サードパーティの AI ツールを使ってカスタムコンテンツを作成することもできます。

ベストプラクティス

  • インライン HTML のみを使用します — <html><head><body> タグは使わないでください。
  • すべての CSSCustom CSS セクションに記述します。
  • HTML location ドロップダウンを使用して、スニペットを表示する場所を正確に選択します。
  • JavaScript を使用する場合は、次のいずれかにしてください:
    • 小さなインライン <script>(カウントダウンタイマーなど)
    • または **「Scripts (Before Load)」**セクションに配置する
  • AI に Upcart の V2 CSS セレクターライブラリと HTML ロケーションライブラリへのリンクを送り、お使いのカートバージョンに適したクラス名でコードを生成させてください。

避けるべきこと

  • AI ツールやコードジェネレーターからの完全な Web ページ(<html><head><body>)を貼り付けないでください。Upcart のレイアウトが壊れます。
  • HTML ボックス内の <style> タグにスタイルを入れることは避けてください。
  • どうしても必要な場合を除き、外部フォントや重いライブラリは使用しないでください。

ChatGPT などの AI を追加サポートとして活用する

Upcart で動作するクリーンなコードを得るには、次のコピペ用プロンプトを使用してください: