マガジンのカバー画像

Shopifyコーディング100本ノック（Dawn）続編

人気のShopifyコーディング100本ノックシリーズの続編。現在の100本ノックマガジンで100本記事投稿した後はこちらで更新していきます。「Shopifyコーディング100本…
【月２回程度更新】1記事ずつよりも定期購読の方がお得。「Shopifyコーディング100本ノック（…
¥1,200 / 月 初月無料
運営しているクリエイター
まりん | Shopifyフロントエンジニア+SNSマーケティング

[Shopify]検索結果に表示する要素を「商品のみ」や「記事と商品のみ」などカスタマイズ画面から選択できるようにする（Dawn） #134

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 デフォルトでは「商品」「記事」「ページ」から検索結果が表示されます。これを「商品のみ」にしたり、「記事と商品のみ」を表示するようにしたり、検索結果で表示するコンテンツをカスタマイズ画面から調整できるようにします。 デフォルトのリキッドファイルに追加するだけなので簡単。ヘッダーのサーチとサーチページでの検索窓からの場合の両方のパターンの設置方法をご紹介しています。 ✔️今回のゴールここの検

¥800
まりん | Shopi…

【GAS】Shopify商品画像をOAuth2を使ってGoogleドライブからアップロードしてみる・パート２[複数商品編]＃29 (Shopify API + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 GASを使ってショッピファイの商品詳細にドライブから画像をアップする方法についてご紹介。前回の続きです。前回は１商品のみ画像をアップする方法をご紹介しました。 これだと毎回スクリプト内を変更するのが面倒なのでスプレッドシートに商品IDとその商品の画像の格納先フォルダをリスト化してチェックボックスにチェックを入れたらショッピファイ側の商品管理画面の各商品の画像をアップロードするという仕様に変

¥1,200
まりん | Shopi…

[Shopify]特集ブログ記事一覧・PCは２カラム・セクションテンプレート（Dawn） #133

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログ記事一覧のセクションです。ブログ２つ選んで２カラムで表示されます！バナーも追加できるようにしてみました。不要な場合はバナー設定なしにすればOK。 スクロールした時のタイトルのアンダーラインがアニメーションになっててかわいい。 今回より簡単に設置できるようにCSSは同一ファイル内に書いて、設定ステップ数を１つにしてみました。これで本当にコピペだけで5分以内に設定して使えるようになりま

¥1,200
まりん | Shopi…

[Shopify]特集コレクションを顧客タグごとで出し分けるセクションテンプレート（Dawn） #132

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は顧客タグで特集コレクションで表示する商品を出し分けるセクションを作ってみました🎶ログインしていない顧客と特定顧客タグを持っている顧客へのアプローチを変えられるので便利。 レイアウトはDawnの既存のレイアウト使っています。なのでCSSはなし。Dawn使ってる人はそのままコピペで使えます。 ✔️今回のゴール 顧客タグAのお客さんには商品一覧Bの商品を表示、 ログインしていないお客さ

¥1,200
まりん | Shopi…

[Shopify]広告バーをトップページのみに表示する・セクションテンプレート（Dawn） #131

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 広告バーをトップページのみに表示させられるセクションテンプレートです。レイアウトは既存のDawnを使用しています＾＾ 今回はシンプルなカスタマイズ🎶タグ２箇所埋め込むだけなので簡単。 ✔️今回のゴール今回はデフォルト機能を使っているのでカスタマイズ画面の変更はありません。 今回はif文入れるだけなのでフルバージョンコードなしでも該当箇所に入れればOK。もしフルバージョンのコード使用する

¥800
まりん | Shopi…

【GAS】Shopify商品画像をOAuth2を使ってGoogleドライブからアップロードしてみる・パート１＃28 (Shopify API + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 GASを使ってショッピファイの商品詳細にドライブから画像をアップする方法についてご紹介。 今日は１つの商品のみが対象。スクリプト内の商品IDを毎度変更する必要ありです。次回以降で、スプレッドシートにリスト化した商品情報を登録しておいて、毎度スクリプト内の商品IDを変更しなくても良いように修正します！ ✔️今回のゴール ✔️設置手順◆事前準備 🔸ShopifyAPIキー取得 下記のS

¥1,200
まりん | Shopi…

[Shopify]ヘッダーのログインアイコンをレイアウトに合わせて８種類から選べる・セクションテンプレート #130

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ヘッダーのアカウントアイコンを色々選べるセクション。デフォルトのアイコンを変えてみたい場合に使用してみてね＾＾ ✔️今回のゴール 🔸CMSの特徴 ✔️設定手順📌Step1 　スニペットを新規作成 1️⃣管理画面＞テーマ＞コード編集＞スニペット＞新規作成

¥800
まりん | Shopi…

[Shopify]「最近閲覧した商品履歴」をポップアップで表示する・セクションテンプレート #129

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 以前、ローカルストレージを使用した最近チェックした商品を表示するセクションをご紹介しました！今回は、その閲覧履歴の商品一覧をポップアップで表示できるセクションになります＾＾ 商品ページにアクセスしてから5秒後にモーダルが表示される仕様です。今回はStep１で完結🎵コピペで5分もかからずに設置できちゃいますね。 🔸前回の記事 以前ご紹介した、ローカルストレージに閲覧履歴を保存するコードを

¥1,200
まりん | Shopi…

[ShopifyFlow]スプレッドシート連携は使わない！GASとHTTPリクエストで注文情報をスプシに保存するFlowの作り方　#003

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はフローを使って注文が入ったらスプレッドシートに保存される方法についてご紹介。スプレッドシート連携は使わずにGASとHTTPリクエストを使います！ コピペで設置できるようにコード用意したのでそのまま貼り付けると５分で設置できます＾＾ ✅今回のゴール✅設定方法👉Step1　Googleスプレッドシートを作成 1️⃣シート名「order」で作成 ヘッダーはお好みで作成。 空欄でも下記

¥1,000
まりん | Shopi…

[Shopify]ログイン後に直前に見ていたページに遷移させる（既存ファイルカスタマイズ） #128

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 デフォルト機能だと、ログイン直後にTOPに戻ってしまうので、直後に見ていたページに遷移させたいと思います。 ✔️今回のゴールシンプルに下記の動作にしたい。 例えば、カートでゲスト注文できない場合に、カート上でログイン画面へ促されてログインした後にカート画面に戻ってくる！というような感じの動きになります。 ✔️設定手順Step1 既存のmain-loginファイルを開く 管理画面＞テー

¥1,000
まりん | Shopi…

[Shopify]ローカルストレージを使って「最近閲覧した商品履歴」を表示する・セクションテンプレート #127

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はローカルストレージで最近閲覧した商品を保存して表示する方法についてご紹介。今回はデザインはシンプルに、８件まで閲覧履歴を表示するという仕様で作成しています。 カスタマイズ画面でのレイアウト調整版は次回出そうかと思っています。あと、色んなデザインパターンも今度紹介予定です＾＾ ✔️今回のゴール 🔸CMSの特徴 ✔️ローカルストレージに格納するコード下記を設置するだけでOK. {

¥1,500
まりん | Shopi…

[Shopify]ブログ記事のテンプレート第５弾♪

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopifyのブログ記事のテンプレート第５弾です。 今回はシンプルにツールバーのみをアレンジ。 カスタマイズ画面でカラーを調整できるのでサイトのトーンに合わせて使ってください＾＾テーブルもスマホだとスクロールできるようにしてみました。その他のサムネ画像や本文内の画像などのレイアウトは既存機能のままです。 ✔️今回のテンプレートデモページ 下記のツール対象です。 💡テーブルは横に広げ

¥3,800
まりん | Shopi…

[Shopify]画像をホバーすると拡大するアコーディオン・セクションテンプレート #126

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はアコーディオンを作ってみました。ホバーすると画像が拡大するアニメーションがいい感じ。 ✔️今回のゴールデモページ SPでは説明文は長ければ「・・・」で表示される 🔸CMSの特徴 ＝＝＝＝＝＝ 共通設定 ＝＝＝＝＝＝ ＝＝＝＝＝＝ ブロック設定 ＝＝＝＝＝＝ ブロックをクリック ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ✔️設定手順Step1 　管理画面

¥1,500
まりん | Shopi…

[ShopifyFlow]フロー使って注文があったら自動で「発送済」にステータスを変更してみる　#002

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は注文作成されたら配送のステータスを自動的に「発送完了」にするフローを作成してみます。 Shopifyのデフォルトの設定では注文が入ったら自動的にフルフィルメントを完了に変更できる設定はなかったので作成してみました＾＾私はShopifyでデジタルコンテンツを販売しているので、商品を送ることがないため発送ステータスは自動的に完了にするのに使ってます。 フローのおかげで、毎回、管理画面で

¥800
まりん | Shopi…