Shopify 【Shopify】お客様アカウントのページ（マイページ）の住所入力時の都道府県のプルダウン内の並びを整形！
デフォルト（イケてなさすぎる・・・！）
Shopifyのデフォルトの状態はこちら。
これまで国産のECカートシステムを使っていた方は、これを見て、「ああ、Shopifyヤバいわ・・」と思うことでしょう。
ご安心を！これは...
Shopify 
liquid 【Shopify】オブジェクト出力で”〇〇Drop”と表示されたときのプロパティの確認方法
"〇〇Drop"と表示されたが、これは何？
Shopifyのオブジェクト出力で、
"〇〇Drop"と表示されるのを見たことがないだろうか。
例えば、一つ前の記事で紹介したvideoのtypeに登録したschemaをliq...
Shopify 2024.1.10最新情報追記！）【Shopify】テーマの「カスタマイズ」に動画ファイル用のschema typeが追加されていた件！
Shopifyのストアを運用していた方なら、一度は話題に上がったことがあると思うのだが、
ページ内に動画コンテンツを表示させたいとき、これまではShopifyのテーマの仕様では、
"YouTube動画"か"Vimeo"の動画リ...
Googleスプレッドシート 【スプレッドシート効率化】常にデータの最終行へ飛ぶリンクボタンを設置！
スプレッドシートは便利ですが、長い期間同じシート上で運用をしていると、行数が膨大な量になります。
行数が10,000行を超えていくと、データの最終行や、特定の行までのジャンプをワンクリックでできると、更新情報の確認やデータの追加時に...
Googleスプレッドシート 【Shopify &スプレッドシート】有料テーマ使用時➝セクション内のスキーマの翻訳で、運用時も快適な環境を！
Shopifyで有料のテーマを購入すると、「カスタマイズ」の画面で編集できるセクションの画面の日本語バージョンがなく、選択できるのは英語などになってしまいます。
必ずしも英語に精通している人がECサイトの運用者になるわけではないので...
Shopify 【Shopify】テスト用・非公開としたい商品をフロントから見えなくし、商品ページにパスワード保護をかける！【アプリなし】
Shopifyの仕様として、テスト注文をしたい場合は、公開商品でないと決済完了ができないということがあります。
じゃあ、新規決済方法を導入したときや、ちょっとイレギュラーな注文の仕方をする商品（オーダーの名入れ商品など）がちゃんと問...
作業効率化 文字の画像をテキストデータに変換する！Chrome拡張機能”Copyfish”
こんなこと、経験ありませんか？
「この表データをHTMLでマークアップして！」とお願いされ、もらったファイルが、jpg…！
開いてみたら複雑なExcelの表データを撮影した写真…！
「ログインのIDとパスワードはこれです...
CSS 【爆速コーディング】Visual Studio CodeのEmmetでサジェストされるコードをカスタマイズする！
Visual Studio CodeとEmmet
Visual Studio Code、通称VScodeは、拡張機能を追加することで、自分が使いやすいようにしていけるコードエディタアプリだ。MicroSoft製。
そし...
CSS 【Shopify】商品ページのカラーバリアント選択をサムネイルタイプのボタンにし、メインスライダー画像と連動させる！
同じ要件の案件だと、これまではアプリを使用して実装していましたが、この度アプリなしで実装できたので、その備忘録として。
やりたいことはこれ！
これをしたくてもスライダーとバリアント選択同期が対応していない古いテーマの部...
未分類 ページのスクロールで表示範囲に入ったらYoutubeの埋め込み動画を自動再生させる！(スマホも対応可)
今回は、先日紹介したばかりの記事のさらにひとつ上の機能でもある。
ページ内に複数の埋め込みYouTube動画があった場合でも、ページに負荷をかけないように自動再生をさせる方法だ。
コードは以下！
See the P...
JavaScript スマホだと自動再生されないYouTube動画でも強制的に自動再生させる！
YouTube動画は埋め込みコードを発行でき、これをページに設置するだけでページ上に表示でき、オプションで自動再生も選択できますが、実は、スマホだと自動再生されない仕様になっている。
これは確かにまっとうな仕様です。設置者がその意図...
liquid 【Shopify】「テーマのカスタマイズ」のみで日本語Webフォントを追加できるようにカスタマイズ！
shopifyでは、テーマ内で選択できるフォントに日本語フォントがないです。
追加しようとした場合、参考になる記事としては、headタグ内またはcss内にハードコーディングで追記する方法が紹介されていますが、
これをコードに触...
CSS 【コピペでOK！】CSSでテキストの文字色をグラデーションに！
コードは以下です。
See the Pen
gradation_text by Naoto Yoshikawa (@nanaironanaoto)
on CodePen.
あらためてコードを解説しますと、
...
CSS 【あまりにもよく使う右向きアイコンのSVG】chevron（シェブロン）のsvgコードをワンコードで使い回す方法
タイトルにも記載した通り、
よくよく見回すすと、このアイコンを実によく見かけると思う。
参考) bootstrap opensource icons
その名は"chevron"（シェブロン）
...
liquid 【Shopify】標準だとイケてないカートページをカスタマイズ！
Shopifyではデザインが洗練されたテーマを使用すれば、カートページのデザインもイケてるものにできるはず、、と思いきや、何もしないと案外UIが悪いものがある。
ここでは、カートページ内を一新した例をもとに要点を紹介します。
...
Shopify 【Shopify】注意！開発ストアではアプリを有料化できないのでストアの有料プランを開始する必要がある！
Shopify構築で、"定期購買"のアプリの商品ページ上での見た目を確認するためには、Shopifyストアが以下の準備を終わらせていないと表示がされなかったので、備忘録として。
ストアオーナーにShopify Paymentを使用で...
liquid 【Shopify】テーマカスタマイズ画面の翻訳作業をする！&補足でデータ移行に重宝するツール紹介！
Shopifyのテーマは、"カスタマイズ"の画面でノーコードでサイトの見た目を編集できるが、有料テーマは日本語訳がされていないので、英語の苦手な方だと翻訳されていない場合、ストレスになるだろう。
翻訳されていない有料テーマカスタマイ...
CSS 【CSS,jQuery】input type=”file”のデザインをカスタマイズする【アップロード時のアニメーション,ファイル上限オーバー時のアラートも！】
画像ファイルなどをアップロードできる<input type="file">タグだが、何も手を加えないとこのような見た目になる。
iPhone（iOS）での表示
Windowsでの表示
OSによ...
未分類 【iPhone Safari拡張機能】Safariでページ翻訳ができる！
最近ガジェット欲が復活して、部屋の中でだけでpc含めて6台の端末を使い分けている。それぞれ、やはり用途ごとに使い分けると便利なインターフェイスとなる。
そして、インターフェイスと言えば、最近ハマっているのが、iPhoneへの音声入力...
Shopify 【Shopify】Shopify Summer 2022 Edition！！！
2022年6月下旬（先々週）、Shpifyの新エディションが全世界同時リリースされた。
このサイト、開発者向けだけあってとてもクールです。
右上の"Dev Mode"（開発者モード）というところからの開発者情報が特に。...
ページスピード 【無料ヒートマップ】Microsoft Clarity【無料レコーディング】
過去にLucky Orangeというヒートマップ・レコーディングツールの記事解説をした。
この時にも、この機能でこの低価格、、ミ○ルカとかめちゃ高いんですけど、マジで潰れるんじゃないのか、、？
と思ったが、今回Microsof...
liquid 【Shopify】最近見た商品、お気に入り追加機能の実装のさいのすゝめ
Shopifyストアを作成する際の、「え、これサポートしてないの！💦」と意外に思われ、かつ見落とすとけっこう金額的にもめんどい注意点として、「メールアドレス」「メールサーバー」は自前で用意する必要があることや、日本のECサ...
Shopify 【Shopify】でシークレット商品や、特定会員しか見れないページを作る方法
Shopifyの弱点として、サーバーサイドのプログラムを記述できないことがある。
例えば、ある商品やあるページにパスワードをかけるような処理や特定のページをnoindexにしたりするにはどうしたらいいか。
このアプリが便利です...
Shopify 【Shopify】テーマ2.0にも対応したレビューアプリ”Judge.me”が使えそうな件！
ECサイトにおける"レビュー機能"とは、「商品を買ったユーザが、商品レビューを書けて、さまざまなレビューを商品ページで見れる機能」であります。
端的に言うとそうなのですが、しかしこの機能、深堀りすると奥が深いのであります。
レ...
jQuery 悲しい時ー！ ページロード後に生成されたDOM要素にJavaScriptで当てているはずのイベントが効かないときー！
タイトル回収からいきますと、「悲しい時」このネタを記憶している方はもう多くないのかと思われます。
そう、「いつもここから」というコンビ芸人のネタです。
それはさておき、やっぱり
ページロード後に生成されたDOM要素にJ...
CSS 【CSS,jQuery】HTMLをハックするcss,jQueryあれこれ
form内でバリデーションエラーになった要素にスクロールで移動する
テキストエリアのフォームに文字を入力されないでclickを押すと その箇所までジャンプしてフォームが赤くなる、など。
必要になったときに引き出しがないと意外と...
liquid 【Shopify】Liquidでランダムに何かのデータを取り出したい！でもliquidにはランダム関数がない！どうする？
liquidにはランダム関数がない
ちょっとびっくりしたんですが、ないらしいです。ランダムフィルターみたいなものもない。
では、巷ではどのようにliquidでランダムを実現しているのか？？
方法1. Github上のLi...
Shopify 【Shopify】配列をliquidで作成する方法、そして配列をシャッフルして出力する方法！
明けましておめでとうございます。今年もやってまいりましょう！
配列を作成するのも配列をシャッフルするのもliquidはゼロからだと超しんどかったので備忘録を。
配列を作るにはsplitとjoinいうフィルターを使うしかない。s...
Shopify 【Shopify】ストアにチャット問い合わせ機能を実装！
結論：Shopify公式無料アプリ"Inbox"で簡単実装可能！
どのような仕様か？
こちらのデモンストレーション用のShopifyサイトを開くと、右下に「チャットでお問合せください」というボタンがある。
...
YouTube HEIC形式の画像ファイルをJPGに変換する方法
今ではコンパクトデジカメよりも高性能になったiPhoneのカメラですが、デフォルト設定のままだと画像のファイル形式がJPGではなく、
HEICになります。このHEICという形式だと、WindowsやWeb上で扱うことが難しくなります...
CSS 【開発環境】Tailwindで爆速コーディング環境を作る！
ShopifyにしろWordpressにしろ、liquidやphpを組み込む前に、ローカルで静的にHTMLを作成しておくと無駄のないきれいなコードでページを設計しておける。
その際に静的コーディングが爆速でできるとありがたい。という...
Shopify 【Shopify】アプリなしでSALE時の割引率を表示する！
割引率の表示はこのコードで完了！
{% if current_variant.compare_at_price > 0 %}
{% comment %}割引前価格が設定されていればOFF率表記自体する{% endcomme...
未分類 【Shopify】アプリなしで商品のステータスラベルを表示！
例えば、新商品には"NEW"というラベルを表示したい、再入荷した商品には"REARRIVAL"ラベルを表示したい、という要件。
以下のコードで完了！
{% if product.tags contains 'newarriva...
Shopify 【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...
未分類 【最終手段】小さい画像、解像度粗い写真を大きなサイズにする（解像度を上げる）方法
Githubでの配布 waifu2x-caffe (for windows)
窓の杜での配布 waifu2x-caffe(for windows)
このツールの解説
CPUとGPUをフル稼働し、画像生成の...
Shopify 【Shopify】アプリを使わずに、サイトに訪れた初回のみポップアップするモーダルウィンドウ機能を追加！（カスタマイズ画面から次回表示までの日数指定も）
海外のECサイトで多くみられていたポップアップするモーダルウィンドウだが、最近は日本のサイトでもよく目にするようになった。
サイトを見ていると、しばらくすとポっと出てくるあれです。個人的には実はあまり好きではないですが、、、
...
Shopify 【Shopify】配送日時（お届け日時）指定を可能にする！（注意点も）
Shopifyで配送日時（お届け日時）を可能にできるアプリなら、
配送日時指定 .ampで問題ないです。
こちらは国産のアプリで安心です！
このアプリの詳細と、注意点について解説します。
配送日時指定 .a...
Shopify 【Shopify】ページで条件分岐、顧客タグで条件分岐
例えば、同じページテンプレートだが特定のページの時だけ処理を変えたいというとき。
また、リンクのジャンプ先を会員ユーザーはゲスト(非ログインユーザー)と違うページにしたいとき。
Shopifyではとても簡単に条件分岐を書けます...
Shopify 【SublimeText】にLiquidファイルのシンタックスハイライトを設定！
Shopifyのサイト制作をしてきて、ずぼらな僕はSublinmeTextでコードを書くときのシンタックスハイライトの設定をしていないまま8か月ほど過ぎようとしていた。
いつも手動で、HTMLかPHPのシンタックスにセットして制作し...
Shopify 【Shopify】online store 1.0 → 2.0 への改修 JSON形式のtemplateを調整する！
手順1.liquidファイルをもとにjsonファイル作成
まずは肩慣らしに「Product」のproduct.json
まず、これが、とあるテーマのproduct.liquid
【「カスタマイズ」画面】
【...
CSS 【ローカルHTML開発】ローカル環境でホットリロードのブラウザ開発環境を作る！
ローカル環境でネット接続もせず、飛行機の中でも核シェルターの中でも、超サクサクと限りなくストレスなくコーディングしたい方向けです！
こんな感じで高速でページを作成できます！
テーマにならい手順を高速で紹介します！
...
Shopify 【Shopify】online store 2.0の新テーマ”Dawn”をGithubと同期させて開発する！
2021/6/29に開かれたShopify Unite 2021で発表されたShopifyの新バージョン。
新バージョンといっても、これまでに制作されたテーマやアプリは変わらず使用できる。
今回追加された内容は以下のようにいく...
CSS 【iOS版Sublime Text!?】GoCoEditが神がかってきた件(おまけ:Inspect)
いつの間にか、こんなにできる子に！"GoCoEdit"
先日、愛機のデスクトップで作業していて、ある壁にぶつかり、なんで〜なんで〜と進めずに苦しんでいて、とりあえず頭休めようと、寝たんですが、寝てる時も、あれをこうして、これをああす...
作業効率化 【ウィジェット自作】自分好みの片手用キーボードを作って、 面倒な操作を片手でできるように！
昨年よりリモートワークが主流になってから感じるのは、パソコン作業をいかに効率的にするか、というガジェットの特集が、ブログでもYouTubeでも急激に増えたことだ。
特に自分の周りで多く出てきたワードが、トラックボールマウス、エルゴノ...
Wordpress 【WordPress】管理画面上で、画像を簡易レタッチする！
Wordpress管理画面にてアップロードした「メディア」に格納されている画像ファイルを、ほんとちょっとだけ加工したい時、
いちいち画像の元ファイルをローカル上で探したり、一度アップした画像をダウンロードしたりして、フォトレタッチソ...
検証 iPhoneでWebページ上のスクリーンショットを全画面で撮るには！
意外と知られていない、スマホでのWeb全画面スクショ方法！
制作の仕事であれば特に、PCのChromeブラウザなどでは、Chrome拡張機能などで、Webのフルページのスクショ機能を活用することは多いだろう。
※以下、"Awe...
ShopifyでのECサイト制作を行うならPRYTHMWORKS（プリズムワークス）へ
ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS（プリズムワークス）にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。
| 社名 | 合同会社PRYTHMWORKS |
|---|---|
| 事業内容 | EC/Webサイトの構築、管理保守 |
| CEO | 吉川直人 |
| 法人事務所所在地 | 〒150-0001 東京都渋谷区神宮前六丁目２３番４号桑野ビル２階 |
| 設立日 | 2023年(令和５年)７月３日 |
| 沿革 | 2020年(令和２年)１０月 PRYTHMWORKS事業開始 2023年(令和５年)７月 合同会社PRYTHMWORKS設立 |
お問い合わせ用LINEはこちらからどうぞ！
お問い合わせ用LINEはこちらからどうぞ！
LINE