pagesやcollectionからでも商品をカートに追加するフォーム（セレクト・ボタン）の作り方を紹介-Shopify

今回は、pagesやcollectionのページからでも商品をカートに追加するフォーム（セレクト・ボタン）の作り方を紹介します。

cssはご自身で準備ください。完成は以下のようなイメージです。

コードは以下になります。

<div class="product_inner m_b50">
    {%- assign product = all_products["product-handle"] -%}
    <div class="product_cart">
        <div class="img_outwrap">
            <a href="{{ product.url }}">
                <div class="img_wrap">
                    <img src="{{ product.featured_media }}" master="" alt="{{ product.featured_media.alt }}">
                </div>
            </a>
        </div>
        <div class="product_content">
            <p class="product-card__title">{{ product.title }}</p>
            <span class="product-card__price">価格: {{ product.price | money }}</span>
            <form action="/cart/add" method="post" data-cart-submit="">
                <div class="product-form__option js-enabled">
                    <select name="id" class="product-form__option-select">
                        {% for variant in product.variants %}
                        <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
                        {% endfor %}
                    </select>
                    <label class="product-form__option-label" for="selling">色</label>
                    <div class="product-form__option-select-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
                            <path d="M.357 2.753l4.39 4.39a.357.357 0 0 0 .506 0l4.39-4.39" fill="none"
                                stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
                            </path>
                        </svg>
                    </div>
                </div>
                <div class="t_c">
                    <button type="submit" class="btn_dsn1 btn_dsn1--blue">カートに追加する</button>
                </div>
            </form>
        </div>
    </div>
</div>

解説

まず取得したい商品のハンドルをproductという変数に入れます。ハンドルはその商品URLの最後の部分です。
https://ec-test.com/products/〇〇

すると、対象商品のタイトルやメディアに登録されている最初の画像が表示されると思います。

formの部分にカートに追加するアクションを記述しているのでbuttonをクリックするとカートページに遷移します。