マガジンのカバー画像

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

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

#ショッピファイ

[Shopify]コピペで5分・簡単設置！オプトイン用のセクションテンプレート・アプリを使わないでサンクスページへのリダイレクト機能付 #135

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 オプトイン用のセクションテンプレート。リスト収集にお役立ち＾＾無料マニュアルプレゼントなど色々な用途で使える。例えば、Shopifyフローで自動化してメルマガ登録後にダウンロードリンク付きメールを配信する運用などと組み合わせて使っても良さそうですね♪ 今回はメルマガ登録後に別ページに遷移できるリダイレクト機能もつけてみました♪リダイレクト先を設定している場合に、登録完了後に指定したページに

¥1,500
まりん | Shopi…

[Shopify]メルマガテンプレート・第１弾・（Canva）

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ショッピファイのメルマガテンプレート第一弾です。 Canvaで画像書き出ししてショッピファイでおしゃれなメルマガを簡単に作成できます。文字や画像を変えるだけ。 全部で１４ページあります。３〜４ページでメルマガ作成するだけでもOKです。最後のフッターはおまけ。 ✔️今回のテンプレート 💡全部で１４ページ。編集自由。組み替え自由。

¥800
まりん | Shopi…

[Shopify]特集ブログ記事一覧・PCは２カラム・セクションテンプレート（Dawn） #133

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ブログ記事一覧のセクションです。ブログ２つ選んで２カラムで表示されます！バナーも追加できるようにしてみました。不要な場合はバナー設定なしにすればOK。 スクロールした時のタイトルのアンダーラインがアニメーションになっててかわいい。 今回より簡単に設置できるようにCSSは同一ファイル内に書いて、設定ステップ数を１つにしてみました。これで本当にコピペだけで5分以内に設定して使えるようになりま

¥1,200
まりん | Shopi…

[Shopify]「最近閲覧した商品履歴」をポップアップで表示する・セクションテンプレート #129

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 以前、ローカルストレージを使用した最近チェックした商品を表示するセクションをご紹介しました！今回は、その閲覧履歴の商品一覧をポップアップで表示できるセクションになります＾＾ 商品ページにアクセスしてから5秒後にモーダルが表示される仕様です。今回はStep１で完結🎵コピペで5分もかからずに設置できちゃいますね。 🔸前回の記事 以前ご紹介した、ローカルストレージに閲覧履歴を保存するコードを

¥1,200
まりん | Shopi…

[Shopify]コピペで簡単♪会員登録規約ページ設置方法（Dawn）77/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は会員登録をしてもらう際に規約を表示して同意する&同意しないボタンを設置したページを作成しようと思います。 同意するボタンを押したらアカウント作成画面へ 同意しないボタンを押したらTOPページへ遷移する という動作にしようと思います。 今回は会員規約のみで次回はログイン画面から遷移できるようにしてみようと思っています。 ✔︎今回のゴール ◆CMSの特徴 ✔︎設置手順Step1

¥1,200
まりん | Shopi…

[Shopify]ブログ記事のテンプレート第4弾♪（Dawn）

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 Shopifyのブログ記事のテンプレート第４弾です。 今回はシンプルにツールバーのみをアレンジ。 ✔️今回のテンプレートデモページ： ①アクセス（PW:stahsk40jw1Mf） ②ここのブログにテンプレート４を使用しています 文字のカラーはツールバーから変更してください。 各見出しの枠線や背景カラーは共通で設定するようにしているのでCMSから設定してね。 テンプレート４は次のページ

¥3,800
まりん | Shopi…

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

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

¥800
まりん | Shopi…

[Shopify]カートで既にカート追加商品は商品一覧から非表示にできるクロスセルを作ってみる（Dawn）55/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 カートページにカートに表示したいコレクション一覧を作ってクロスセルっぽくしていましたが、さらに、追加されている商品IDと照合して、クロスセル側は既にカートに入っている商品は表示しないで他の商品のみ表示するようにしてみました。 ✔️今回のゴールデモページ（PW:stahsk40jw1Mf） https://malins-100.myshopify.com/ ✔️CMSの特徴※CMS作業中は

¥800
まりん | Shopi…

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

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

¥5,800
まりん | Shopi…

[Shopify]コピペで簡単♪商品一覧にカート追加ボタンをつける（Dawn）48/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 最近Dawnのバージョン５では商品一覧とかこの商品おすすめ！の特集コレクション機能にカート追加ボタンを設置できる機能が出来ましたね♪ 便利なのですが、バージョン４以下の場合はやはりカスタマイズをしないとダメ＞＜　なので作ってみました。 商品詳細画面に毎度入らなくても良いので便利＾＾ ✔️今回のゴール デモページ（PW:stahsk40jw1Mf） 商品一覧＞Quick Cartで見

¥800
まりん | Shopi…

[Shopify]コピペで簡単♪特集記事のテンプレート１◆ブログをカスタマイズ

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 特集記事のテンプレートを作成してみました♪ 特集はブログ記事を使って作成します♪ HTMLのテンプレートコードでお好きなレイアウトでブログをカスタマイズしてみて下さいね＾＾ Debutでも使えたので多分どのテーマでも使えると思います。一度No.1のコードでお試しください。 ✔️今回のテンプレート デモページ PW:stahsk40jw1Mf ◆PC版 ◆モバイル ✔️テンプレー

¥3,800
まりん | Shopi…

[Shopify]コピペで簡単設置！ランディングページ◆テンプレート4

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 ランディングページシリーズ第４弾♪ このシリーズも人気がありますね＾＾ ファーストビューにメルマガ登録フォームをつけてみました♪メルマガ機能はShopifyのデフォルト機能を使用しているので仕様は同じになります！ （ちなみに、Shopifyのメルマガ機能は一つ残念なところがあり、一度ユーザーがアクティブにすると、２回目の送信フォームを送っても何も起こらない。。。非アクティブのユーザーのメ

¥5,000
まりん | Shopi…

[Shopify]商品詳細のバリエーションを表型で表示させて一目で見やすくする(Dawn) 46/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 今日は商品ページのバリエーションの選択機能を表型にしてみました。デフォルト機能だと、丸ボタンかプルダウン型のバリエーションピッカーしかありません。 丸型とプルボタンの場合、金額や在庫切れなどが毎回選択しないと見れないのでユーザーフレンドリーではありませんよね。選択するまで分からないので、これだ！と思って選択したら「在庫切れかよ〜」とちょっとテンション下がっちゃいます。 せっかくオンライン

¥800
まりん | Shopi…

[Shopify]ファーストビューに検索機能＋サジェストキーワードをポコポコ追加できるセクション(Dawn) 44/100

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。 先日ご紹介した背景＋検索機能つきのメインビジュアルのセクションに、サジェストキーワードを追加できる機能をつけました♪ ↓前回の記事↓ キーワードはCMSから追加・編集・削除ができます♪ 検索窓だけあってもどんなキーワードで探したらいいのかわからず、結局使わないことって私はよくあるんですよね〜 なので、そんな私のようなユーザー向けにサキーワードで教えてあげて、クリックすると、検索画面へ

¥800
まりん | Shopi…