マガジンのカバー画像

Shopify 100本ノック(Dawn編)

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

記事一覧

[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

[Shopify]複数の画像組み合わせ!アニメーションカラムセクション #120 #temp-t

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 セクションテンプレート「Tシリーズ」第二弾。 「Tシリーズ」第一弾と組み合わせると良い感じのLPが作れちゃいます^^ アニメーションカラム。スクロールすると画像が動くのでいつものDAWNがちょっとリッチに🎶 ✔️今回のゴールデモページ 🔸CMSの特徴 「セクション T-2」を選択 ▪️ブロックでカラム追加 ===== ブロック内の設定 ===== ===== 共通の設定 ===

¥1,500

[Shopify]問い合わせフォームに色々な項目を追加できるセクション・必須項目があれば送信ボタンが無効になる機能付 #112

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 既存のお問い合わせフォームに色々項目を増やせるセクションを作ってみました。会社名やフリガナ、プルダウンで選択できたりラジオボタンを追加したりできます^^ 必須かどうかも設定できるようにしていて、必須項目を全て入力しないと送信ボタンが有効にならないようにしています。 ✔️今回のゴール 🔸CMSの特徴 設定手順はこちら。

¥1,500

【Shopify】ブログ記事に「役立った/役立ってない」ボタンを設置してスプレッドシートにデータを記録できるセクション #111 (GASも使う)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 各ブログ記事にお役に立った? 立ってない?ボタンを設置してフィードバックをもらえるセクションを作ってみました^^ GASでボタンがクリックされるとスプレッドシートにタイムスタンプ、記事ID、タイトル、GOOD/BADの評価が記録されていきます。 ピポットテーブルやクエリなどで集計したりして活用してみてね。 ✔️今回のゴール あとはお好みでピポットテーブルやクエリなどで集計シートを作っ

¥1,200