マガジンのカバー画像

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

人気のShopifyコーディング100本ノックシリーズの続編。現在の100本ノックマガジンで100本記事投稿した後はこちらで更新していきます。「Shopifyコーディング100本…
【月２回程度更新】1記事ずつよりも定期購読の方がお得。「Shopifyコーディング100本ノック（…
¥1,200 / 月 初月無料
運営しているクリエイター
まりん | Shopifyフロントエンジニア+SNSマーケティング

#副業

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

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

¥3,800
まりん | Shopi…

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

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

¥800
まりん | Shopi…

【GAS】商品のメタフィールドをスプレッドシートに反映してみる＃07 (ShopifyAPI + GoogleAppsScript)

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopifyの商品情報をCSVでエクスポートできるのですが、メタフィールドは反映されないのでスプレッドシートで取得してみました♪ ✔️今回のゴール✔️作成手順まずは事前準備。Shopify APIを取得していない場合は先に発行しておいてくださいね。手順は下記に書いています。 ◆アクセススコープ 今回は商品のメタフィールドの値を取得しようと思いますので商品管理のリードにチェックを入れて

¥1,200
まりん | Shopi…

[Shopify]手順が一目でわかるステップセクションを設置（Dawn）71/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はステップで手順を見せたい時に使えるセクションを作ってみます。 手順がわかりやすければ問い合わせも減りオペレーション工数が減らせる♪ ✔️今回のゴール◆PC ◆SP 縦線は一番最後のステップ見出しまで表示。 ◆CMSの特徴 ✔️設置手順Step1 セクションを新規作成 管理画面＞テーマ＞コード編集＞セクション＞新規セクション追加

¥1,000
まりん | Shopi…

[Shopify]メタフィールドのJSON使って商品ページにグラフを表示できるブロック（Dawn）65/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 コーヒー豆販売しているお店とかって、苦味や甘味とかスッキリ度とかがグラフや星マークの数とかで分かりやすく表示されていますよね。 商品詳細にその商品のステータスが一目でわかるようなブロックを追加してみました。 メタフィールドのJSONを使用します。 ※コーディングの解説記事ではありません。 ✔️今回のゴール ◆CMSの特徴 ✔️設置手順Step1　メタフィールドの商品で定義追加

¥800
まりん | Shopi…

[Shopify]ブログ記事の「次の記事/前の記事」ボタンを挿入できるセクション（Dawn）62/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はブログの記事で次の記事&前の記事へ遷移できるボタンを設置できるセクションを作成してみました。デフォルトだと「ブログへ戻る」しかなくて記事一覧に毎度戻らないといけないので面倒だなぁと思い作ってみました。 ✔️今回のゴール◆デモページ 手順❶ ここをクリック（PW：stahsk40jw1Mf） 手順❷ 参考ブログ→こちら SPは前の記事ボタンと次の記事ボタンが縦に２つ並びます。 ◆C

¥800
まりん | Shopi…

[Shopify]メタフィールドで商品一覧（コレクション）にバリエーションのカラーを色で表示する（Dawn）61/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 以前、商品詳細にカラーのバリエーションが設定されていた場合に文字ではなく色で表示する方法をご紹介しました。今回はそれのコレクションバージョンです♪ 商品一覧にカラーを表示させてみます！ ✔️今回のゴール今回はカラーバリエーションを一目で確認できるようにしたかったので、クリックしても何も起こらないです。 挿入する位置によってはクリックすると商品詳細ページに遷移すると思います。 設置箇所は

¥800
まりん | Shopi…

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

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

¥800
まりん | Shopi…

[Shopify]ランディングページ◆テンプレート7

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今回のテンプレートはキャンペーン用というよりかは、AboutUsのページになります。 ✔️今回のテンプレートデモページ（stahsk40jw1Mf） ◆CMSの特徴 ブロックは５種類 ◆共通設定 強調したい文字を[<span class="color_highlight">xxx</span>]で囲む。HTMLで入力できるところで使用できます。 ◆ファーストビュー ◆ス

¥5,800
まりん | Shopi…

[Shopify]各商品ページにその商品についてのお問合せフォームをモーダルで表示（Dawn）56/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 チャットbotのアプリとか入れてないので、商品について問合せを気軽にしてもらえるように各商品ページからフォームでその商品について問合せられるようにしてみました♪ フォームのこの商品についてのところに自動的に今開いている商品ページの商品名が表示され（固定）、ショップオーナーの受信メールにはお問合せ商品名が自動的に反映されています。 購入に至らなくてもその後のアプローチに役立てられるかなぁと

¥800
まりん | Shopi…

[Shopify]メタフィールド使って商品一覧にタイムセールのタイマーを設置（Dawn）54/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 コレクションのメタフィールドを使って、タイムセールのタイマーを設置できるセクションを作ってみました♪ 今回は各コレクション毎に設定するバージョンなので、複数コレクションがあれば全ページに個別に期間を設定していく必要があります。 全ページ固定バージョンはまた次回作ってみようかな。 ✔️今回のゴール ✔️CMSの特徴 ✔️設置手順Step1 メタフィールドの設定 設定＞メタフィールド

¥800
まりん | Shopi…

[Shopify]ランディングページ◆テンプレート6

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ランディングページのテンプレート第６弾！ 今回はかっこいいをテーマにしてみました♪ SNS広告を打って、そのまま商品購入してもらえるようなLPにしてみました。 DEMOページ（stahsk40jw1Mf） https://malins-100.myshopify.com/pages/lp6 ※デモページの内容は全てダミーです 日本語で書くのがめんどくさくてデモ&CMS内の文言は全て英

¥5,800
まりん | Shopi…

[Shopify]この商品購入している人はこれも買ってるよぉというセクション（Dawn）53/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 各商品ページにおすすめ商品を見せるセクションはありますが、個別に指定ができないので、メタフィールドを使って、各商品ごとにおすすめ商品を指定できるセクションを作ってみました♪ このセクションを複数追加した入りして、ファッション系ショップだったら「この商品とコーディネートするとばっちり」とか「おすすめ」とか複数追加すると見やすくなるかもね＾＾ ✔️今回のゴールデモページ（PW：stahsk4

¥800
まりん | Shopi…

[Shopify]ヘッダーのメガメニューにバナーをつける◆新しめverのみ対応（Dawn）52/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Dawnのヘッダーメニューにver5あたりからメガメニューが追加されるようになりコーディングせーへんくても、ワイドなメニューが使えるようになって便利になりましたね♪ そこに各メニューごとにバナーを設置できるようにしてみました♪ バージョンが古いDawnではメガメニューがないんで今回はバージョン５以降のメガメニューあり版でご紹介します。古いバージョンは次回ご紹介しますね。 ✔️今回のゴー

¥800
まりん | Shopi…