Shopifyコーディング100本ノック（Dawn）続編

人気のShopifyコーディング100本ノックシリーズの続編。現在の100本ノックマガジンで100本記事投稿した後はこちらで更新していきます。「Shopifyコーディング100本…

【月２回程度更新】1記事ずつよりも定期購読の方がお得。「Shopifyコーディング100本ノック（…

¥1,200 / 月初月無料

運営しているクリエイター: まりん | Shopifyフロントエンジニア+SNSマーケティング

[Shopify]ブログ一覧のテンプレート#1（Dawn）

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。今日はブログ一覧のテンプレートのご紹介です。 PCは2カラムで左側に記事一覧、右側は上がバナーで下におすすめ記事が表示されます。SPは記事一覧の下にバナーとピックアップした記事が一列で表示されます。右上バナーとおすすめ記事はメタフィールドを使用します。今回のメタフィールドは以前ご紹介したページとブログをコラボしたバージョンとTrue/False を使用しています。おすすめ記事のタイ

¥3,800

[Shopify]ブログ用メタフィールド使って記事一覧にLPと紐づいたバナー設置できるセクション（Dawn）60/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。今日はブログ一覧にPagesで作成したLPを選択してバナーを設置します。 ①Pageのメタフィールドでバナー設置機能を追加。 ②BlogのメタフィールドでPageのLPを選択するだけで、そのページのメタフィールドで設定したサムネとリンク先を引っ張ってくるといった動作になります。 ✔️今回のゴール PCの場合は横並び３つのバナーを設置する想定で作成してます。それ以外の数の時は確認し

¥800

[Shopify]商品ページにSNSシェアボタンを追加する（Dawn）59/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。商品ページにSNSシェアボタンを設置してみました♪ テーマによってはSNS毎のシェアボタン付いてましたが、DawnだとシャアするボタンがテキストリンクのみでしかもURLをコピーするだけ。スマホの機能でシェアできますが、ボタンがあると押したくなるかな、、、な〜んて期待を込めて設置してみました。対応SNSボタンはTwitter、Facebook、LINE、Pinterestの４つ。 ✔

¥500

[Shopify]「新商品」バッジを表示して商品公開日から○日間を計算して自動で非表示にする（Dawn）58/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。今回は商品を公開した日にちを自動取得して、指定した日数の期間だけ「新商品」バッジを表示して、指定期間が過ぎるとバッジを自動的に非表示にするようにしてみました。例えば、公開後30日間はNew Arrivalのバッジを表示させておいて、31日目にバッジが非表示になっているという仕様になります。手動でやらなくても、各商品の公開日を自動取得して、CMSで希望の期間とバッジの画像を設定しておけば運

¥500

[Shopify]メタフィールドのJSON使ってブログ本文の手前に吹き出し&アイコンを入れてみる（Dawn）57/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。ブログの本文の手間にアイコン&吹き出しを入れてみようと思います。今日はメタフィールドのJSONを使ってみます♪ メタフィールドめっちゃ便利ですね＾＾ ✔️今回のゴール ✔️設置方法Step1　ブログ記事のメタフィールドを定義する管理画面＞メタフィールド＞ブログ記事作成したメタフィールドの定義をどこかにコピーしておく Step2 既存のブログ記事リキッドファイルにメタフィール