まりん | Shopifyフロントエンジニア+SNSマーケティング

国内外にてShopifyでECサイトを構築★EC構築実績:ファッション|食材|サニタリ…

まりん | Shopifyフロントエンジニア+SNSマーケティング

国内外にてShopifyでECサイトを構築★EC構築実績:ファッション|食材|サニタリーなど★ ※記事購入時注意:返金&サポート&コメント不可。メンテナンスもしません。レイアウト崩れや動作しない場合は各自で修正してご使用ください。修正ご希望時はメンバーズシップで受付けてます。

メンバーシップに加入する

Shopifyのフロントエンドの開発の記事がメインです。 でも、コードの解説などはしません。 通常、記事(有料も含め)の投稿ではコメント許可や許可をしていても返信しない方針ですが、 本メンバーシップ内でのみShopifyで ・こんなことできるの〜 ・あんなことできるの〜 とかのご質問に対してお答えしようかと思います。 ※全てのトピックに対しては厳しいかもしれません。 こちらで調べられる範囲になりますのでできなければ無理って返しちゃうかも。ご了承ください。 【得意】 ・フロントのテーマのカスタマイズ 【苦手】 ・バックエンド(アプリ開発とか) ・マーケティング/運営関係 ◆通常は個別での対応の際は1回6万でShopify関連の調査は受けていますが、 Noteですので個別ではないため特別価格で1万で対応します。 ただし、全てのご質問に対しては難しいので私の知識や時間がある時にお答えできる範囲になりますので、その辺りをご理解いただける方のみご参加いただければ幸いです。 最低でも月に1トピックになるかと思います。

  • ライト(Shopifyアプリ開発100本ノック)

    ¥1,200 / 月
  • スタンダード

    ¥10,000 / 月

マガジン

最近の記事

  • 固定された記事

[Shopify]無料App「Order Printer」で納品書/請求書を自動生成する

ご注文いただいたお客様へ商品を発送する際、納品書を自動生成してくれる無料Appをご紹介♪Shopifyの無料で使えるApp「Order Printer」は発注書や請求書も注文内容から自動で生成してくれるので便利です! ↓アプリを使わずスプレッドシートと連携する方法はこちら↓ 使用するアプリOrder Printer インストール方法Order Printerから「Add app」押下しインストール。 アプリ管理>Order Printer>対象の注文を選択 今回は納

    • [ShopifyFlow]スプレッドシート連携は使わない!GASとHTTPリクエストで注文情報をスプシに保存するFlowの作り方 #003

      こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はフローを使って注文が入ったらスプレッドシートに保存される方法についてご紹介。スプレッドシート連携は使わずにGASとHTTPリクエストを使います! コピペで設置できるようにコード用意したのでそのまま貼り付けると5分で設置できます^^ ✅今回のゴール✅設定方法👉Step1 Googleスプレッドシートを作成 1️⃣シート名「order」で作成 ヘッダーはお好みで作成。 空欄でも下記

      ¥1,000〜
      • [ShopifyApp]商品ページ訪問すると訪問回数をカウントするアプリを作るPart1「データベースの作成とシンプルな管理画面」 Remixでアプリ作成 #008

        こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 商品ページを訪れたらその訪問回数をカウントするアプリ。一応、最終的なゴールは、各商品の訪問数をカウントして管理画面で表示。次回以降の投稿で、フロントの商品詳細ページで「24時間以内にxxx件の閲覧があります!」と表示したいと思っています。 【今回のテーマ】 商品ページ訪問すると訪問回数をカウントするアプリを作る (ゆくゆくは上記から発展させて、ユーザーがログイン中には顧客管理画面の各ユー

        ¥1,500〜
        • [Shopify]ログイン後に直前に見ていたページに遷移させる(既存ファイルカスタマイズ) #128

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 デフォルト機能だと、ログイン直後にTOPに戻ってしまうので、直後に見ていたページに遷移させたいと思います。 ✔️今回のゴールシンプルに下記の動作にしたい。 例えば、カートでゲスト注文できない場合に、カート上でログイン画面へ促されてログインした後にカート画面に戻ってくる!というような感じの動きになります。 ✔️設定手順Step1 既存のmain-loginファイルを開く 管理画面>テー

          ¥1,000〜
        • 固定された記事

        [Shopify]無料App「Order Printer」で納品書/請求書を自動生成する

        マガジン

        • Shopifyコーディング100本ノック(Dawn)続編
          初月無料 ¥1,200 / 月
        • Shopifyアプリ開発100本ノック(Remix)
          8本
        • Shopify 100本ノック(Dawn編)
          112本
        • Shopify ブログテンプレート
          8本
        • メンバーシップ スタンダード 掲示板でのトピック
          12本
          ¥50,000
        • Shopify API x スプレッドシート
          24本

        メンバーシップ

        • Shopify関連でまりんに調べて欲しいこと

          この投稿を見るには 「スタンダード」で参加する必要があります
        • 記事についてのコメントやご質問

          この投稿を見るには 「スタンダード」で参加する必要があります
        • Shopify関連でまりんに調べて欲しいこと

          この投稿を見るには 「スタンダード」で参加する必要があります
        • 記事についてのコメントやご質問

          この投稿を見るには 「スタンダード」で参加する必要があります

        メンバー特典記事

          【Shopify】コレクション一覧で会員限定コレクションを特定顧客向けに表示非表示だしわけ

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 以前、商品一覧で特定商品を特定顧客向けに表示非表示する方法をご紹介しました。 今回はそのコレクション一覧バージョンです。 簡単なのでぜひ試してね。 商品一覧と基本的同じでオブジェクトをコレクションように変更しただけです。なので、コレクション一覧の方見て商品用にオブジェクト変更して応用することもできます。 🔸事前設定事前設定で顧客タグの設定と非表示にしたいコレクションIDをチェックしておく

          ¥10,000

          【Shopify】コレクション一覧で会員限定コレクションを特定顧客向けに表示非表示だしわけ

          Dawnのドロワーメニューの下層メニューをアコーディオンで表示する(SPのみ)

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Dawnのドロワーメニューの下層メニューがデフォルトだとスライドで下層メニューが出てきますが、スライド表示させずにアコーディオンでメインメニューと同一階層に表示させたい。 というコメントをいただいたので同一階層に表示するコードをご紹介します。 ✔️今回のレイアウト 🔸CMSに追加

          ¥10,000

          Dawnのドロワーメニューの下層メニューをアコーディオンで表示する(SPのみ)

          【Shopify】特定顧客タグに合わせて商品表示・非表示を出し分ける

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 商品詳細ページを特定の顧客タグの人で出し分けるのは簡単ですが、商品一覧にも表示されてしまうので、今回は商品一覧にも表示されないようにするコードを書いてみました^^ 念の為商品URLをたたいてダイレクトにアクセスされた場合にも見れないように商品詳細ページにも特定顧客タグの方のみが見れるようにしたコードを最後に載せておきます。 また、今回は対象箇所のみの変更なのでレイアウトやフィルターなどの

          ¥10,000

          【Shopify】特定顧客タグに合わせて商品表示・非表示を出し分ける

          【Shopify】商品ページの購入ボタンの下にLINEへの誘導ボタンを設置できるブロック

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 商品ページにLINEへの誘導ボタンを設置できるブロックを作成してみました。設置位置はお好みで変更してください^^ ボタンの種類は画像挿入orテキスト挿入のどちらかを選択できます。画像の選択がない場合はテキストボタンになります。 ✔️今回のゴール========= 画像挿入 ========= ========= テキストボタン ========= 🔶CMSの特徴 ブロック追加でLI

          ¥10,000

          【Shopify】商品ページの購入ボタンの下にLINEへの誘導ボタンを設置できるブロック

          【Shopify】ランキングセクション・コレクションから反映

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 メンバーシップでご連絡いただいたレイアウトに合わせてランキングセクションを作成しました。商品はコレクションを選択したら上位3つが表示され、自動的に1〜3の順位が表示されます。 ✔️今回のゴール========= パソコン ========= ========= スマホ ========= 🔶CMSの特徴 セクション追加でランキングを選択 ※2023.6.2追記 モバイル版の画像サイ

          ¥10,000

          【Shopify】ランキングセクション・コレクションから反映

          【Shopify】重ねて表示するセクション/コンテンツのサイズをセクション毎に変更(パート1)

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今回のテーマはレイアウトを重ねて表示できるセクションです。 2パターンあって、セクションを一個ずつ挿入して、それぞれのコンテンツサイズを各セクション毎に変更できます。全て同じ縦横サイズを揃える場合はパート2で紹介するブロック追加での対応になります。 🔽パート2はこちら ✔️完了イメージ🔸CMSの特徴 ==================== 各セクション毎で下記の設定ができます。 サ

          ¥10,000

          【Shopify】重ねて表示するセクション/コンテンツのサイズをセクション毎に変更(パート1)

        記事

          [Shopify]ローカルストレージを使って「最近閲覧した商品履歴」を表示する・セクションテンプレート #127

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はローカルストレージで最近閲覧した商品を保存して表示する方法についてご紹介。今回はデザインはシンプルに、8件まで閲覧履歴を表示するという仕様で作成しています。 カスタマイズ画面でのレイアウト調整版は次回出そうかと思っています。あと、色んなデザインパターンも今度紹介予定です^^ ✔️今回のゴール 🔸CMSの特徴 ✔️ローカルストレージに格納するコード下記を設置するだけでOK. {

          ¥1,500〜

          [Shopify]ローカルストレージを使って「最近閲覧した商品履歴」を表示する・セクションテンプレート #127

          ¥1,500〜

          [Shopify]ブログ記事のテンプレート第5弾♪

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopifyのブログ記事のテンプレート第5弾です。 今回はシンプルにツールバーのみをアレンジ。 カスタマイズ画面でカラーを調整できるのでサイトのトーンに合わせて使ってください^^テーブルもスマホだとスクロールできるようにしてみました。その他のサムネ画像や本文内の画像などのレイアウトは既存機能のままです。 ✔️今回のテンプレートデモページ 下記のツール対象です。 💡テーブルは横に広げ

          ¥3,800〜

          [Shopify]ブログ記事のテンプレート第5弾♪

          ¥3,800〜

          [Shopify]画像をホバーすると拡大するアコーディオン・セクションテンプレート #126

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はアコーディオンを作ってみました。ホバーすると画像が拡大するアニメーションがいい感じ。 ✔️今回のゴールデモページ SPでは説明文は長ければ「・・・」で表示される 🔸CMSの特徴 ====== 共通設定 ====== ====== ブロック設定 ====== ブロックをクリック ============================= ✔️設定手順Step1  管理画面

          ¥1,500〜

          [Shopify]画像をホバーすると拡大するアコーディオン・セクションテンプレート #126

          ¥1,500〜

          [ShopifyFlow]フロー使って注文があったら自動で「発送済」にステータスを変更してみる #002

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は注文作成されたら配送のステータスを自動的に「発送完了」にするフローを作成してみます。 Shopifyのデフォルトの設定では注文が入ったら自動的にフルフィルメントを完了に変更できる設定はなかったので作成してみました^^私はShopifyでデジタルコンテンツを販売しているので、商品を送ることがないため発送ステータスは自動的に完了にするのに使ってます。 フローのおかげで、毎回、管理画面で

          ¥800〜

          [ShopifyFlow]フロー使って注文があったら自動で「発送済」にステータスを変更してみる #002

          ¥800〜

          [ShopifyFlow]フロー使ってスプレッドシートと連携して注文されたら日付・合計・送料・税を表示されるフローを作成してみる #001

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はフローを使ってスプレッドシートと連携させてみます。オーダーが通ったら日付、合計、合計から送料とTax引いた金額、送料、税金が保存されるようにしてみました。 シンプルな項目で作ったので5分もかからずできます。ぜひ、応用してみてください^^ ✔️今日のゴールこんな感じで注文されたらスプレッドシートに2行目からデータが格納されていきます🎵 ✔️設置手順Step1  スプレッドシートを用

          ¥500〜

          [ShopifyFlow]フロー使ってスプレッドシートと連携して注文されたら日付・合計・送料・税を表示されるフローを作成してみる #001

          ¥500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part7「いいねした記事一覧をテーマに挿入できる拡張機能」 Remixでアプリ作成 #007

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日フロントのテーマにログイン中にいいねした記事一覧を表示できる拡張機能を作ります。 これで「記事にいいねボタン設置」アプリは一旦完了です!次回は別のアプリを作成していく予定にしています^^ ✔️今日のゴールフロントにいいねした記事一覧を表示。Prismaのデータに格納されたユーザーごとのいいね記事を表示。 新たにデータベースのテーブルに ・記事画像 ・記事URL を取得できるように追

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part7「いいねした記事一覧をテーマに挿入できる拡張機能」 Remixでアプリ作成 #007

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part6「アプリの管理画面に記事タイトルといいね数の一覧を表示する」 Remixでアプリ作成 #006

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 簡単なダッシュボード作っていきます。いいねしてくれた記事のタイトルとその記事のいいね数を一覧でアプリの管理画面で表示します! ▼前回Likeのモデルに記事タイトル追加したのでこれ使います ✔️今日のゴール管理画面にいいね数の一覧を表示。 ✔️作成手順📌Step1  loaderサーバーを新規作成 ❶app>routsの直下にloader.server.jsというファイルを作成 ❷下

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part6「アプリの管理画面に記事タイトルといいね数の一覧を表示する」 Remixでアプリ作成 #006

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part5「データベースに記事タイトル追加」 Remixでアプリ作成 #005

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日はPrismaで作成したLikeのテーブルに記事タイトルを入れておくのを忘れてしまってたのでそれを追加しておきます。次回アプリのダッシュボードで記事毎のいいね数を一覧で表示させたいのでそれの準備です。 (テーブル作る時に先に作っておけば良かった。。。) ▼前回の続き ✔️今日のゴール ✔️作成手順📌Step1  PrismaのLIKEテーブルに記事タイトルを追加 ❶まずはPri

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part5「データベースに記事タイトル追加」 Remixでアプリ作成 #005

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part4「いいね数0の時は総数非表示・ログイン前でもいいね数は表示」 Remixでアプリ作成 #004

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 前回までで一応いいねボタンの機能はできたんじゃないかなと思います。今日は細かいところ修正。また、次回以降ではアプリの管理画面で集計してみるのと、フロントではクリックした記事をMypageで一覧で表示させたいな〜って思ってます。 ✔️今日のゴール前回までのコードだとユーザー切り替えても切り替えてなくても、いいねのクリックを引き継いでしまって正常に動作しないと思うので今回はその辺も修正していこ

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part4「いいね数0の時は総数非表示・ログイン前でもいいね数は表示」 Remixでアプリ作成 #004

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part3「いいねを取り消す」 Remixでアプリ作成 #003

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログの各記事にいいねボタンを設置できるアプリを作っています。 前回はボタンをクリックしたらボタンを黒く塗りつぶして、ボタンの横にいいね数が表示されるようにしました。ひたすらいいね数が増加していくというところまでやったので、今日は一度いいねが押されていたら2回目クリックした時にはいいねを取り消すようにしてみます! ✔️今日のゴール(今日の時点ではログイン中のみのユーザーしかいいね数が反映さ

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part3「いいねを取り消す」 Remixでアプリ作成 #003

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part2「クリックしたらボタンカラー変更といいね数を表示させる」・Remixでアプリ作成 #002

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログの各記事にいいねボタンを設置できるアプリを作っています。 今日は前回の続き。 その記事のいいね数をいいねボタンの横に表示されるようにして、そのユーザーがすでにいいね押していた場合はいいねボタンを黒にするというところまでを作成してみます! ✔️今日のゴール✔️作成手順📌Step1 バックエンド:Loaderを更新 今回はLoaderを更新します。 下記の公式ドキュメント内にある、

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part2「クリックしたらボタンカラー変更といいね数を表示させる」・Remixでアプリ作成 #002

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part1・Remixでアプリ作成 #001

          こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログの各記事にいいねボタンを設置できるアプリを作ってみます。今日はデータベースを作成して、いいねボタンをテーマに設置してクリックしたらPOSTできるところまで作成。 ✔️今日のゴール ✔️作成手順Step1 テーブル作成 Schema .prismaで下記を追記しマイグレーション model Like { id Int @id @default(autoi

          ¥1,500〜

          [ShopifyApp]ブログ記事にいいねボタンを設置Part1・Remixでアプリ作成 #001

          ¥1,500〜