# カゴをハンバーガーメニューの中に入れたい

**URL:** <https://community.shopify.com/t/topic/363350>\
**Category:** 技術的なQ＆A\
**Created:** [October 3, 2024, 3:21am UTC](https://community.shopify.com/t/topic/363350 "2024-10-03T03:21:56Z")\
**Posts on this page:** 9\
**Page:** 1

## AI-generated summary

Dawnテーマでモバイル表示時にカートアイコンをハンバーガーメニュー内に配置する方法についての質問。PC表示では通常通り右上に表示する予定。

**解決プロセス:**
- 回答者はSenseテーマを使用しているため、`header-drawer.liquid`の`<div class="menu-drawer__utility-links">`内にカートリンクを追加する方法を提案
- カートアイコンと商品数表示のコードも提供

**発生した問題:**
- 質問者がDawnテーマで実装を試みたが、`{%- endif -%}`でエラーが発生
- Senseテーマをダウンロードして再試行したが反映されず
- アバター設定関連のコードが含まれていたことが相違点として判明

**最終的な解決:**
- 回答者が実際に使用している完全なコードを共有
- アバター機能を使用していないため、該当コードを除外したバージョンを提示
- 質問者は無事に実装に成功し、解決

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 3, 2024, 3:21am UTC](https://community.shopify.com/t/topic/363350/1 "2024-10-03T03:21:56Z")

</div>

テーマdawnで携帯表示の時、カゴをハンバーガーメニューの中に入れたいのですが可能でしょうか？  
画像のようにしたいと考えております。

PC時点では通常通り右上に表示する予定です。

お手数おかけしますが、どうかご教授お願いいたします。

 ![スクリーンショット 2024-10-03 12.19.43.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/d/b/db4949f3a31fb02dbc510f96b344200915c1ee00.png)

---

<div class="post-metadata">

**Author:** ![Imnotarobot1](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@Imnotarobot1](https://community.shopify.com/u/Imnotarobot1)\
**Post date:** [October 4, 2024, 6:13am UTC](https://community.shopify.com/t/topic/363350/2 "2024-10-04T06:13:42Z")

</div>

テーマは「sense」を使用しているので、的確な回答になるか不明ですが、ご参考になればと思い投稿いたします。

コード編集＞スニペット＞header-drawer.liquid

..
の中、もしくは上にカートページへのリンクとテキストを設置してみてください。

私の場合は、

```markup

            {%- if shop.customer_accounts_enabled -%}
              
                {% render 'icon-account' %}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              
            {%- endif -%}
            

カート

```

と、

..
の中にに実装したら、以下のように表示れました。

 ![Imnotarobot1_0-1728022234847.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/2/2bf9e9be7a2c9a2c3baee350a9e1ed63bfd0bfcc.png)

以上、ご参考までに。もし的外れな回答でしたら、失礼いたしました。

---

<div class="post-metadata">

**Author:** ![Imnotarobot1](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@Imnotarobot1](https://community.shopify.com/u/Imnotarobot1)\
**Post date:** [October 4, 2024, 7:28am UTC](https://community.shopify.com/t/topic/363350/3 "2024-10-04T07:28:11Z")

</div>

補足ですが、カートアイコンとカート内の商品数表示は、以下のコードを

```markup

        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        {{ 'templates.cart.cart' | t }}
        {%- if cart != empty -%}
          

            {%- if cart.item_count < 100 -%}
              {{ cart.item_count }}
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}
          

        {%- endif -%}
      

```

header.liquidからコピペしたら、以下のように表示されました。

![Imnotarobot1_0-1728026723239.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/e/5/f/e5fa14454d1604612179e6556dbaae08530b50fa.png)

こちらもヒントになると思い、補足いたします。

---

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 4, 2024, 7:55am UTC](https://community.shopify.com/t/topic/363350/4 "2024-10-04T07:55:36Z")

</div>

ご確認ありがとうございます。

また、ご丁寧な解説大変ありがとうございます。

こちら両方をheader.liquidの中に入れてみたのですがうまくいきませんでした。

１つ目にご回答いただいた方を

の下に入れており、２つ目にいただいた方をコードの下に入れさせていただきましたが、入れた箇所を間違っていたでしょうか？  
多少前後のコードを交えて記載しております。

私の知識不足で大変恐縮なのですが、ご確認いただけますでしょうか？

入れる箇所含めご指摘いただけますと非常に幸いです。

お手数おかけしますが、どうかよろしくお願いいたします。

````markup
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
            
          

            {%- if shop.customer_accounts_enabled -%}
              
                {% render 'icon-account' %}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              
            {%- endif -%}
            

BAG

                
                {%- if section.settings.enable_customer_avatar -%}
                  

```markup
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

                    {{ 'general.social.links.vimeo' | t }}
                  
                
              {%- endif -%}
              
        {%- liquid
          if cart == empty
            render 'icon-cart-empty'
          else
            render 'icon-cart'
          endif
        -%}
        {{ 'templates.cart.cart' | t }}
        {%- if cart != empty -%}
          

            {%- if cart.item_count < 100 -%}
              {{ cart.item_count }}
            {%- endif -%}
            {{ 'sections.header.cart_count' | t: count: cart.item_count }}
          

        {%- endif -%}
                
      
            
          
        
      
    
  

````

---

<div class="post-metadata">

**Author:** ![Imnotarobot1](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@Imnotarobot1](https://community.shopify.com/u/Imnotarobot1)\
**Post date:** [October 4, 2024, 10:17am UTC](https://community.shopify.com/t/topic/363350/5 "2024-10-04T10:17:38Z")

</div>

ご確認ありがとうございます。

ご自身で実装された場所に同じコードを「header-drawer.liquid」に実装してみましたが、以下のように問題なく表示されています。

 ![Imnotarobot1_0-1728036101736.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/5/65c5bec14e94188e23b8772648c9d472ad299e96.png)

現在運営中のストアすべて「sense」テーマなので、「dawn」でのテストができないため、トラブルシューティングが難しい事、ご了承くださいませ。

---

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 4, 2024, 10:58am UTC](https://community.shopify.com/t/topic/363350/6 "2024-10-04T10:58:26Z")

</div>

再度ご返信ありがとうございます。

また、私の知識不足で大変申し訳ございません。

回答者様が「sense」のテーマでされていらっしゃるということだったので、私も「sense」をダウンロードして試した結果反映がされず、私のやり方が間違っていることがわかりました。

大変お手数ですが、再度お知恵をお借りできないでしょうか？

１つ目の解答いただいたものをコピーして貼り付けをした際、 {%- endif -%} が機能せずエラーとなり保存ができなかったので削除をしておりました。現状このように表示されております。

 ![スクリーンショット 2024-10-04 19.59.32.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/9/69e4f731d2c0dfd5b04f271eb5c813b88987e2e6.png)

..
というのはここ間に貼り付けで問題なかったでしょうか？

こことここの間。などもう少しだけ詳細に教えていただけますと幸いです。

修正前のコード↓

````markup

            {%- if shop.customer_accounts_enabled -%}
              
                {%- if section.settings.enable_customer_avatar -%}
                  

修正後のコード↓

```markup

            {%- if shop.customer_accounts_enabled -%}
              
                {% render 'icon-account' %}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              
            {%- endif -%}
            

カート

                {%- if section.settings.enable_customer_avatar -%}
                  

大変お手数おかけして申し訳ないのですが、是非ベストソリューションを押させて頂ければともいますのでどうかよろしくお願い致します。、
````

---

<div class="post-metadata">

**Author:** ![Imnotarobot1](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@Imnotarobot1](https://community.shopify.com/u/Imnotarobot1)\
**Post date:** [October 5, 2024, 12:46am UTC](https://community.shopify.com/t/topic/363350/7 "2024-10-05T00:46:30Z")

</div>

こちらこそ、知識や経験不足で混乱を招いてしまい申し訳ございません。

ご提示いただいたコードのどこか間違っているか把握する事が難しいので、私が書いた実際のコードをご紹介します。

```markup

          
          
          
            {%- if shop.customer_accounts_enabled -%}
              
                {% render 'icon-account' %}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              
            {%- endif -%}
            
             

カート

            
            {%- if localization.available_countries or localization.available_languages -%}
              

```

 ![Imnotarobot1_0-1728088936683.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/0/7/0772674dd72319ae87072ea96255052925b87212.png)

ご提示いただいたコードとの相違点としては、こちらのストアの場合、アバターを使用していないので、アバター設定に関するコードが載っていないという点です。

それが原因なのかは不明ですが、気になって共有させていただきます。

---

<div class="post-metadata">

**Author:** ![556](https://avatars.discourse-cdn.com/v4/letter/5/c89c15/32.png) [@556](https://community.shopify.com/u/556)\
**Post date:** [October 5, 2024, 3:32am UTC](https://community.shopify.com/t/topic/363350/8 "2024-10-05T03:32:38Z")

</div>

ありがとうございます！！  
無事反映させることができました。  
ここまでご丁寧なご説明ありがとうございました。ベストソリューションを押させていただきましたので、次回もよろしくお願いいたします！

---

<div class="post-metadata">

**Author:** ![Imnotarobot1](https://avatars.discourse-cdn.com/v4/letter/i/35a633/32.png) [@Imnotarobot1](https://community.shopify.com/u/Imnotarobot1)\
**Post date:** [October 5, 2024, 5:27am UTC](https://community.shopify.com/t/topic/363350/9 "2024-10-05T05:27:05Z")

</div>

無事に解決できてうれしいです！  
おかげさまで勉強になりました。ことらこそ、宜しくお願い致します。