マガジンのカバー画像

Shopify 100本ノック(Dawn編)

118
Shopify コーディング100本ノック。Dawn テーマを使用しています。
運営しているクリエイター

記事一覧

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

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

¥800

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

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

¥1,200

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

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

¥1,200

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

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

¥800

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

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

¥800

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

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

¥1,200

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

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

¥1,000

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

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

¥1,500

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

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

¥1,500

[Shopify]ブログ一覧の記事表示数をカスタマイズ画面で設定できるようにする(既存テンプレート使用) #125

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Dawnのデフォルトテンプレートではブログ一覧で表示させる記事数を指定できなかったような気がする。。。もしかしたら変えれるかもですが、カスタマイズ画面から簡単に記事数変更できるようにしてみました^^ レイアウトはそのまま使用しているので、該当箇所のコードを変更&追記するだけ! ✔️今回のゴールシンプルにブログ記事のカスタマイズ画面で1ページに表示する記事数を設定できる機能を追加。 今回

¥800

[Shopify]商品一覧に新着バッジ機能を追加🎶商品作成日から〇〇日表示と表示期間設定できる(既存テンプレート使用) #124

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は既存の商品一覧ページに、新着バッジを付与する機能を追加してみました。カスタマイズ画面で商品作成日から何日まで表示するのかを指定できるので便利。 テキストまたは画像でバッジを設定できる。画像が優先されるのでテキストバッジを使用したい場合は画像の設定はなしにして使用してね。 {{ product.created_at}}を使用して商品作成してから20日間表示させるとか、日付をカスタマイ

¥800

[Shopify]対象商品購入者のみ記事の続きが読めるブログテンプレート・メタフィールドで設定した商品と紐付け🎶 #123

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 前回、商品を購入した人向けの特典ダウンロードセクションの作り方をご紹介しました。今回はその応用で、ブログ記事に前回使ったロジックを使ってNoteみたいな有料記事のテンプレートを作成してみました^^ ▼過去の記事の続き 今回は下記の流れになります。 ❶記事のメタフィールドで商品を選択できるようにする。(事前に対象ブログを購入する商品ページを作成する必要あり) ❷ブログの本文内のどこかに「こ

¥1,500

[Shopify]対象商品購入者のみダウンロードできる特典配布セクション・メタオブジェクト&メタフィールド連携 #122

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 前回はログインユーザー全員に向けた特典ダウンロードセクションをご紹介しました。今回はその続編の対象の商品を購入したお客さんだけに特典をお渡しするセクションを作成しました。 ▼前回の記事はこちら 商品Aに特典1と2を設定しておいて、商品Aを購入した人のみがダウンロードできるというセクションです。前回はユーザー登録さえすれば誰でもダウンロードできるよ〜という登録促しようのセクションでしたが、

¥1,500

[Shopify]ログインユーザーのみダウンロードできるセクション・メタオブジェクト連携 #121

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ログイン中ユーザー向けの資料ダウンロードセクション^^資料ダウンロードでなくてもYoutubeのリンクにしたり、使い道は色々🎶 画像・タイトル・ボタンのシンプルなデザインにしてみました〜。メタオブジェクトと連携しているので、データはメタオブジェクトで設定した値が表示されます。 マイページやや商品、ブログなどいろんなところに挿入してみてね。 ✔️今回のゴール 🔸CMSの特徴 🔸メタオ

¥1,500