Shopify 【Shopify】テスト用・非公開としたい商品をフロントから見えなくし、商品ページにパスワード保護をかける！【アプリなし】
Shopifyの仕様として、テスト注文をしたい場合は、公開商品でないと決済完了ができないということがあります。
じゃあ、新規決済方法を導入したときや、ちょっとイレギュラーな注文の仕方をする商品（オーダーの名入れ商品など）がちゃんと問...
Shopify
Shopify 
CSS 【Shopify】商品ページのカラーバリアント選択をサムネイルタイプのボタンにし、メインスライダー画像と連動させる！
同じ要件の案件だと、これまではアプリを使用して実装していましたが、この度アプリなしで実装できたので、その備忘録として。
やりたいことはこれ！
これをしたくてもスライダーとバリアント選択同期が対応していない古いテーマの部...
liquid 【Shopify】「テーマのカスタマイズ」のみで日本語Webフォントを追加できるようにカスタマイズ！
shopifyでは、テーマ内で選択できるフォントに日本語フォントがないです。
追加しようとした場合、参考になる記事としては、headタグ内またはcss内にハードコーディングで追記する方法が紹介されていますが、
これをコードに触...
liquid 【Shopify】標準だとイケてないカートページをカスタマイズ！
Shopifyではデザインが洗練されたテーマを使用すれば、カートページのデザインもイケてるものにできるはず、、と思いきや、何もしないと案外UIが悪いものがある。
ここでは、カートページ内を一新した例をもとに要点を紹介します。
...
Shopify 【Shopify】注意！開発ストアではアプリを有料化できないのでストアの有料プランを開始する必要がある！
Shopify構築で、"定期購買"のアプリの商品ページ上での見た目を確認するためには、Shopifyストアが以下の準備を終わらせていないと表示がされなかったので、備忘録として。
ストアオーナーにShopify Paymentを使用で...
liquid 【Shopify】テーマカスタマイズ画面の翻訳作業をする！&補足でデータ移行に重宝するツール紹介！
Shopifyのテーマは、"カスタマイズ"の画面でノーコードでサイトの見た目を編集できるが、有料テーマは日本語訳がされていないので、英語の苦手な方だと翻訳されていない場合、ストレスになるだろう。
翻訳されていない有料テーマカスタマイ...
Shopify 【Shopify】Shopify Summer 2022 Edition！！！
2022年6月下旬（先々週）、Shpifyの新エディションが全世界同時リリースされた。
このサイト、開発者向けだけあってとてもクールです。
右上の"Dev Mode"（開発者モード）というところからの開発者情報が特に。...
liquid 【Shopify】最近見た商品、お気に入り追加機能の実装のさいのすゝめ
Shopifyストアを作成する際の、「え、これサポートしてないの！💦」と意外に思われ、かつ見落とすとけっこう金額的にもめんどい注意点として、「メールアドレス」「メールサーバー」は自前で用意する必要があることや、日本のECサ...
Shopify 【Shopify】でシークレット商品や、特定会員しか見れないページを作る方法
Shopifyの弱点として、サーバーサイドのプログラムを記述できないことがある。
例えば、ある商品やあるページにパスワードをかけるような処理や特定のページをnoindexにしたりするにはどうしたらいいか。
このアプリが便利です...
liquid 【Shopify】Liquidでランダムに何かのデータを取り出したい！でもliquidにはランダム関数がない！どうする？
liquidにはランダム関数がない
ちょっとびっくりしたんですが、ないらしいです。ランダムフィルターみたいなものもない。
では、巷ではどのようにliquidでランダムを実現しているのか？？
方法1. Github上のLi...
Shopify 【Shopify】配列をliquidで作成する方法、そして配列をシャッフルして出力する方法！
明けましておめでとうございます。今年もやってまいりましょう！
配列を作成するのも配列をシャッフルするのもliquidはゼロからだと超しんどかったので備忘録を。
配列を作るにはsplitとjoinいうフィルターを使うしかない。s...
Shopify 【Shopify】ストアにチャット問い合わせ機能を実装！
結論：Shopify公式無料アプリ"Inbox"で簡単実装可能！
どのような仕様か？
こちらのデモンストレーション用のShopifyサイトを開くと、右下に「チャットでお問合せください」というボタンがある。
...
Shopify 【Shopify】アプリなしでSALE時の割引率を表示する！
割引率の表示はこのコードで完了！
{% if current_variant.compare_at_price > 0 %}
{% comment %}割引前価格が設定されていればOFF率表記自体する{% endcomme...
Shopfy2.0 【Shopify】2021.8.13からGithub接続方法が変更になった！
ある日の事件
ある日、さーて今日もShopify制作するかーとGithubに接続しようとしたら、
remote: Password authentication is temporarily disabled as part ...
Shopify 【Shopify】アプリなしでカート内の合計金額で送料無料まであと〇〇円！の表示をする！
ECサイトでよくある「注文金額〇〇円で送料無料！」の表示。
以下のコードで完了！
アプリでこれを実装することも可能だが、以下のコードで実装できます！
{%- endif -%}
<p class="an...
Shopify 【Shopify】ログイン/ログアウト/新規会員登録/マイページのボタン設置なんかもう悩まない！
ECサイトでよく見かける、ドロワーメニューの横または中に必ずといっていいほど存在する、アカウント操作系のボタン。
なぜかShopifyのテーマによっては、ログインできてもログアウトする導線がなかったり、新規会員登録するボタンがなく、...
CSS 【ローカル環境開発高速化】reloadコマンドを使って、テキストエディタ更新時にブラウザプレビューを自動同期
reloadコマンドとは？
ECのCMS上で商品ページのが LPのように一枚一枚が作り込まれているとき、大量の画像をアップロードしたり、このページのみに使われるようなスタイルをあてた、読み物コンテンツのページを効率的に作る手順では、...
Shopify 【Shopify】ストアの送信元のメールアドレスの「ドメイン認証」を忘れずに！
Shopifyのストアはメールアドレスをどこかのメールサーバーで運用しているメールアドレスで登録する必要がありますが、Shopifyのメール送信元の「認証」を以下の画面で行う必要があります！
しないと届くメールアドレスがshopif...
Shopify 【Shopify】アプリを使わずに、サイトに訪れた初回のみポップアップするモーダルウィンドウ機能を追加！（カスタマイズ画面から次回表示までの日数指定も）
海外のECサイトで多くみられていたポップアップするモーダルウィンドウだが、最近は日本のサイトでもよく目にするようになった。
サイトを見ていると、しばらくすとポっと出てくるあれです。個人的には実はあまり好きではないですが、、、
...
Shopify 【Shopify】配送日時（お届け日時）指定を可能にする！（注意点も）
Shopifyで配送日時（お届け日時）を可能にできるアプリなら、
配送日時指定 .ampで問題ないです。
こちらは国産のアプリで安心です！
このアプリの詳細と、注意点について解説します。
配送日時指定 .a...
Shopify 【Shopify】ページで条件分岐、顧客タグで条件分岐
例えば、同じページテンプレートだが特定のページの時だけ処理を変えたいというとき。
また、リンクのジャンプ先を会員ユーザーはゲスト(非ログインユーザー)と違うページにしたいとき。
Shopifyではとても簡単に条件分岐を書けます...
Shopfy2.0 【SublimeText】にLiquidファイルのシンタックスハイライトを設定！
Shopifyのサイト制作をしてきて、ずぼらな僕はSublinmeTextでコードを書くときのシンタックスハイライトの設定をしていないまま8か月ほど過ぎようとしていた。
いつも手動で、HTMLかPHPのシンタックスにセットして制作し...
Shopfy2.0 【Shopify】online store 1.0 → 2.0 への改修 JSON形式のtemplateを調整する！
手順1.liquidファイルをもとにjsonファイル作成
まずは肩慣らしに「Product」のproduct.json
まず、これが、とあるテーマのproduct.liquid
【「カスタマイズ」画面】
【...
Shopify 【Shopify】online store 2.0の新テーマ”Dawn”をGithubと同期させて開発する！
2021/6/29に開かれたShopify Unite 2021で発表されたShopifyの新バージョン。
新バージョンといっても、これまでに制作されたテーマやアプリは変わらず使用できる。
今回追加された内容は以下のようにいく...
Shopify 【Shopify】会員登録していないと購入できないショップを作るには！
管理画面から、設定 > チェックアウトに移動します。
セクションで、お客様アカウントのオプションを選択します。アカウントの必須化にチェックを入れます。
これだけです！
すべてを解説すると、以下のような選択があり...
Google Analytics 【Shopify】Google Analyticsの設定とeコマーストラッキング！
今さらだが、Google Analytics（GA）とは
サイトを運営する者にとって、Google Anayticsはなじみ深いアクセス解析のツールだ。
Shopifyでは、Google Analyticsを使ってeコマースト...
Shopify 【Shopify】Buy Buttonアプリを使って、別サイトからもカートインできるように！
アプリ"Buy Button"をインストールし、ウィザードにしたがってポチポチと進んで、埋め込み用コードを挿入したら、
Shopifyで制作したサイトの商品ページがこのページにも実現できました。。！
もとの商品ページはこちらな...
Shopify 【Shopify】のショップと同じドメインの メールアドレスを設定する！（2021/7/26追記版）
Shopifyのサイトを制作開始してそういえば、、と気づくのが、ショップの連絡先としてメールアドレスの入力をする箇所はあっても、メールサーバーやメーラーは自分で別途用意しなければいけないということだ。
僕はいつもエックスサーバー×W...
Shopify 【Shopify】サブドメインを使ってShopifyのサイトを表示する！
例えば以下のようにドメインを設定したいとする。
prythmworks.tokyo → Wordpressなどで制作した本サイトnetshop.prythmworks.toyko → Shopifyで制作したECサイト
この場...
Shopify 【Shopify】ライブ環境のテーマでもtheme kitで更新する
以前、以下の記事でもShopifyの開発環境の作り方を書き、そこでPowerShellやコマンドラインのCUI操作でローカルのコーディングを本番環境にアップするときは、ライブ状態のテーマ=公開中のテーマに対して行うことはできないと書いた。...
Shopify 【Shopify】クーポンコードを発行してお客様にお届けする方法
ユーザ側に立って振り返ると、期間限定で20% OFFになるクーポンが手元にあると、何か今のうちに買っておかねば、という心理になるもの。
Shopifyでは、簡単にお客様に対しクーポンを発行できます。クーポンコードの発行の仕方と、お客...
Shopify 【Shopify】Back in stockの再入荷リクエストボタンを使ってみた！
Shopifyで在庫切れの商品を登録するにはアプリのBackinStockを利用するのが1番簡単である。
以下の記事でも紹介したこのアプリだが、
※今回、いらすとやさんの素材を使って、対話形式で書いてみます！
...
Shopify 【Shopify】4月1日から義務化される総額表記への変更の仕方
総額表記の義務化とは？
2021年3月の時点では、お店によって値札の「税抜価格」と「税込価格」が混在してるが、4月からはすべての商品やサービスの価格について、税込の価格を表示する「総額表示」に統一される。
「総額表示」とは、店...
Shopify 【Shopify】プラグインを使わずにメンテナンスページを表示！
Shopifyでメンテナンス表記をするには？
まもなく4月1日より法律で義務化される、ECサイト上の総額表記化であるが、これを行うにあたり、運営しているShopifyのサイトを一時的にメンテナンス表記したいことがある。
そんな...
Shopify 【Shopify】メニュー項目にドロップダウンリストを管理画面のみで作成する！
ドロップダウンメニューとは
ドロップダウンメニューとは、以下のようなものです。
PCであれば、マウスカーソルをオーバーメニューに重ねたときに、子のメニューが表示されて選択できるような機能のことですね。
通常、これ...
Shopify 【Shopify】2021年最新版！使えるアプリカテゴリ別紹介！
そもそもアプリとは？
Shopifyは、これまでになく速く・安く・確実に、高品質で継続的な運用がしていけるECサイトを制作できる良質なCMS（コンテンツ・マネジメント・システム）である。
さて、「速く・安く・確実に」機能を実現...
Shopify 【Shopify】GA仕様変更Shopifyにトラッキングコードが設定できない！どうする？
トラッキングコードの仕様変更
2020年10月14日にGoogle Analyticsに大幅なアップデートが行われ、仕様が変更になったため、これまでトラッキングコードで使用されていたUA-XXXXXXXXというトラッキングのIDが、...
Shopify 【Shopify】環境開発を構築する-改定版-
以前、同様の記事を書いたが、めちゃくちゃ不親切だったので、改訂版として更新しようと思う。
ShopifyによるECサイトの開発で、一番初めにぶつかる壁が、この間髪環境の構築だろう。
Shopifyの開発環境とはどのようなものか...
Shopify 【Shopify】で制作されたサイトで、何のアプリが使われているかを調べる方法
最近本当にShopifyでECサイトを制作したい、というクライアント様が多い。
そして、商談の際にお話に上がってくるのが、クライアント様が目指しているイケてるECサイトの中で、使われている機能についてだ。
「これできますか？」...
Shopify 【Shopify】ユーザー行動解析ツール “Lucky Orange”がすごすぎる件
Lucky Orange Heatmap & Replay
無料インストール（7日間無料お試し期間）有料版プランは月間$10からご利用いただけます
皆さん、最近解析ツール使っていますか？
入れてい...
Shopify 【Shopify】アプリ”Weglot Translate”がすごすぎる件
ECサイトをローンチするにあたり、グローバル展開が容易なことで、Shopifyはその名を知られているが、Weglot Translateという自動翻訳アプリが、さらにこの拍車をかけている。
翻訳言語が1つで、2000語までで...
Shopify 【Shopify】pageのテンプレートファイルが反映されない原因
Shopifyの情報って、日本語の文献がまだまだ少ない上に、みんなが当たり前に理解しているところは文献にいちいち書かれてなかったりするから、すごく簡単な設定ミスで進まなくなることがあるんですよね。。。
今回は、まさにそんな事態になっ...
Shopify 【Shopify】開発環境を準備する
初めてShopifyでECサイトを制作する案件が発生した。
Shopifyは、今世界中でECサイト制作をする際に最も多く使用されている、「ノーコード」でドメイン取得から決済システム導入まで、知見がなくてもECサイトが制作できるブラウ...