Shopifyにドはまり中の40代フリーランサーのブログ

【Shopify小技】PC版に左のサイドバーを設置！まず「theme.liquid」の構造を知ろう

もし「type」を設定しなかったり、誤って設定したりしてしまうと、Shopifyはそのセクションをどの領域に表示すべきか判断できません。..

設定

【Shopify小技】商品ページごとのFAQをメタオブジェクトで実装してみた

実際には「ピックアップ可能な店舗情報」や「割れやすい商品の配送注意点」など、商品ごとに異なる補足情報‥..

Liquid

【Shopify Liquid】テーマで実際使用される「render」の引数と渡り値その役割を解説

それぞれの変数の意味を押さえておけば、ある程度は読み解くことができると思います。..

アプリ

【Shopifyアプリ】シンプル＆レスポンシブ！直感的に使えるカレンダー「The Shop Calendar」でイベント・営業日を表示

The Shop Calendarは、カレンダー形式・一覧形式に加え、現在（2025年9月時点）β版としてアコーディオン形式にも対応しています。..

アプリ

写真ギャラリーが複数作成できる！Shopify無料アプリ「GA Image Gallery」

ただし、「Advanced Setup」の方は動画を見ても最初はすんなり理解しづらいかもしれません。..

SEO

【Shopify豆知識】だからSEOに強いのか！構造化データ(JSON-LD)について解説

しかし実際には、検索結果やGoogleショッピングにおいて、価格や在庫、バリエーション情報を正しく表示するための大事な役割を担っています。..

Liquid

【Shopify豆知識】スキーマ設定(JSON)「t:」から始まる文字列とは‥実は変数パスではない？

Shopifyは「"t:"」以下のパスをたどって "label" の値（ここでは「クマさんのお顔」）を取得し、テーマエディタ上で表示します。..

Liquid

【Shopify Liquid】スニペットファイルを呼び出す「render」引数と渡り値とは？

この仕組みによって、スニペットは渡されたデータに基づき、表示ロジックに沿って商品画像や商品名、価格などを表示できるようになります。..

制作アイディア

Shopify構築をフリーランスへ代行依頼する手順(1～6)と選ぶポイント

私自身の体験としておすすめしたいのが「電話対応ができるフリーランス」を選ぶことです。..

Liquid

【Shopify Liquid】オブジェクトの絞り込みに用いる「where」フィルタとは

たとえば、「販売元（vendor）」が「Nintendo」の商品だけを抽出したい場合は、以下のように書きます。..

制作アイディア

Shopify構築をフリーランスへ依頼するメリットは費用だけではない！課題点も紹介

その「必死さ」や「ファイティングスピリット」は、柔軟かつ誠実な対応として依頼主にとって大きな安心材料となることも..

制作アイディア

【リアルレポート】Shopify構築をフリーランスに依頼する際の相場と費用内訳

ECストアは今や単なる販売ツールではなく、実店舗と同じ、あるいはそれ以上に重要性と存在感を持つものとなっています。..

5か月前

Shopifyにおける「カート追加」の仕組みを理解する！form送信 vs fetch API活用

fetch APIに用いられる「/cart/add.js」は、form送信の「/cart/add」と同様、「仮想的なエンドポイント」になります。..

5か月前

【JavaScript】Shopify「cart.js」を読み解くための「Webコンポーネントメソッド」一覧

商品数や金額といった情報は、HTMLの「data-attribute」を使って要素ごとに管理されており、JavaScript側でそれを読み取って処理‥..

Shopifyのカスタマイズに役立つJavaScript「配列メゾット」11選を初心者向けに解説

「2005年新着！夏の水着一覧」という配列があるとします。最安値順に並び替えたいとき、「.sort()」というメソッドを使えば‥..

ShopifyではLiquidがあるのになぜJavaScriptが多用されるの？

その理由を一言で言えば、「Liquidは表示前、JavaScriptは表示後に働くから」です。..

Liquid

Shopify 関連やおすすめ商品リストが自動生成「recommendations」活用・応用シーン

しかしカートページには、そもそも表示中の商品が存在しないため、このレコメンドの仕組みが機能しないのです。..

Liquid

【Shopify Liquid】関連商品・おすすめ商品作成に用いられるオブジェクト「recommendations」について

このオブジェクトは、顧客の行動やストア内でのさまざまなデータを基に、自動的に関連商品を選出します。..

SEO

Google、AIモードの導入を発表！収益減少が懸念される中、最も有力なマネタイズとは

このホテル、評価高いし、割引ついてるよ。数ステップで簡単に予約できるけど、今やる？..

SEO

AI時代のSEOはオワコン？その真実と「違います」と言える４つの理由

たとえば「近くのコンビニを教えて」といったシンプルな質問に、毎回AIが複雑な推論や自然言語生成をしていたら、とんでもないコストになります。..

設定

【Shopify豆知識】ヘッドレス(Headless)ってなに？

少し不気味で怪談を連想させるような響きですが、実際にはShopifyのメリットとして注目されている仕組みのひとつです。..

Liquid

【Shopify小技】商品の「カートに追加」の仕組みをシンプルに解説（サンプルコード））

この仕組みにはLiquidだけでなく、JavaScriptやAjax、さらにはサーバー側で動くRubyなど、複数の技術が関わっている..

Liquid

カートのノーティフィケーションやドロワーで1注文での同時購入を防ぐ方法は可能？

ノーティフィケーション（画面上部に一瞬表示される通知型カート）については、やや難易度が高めです。..

Liquid

【Shopify Liquid】カート内で１つの注文に同時購入を防ぐシンプルな方法

ここで使われているのが、Liquidでよく用いられる「フラグ（真偽）」という考え方です。..

STORY

なぜ鳥の巣はあんなに頑丈なのか？成功における「うまくいかない瞬間」の重要性

鳥の巣の初期段階のように、私たちの挑戦も、最初は失敗と不安定の連続です。..

Liquid

【Shopify Liquid】商品ページの「オプション」を色か画像にしたい

そもそもShopifyの商品オプションに画像や色を登録できるのか？..

STORY

現代言語哲学の巨人が教えてくれた「失敗する人の口癖」とは

あの時もし、あの会社に転職していたら･･..

アプリ

【Shopifyアプリ】商品ページから簡単に見積もりを送信！履歴から下書き注文作成も可能

旅行会社、工事や建築、リフォーム業、OEM制作、ノベルティ制作、レンタル業なども十分対応できる‥..

STORY

40代・50代にとって新たな挑戦が「苦痛」である理由･･私が救われたニーチェの言葉

苦しみがあるからこそ、深みが生まれる。..

SEO

【ローカルSEO】AI時代「ラーメン屋」で検索上位のためのコツ＆対策キーワード

ラーメンとチャーハンの欲張りセット、絶賛販売中！新宿駅から徒歩3分..

STORY

中卒のシングルマザーが小惑星を発見!? スタンダードを破る成功者たち「ダークホース」

彼女は15歳で高校を中退し、高卒認定試験にも不合格。いわゆる「成功のレール」からは大きく外れた人生を歩んでいました。..

STORY

新たな挑戦をするほどタバコや酒、スマホの依存が強くなる理由「悪循環の消防士たち」とは

この消防士たち、なんと「中毒」や「依存」という形で、僕たちを無理やり落ち着かせようとする。..

Liquid

【Shopify Liquid】商品ページ「バリエーションの在庫ステータス」その仕組みについて

ブロックを複数箇所に設置しても、動的操作ができるのは1箇所のみという制限があります。..

設定

【備忘録】Shopify通知・メルマガ外部ドメインのメールアドレス認証 (CNAME、DMARC)

自分の備忘録として認証方法の具体的な手順を紹介したいと思います。..

STORY

収入だけじゃないよ！40代男性「IT関連」副業のメリット５選と個人的な感想

40代男性にとってこのスキルアップは、単なる知識の習得以上の意味を持つことが多いのではないでしょうか。..

Liquid

【Shopify Liquid】店舗受取を希望する購入者への「注文通知メール」をカスタマイズ

「注文通知メール」にコピペすればOKなのでは？と思われがちですが、なぜか店舗情報が上手く表示されません。..

設定

Shopify「店舗受取」運用に必要な基本的なフローと操作まとめ

アパレルや雑貨など「実物を見てから購入したい」お客様に対しても、あらかじめ在庫を確保しておくことで、店舗でのスムーズな購買体験を提供できます。..

設定

【Shopify小技】飲食店でのテイクアウトに応用可能！「店舗受取専用」商品を作成する方法

「どこで店舗受取専用の商品を作成すればいいの？」と迷ってしまう人も多いのではないでしょうか？..

Liquid

【Shopify Liquid】恥ずかしいけど「CONTAINS」２つの使い方に今日気づいた‥

何の疑問も持っていなかった私、ちょっぴり衝撃でした。..

Liquid

【Shopify Liquid】毎月「7」のつく日だけ！限定セールを自動表示する方法

Liquidにおける日にちの自動計算の仕組みはもちろん、for文やif文、フラグの概念も理解しやすくなるはずです。..

アプリ

【Shopifyアプリ】注文に「任意の連番」をつける事もできる！「SeriaLogic」の使い方を解説

チケット購入順に入場番号を自動で割り振る事はできないの？..

Liquid

【Shopify Liquid】土日など休日はスキップ！自動で最短の発送日を算出して案内する方法

Liquidを使って土日や祝日をスキップし、自動で最短の発送日を算出する方法を紹介します。..

Liquid

【Shopify小技】15時までの購入で当日発送と案内＆注文メール通知に実装

たとえば、「15時までの注文は当日発送」といった案内を、自動で表示できたら便利だと思いませんか？..

【Shopify小技】セール終了の日付と時間までのカウントダウンをJavascriptで実装

こうした視覚的な要素は、購入の後押しとなり、より多くの顧客を引き込む効果が期待できます。..

Liquid

【Liquid日付計算】注文通知メールをカスタマイズ！支払期限を翌週月曜日の日付にする

特に「銀行振込」や「コンビニ決済」のような後払いの決済方法では、支払い期限を明示することが重要です。..

制作アイディア

Shopifyでファンクラブを制作する人が押さえておくべき「リアルな要件定義」7項目

最初、ファンクラブサイトを作るには手軽なWordPressを考えました。しかし、会員情報を扱うことになるため、セキュリティの不安‥..

【JavaScript】Shopify ブログ関係なく特定タグを持つ全記事の一覧を作る（+時系列で並び替え）

残念ながら、Liquidでブログ記事を並び替えできる方法はない(2025年2月現在)ようです。..

Flow

【Shopify Flow】注文をGoogleスプレッドシートに追加！つまずきやすい４つのポイントを解説

ただし1点注意点が必要です。注文のラインアイテムを一番最後に表示されるようにするという点です。..

Flow

【Shopify Flow】「スケジュール」ワークフロー終了後に「実行対象リスト」を内部メールで送信

実はこのフロー、正確にいうと「実行後」ではなく、ほぼ同時進行になります。..

Flow

Shopify Flowとはなに？使い方のヒントになる実践サンプル６選

日本語対応にはまだ課題があり、独自の組み合わせによって初心者には少々ハードルが高い領域と言えます。..

Liquid

Shopify「ブログ」カスタマイズ＆オリジナル記事一覧作成のヒント８選

商品ページだけでは伝えきれない情報を発信する事によってきっとECサイトの成長に役立つと考えられます。..

Liquid

【Shopify カスタマイズ】メニューカスタマイズ＆作成するために知っておくべき事５選

オリジナルメニューを作成することで、サイトの使いやすさや視覚的魅力を向上させることができます。..

アプリ

【Shopifyアプリ】会員のQRコードを簡単生成！イベントで入場チェックをする

QRコード入場が流行っているけど、うちでも導入できないか？..

アプリ

Helium Customer Fieldsを使って顧客に任意のタグを付けるフォームを作成

会員からの退会希望の通知を受けたスタッフは、有効期限と会員番号のメタフィールドの値を削除し、「有料会員」タグを削除するなど、マニュアル作業が発生してしまいます。..

Liquid

【Shopify小技】アプリなしでストア会員にメルマガ登録を促すボックスを作る

アプリなしでのカスタマイズは、AjaxリクエストやCustomerのAccount APIの用いる必要があるため難しい..

Flow

【Shopify Flow】特別な日にロイヤリティの高い顧客にクーポン番号メールを送る

このパレートの法則に基づき、客単価の高いリピーターを増やす戦略が練られております。..

Flow

【Shopify Flow】ちょっと気になる「Get product data」「Get customer data」データの絞り込みについて

上限100名にしかデータ取得ができないため、その中でさらに「苦情履歴あり」タグを持つユーザーを絞り込むと、9900人は対象から外れる･･..

Liquid

【Shopify小技】アプリなしで商品公開後「販売開始日時」を指定(予約)する方法

可能であれば、商品ページが公開された状態で特定の日時に購入ができるようにしたい‥..

【Shopify小技】特定の商品オプションを選択すると注意書きがモーダル表示される

そうすると、知らなかった、読んでいないと苦情を言う人が続出する気が‥..

Liquid

【Shopify小技】BtoBビジネスに有効かも？カートに入れた数をリアルタイムで制限

ブラウザの再読み込みをしないと「cart.item_count」にその数値が反映されません。..

Liquid

【Shopify Liquid】空の変数で作る「重複しない」コレクションの商品タグリスト

ループ(for文)を使ってリスト化すると「小学生用」「セール中」が2回出現する事になります。..

Liquid

【Shopify Liquid】在庫のある商品リスト(配列)を作る「空の変数」について

変数に格納する値が「空」の変数を指します。..

Flow

【Shopify Flow】インターナルメールで支払い未確定注文をスタッフに知らせる

ワークフロー設計の抽象的なため、慣れるまでに時間がかかると言われています。..

Liquid

【Shopify Liquid】ループ内の「回数記録係」カウンター変数について

ただ、forloop.indexは、全てのループ回数をカウントするため、条件に基づいたカウントアップには直接利用できない....

Liquid

【Shopify Liquid】ループの記録係！1回のみ実行に有用な「フラグ(Flag)」サンプルコード

条件にあう要素の数など気にする必要なく、今のフラグが「ONなの？OFFなの？」が重要..

Liquid

【Shopify小技】検索結果をカスタマイズするために知っておくべき事６選

意外と「検索結果」一覧ページに対しては「デフォルトのまま」が多い気がします。..

Liquid

【Shopify小技】コレクション一覧にタグで絞るボタン表示（+タグの商品数の表示も）

先日もASKULさんを使っていましたが、目に入ってきたのは、カテゴリーページ内にタグのボタンが設置され、それを押すと絞り込みができる･･..

【Shopify小技】商品別の問い合わせフォームを作成！クエリパラメータとして商品タイトルを渡す

ページの右下には「この商品についてスタッフに問い合わせする」というボタンが設置されています。..

Liquid

【Shopify】SEOに役立つかも？超簡単なパンくずリストを作成してみた

このパンくずリスト、「こうであるべき！」という絶対的なルールはないものの、「王道」として紹介される設計とコードを見てみると少し難しい‥..

Liquid

【Shopify小技】「商品タイプ」の一覧ページを作成してみた

ただ、商品タイプは、コレクションやタグのように、直接一覧を表示する専用のページがありません。..

【JavaScript】Shopify ブログ記事に目次を自動挿入するセクションを作成

各ブログ記事に手動で設置する事も可能ですが、自動で見出しを検出し、目次に取り込むという機能を実装してみたいと思います。..

Liquid

【Shopify小技】商品タイプが一致する商品の「売れ筋ランキング」を作成

この「売れ筋ランキング」というコレクションに、共通の属性を持つ「売れ筋ランキング」を作るのが今回の課題です。..

Liquid

【Shopify小技】コメントの数をブログ記事一覧に表示させる

ブログによってはコメントが無効な場合もあると思います。..

Liquid

【Shopify小技】ブログ記事のコメントをカスタマイズしてみた（＋中傷対策）

会員自身は悪質なコメントを自制するし、運営者は悪質な会員を特定し、ブラックリストを作る事もできます。..

Liquid

【Shopify小技】forloop.indexを使って「売れ筋ランキング (セクション)」を作る

ランキングを付けるアルゴリズムは、独自開発する事なく、コレクションのソート機能を活用します。..

Liquid

【Shopify小技】自作「検索窓パーツ」を作りたい！しかも商品のみに‥

自作と言うとも、検索ができる機能を一から作るのは大変ですので、Shopify側が用意しているパーツを活用する事に‥..

Liquid

【Shopify小技】商品一覧にバリエーションの在庫数を表示させたい

とりわけ在庫の少ないバリエーションだけを表示させ、人気バリエーションのように見せ、購買意欲を高めるのも有効....

Liquid

【Shopify小技】商品ページごとに違う関連商品リスト(コレクション)を表示させたい

女性用水着商品に「爆モテ女子が選ぶビキニ」という関連商品を付けるとします。すると、子供用の水着商品ページにも、同じ関連商品が表示されて....

Liquid

【Shopify小技】ブログ記事に同じタグを持つ「商品一覧」を実装したい

タグが複数ある場合「どのタグでマッチさせるか」という問題点が出てきます。..

Liquid

【Liquid基礎】{% for %} – {% else %}の使い方とサンプルコード

一度も実行されない場合、特定のメッセージを表示することができます。..

Liquid

【Liquid基礎】ループのスキップに用いる {% continue %} を理解するための最もシンプルなコード

無駄なループ処理が行われる前にスキップできるため、特に重い処理を伴う場合にはパフォーマンス改善....

Liquid

【Liquid基礎】ループの強制終了に用いる {% break %} を理解するための最もシンプルなコード

ループの途中で条件が満たされた時に、そのループを強制的に止めるための命令..

Liquid

【Shopify小技】商品一覧にオプション「画像」表示させる最もシンプルなLiquidコード

2つのオプションが組み合わせられた形で１つのバリエーションになります。..

Liquid

【Shopify小技】商品一覧に「ディスカウント前後の価格」「割引率」を表示させたい

ちょっと難しいLiquidコードに見えますが、数式と思えば簡単..

Liquid

【Shopify小技】商品ページに同じタグを持つ「ブログ記事一覧」を実装したい

こちらのコードでご活用になる方は、商品タグを1つにする事を推奨いたします。..

Liquid

Shopify マイページ「カスタマイズ」のヒントになる事例４選！有用なアプリも紹介

非常に重要な役割を果たす一方、機能が多いため、運営者にとってはカスタマイズのハードルが高いのも事実..

【Shopify小技】PCとスマホ Javascriptを用いて条件分岐

正直、この記事を書いている私もCSSのメディアクエリを使用する頻度が多く、あまり使っておらず･･..

アプリ

Helium Customer Fieldsを使ってストア会員にメルマガ登録を促すボックスを作る

すでに会員登録をした顧客の中で、メルマガ登録をしていない登録を促す方法です..

アプリ

チェックアウトへ遷移なし！BTA(BookThatApp) カレンダー付きの申し込みフォーム作成

例えば、女性限定の語学レッスンなのに男性顧客が予約したり、クラシックバレエ専用スタジオなのにヒップホップダンスチームが予約するとか..

Liquid

【Shopify Liquid】同じnamespaceを持つメタフィールドをfor文で一覧表示作る

活用シーンは多くないと思いますが、知っておくといつか役に立つと思います。..

Liquid

Shopify セクション&ブロックスキーマ(JSON形式) 入力タイプ 17選

セクションやブロックのスキーマ設定によく使われる、カスタマイズ用入力タイプ17選を紹介します。..

アプリ

【Shopifyアプリ】BTA (BookThatApp) まずは簡単に設置して使い勝手を確認しょう！

ですが、活用シーンが多いというメリットを持つ一方、初めての人にとっては設定が複雑。..

アプリ

Shopify 会員登録アプリ「Helium Customer Fields」で生年月日と職業をメタフィールドへ格納

このメタフィールドは、絞り込み検索もできれば、エクスポートもできますので、リピーターマーケティングに有効活用できます！..

アプリ

Shopify 会員登録とプロフィールセルフ修正アプリなら「Helium Customer Fields」設置方法を解説

せっかくフォームビルダー機能を提供しているのなら、問い合わせフォームやアンケートフォーム、応募フォームなども提供してくれれば良いのに・・..

アプリ

【Shopifyアプリ】Matrixifyで注文のメタフィールドの値を一括挿入＆上書きしたい

一体何を意味するのか不明なまま、検索しても解決策が得られませんでした。誰かこの意味を教えてくれ!!..

Liquid

【Shopify小技】トップページだけに適用されるCSSを設置する方法

「index.liquid」に直接CSSを記述すればいいのでは？..

Liquid

【Shopify小技】スライドショーjQueryプラグイン「slick」を実装したい

「手動で画像やリンクを挿入するから面倒くさい」「細かなデザインカスタマイズができない」という短所も..

Liquid

【Shopify小技】メタフィールドリッチテキスト「リスト」をきれいに表示させたい

この表示でわかるように、メタフィールドは「表示のため」という「データの格納」に近い役割をしております。..

Liquid

Shopify 自作でコレクションの「商品一覧」を作る！②HTMLとLiquid編

スキーマ設定によってカスタマイズ画面で入力・指定したものを表示させるためのHTMLとLiquidの書き方についてご紹介..

Liquid

Shopify 自作でコレクションの「商品一覧」を作る！①スキーマ設定編

一度にコード解説を行うと非常に長くなるので、前編「スキーマ設定」後編「Liquid実装」と、記事を分けて解説したいと思います。..

Liquid

【Shopify小技】商品ページ「自作テンプレート」を作成する方法

私の場合は、商品ページへの遷移を制限するために、自作テンプレートを作成し、使用しています。..

Liquid

【Shopify小技】購入前に注意・同意を促すページを挟む！商品購入ページ遷移(リファラー)制限

「必ず注意書きを読んでもらいたい」「同意を押してもらった上、購入ページに遷移させたい」という時ありませんか。..

Liquid

【Shopify小技】商品ページとカートページで購入制限を設ける方法（意外な落とし穴も）

実は数字のところをクリック(もしくはタップ)すると、手打ちで修正ができてしまうのです。..

Liquid

Shopify「ランディングページ」を作る最も簡単な方法

結論から言うと、既存ページテンプレートではない、新しいテンプレートを作ればOKです。..

Liquid

【Liquid小技】メタフィールドの複数値を改行して表示させたい！(＋リスト表示)

チケットの整理番号の場合、値が1つだけの場合もあれば、複数ある場合もある。..

Liquid

Shopify 自作で「ブログ記事一覧」を作る！HTMLとLiquidの書き方を解説

section.settingsのIDを入れる事で、カスタマイス画面の設定を取得し、表示させるなどの事ができるのです。..

Liquid

【Liquid小技】自作でページネーション付きの「コレクション商品一覧」を作る

では、どうやって指定もしていないのに、特定のコレクションの一覧が表示されるのでしょうか。..

Liquid