記事一覧
Shopifyセクション組み合わせてランディングページを作る！ #temp-uシリーズ
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
セクションテンプレートを組み合わせて１ページ作ってみます！
デモページ
使用したセクションはこちら[テンプレート１]
[テンプレート２]
[テンプレート３]
[テンプレート４]
[テンプレート５]
以上です！
Shopifyのお役立ち情報まとめ
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
Shopify関連で主にフロントエンド関連の記事を投稿しています。こちらに各テーマ毎にまとめておきます。
💎人気🔸定期便：100本ノックの続き
🔸Shopifyコーディング 100本ノック（Dawn編）
🔸Shopify API x スプレッドシート GASの連携
💎Shopifyテンプレート集
Shopifyメタフィールドの「リファレンス」の使い方 ＃商品編
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
メタフィールドのリファレンス内にある「商品」の使い方についてまとめます。
商品詳細ページやカート画面のクロスセル・アップセル、ブログ記事で記事内容と関連する商品を表示させたりする際に使用します。
具体的な使用例は一番下にまとめていきますね。
💡設定方法名前：なんでもOK（分かりやすい方が良いです）ネームス
![[Shopify]ブログテンプレート２♪HTMLテンプレートコード](https://assets.st-note.com/production/uploads/images/82278800/rectangle_large_type_2_44fc353a7436db983d2785234cc926ea.png?width=800)
[Shopify]ブログテンプレート２♪HTMLテンプレートコード
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
ブログのテンプレートをご紹介します＾＾
全部で11パーツのHTMLテンプレートコードを作成してみました♪
さらに、スプレッドシートでジェネレーターも作ったので一緒に添付しておきます。
✔️本日のブログテンプレートTemplate2のデモページ
（PW:stahsk40jw1Mf）
PC
SP
✔️本文用
![[Shopify]コピペで簡単♪特集記事のテンプレート１◆ブログをカスタマイズ](https://assets.st-note.com/production/uploads/images/81003961/rectangle_large_type_2_a6bacbea356dc7ad78a92be5e854700b.png?width=800)
[Shopify]コピペで簡単♪特集記事のテンプレート１◆ブログをカスタマイズ
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
特集記事のテンプレートを作成してみました♪
特集はブログ記事を使って作成します♪
HTMLのテンプレートコードでお好きなレイアウトでブログをカスタマイズしてみて下さいね＾＾
Debutでも使えたので多分どのテーマでも使えると思います。一度No.1のコードでお試しください。
✔️今回のテンプレート
デモペー
![[Shopify]コピペで簡単♪思わずMoreボタンを押したくなるようなワクワクするギャラリーセクション（Dawn）37/100](https://assets.st-note.com/production/uploads/images/75021898/rectangle_large_type_2_5e347cc1ee528ecc20c5001613c8b9a5.png?width=800)
[Shopify]コピペで簡単♪思わずMoreボタンを押したくなるようなワクワクするギャラリーセクション（Dawn）37/100
こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。
今日は思わずボタンを押したくなるようなワクワクするギャラリーセクションを作ってみました♪Shopifyサイトが格段とオシャレに！
✔️今回のゴール
◆PCレイアウト
◆スマホ&タブレットレイアウト
✔️CMS特徴◆大きい画像が左バージョンと右バージョンで選べます。
◆画像大を選択
◆コンテンツ
![[Shopify]画像&テキストセクション活用
スクロールすると画像大→小へ
ゆっくり縮小するアニメーション作る（Dawn）27/100](https://assets.st-note.com/production/uploads/images/71416399/rectangle_large_type_2_1e8a7dc09b86b80a99fb5009750fd52e.png?width=800)
[Shopify]画像&テキストセクション活用 スクロールすると画像大→小へ ゆっくり縮小するアニメーション作る（Dawn）27/100
こんにちは。まりん(@crowd37cord)です。
今日は画像がゆっくりと枠内で縮小していくアニメーションを作ってみました。コピペで簡単設置できますので、ちょっと凝ったサイトにしたい場合にお試しください。
対象テーマ：Dawn
✔️今回のゴール
今回CMSは元々のDawnテーマの「テキスト付き画像」セクションを使用していますので、追加や編集は特にしていません。CSSのみ変更しました。
![[Shopify]コピペで簡単！読み込み中ローディング設置。さらにON・OFF切替られる(Dawn)29/100](https://assets.st-note.com/production/uploads/images/71341640/rectangle_large_type_2_bca94522fda9ff57dac255bfafff2b2d.png?width=800)
[Shopify]コピペで簡単！読み込み中ローディング設置。さらにON・OFF切替られる(Dawn)29/100
こんにちは。まりん(@crowd37cord)です。
ページへアクセスした時に読み込み中ローディング機能を設置しました。ロゴ設定でロゴが表示され、ロゴ設定なしの時はテキストが表示されます。
※コードの解説記事ではありませんのでご了承ください。
✅今回のゴール
✅CMSの特徴今回はセクション追加で追加するのではなく、「固定」で設置します。これで全ページ表示されるようになります！
ロゴ画像が
![[Shopify]コレクション一覧でタイトル下に「商品説明」を表示させる(Dawn)28/100](https://assets.st-note.com/production/uploads/images/71234748/rectangle_large_type_2_0b22a48f6508abb453a1460b352dd3e0.png?width=800)
[Shopify]コレクション一覧でタイトル下に「商品説明」を表示させる(Dawn)28/100
こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。
コレクション一覧で商品タイトルの下に商品説明を表示してみます。たった1行追加するだけで表示できるようになるのでぜひ試してみてくださいね。CMSから調整できるようにするには少し複雑なんですが、ぜひトライしてみてください。
✅今回のゴール
✅CMSの特徴商品説明ON・OFF機能はデフォルトではOFFです。
新しいMacを買ったので一からShopifyのTheme kit設定し直し
Macを新しく購入して、Shopifyのテーマをローカル環境でカスタマイズしようとインストールしようと思ったら、できなくて。。。
まずは新しいMacにTheme kitをインストールしなければダメでした。２年前ぐらいに１度入れたきりで、久しぶりすぎて忘れていたw
インストール手順こちらに残しておきます。
▼インストール手順さらに、管理画面のアプリ管理の操作画面も変わっている。。。
間違って
![[Shopify]アプリ使わず、資料ダウンロードページで見込み客リスト取得（Dawn）22/100](https://assets.st-note.com/production/uploads/images/69269758/rectangle_large_type_2_1979209b2c4e597a55ae6a79c699b4de.png?width=800)
[Shopify]アプリ使わず、資料ダウンロードページで見込み客リスト取得（Dawn）22/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
今日は資料ダウンロードページを作って、ログイン中ならPDFのリンク先へ遷移し、ログアウト状態ならログインページへ遷移するセクションを作りました。ログインしないとPDF見れないので、アカウントがなければアカウントを作成していただく形になります。
まだ購入はしなくても、見込み客リストとして今後メルマガでアプローチが
![[Shopify]コピペで追従バナー設置！閉じるボタン付★LINE登録へのアプローチに便利（Dawn）21/100](https://assets.st-note.com/production/uploads/images/68956744/rectangle_large_type_2_ef5955efb84eac5f064dfb1af23d7e47.png?width=800)
[Shopify]コピペで追従バナー設置！閉じるボタン付★LINE登録へのアプローチに便利（Dawn）21/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
追従バナーのセクションを作りました♪バナーやLINE登録を促すようなバナーを挿入したり活用方法は沢山。
✔️今回のゴール
✔️手順◆事前準備
↓まだの方はこちらの手順ご参考ください↓
Step1 新規Section作成
今回はbanner-following.liquidにしました。
Step2
![[Shopify]セール商品に割引率or金額を表示する！コレクション編（Dawn）20/100](https://assets.st-note.com/production/uploads/images/68823086/rectangle_large_type_2_dc34be31efa03f60d4ee00d2e5f677e1.png?width=800)
[Shopify]セール商品に割引率or金額を表示する！コレクション編（Dawn）20/100
こんにちは。Shopify専門フロントエンジニアのまりん(@crowd37cord)です。
セール商品は自動的にセールのバッジや取り消し線が表示されますが、〇〇円OFFとか●％OFFなど、どれくらいディスカウントされたのか、パッと見わかりにくいので、自動的に計算してコレクションのセール商品に表示できるようにしてみました♪
いくら安くなったのか、お得感がすぐにわかります！
◆商品ページ編はこち