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

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

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

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

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

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

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

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

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

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

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

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

[Shopify]まとめ買い商品「一括カート追加」♪ディスカウント商品をメタオブジェクトでデータベース化してバンドル的なセクション（メタオブジェクト対応） #110

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 メタオブジェクトにデータ化した商品一覧を選択して表示させて、複数選択して一括でカートに追加できるセクションを作成。ディスカウントでXとYをまとめて購入すれば２０％OFFみたいなキャンペーンなどでお役立ち。 商品ページやTOP、ブログなどいろんなところに挿入できるので購入チャンスは増えるかも。 ✔️今回のゴール複数選択してカートに追加できる！ 🔸CMSの特徴 ✔️設定手順事前準備　メタ

[Shopify]ブログ一覧でタグ検索機能設置！セレクト＆ボタンタイプが選べるセクション・100本ノック続編（Dawn） #109

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログ一覧でタグ検索機能を設置できるセクション。セレクトかボタンタイプを選べるようにしてみました！昔のDebutテーマにはデフォルトであったけどDawnではなかったね🎵 ブログ内のタグを検索できる機能です。今回は商品タグは対象外ですが、これを応用すれば商品タグでも検索機能は付けれるので、ご興味ある方はぜひコードをチェックしてご自身で変更してみてください。 CSSはセクションファイルに埋め

[Shopify]コピペで簡単！数字がカウントアップするセクション・100本ノック続編（Dawn） #108

この記事はメンバーシップに加入すると読めます

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 数字がカウントアップされるセクション♪ ✔️今回のゴール 🔸CMSの特徴 セクションA-7を選択 ーーーーーーーーーーー ✔️設定手順Step１　新規セクション追加 1️⃣管理画面＞コード編集＞セクション＞新規追加 2️⃣下記のコードをコピペ 🔸セクションコード {{ 'section-a-07.css' | asset_url | stylesheet_tag }}{%-

[Shopify]Twentytwentyのライブラリを使って、スライドでビフォア/アフタを表示できるセクション・100本ノック続編（Dawn） #107

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 スライドバーでビフォア・アフタの画像を表示できるセクションを作ってみました！twentytwentyライブラリを使用しています。 ✔️今回のゴール 🔸CMSの特徴 ✔️設定手順🔸事前準備 jQueryを入れていないと動かないのでまだ入れてない場合は入れてください。 Step1　twentytwentyのライブラリを挿入 1️⃣下記のリンクをクリック twentytwenty.js

[Shopify]一筆文字のアニメーションがカワイイ見出しセクション・100本ノック続編（Dawn） #106

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 一筆文字のアニメーション見出しを簡単に設定できるセクションです。SVGのタグをコピペすれば簡単に使用できます。 CSSはセクションファイルに埋め込んだので今回ステップは1個だけ！めっちゃ簡単に設置もできる。 アニメーションはページを表示して各見出しにスクロールしたら1回だけ発動します。 ✔️今回のゴール 🔸CMSの特徴 「一筆書き見出し」を選択 💡テキストのSVG素材作成参考

[Shopify]iTyped.jsを使って見出しがタイピングされる画像バナーセクショ（Dawn） #101

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 既存の画像バナーセクションの見出しにタイピングアニメーションをつけてみます。今回使用するライブラリはiTyped.jsです！ 今回は既存の機能やレイアウトはそのままです。 ✔️今回のゴール 🔸CMSの特徴 既存の画像バナーの見出し入力ブロックにタイピングワードの項目を追加。 見出しの後ろにタイピングワードが表示されます！ ✔️設置方法Step1　iTyped.jsのCDNを設置