[Shopify]ブログ「一覧」のテンプレート#3 メインビジュアルはメタオブジェクトと連携すると◎

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログ一覧のオリジナルレイアウト。メインビジュアルの部分はメタオブジェクトと連携して使えるようにしてみました。 ✔️今回のテンプレートAll Postの記事一覧の上にメインビジュアルと新着記事を挿入してみました！記事一覧は元々のレイアウトですが、抜粋のテキスト非表示にしてタイトル、日付、タグが表示されるようにしています。 ＝＝＝＝ パソコン ＝＝＝＝ ＝＝＝＝ スマホ ＝＝＝＝ 全て

[Shopify]トップページのリッチテキストセクションでもメタオブジェクトを使えるようにしてみる（メタオブジェクト対応） #103

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 トップページでリッチテキストセクションを使用する際にメタオブジェクトのデータを連携させようと思ったらトップページではメタオブジェクトが反映できなかった。。。 なのでトップページでもメタオブジェクトが使えるようにカスタマイズしてみました！レイアウトはそのままでちょっとだけメタオブジェクト仕様にしただけなので簡単です♪ ✔️今回のゴールメタオブジェクトで設定した値を、 「リッチテキスト」セ

[Shopify]メルマガ登録フォームに顧客名入力欄を作って顧客管理にも反映されるようにする（メタオブジェクト対応） #102

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

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 デフォルトのメール登録セクションではアドレスのみの登録なので、購入前のお客様の場合、顧客管理の顧客名がメールアドレスになってしまいますよね。。。 メルマガ送る時に〇〇さんと入れたいので、メルマガ登録フォームに顧客名入力欄を作ってみました♪ TOPページ以外のページでメタオブジェクト・メタフィールドを使えるようにしています。TOPページでメタオブジェクト・メタフィールドを使用するバージョン

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

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

[Shopify]オリジナルセクション6　#カルーセル

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 オリジナルセクションシリーズ🎵 コレクション商品一覧を表示するカルーセルセクション！商品画像、タイトル、リンク先は既存の商品と連携。説明箇所は商品のメタフィールドと連携したセクションテンプレートです。 今回はSplidejsのライブラリーを使用してカルーセルを作ってみました。スワイプまたは矢印ボタンで商品画像が一つずつ左右に動きます＾＾ 中央に来た時に大きくなるアニメーションがカワイイ💖