メンバーシップに加入する
Shopifyのフロントエンドの開発の記事がメインです。 でも、コードの解説などはしません。 通常、記事（有料も含め）の投稿ではコメント許可や許可をしていても返信しない方針ですが、 本メンバーシップ内でのみShopifyで ・こんなことできるの〜 ・あんなことできるの〜 とかのご質問に対してお答えしようかと思います。 ※全てのトピックに対しては厳しいかもしれません。 こちらで調べられる範囲になりますのでできなければ無理って返しちゃうかも。ご了承ください。 【得意】 ・フロントのテーマのカスタマイズ 【苦手】 ・バックエンド（アプリ開発とか） ・マーケティング/運営関係 ◆通常は個別での対応の際は1回6万でShopify関連の調査は受けていますが、 Noteですので個別ではないため特別価格で1万で対応します。 ただし、全てのご質問に対しては難しいので私の知識や時間がある時にお答えできる範囲になりますので、その辺りをご理解いただける方のみご参加いただければ幸いです。 最低でも月に１トピックになるかと思います。
マガジン
記事一覧
![[Shopify]検索結果に表示する要素を「商品のみ」や「記事と商品のみ」などカスタマイズ画面から選択できるようにする（Dawn） #134](https://assets.st-note.com/production/uploads/images/151692259/rectangle_large_type_2_3859a594a68994de7bd31154272455ad.png?width=800)
[Shopify]検索結果に表示する要素を「商品のみ」や「記事と商品のみ」などカスタマイズ画面から選択できるようにする（Dawn） #134
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
デフォルトでは「商品」「記事」「ページ」から検索結果が表示されます。これを「商品のみ」にしたり、「記事と商品のみ」を表示するようにしたり、検索結果で表示するコンテンツをカスタマイズ画面から調整できるようにします。
デフォルトのリキッドファイルに追加するだけなので簡単。ヘッダーのサーチとサーチページでの検索窓から
![[ShopifyApp]商品ページ訪問すると訪問回数をカウントするアプリを作るPart2「クロスセル戦略用に一緒に閲覧されてる商品のデータを取得」 Remixでアプリ作成 #009](https://assets.st-note.com/production/uploads/images/151046655/rectangle_large_type_2_dc38b85dfcb36428aefdc6c64724d52e.png?width=800)
[ShopifyApp]商品ページ訪問すると訪問回数をカウントするアプリを作るPart2「クロスセル戦略用に一緒に閲覧されてる商品のデータを取得」 Remixでアプリ作成 #009
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
前回の商品ページ訪問すると訪問回数をカウントするアプリの続きです。前回はシンプルに商品ページを訪問すると閲覧した数をPrismaに格納してアプリの管理画面に表示しました。
【前回のテーマ】
商品ページ訪問すると訪問回数をカウントするアプリを作る
▼前回の記事
今日はその続きで、一緒に閲覧された商品をデータベ
![【GAS】Shopify商品画像をOAuth2を使ってGoogleドライブからアップロードしてみる・パート２[複数商品編]＃29 (Shopify API + GoogleAppsScript)](https://assets.st-note.com/production/uploads/images/149996866/rectangle_large_type_2_91c58e2e1a1b9c40ea7ed1a3f1c3a2a0.png?width=800)
【GAS】Shopify商品画像をOAuth2を使ってGoogleドライブからアップロードしてみる・パート２[複数商品編]＃29 (Shopify API + GoogleAppsScript)
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
GASを使ってショッピファイの商品詳細にドライブから画像をアップする方法についてご紹介。前回の続きです。前回は１商品のみ画像をアップする方法をご紹介しました。
これだと毎回スクリプト内を変更するのが面倒なのでスプレッドシートに商品IDとその商品の画像の格納先フォルダをリスト化してチェックボックスにチェックを入れ
![[事前準備]Shopify API発行方法](https://assets.st-note.com/production/uploads/images/149989333/rectangle_large_type_2_37b7ad2dceaa1199cb2cb894875db0b9.png?width=800)
[事前準備]Shopify API発行方法
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
Shopify APIの発行手順をまとめてます。
🐝 API発行手順①アプリ＞アプリと販売チャンネルの設定＞ストア用カスタムアプリ
②アプリを作成
③アクセススコープの設定
使用する項目にチェック入れてください。
④アプリをインストール
Admin APIのアクセストークンが発行されるのでコピーしま
![[Shopify]広告バーをトップページのみに表示する・セクションテンプレート（Dawn） #131](https://assets.st-note.com/production/uploads/images/147540871/rectangle_large_type_2_a13d93496f68a43773c39d9468f66883.png?width=800)
[Shopify]広告バーをトップページのみに表示する・セクションテンプレート（Dawn） #131
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
広告バーをトップページのみに表示させられるセクションテンプレートです。レイアウトは既存のDawnを使用しています＾＾
今回はシンプルなカスタマイズ🎶タグ２箇所埋め込むだけなので簡単。
✔️今回のゴール今回はデフォルト機能を使っているのでカスタマイズ画面の変更はありません。
今回はif文入れるだけなのでフル
【GAS】Shopify商品画像をOAuth2を使ってGoogleドライブからアップロードしてみる・パート１＃28 (Shopify API + GoogleAppsScript)
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
GASを使ってショッピファイの商品詳細にドライブから画像をアップする方法についてご紹介。
今日は１つの商品のみが対象。スクリプト内の商品IDを毎度変更する必要ありです。次回以降で、スプレッドシートにリスト化した商品情報を登録しておいて、毎度スクリプト内の商品IDを変更しなくても良いように修正します！
✔️今回
![[Shopify]ヘッダーのログインアイコンをレイアウトに合わせて８種類から選べる・セクションテンプレート #130](https://assets.st-note.com/production/uploads/images/146809977/rectangle_large_type_2_2ad570892b3e1208df6da2152f0f3410.png?width=800)
[Shopify]ヘッダーのログインアイコンをレイアウトに合わせて８種類から選べる・セクションテンプレート #130
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
ヘッダーのアカウントアイコンを色々選べるセクション。デフォルトのアイコンを変えてみたい場合に使用してみてね＾＾
✔️今回のゴール
🔸CMSの特徴
✔️設定手順📌Step1 スニペットを新規作成
1️⃣管理画面＞テーマ＞コード編集＞スニペット＞新規作成
![[Shopify]「最近閲覧した商品履歴」をポップアップで表示する・セクションテンプレート #129](https://assets.st-note.com/production/uploads/images/146462300/rectangle_large_type_2_98210e68a0839d3b6fa62ab5828bb358.png?width=800)
[Shopify]「最近閲覧した商品履歴」をポップアップで表示する・セクションテンプレート #129
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
以前、ローカルストレージを使用した最近チェックした商品を表示するセクションをご紹介しました！今回は、その閲覧履歴の商品一覧をポップアップで表示できるセクションになります＾＾
商品ページにアクセスしてから5秒後にモーダルが表示される仕様です。今回はStep１で完結🎵コピペで5分もかからずに設置できちゃいますね。
![[ShopifyFlow]スプレッドシート連携は使わない！GASとHTTPリクエストで注文情報をスプシに保存するFlowの作り方 #003](https://assets.st-note.com/production/uploads/images/145442416/rectangle_large_type_2_58150cd1dfe28a57f3dd0057113aa355.png?width=800)
[ShopifyFlow]スプレッドシート連携は使わない！GASとHTTPリクエストで注文情報をスプシに保存するFlowの作り方 #003
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日はフローを使って注文が入ったらスプレッドシートに保存される方法についてご紹介。スプレッドシート連携は使わずにGASとHTTPリクエストを使います！
コピペで設置できるようにコード用意したのでそのまま貼り付けると５分で設置できます＾＾
✅今回のゴール✅設定方法👉Step1 Googleスプレッドシートを作
![[ShopifyApp]商品ページ訪問すると訪問回数をカウントするアプリを作るPart1「データベースの作成とシンプルな管理画面」 Remixでアプリ作成 #008](https://assets.st-note.com/production/uploads/images/145130760/rectangle_large_type_2_cbd5207c1206c4cd4a26559a701e7eb7.png?width=800)
[ShopifyApp]商品ページ訪問すると訪問回数をカウントするアプリを作るPart1「データベースの作成とシンプルな管理画面」 Remixでアプリ作成 #008
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
商品ページを訪れたらその訪問回数をカウントするアプリ。一応、最終的なゴールは、各商品の訪問数をカウントして管理画面で表示。次回以降の投稿で、フロントの商品詳細ページで「24時間以内にxxx件の閲覧があります！」と表示したいと思っています。
【今回のテーマ】
商品ページ訪問すると訪問回数をカウントするアプリを作る
![[Shopify]ログイン後に直前に見ていたページに遷移させる（既存ファイルカスタマイズ） #128](https://assets.st-note.com/production/uploads/images/144735899/rectangle_large_type_2_0051e9783ea3fce3df757b4654c4aa50.png?width=800)
[Shopify]ログイン後に直前に見ていたページに遷移させる（既存ファイルカスタマイズ） #128
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
デフォルト機能だと、ログイン直後にTOPに戻ってしまうので、直後に見ていたページに遷移させたいと思います。
✔️今回のゴールシンプルに下記の動作にしたい。
例えば、カートでゲスト注文できない場合に、カート上でログイン画面へ促されてログインした後にカート画面に戻ってくる！というような感じの動きになります。
✔
![[Shopify]ローカルストレージを使って「最近閲覧した商品履歴」を表示する・セクションテンプレート #127](https://assets.st-note.com/production/uploads/images/144455394/rectangle_large_type_2_f307143f321bef79637a48ff2e33bffa.png?width=800)
[Shopify]ローカルストレージを使って「最近閲覧した商品履歴」を表示する・セクションテンプレート #127
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日はローカルストレージで最近閲覧した商品を保存して表示する方法についてご紹介。今回はデザインはシンプルに、８件まで閲覧履歴を表示するという仕様で作成しています。
カスタマイズ画面でのレイアウト調整版は次回出そうかと思っています。あと、色んなデザインパターンも今度紹介予定です＾＾
✔️今回のゴール
🔸CM
![[Shopify]画像をホバーすると拡大するアコーディオン・セクションテンプレート #126](https://assets.st-note.com/production/uploads/images/143529523/rectangle_large_type_2_71bc70d8d7b0366111ac02f729f8185b.png?width=800)
[Shopify]画像をホバーすると拡大するアコーディオン・セクションテンプレート #126
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日はアコーディオンを作ってみました。ホバーすると画像が拡大するアニメーションがいい感じ。
✔️今回のゴールデモページ
SPでは説明文は長ければ「・・・」で表示される
🔸CMSの特徴
＝＝＝＝＝＝
共通設定
＝＝＝＝＝＝
＝＝＝＝＝＝
ブロック設定
＝＝＝＝＝＝
ブロックをクリック
＝＝＝＝＝＝＝