Shopify 【Shopify】配送日時指定.ampを導入した際の注意点！
注文完了メールにも配送希望日時が表示されるようにする！
アプリ公式のページでもこの方法は紹介されている。
以下のコードを「通知」内の注文確認メールのテンプレートに設置する。
{% if attributes	...
Shopify 
Shopify 【Shopify】バリエーションボタンを「即納」「受注生産」「SOLD OUT」の３種類で色分けして表示&カートボタンの文言も選んだバリエーションによって自由自在に変更する！
以下の要件を実現するのに、けっこう苦労したので、その備忘録と、同じような苦労を誰かがしそうなときの助けになればと思い記述いたします。
要件
商品詳細ページでバリエーションが「在庫がゼロになっても販売を続ける」としたときにカー...
GSAP 【GSAP】ジーサップ！アニメーションを手際よく作成できるライブラリというより関数！（そしてChatGPT）
そうだ！アニメーション界隈にはあいつがいた！（GSAP！）
かねてよりGSAP（ジーサップ）というアニメーション用のJSライブラリがあることは知っていたし、このサイトのトップページのロゴがノイジーに踊っているアニメーションなんかも、...
ChatGPT ChatGPTのカスタム設定使ったら神機能だった件
ChatGPTのカスタム設定を使ったら神機能だった。
カスタム設定とは、ひとことで言うと、「前提条件」を毎回言わなくてもいいように記憶させておける機能です。
たとえば、「htmlコードについての情報が知りたい」「Shopify...
作業効率化 【Notionユーザのために】Googleドキュメントでも少しでもNotionっぽく入力する方法
Googleドキュメントを設定変更で、マークダウン記法で入力していける！
MeetやZOOM会議で、リアルタイムで事後も確認できるメモ（議事録）を作成しているときに、スピーディーにキーボード操作のみで、見出しや箇条書きをサクサク入力...
PWA PWA（プログレッシブWebアプリケーション）とは？
PWAとは？参考になるページをふたつ紹介します。
PWAに対応（スマホのホーム画面にアプリとして保存可能）したWebサイトに行くと、PC環境でもブラウザのアドレスバーのところに、このサイトを保存するかというナビゲーシ...
CSS 【爆速コーディング】Tailwindの本当の使い方まとめ【LPデザインも怖くない】
Tailwind cssについて、Webクリエイターボックスでも利用割合調査のアンケートを行っていましたが、やはりそもそも認知度が低いようです。
今回は、以前にも取り上げた、このTailwind cssが、いったいどんな...
Shopify 【Shopify】ストアのテーマ設定にファビコンを設置しているけど、Shopifyデフォルトでは不足がある件について
前回の記事で書いていて、ふと思い出したことを今回記載します。
タイトルの通り、ストアのテーマ設定でファビコンを設置していても、ShopifyのDawnを含め多くのテーマでは不足があります。
それが、前回記事に登場していた、iP...
Shopify 【Shopify】ブラウザの「戻る」ボタンの機能をWebページ上に実装！(動的にジャンプ先を変更)
「戻る」ボタンとは？
「戻る」ボタンとは？
そうです、今あなたが見ているブラウザの画面内にもある、これです！
Chrome（ダークモード）
Safari（ダークモード）
直前に見ていたページに戻る機能のボタン...
Shopify 【改訂版】メールドメイン認証に「DMARCレコードの取得」を求められた【Shopify】
先週、ストアオーナーあてに こちらのShopify公式ページ のページでも確認できる、
2024年2月1日現在、GmailとYahooでは、ブランドのメールアドレスからお客様にメールを送信するために、ドメインを認証し、DMARCレ...
未分類 APNGで【動画より軽く】、【gifアニメよりも綺麗】なアニメーションをページ上に表示する！
アニメーションを表示できる画像ファイルは、gifの他にpngが登場している
透過画像にはgif以外にpngがあります。
しかし今更ですが、「透過画像」をアニメーションさせたい、という要件があった際に、よく使用されてきた...
トピックス 2023年のEC業界、エンジニア界隈トピックス振り返り！
EC業界、エンジニア界隈のみなさま、2023年ももうまもなく終わりですね。今年はどんな一年になったでしょうか？
2023年のEC業界、エンジニア界隈トピックスを振り返ってみたいと思います。
物流2024年問題
「物流の2...
Shopify 【Shopify】SEO最適化アプリのWebrex(ウェブレックス)を調査した！
Webrex: SEO Optimizer & Schemaとは
Shopify アプリ "Webrex: SEO Optimizer & Schema" は、Shopify eコマース ショップにWebサイト構造化...
Shopify 【Shopify】新仕様！チェックアウトページ2023.10.2リリース！
従来のチェックアウトページ
(1)「情報」のページ
配送先住所の入力
(2)「配送」のページ
配送料の確認
(3)「支払い」のページ
クレカなど支払い方法の選択（カード情報入力）...
Shopify 【Shiopify】テーマのカスタマイズ画面でブロックの表示名を入力したテキストにする！
ブロックの表示名を打ち込んだテキストにする方法
自作のセクションを作る際に注意点。
テーマのカスタマイズ画面で、ブロックの表示名は、ちょっとした工夫をしないと以下のようにすべてブロックのnameが表示される。
...
未分類 【一瞬で】Webフォントを使っているとページ表示後に一瞬、既存のフォントが見えてしまう件【解決】
今回は僕自身がずっと野放しにしていた問題を、あまりにあっけなく解決できたことを、自戒の念を込めて書きました。
Shopify 【Shopify】カートページ内商品の同時注文不可設定制御・数量上限制御【アプリ不要！】
「特定の商品群は、カート内の合計金額が〇〇円以上で送料無料」という特典は、多くのECサイトで使われている。
ただし、イレギュラーに「ただしまた別の特定の商品群がカート内にあるときは〇〇円以上で送料無料にしないようにしたい」という要件...
HTML iPhone実機で、テキスト入力フィールドで画面がフォーカス（拡大）されるのを禁止する方法
けっこう前のことだが、iPhoneで、テキスト入力フィールド（inputフィールド）をタップした際に、画面が自動的にズームインしてしまう問題。Webサイト上で、これをどうしたらズームしないようにできるか対処する方法がわからず悩んだ。
...
未分類 【WordPress】テーマのstyle.cssを変更したさいに疑似キャッシュクリアさせ、確実に最新状態を閲覧してもらいたいとき！
Wordpressのテーマのstyle.cssは、header.php内で以下のようなphpで出力されている。
↓ php
<link rel="stylesheet" type="text/css" href="&l...
Shopify 【Shopify】同じページ内に同一のセクションを複数配置し、それぞれ別々のCSSを適用したいときの解決方法
失敗のパターン
Shopifyの新機能「カスタマイズ」画面内の、「セクション」>「カスタムCSS」に記述
これはShopifyの管理画面の実際の表示なのだが、「このセクションのみ。にカスタムスタイルを追加する」と...
Shopify 【Shopify】アカウント系ページのテンプレートをJSON形式にカスタム！
Shopify2.0のテーマでは、ページのテンプレートがJSON形式になったことで、ページ内のセクションと呼ばれる構成要素のひとつひとつを並び替えたり、非表示にしたり、はたまた、新たなセクションを作成して配置することも可能だ。
これ...
HTML 【ハック的手法】特定のテキストをマークアップしているDOM要素があったときのみ処理をするJS
Shopifyで、アプリで生成されるコードで、特定の要素にクラスやIDを指定できず、要素内に表示されるテキスト情報を見て処理をするかしないかを分けたいとき！
このハック的な小技を使えば怖くない！
↓ 例として、すべておなじDO...
Shopify 【Shopify】お客様アカウントのページ（マイページ）の住所入力時の都道府県のプルダウン内の並びを整形！
デフォルト（イケてなさすぎる・・・！）
Shopifyのデフォルトの状態はこちら。
これまで国産のECカートシステムを使っていた方は、これを見て、「ああ、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にしたりするにはどうしたらいいか。
このアプリが便利です...
Shopfy2.0 【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...