# 追従カートの設置方法について

**URL:** <https://community.shopify.com/t/topic/421265>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css\
**Created:** [June 27, 2025, 8:38am UTC](https://community.shopify.com/t/topic/421265 "2025-06-27T08:38:33Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

ユーザーがShopifyで有料アプリを使わずにスクロール追従型の購入ボタンを実装しようとしているが、参考サイトの手順で「商品ページのテンプレートへの記述」と「JavaScriptの追加」の具体的な操作場所がわからず質問。

**回答者からの指示:**
- Dawnテーマの場合、`main-product.liquid`の`{% schema %}`直前に完成コードを記載
- JavaScriptコードを`fixed-cart.js`というファイル名でassetsディレクトリに格納
- `fixed-cart.liquid`はsnippetsディレクトリに格納する必要がある

**発生した問題:**
ユーザーが実装を試みたところ、カスタマイズ画面でエラーが発生。原因は`fixed-cart.liquid`をsectionsではなくsnippetsに配置すべきだったため。

**解決策:**
`fixed-cart.liquid`をsnippetsディレクトリに移動することで解決する見込み。

<div class="post-metadata">

**Author:** ![tcsf2](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@tcsf2](https://community.shopify.com/u/tcsf2)\
**Post date:** [June 27, 2025, 8:38am UTC](https://community.shopify.com/t/topic/421265/1 "2025-06-27T08:38:33Z")

</div>

以下のサイトを参考にして有料アプリを使わずに、スクロール追従型の購入ボタンを設置したいのですが、

liquidの設定以降の「商品ページのテンプレートに以下のように記述」「JavaScriptの追加」がどこの操作をしているのかわかりません。

どこを開いて設定したらいいのか詳しく教えてくださらないでしょうか。

**[https://soukl.net/shopify-column-fixed-cart/](https://soukl.net/shopify-column-fixed-cart/)**

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 1, 2025, 10:23am UTC](https://community.shopify.com/t/topic/421265/2 "2025-07-01T10:23:10Z")

</div>

@tcsf2 様

ご質問いただいている、「商品ページのテンプレートに以下のように記述」「JavaScriptの追加」ですが下記になるかと思われます。

**商品ページのテンプレートに以下のように記述**

ご利用テーマの商品ページのテンプレート内に完成コードを記載します。

Dawnテーマをご利用でしたら、main-product.liquidが対象になるかと思われます。（※テーマによって名称が異なります。）

main-product.liquid内に記載できれば良いのですが、わかりやすくするために{% schema %}直前に記載いただくのが良いかと思います。

**JavaScriptの追加**

JavaScriptの追加になるのですが、記載されいてるコードを「 **fixed-cart.js** 」というファイル名で、

Dawnテーマのassetsディレクトリ内に格納すると良いのではないでしょうか。

ご参考まで。

（キュー小坂）

---

<div class="post-metadata">

**Author:** ![tcsf2](https://avatars.discourse-cdn.com/v4/letter/t/dc4da7/32.png) [@tcsf2](https://community.shopify.com/u/tcsf2)\
**Post date:** [July 2, 2025, 12:56am UTC](https://community.shopify.com/t/topic/421265/3 "2025-07-02T00:56:39Z")

</div>

回答ありがとうございます！

テーマはDawnです。

教えてくださった通りの場所にそれぞれのパートを入れてみました。

![コメント 2025-07-02 094934.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/d/ddf4f3e1d062d182a3d9c6e929a1bc94f6f3877a.png)

しかし、カスタマイズで確認してみると以下のようなエラーが出てしまいました。

![コメント 2025-07-02 095000.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/5/51139e1bf133b26bbced0f02b590e168a73b8014.png)

→ちなみにmain-product.liquidの25行目には以下を追記しています。

{% render ‘fixed-cart’%}

なにが原因なのでしょうか…

もし可能であれば再度お教えいただけますと幸いです。

何卒宜しくお願い致します。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 2, 2025, 1:53am UTC](https://community.shopify.com/t/topic/421265/4 "2025-07-02T01:53:23Z")

</div>

@tcsf2 様

元々参考にされていたページにて、fixed-cart.liquidはスニペットとして作成すると記載がありましたので説明を省いておりました。

記載いただいたエラーは、fixed-cart.liquidがスニペット（snippets）に無いというエラーになります。

いただいた画像を見るとfixed-cart.liquidはsectionsの中に格納されておりますので、

fixed-cart.liquidをsnippets内に格納いただければ、表示されるかと思います。

ご参考まで。

（キュー小坂）