PeiWebさんのフィード

Shopifyテーマ「Dawn」のフッターをよくあるフッターへカスタマイズ

PeiWeb — Wed, 03 Jan 2024 13:35:35 GMT

こんばんは。PeiWebです。今回は、shopifyテーマ「Dawn」のフッターをカスタイズしていきます。完成形まずは、完成形を見ていきます。 PC版 PC版 sp版(スマホ版) sp版赤枠のところを実装していきます。主にロゴ/複数のメニュー表示/SNSアイコンの表示を実装していきます。参考までに、デフォルトのテーマは以下のようになっております。デフォルトのヘッダー正直、メール登録しかないので味気ないですね笑 ! 【ご注意】 ※最新のDawnテーマ対象です。(バージョン12.0.0) 　別テーマでも使用できるかもしれませんが検証はしてません。 ※環境によりレイア...

ポップアップバナーのセクションの作成

PeiWeb — Wed, 09 Aug 2023 08:46:57 GMT

こんばんは。PeiWebです。今回は、トップページにポップアップバナーのセクションを制作してみました✨　動的に、バナーを表示するまでの時間と表示期限を設定できるスキーマを設定しました。よく使うので備忘録として残しておきます。完成形まずは、完成形を見ていきます。 ■スマホ版 ■PC版 ! 【ご注意】 ※最新のDawnテーマ対象です。(バージョン11.0.0) 　別テーマでも使用できるかもしれませんが検証はしてません。 ※環境によりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。それでは、実装していきます。 Liquidを用いたカスタマイ...

【1から丁寧に解説】GASを用いた自動返信メールの作成

PeiWeb — Sun, 29 Jan 2023 14:13:41 GMT

Googleフォームから送信されたメールアドレス宛に、自動でメールが返信されるスクリプトを記載しております。

【shopifyテーマ開発】サイト内検索のセクション作成

PeiWeb — Sun, 15 Jan 2023 07:01:14 GMT

こんばんは。PeiWebです。今回は、トップページにサイト内検索するセクションを制作してみました✨ 完成形まずは、完成形を見ていきます。通常、デフォルトのバリデーションの設定では以下のようになっていますが、 ! 【ご注意】 ※最新のDawnテーマ対象です。(バージョン7.0.1) 　別テーマでも使用できるかもしれませんが検証はしてません。 ※環境によりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。それでは、実装していきます。 Liquidを用いたカスタマイズ早速、実装していきます。まずは、いつも通り、Schemaから定義していきます。...

【初心者にわかりやすく解説✨】メタフィールドを用いて、商品詳細ページのカスタマイズ

PeiWeb — Tue, 03 Jan 2023 15:55:04 GMT

こんばんは。PeiWebです。今回は、メタフィールドを用いて商品詳細のページを一部カスタマイズしてみました✨ 完成形まずは、完成形を見ていきます。通常、デフォルトのバリデーションの設定では以下のようになっていますが、デフォルトのバリデーションの設定色のバリデーションを変更させ、以下のように色で選択できるようにしていきます。完成形赤色の枠のところを実装していきます。 ! 【ご注意】 ※最新のDawnテーマ対象です。(バージョン7.0.1) 　別テーマでも使用できるかもしれませんが検証はしてません。 ※環境によりレイアウト崩れることもありますので適当にCSSで調整していただけ...

【1から解説！】Shopify CLIとGitHubを連携し、shopifyテーマ開発の手順を解説

PeiWeb — Mon, 26 Dec 2022 10:09:38 GMT

こんにちは。PeiWebです。本日は、Shopifyのテーマ開発する際の基本的な流れを解説していきます。テーマ開発方法まず、テーマ開発の手順は以下の２通りあります。 1.Shopify CLIを使う方法 2.GitHubと連携して使う方法 ! テーマ開発は、基本的に、2.GitHubと連携する方法を利用します。ただ、一文だけ変えるというちょっとした変更であれば、初期設定のいらないShopify CLIを使いで変更する場合もあります。そのため、今回はShopify CLIとGitHubと連携して使う方法を解説していきます。また、ローカルで変更する場合は、事前にpullしてから...

【レスポンシブ・アコーディオン付き】Flexboxを駆使したナビゲーションメニューを作成

PeiWeb — Sun, 28 Aug 2022 12:43:31 GMT

こんにちは。PeiWebです。前回の記事に引き続き、Flexboxの復習がてら、ECサイトで使うナビゲーションメニューを実装したので共有します。完成図 PC PC版(1500px程度) タブレットタブレット版(750px程度) スマホスマホ版(400px程度) ※黒い枠線は関係なしまた、「絞り込み検索」をクリックすると、アコーディオン実装結果 ※黒い枠線は関係なし上記のような画面になるようにしました。次に、コードを見ていきます。 HTML index3.html ...

【Flexboxの解説付き】Flexboxを用いて、大きさが異なる画像をきれいに並べてみた

PeiWeb — Tue, 16 Aug 2022 09:50:53 GMT

こんにちは！ PeiWebです。今回は、Flexboxの復習も兼ねて、複数の画像をきれいに並べてみたので残しておきます。 flexboxの基礎的なことなのでいい復習になりました。まずは、完成図から、完成図 (PC版) PC版完成イメージ完成図 (sp版) sp版完成イメージ ! PC版では、一列に4つの画像を配列するように並べ、sp版では、1列に2つの画像を配列するようにしました。次に、コードを見ていきます。 HTML HTML

【shopifyテーマ開発】shopify無料テーマ「Dawm」コレクションページをLiuqidを用いて実装

PeiWeb — Thu, 04 Aug 2022 13:24:19 GMT

こんにちは。PeiWebです。今回はshopifyの無料テーマ「Dawn」のコレクションページをカスタマイズしていきます。デフォルトのページ「Dawn」のコレクションページを見せてからどのように変化したのか示していきます！では、まずは「Dawn」のデフォルトのコレクションページはこちら！ ! 今回は、shopifyの管理画面で、「T-シャツ」のコレクションを設定しております。デフォルトのコレクションページでは、 -コレクションバナー →こちらは、左側に、管理画面で設定したコレクションの「タイトル」と「説明文」が入りますね。右側にコレクションの「画像」が入るようになっており...

【shopifyテーマ開発】Liquidを用いて記事の下にシェアボタンを実装

PeiWeb — Sat, 30 Jul 2022 08:30:00 GMT

こんばんは。PeiWebです。前回の記事に引き続き、記事のカスタイズに関する備忘録です。完成形赤色の枠のところを実装していきます。 ! シェアボタンでは、以下のことができるようになっております。 -ボタンの表示/非表示の切り替え -表示位置の調整 - 左に表示、中央表示、右に表示 -シェアボタンの大きさを変更実装していきます。 JSON json { "sections": { "article": { "type": "article" } }, "order": ["article"] } ここは、前回と変わらず、arti...

【shopifyテーマ開発】ブログ記事の「次の記事へ」「前の記事へ」ボタンをLiquidを用いて実装

PeiWeb — Thu, 28 Jul 2022 10:00:00 GMT

こんにちは。PeiWebです✨ 今回は、shopifyにおいて、ブログ記事のページネーションを実装したので、　備忘録として残しておきます。　デフォルトでなくて、アプリを入れると有料だし自分の好きなようにできないので、実装しました。まずは、完成形から。。完成形完成形* チェックボックスにして、表示/非表示を選択できるようになっております。ページネーションは、再利用できるのでめっちゃ便利です。。 JSON まずは、jsonファイルをいじってきます。 json { "sections": { "article": { "type": "article" ...

【shopifyテーマ開発】おしゃれなFAQページをLiquidで実装

PeiWeb — Mon, 25 Jul 2022 10:30:00 GMT

こんにちは。PeiWebです。今回は、shopifyでFAQを実装したので、アウトプットします。使い回しもできるのでけっこうおすすめです。完成形完成したFAQページまずは、FAQの固定ページを作成していきます。 jsonファイルの作成 json { "sections": { "main": { "type": "main-page-faq", "settings": {} } }, "order": ["main"] } ! 今回は、FAQページを作成するセクションを読み込ませたいので、typeをmain-pag...

【Shopify構築】よくある特徴ページをLiquidを用いて実装してみた

PeiWeb — Sat, 23 Jul 2022 05:14:18 GMT

今回は、Liquidを使って、よくある特徴ページを実装したんで備忘録として残しておきます。イメージはこんな感じです。完成イメージ jsonファイル aboutページを作るんで、jsonを定義しておきます。今回は、メールフォーム、タイトルとかも入れたいんで、jsonに書いておきます。 page.about.json { "sections": { "main": { "type": "main-page", "settings": { "padding_top": 36, "padding_bottom...