40代フリーランサーの三種の神器

【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

【Liquid小技】自作のブログ記事に「ページネーション」を実装する方法

ページネーション(pagenation)とは、記事の数が多いメディアサイトやブログでよく見かけるそれです。..

Liquid

Shopify Liquid 通知設置によく登場する「case」と「when」の使い方

ここで別の疑問が・・もし、顧客が複数の商品を購入して、配送方法がバラバラだったら？..

Liquid

Shopify Liquid「ブログ記事一覧」の「日付」カスタマイズ「article.published_at」と「article.created_at」の違い

1月1日に公開する「お正月スペシャルキャンペン開始！」という告知を、12月30日に作成し、公開予約したとしましょう。..

Liquid

Shopify Liquid for文とif文「繰り返し実行」or「１度だけ実行」

田中さんにはお子さんが5人います。女の子には人形をあげ、男の子には何もあげないとしましょう。..

Liquid

Shopify マイページ発送不要商品の「発送状況」文言をカスタマイズ

「あれ？何か送ってくれるの？」と、顧客を誤解させる事もあると思います。..

Liquid

Shopify 自作で「ブログ記事一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定

商品販売だけでなく、顧客に対して有益な情報を発信する事により、集客力向上が期待できます。..

Liquid

Shopify 会員登録フォーム > 生年月日 > 回答(値)をメタフィールドに追加

30代以上の男性顧客にメルマガを送りたい..

Liquid