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

ShopifyとWordpressそしてSEOで人生を切り開くブログ

このブログと運営者について

初めまして。運営者ホリと申します。

当ブログは「Shopifyを一緒に悩んで楽しむ仲間」に向けて情報を発信するブログです。

ここで扱うテーマは、構築やカスタマイズにとどまらず、SEOマーケティングやロジスティクスといった運営全般に広がります。

中でも最も重要視するのは、Shopifyを使った構築や運営に携わる中で「大掛かりな開発と投資に頼らなくても目的を達成できる工夫」。

確かな知識と経験を土台にしながら、日々の学びを記事にまとめて、同じように試行錯誤している方々とシェアしています。 日々の実践から得た知見を記事にまとめることで、Shopifyを使う仲間たちの小さなヒントや発想のきっかけになればうれしいです。

「ちょっと聞いてみたい」「これで大丈夫?」といった気軽な相談も大歓迎です。 Shopifyを通じて一緒に試行錯誤しながら、学び合える場として、このサイトを活用していただければ幸いです。

このブログと運営者について

お問い合わせ

BLOG
ブログ

Liquid

【Shopifyの裏】フォーム(form)の仕組みについて 1か月前

【Shopifyの裏】フォーム(form)の仕組みについて

フォーム送信の裏側では Shopifyのエンドポイントが動いており、そこで行われる処理はブラックボックス..

Liquid

【Shopify小技】あれ何で?DawnテーマでLine Item Propertiesが動作しない件 2か月前

【Shopify小技】あれ何で?DawnテーマでLine Item Propertiesが動作しない件

分割払いに関する入力情報を扱うためのもので、商品情報をカートへ送信する役割を持っていません。..

Liquid

【Shopify小技】折りたたみブロック(collapsible_tab)にアイコンを追加したい! 2か月前

【Shopify小技】折りたたみブロック(collapsible_tab)にアイコンを追加したい!

「少し見た目をユニークにしたい」「renderスニペットの動きを深く理解したい」..

Liquid

【Shopify小技】タグで絞り込むコレクションページを実装!基本となるオブジェクト「current_tags」とは 2か月前

【Shopify小技】タグで絞り込むコレクションページを実装!基本となるオブジェクト「current_tags」とは

Shopifyのコレクションページでは 複数タグの「AND」条件による絞り込みが自然に実現されており‥..

Liquid

【Shopify小技】パスワードをお忘れですか?を押しても遷移しない‥エラーのシンプルな解決方法 2か月前

【Shopify小技】パスワードをお忘れですか?を押しても遷移しない‥エラーのシンプルな解決方法

厳密にいえば、新しいページへ遷移しているわけではなく、同じページ内でJavaScriptとCSSを使い、二つのフォームを切り替えて見せているだけ..

Liquid

【Shopify小技】PCとスマホで違うメニュー構成にする簡単な方法 3か月前

【Shopify小技】PCとスマホで違うメニュー構成にする簡単な方法

「linklists.mobile-menu.links」ではなく「linklists['mobile-menu'].links」のようにブラケット記法で記述するのが安全..

Liquid

【Shopify小技】メタフィールドで解決!商品ごとに手動でおすすめ一覧を作成 3か月前

【Shopify小技】メタフィールドで解決!商品ごとに手動でおすすめ一覧を作成

メタフィールドでは「.value」を使って直接オブジェクト配列を扱うのが正しい方法です。..

Liquid

【Shopify小技】関連・おすすめ商品(recommendations)から特定の商品を手動で除外する 3か月前

【Shopify小技】関連・おすすめ商品(recommendations)から特定の商品を手動で除外する

テーマエディタで選んだ商品(除外対象)のIDを配列にまとめ、その配列に含まれていない商品だけを「unless」を使って表示する..

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

【Shopify小技】商品の「カートに追加」の仕組みをシンプルに解説(サンプルコード)) 8か月前

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

Shopify「ブログ」カスタマイズ&オリジナル記事一覧作成のヒント8選 12か月前

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

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

Liquid

【Shopify カスタマイズ】メニュー カスタマイズ&作成するために知っておくべき事5選 12か月前

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

【Shopify小技】ブログ記事のコメントをカスタマイズしてみた(+中傷対策) 1年前

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

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

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

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

Liquid

Shopify 開発言語 Liquid、{{  }} と{%- -%}の違いは? 2年前

Shopify 開発言語 Liquid、{{ }} と{%- -%}の違いは?

習得していく事につれ大きな喜びを味わえるShopify開発言語『Liquid(リキッド)』について..

Js

【Shopify小技】ブログ記事内にコレクションカード(ショートコード)を設置する 4週間前

【Shopify小技】ブログ記事内にコレクションカード(ショートコード)を設置する

記事自体のSEO効果も十分に期待できる施策になりますので、ぜひ活用してみてください。..

Js

【Shopify小技】ブログ記事内に商品カード(ショートコード)を設置する 1か月前

【Shopify小技】ブログ記事内に商品カード(ショートコード)を設置する

記事の途中で商品を紹介したい場面は多いのに、標準機能ではカード型で見栄えよく表示する仕組みがありません。..

Js

【第1回目】Shopify「cart.js」のトリセツ・まずざっくり全体像を掴もう! 2か月前

【第1回目】Shopify「cart.js」のトリセツ・まずざっくり全体像を掴もう!

① onChange() → ② updateQuantity() → ③ publish → ④ connectedCallback > onCartUpdate()という順番で動いています。..

Js

【Shopify小技】購入時ログイン必須の導線改善に役立つ「最近見た商品」一覧を作成 3か月前

【Shopify小技】購入時ログイン必須の導線改善に役立つ「最近見た商品」一覧を作成

商品数が多かったり、購入までの導線が複雑なショップでは、ユーザーが途中で迷子になってしまうこともあります。..

Js

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

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

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

Js

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

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

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

Js

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

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

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

Js

ShopifyではLiquidがあるのになぜJavaScriptが多用されるの? 8か月前

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

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

Js

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

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

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

Js

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

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

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

Js

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

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

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

Js

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

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

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

Js

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

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

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

Js

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

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

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

SEO

生成AI時代だから享受できるSEOのメリット4選 1週間前

生成AI時代だから享受できるSEOのメリット4選

「SEOオワコン」「SEO死亡説」といった刺激的な言葉も目立つようになっています。..

SEO

格安SEOの「なぜ?」外注の前に読んでおきたい、料金の差が生まれる理由 3週間前

格安SEOの「なぜ?」外注の前に読んでおきたい、料金の差が生まれる理由

「高い=ぼったくり」「安い=怪しい」と単純に判断できるものではない‥..

SEO

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

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

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

SEO

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

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

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

SEO

AI時代のSEOはオワコン?その真実と「違います」と言える4つの理由 8か月前

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

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

SEO

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

アプリ

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

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

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

設定

【Shopifyレポート】毎月の在庫と販売数を一目で確認したい!「商品別の毎日販売された在庫最」とは 2か月前

【Shopifyレポート】毎月の在庫と販売数を一目で確認したい!「商品別の毎日販売された在庫最」とは

おかげで、数字に超厳しい経理担当からもめちゃくちゃ褒められたほどです。..

Flow

【Shopify小技】Cart attributesの内容は注文一覧で確認とれない‥その対策を考えてみた 3か月前

【Shopify小技】Cart attributesの内容は注文一覧で確認とれない‥その対策を考えてみた

残念ながら、注文一覧の「列」にCart attributesの値を直接取得・表示する機能が用意されていません。..

設定

Shopifyを使うなら検討してみたい発送代行システム「ロジレス」使い勝手と感想 3か月前

Shopifyを使うなら検討してみたい発送代行システム「ロジレス」使い勝手と感想

「次回のレクチャーまでにこの動画を数本観ておいてくださいね」といった“宿題(?)”も出されます。..

設定

【Shopify豆知識】テーマレイアウトをカスタマイズしたい?なら「grid-template」を知っておくべき 4か月前

【Shopify豆知識】テーマレイアウトをカスタマイズしたい?なら「grid-template」を知っておくべき

「スマホではロゴを左側に、PCではロゴを中央に」といった調整も、「grid-template」の設定次第で柔軟に実現できます。..

設定

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

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

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

制作アイディア

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

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

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

制作アイディア

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

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

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

制作アイディア

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

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

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

設定

【Shopify豆知識】ヘッドレス(Headless)ってなに? 8か月前

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

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

STORY

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

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

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

STORY

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

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

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

STORY

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

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

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

STORY

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

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

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

STORY

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

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

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

設定

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

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

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

STORY

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

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

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

設定

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

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

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

設定

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

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

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

制作アイディア

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

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

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

Flow

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

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

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

Flow

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

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

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

Flow

Shopify Flowとはなに?使い方のヒントになる実践サンプル6選 12か月前

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

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

Flow

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

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

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

Flow

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

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

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

Flow

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

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

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