Shopifyブログ

オプション販売やセット販売時に、商品ページ内で別商品をカートに追加するコードの紹介

2022年11月26日

Shopifyでセット販売やオプション販売をしたい場合、1つの商品ページの中で、商品をカートに追加するフォームを紹介しています。アプリを使用せずともオプション販売が実現できるのでよかったら利用してみてください。

オプション販売やセット販売時に、商品ページ内で別商品をカートに追加するコードの紹介

2022年11月26日

Shopifyでセット販売やオプション販売をしたい場合、1つの商品ページの中で、商品をカートに追加するフォームを紹介しています。アプリを使用せずともオプション販売が実現できるのでよかったら利用してみてください。

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

2022年11月25日

Shopifyのページやコレクションページから商品情報を取得してカートに追加するためのフォームのコード紹介です。基本的に変数さえ取得できればどこのページでも使用できると思います。

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

2022年11月25日

Shopifyのページやコレクションページから商品情報を取得してカートに追加するためのフォームのコード紹介です。基本的に変数さえ取得できればどこのページでも使用できると思います。

ShopifyCLI3.X系のバージョンアップとログイン

2022年11月3日

2022年10月にShopify CLIが2系から3系にバージョンアップされました。下記URLを参考にCLIのバージョンアップを行いました。Mac、WindowsなどOSごとにコマンドが記載されているので対象を確認してバージョンアップを行います。

ShopifyCLI3.X系のバージョンアップとログイン

2022年11月3日

2022年10月にShopify CLIが2系から3系にバージョンアップされました。下記URLを参考にCLIのバージョンアップを行いました。Mac、WindowsなどOSごとにコマンドが記載されているので対象を確認してバージョンアップを行います。

この記事では、aタグを用いて、Shopifyの「カートに追加」ボタンの実装する手順を紹介します。まず、前提として、「カートに追加」ボタンはShopifyの「buy button」というアプリが有名です。特段理由がなければアプリを用いればよいかと思います。ただjsの動きなどが気に入らない場合は、本記事で紹介する方法を検討してもよいと思います。具体例バリエーションが1つの場合管理画面>商品管理>対象商品詳細ページに移動し、URLの後方に「variants.json」を追加してエンターを押すと、対象商品のjsonが返ってきます。サンプル：https://○○○.myshopify.com/admin/products/7636542456032/variants.json idの部分にバリエーションIDが記載されているので、コピーし、以下の雛形を参考に、リンクを加工します。https://technosource-shop.com/cart/add/42714879230176 バリエーションが複数の場合複数の場合でも、上述のjson形式で表示させることは可能ですが、管理画面>商品管理>対象商品詳細ページのバリエーションの各SKUの編集をクリックすると、各SKU詳細画面に遷移すると思います。この時のURLの「https://〇〇○.myshopify.com/admin/products/1234567898745/variants/39474396561598」のvariants/の後ろがバリエーションIDになります。サンプル：http://{shop}.myshopify.com/cart/add?id=41893345001662:1,42714879230176:1 このような書き方をすれば、2つの商品をカートに数量指定で追加することもできます。 https://technosource-shop.com/cart/add?id=42714879230176&quantity=3 このようにすれば、パーマリンクからカートに商品を追加させることができます。参考1：https://popupsmart.com/blog/shopify-add-to-cart-link 参考2：https://shopify.dev/apps/channels/cart-permalinks/cart-permalinks

Shopifyで「カートに追加」パーマリンクの作成手順

2022年8月10日

この記事では、aタグを用いて、Shopifyの「カートに追加」ボタンの実装する手順を紹介します。まず、前提として、「カートに追加」ボタンはShopifyの「buy button」というアプリが有名です。特段理由がなければアプリを用いればよいかと思います。ただjsの動きなどが気に入らない場合は、本記事で紹介する方法を検討してもよいと思います。具体例バリエーションが1つの場合管理画面>商品管理>対象商品詳細ページに移動し、URLの後方に「variants.json」を追加してエンターを押すと、対象商品のjsonが返ってきます。サンプル：https://○○○.myshopify.com/admin/products/7636542456032/variants.json idの部分にバリエーションIDが記載されているので、コピーし、以下の雛形を参考に、リンクを加工します。https://technosource-shop.com/cart/add/42714879230176 バリエーションが複数の場合複数の場合でも、上述のjson形式で表示させることは可能ですが、管理画面>商品管理>対象商品詳細ページのバリエーションの各SKUの編集をクリックすると、各SKU詳細画面に遷移すると思います。この時のURLの「https://〇〇○.myshopify.com/admin/products/1234567898745/variants/39474396561598」のvariants/の後ろがバリエーションIDになります。サンプル：http://{shop}.myshopify.com/cart/add?id=41893345001662:1,42714879230176:1 このような書き方をすれば、2つの商品をカートに数量指定で追加することもできます。 https://technosource-shop.com/cart/add?id=42714879230176&quantity=3 このようにすれば、パーマリンクからカートに商品を追加させることができます。参考1：https://popupsmart.com/blog/shopify-add-to-cart-link 参考2：https://shopify.dev/apps/channels/cart-permalinks/cart-permalinks

Yotpoのレビューをエクスポート、インポートする手順について

2022年8月10日

Shopifyで高機能なレビューアプリとして有名な「Yotpo」の収集したレビューのエクスポート、インポートについて紹介します。今回は既存商品にあるレビューを、新商品にインポートすることを想定して紹介します。特にインポートで注意すべき点があるので、最後まで読んでください。エクスポート Shopifyの管理画面から、Yoptoを開き、左ナビゲーションから、「Manage Content」を選択すると、上記画面のように表示されます。はじめに、「Filters」に表示されているレビュー数を確認します。この場合10レビューあることになります。次に、エクスポートしたい対象期間、対象製品を「Advanced Filters:」の下段から選択していきます。対象のレビューが中央の右側に表示されていきます。対象レビューを選択し終えたら、画面右側にある「Export to CSV」から Filtered reviews もしくは All reviews を選択しCSVで出力します。インポート左ナビゲーションから、「Import Reviews」を選択すると、上記画面のように表示されます。今回の場合はShopifyでエクスポートしたレビューをインポートするので、「other」を選択します。右側に「 CSV file template. Yotpo_template.csv 」と表示され、テンプレートをダウンロードできます。ダウンロードしたテンプレートに、エクスポートした内容を加工しながら貼り付けます。アップロードするcsvデータを準備できたら、Yoptoからアップロードします。「Start Over」をクリック後、「Success！」と表示され、「Manage Content」のレビュー数が増えていれば成功です。ただ、注意なのが、レビュー数が増えていても、レビュー内容はすぐに反映されません。注意する点は、インポートしたレビューの反映には最大48時間待つ必要があります。これはインポートした内容を運営側でチェックしてから、反映されるため時間がかかるそうです。基本的にYoptoの作業は反映に時間がかかることを覚えておいたほうが良いです。...

Yotpoのレビューをエクスポート、インポートする手順について

2022年8月10日

Shopifyで高機能なレビューアプリとして有名な「Yotpo」の収集したレビューのエクスポート、インポートについて紹介します。今回は既存商品にあるレビューを、新商品にインポートすることを想定して紹介します。特にインポートで注意すべき点があるので、最後まで読んでください。エクスポート Shopifyの管理画面から、Yoptoを開き、左ナビゲーションから、「Manage Content」を選択すると、上記画面のように表示されます。はじめに、「Filters」に表示されているレビュー数を確認します。この場合10レビューあることになります。次に、エクスポートしたい対象期間、対象製品を「Advanced Filters:」の下段から選択していきます。対象のレビューが中央の右側に表示されていきます。対象レビューを選択し終えたら、画面右側にある「Export to CSV」から Filtered reviews もしくは All reviews を選択しCSVで出力します。インポート左ナビゲーションから、「Import Reviews」を選択すると、上記画面のように表示されます。今回の場合はShopifyでエクスポートしたレビューをインポートするので、「other」を選択します。右側に「 CSV file template. Yotpo_template.csv 」と表示され、テンプレートをダウンロードできます。ダウンロードしたテンプレートに、エクスポートした内容を加工しながら貼り付けます。アップロードするcsvデータを準備できたら、Yoptoからアップロードします。「Start Over」をクリック後、「Success！」と表示され、「Manage Content」のレビュー数が増えていれば成功です。ただ、注意なのが、レビュー数が増えていても、レビュー内容はすぐに反映されません。注意する点は、インポートしたレビューの反映には最大48時間待つ必要があります。これはインポートした内容を運営側でチェックしてから、反映されるため時間がかかるそうです。基本的にYoptoの作業は反映に時間がかかることを覚えておいたほうが良いです。...

【参考】Shopifyで作られた国内ECサイト

2022年5月19日

今回は私が集めたShopifyで作られたECサイトを紹介します。参考になる部分をコメントとして書いています。 CYCLE Stock自転車 https://cycle-stock.com/ 自転車屋さんのECサイトです。ただのECサイトではなく会員登録が必要な卸売りサイト（BtoB）になります。あまり卸売りのサイトはないので、勉強になります。 LOGアウトドア用品 https://lifeoverground.com/ アウトドア用品を扱うサイトで、アイテム数が多いです。シンプルな構成で、どんなサイトにも合いそうな外観/構成だと感じます。 BECOS日本の工芸品など https://www.thebecos.com/ 日本の伝統工芸品等を幅広く扱っているサイトです。ぱっと見た感じECモールのように感じるほど、扱っている品数が多いです。都道府県の地図から選べるようなページも用意されており、あまりみたことない見た目なので、アイデアの引き出しに入れています。商品が豊富なため、商品により、コレクションレイアウト（テンプレート）も使い分けているようです。また包丁などの一部商品詳細でアプリを利用して、セレクトオプションを選択できるようにされていて、こだわりの品の販売に際に、参考になると思います。使用しているアプリは「Infinite Options」というアプリだと推察します。やかまし村の店リフォーム用品 https://yakamashimura.shop/ リフォーム関連の商品を扱うサイトで、とっても見やすいサイトです。リフォーム概算のページでクイックビューアーがあり、モーダル形式で商品が表示されてわかりやすいです。 IL PULEDRO革靴 https://il-puledro.com/pages/online-consulting-order オーダーメイドの靴を提供しているIL PULEDRO (イル　プレドロ)です。すごくカッコいい靴の画像が並んでいます。この中で、オンライン相談のページは、Shopifyのお問い合わせページを制作する時に参考になるかもしれません。希望日時のフォームやGoogle カレンダーで定休日管理しているのも、コスト面を気にされるお客様に紹介できるかなと思います。 KISSOアクセサリー https://kissojapan.com/ アクセサリー類を画像で大きく表示させ、商品の特徴を伝えられているサイトです。TOPページのキービジュアルの色、配置も私好みです。私としては文字サイズが少し小さく、英字フォントがあたっているので、少しフォントが大きければ理想的 minacolor医薬品...

【参考】Shopifyで作られた国内ECサイト

2022年5月19日

今回は私が集めたShopifyで作られたECサイトを紹介します。参考になる部分をコメントとして書いています。 CYCLE Stock自転車 https://cycle-stock.com/ 自転車屋さんのECサイトです。ただのECサイトではなく会員登録が必要な卸売りサイト（BtoB）になります。あまり卸売りのサイトはないので、勉強になります。 LOGアウトドア用品 https://lifeoverground.com/ アウトドア用品を扱うサイトで、アイテム数が多いです。シンプルな構成で、どんなサイトにも合いそうな外観/構成だと感じます。 BECOS日本の工芸品など https://www.thebecos.com/ 日本の伝統工芸品等を幅広く扱っているサイトです。ぱっと見た感じECモールのように感じるほど、扱っている品数が多いです。都道府県の地図から選べるようなページも用意されており、あまりみたことない見た目なので、アイデアの引き出しに入れています。商品が豊富なため、商品により、コレクションレイアウト（テンプレート）も使い分けているようです。また包丁などの一部商品詳細でアプリを利用して、セレクトオプションを選択できるようにされていて、こだわりの品の販売に際に、参考になると思います。使用しているアプリは「Infinite Options」というアプリだと推察します。やかまし村の店リフォーム用品 https://yakamashimura.shop/ リフォーム関連の商品を扱うサイトで、とっても見やすいサイトです。リフォーム概算のページでクイックビューアーがあり、モーダル形式で商品が表示されてわかりやすいです。 IL PULEDRO革靴 https://il-puledro.com/pages/online-consulting-order オーダーメイドの靴を提供しているIL PULEDRO (イル　プレドロ)です。すごくカッコいい靴の画像が並んでいます。この中で、オンライン相談のページは、Shopifyのお問い合わせページを制作する時に参考になるかもしれません。希望日時のフォームやGoogle カレンダーで定休日管理しているのも、コスト面を気にされるお客様に紹介できるかなと思います。 KISSOアクセサリー https://kissojapan.com/ アクセサリー類を画像で大きく表示させ、商品の特徴を伝えられているサイトです。TOPページのキービジュアルの色、配置も私好みです。私としては文字サイズが少し小さく、英字フォントがあたっているので、少しフォントが大きければ理想的 minacolor医薬品...