ツクるツボ
【Shopify】DawnのVer.9.0.0対応！スライドショーの画像にリンクをつける！
ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか？このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ！以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで？ スライドショーの画像にリンクをつける！ 前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。 { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...
【Shopify】DawnのVer.9.0.0対応！スライドショーの画像にリンクをつける！
ゴールデンウィーク真っ只中、皆さんはどこへ行かれていますか？このブログを期間中に見ているということは、あなた…ということで、今回はDawnがVer9.0.0の最新バージョンにアップグレードされて、大きく中身が変わりましたので、スライドショーの画像にリンクをつけなおそうと思います。無料のテンプレートをしっかりアップグレードしてくれるShopify流石でございます。一生ついていくから一株ゆずってくれぇ！以前にもブログで紹介しましたが、あのまま新しいテンプレートにコードをコピペするとレイアウトが崩れます。なぜなら、スライドショーが一新されておしゃれになったからです。しかし、相変わらず標準で画像自体にリンクをつけさせてくれません。なんで？ スライドショーの画像にリンクをつける！ 前回のようにセクションのslideshow.liquidを編集します。以下のコードをスキーマーのblocks内、type: urlの下に分かりやすく設置しましょう。 { "type": "url", "id": "image_link", "label": "Image Link" } そして次にhtmlをコーディングします。以下のコードをいれます。 {% if block.settings.image_link %} <a href="{{ block.settings.image_link }}" class="slideshow__slide grid__item"> {% endif %} {% if block.settings.image_link...
【Shopify】自動で新着商品に”NEW”のラベルを付ける！
ホグワーツレガシーで15時間プレイしてやっと箒に乗るところまで来ました無能な働き者ルシウス・マルフォイです。ハードモードが思った以上にハードで禁じられた森のクモやカエルに一生ボコられていました（笑） 今回は自動で新規登録した商品や、期間限定の商品に対して”新着”や”SALE”などのラベルを付けたり外したりしてくれるコードを紹介します。 前回のおさらい 設定からカスタムデータでメタフィールドを作成するということをご紹介しました。そして、card-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内に以下のコードをコピペしたら商品情報で設定したラベルが表示されるというものでしたね。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%}...
【Shopify】自動で新着商品に”NEW”のラベルを付ける！
ホグワーツレガシーで15時間プレイしてやっと箒に乗るところまで来ました無能な働き者ルシウス・マルフォイです。ハードモードが思った以上にハードで禁じられた森のクモやカエルに一生ボコられていました（笑） 今回は自動で新規登録した商品や、期間限定の商品に対して”新着”や”SALE”などのラベルを付けたり外したりしてくれるコードを紹介します。 前回のおさらい 設定からカスタムデータでメタフィールドを作成するということをご紹介しました。そして、card-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内に以下のコードをコピペしたら商品情報で設定したラベルが表示されるというものでしたね。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%}...
【Shopify】商品一覧画面にNEWのラベルのつけ方
こんにちは！最近ホグワーツレガシーを先行プレイしてウハウハの我が君です。賛否両論分かれる評価でしたが、神ゲー確定です。どこが凄いのか説明したいんですが、こういうタイトルに関係ない話をだらだら語りだすブログって超嫌いなんですよね。今回はこんな感じに商品一覧にNEWや新着商品、期間限定みたいなラベルを付ける方法をお教えします。 使用しているテーマはDawnです。原型留めてないですけど（笑） メタフィールドを新規作成 とにかく先にメタフィールドで定義をつくることから始めましょう。設定からカスタムデータに入り定義します。画像の説明をしますと名前は商品情報のページ（商品管理のページの）で何を定義しているのか分かるように設定しましょう。セールなら”セール”だったり”期間限定”にしたり。ネームスペースとキーはliquidでコーディングするのに必要な項目です。新規で登録する際に”custom.”と入っていますが消して自分の好きな感じで定義していいです。でも分かりやすい名前に定義しておきましょう。新商品なら"newarrival_〇〇"セールなら"sale_〇〇"みたいな。説明は何を定義したものなのかとか、このメタフィールドの使いどころとか明記しておきましょう。タイプではいくつか用意されていますが、”NEW”や”SALE”のような単語を貼りたいので”単一行のテキスト”にしましょう。メタフィールドは極めれば、例えばカラーピッカーを表示してお客さんに好みの色を選んでもらったり、弊社のようにデータを送ってもらったり、ラッピングが必要か？の選択をしてもらうことができます。今後そこもお教えします。 コードを編集する メタフィールドのネームスペースとキーで作成したのを入れ込みます。ここではコーディングが必要になってきますので頑張っていきましょう！…といいたいところですがコピペしたらできるようにコードを貼っときます。スニペットのcard-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内にコピペしてください。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%} 全体のコードです。...
【Shopify】商品一覧画面にNEWのラベルのつけ方
こんにちは！最近ホグワーツレガシーを先行プレイしてウハウハの我が君です。賛否両論分かれる評価でしたが、神ゲー確定です。どこが凄いのか説明したいんですが、こういうタイトルに関係ない話をだらだら語りだすブログって超嫌いなんですよね。今回はこんな感じに商品一覧にNEWや新着商品、期間限定みたいなラベルを付ける方法をお教えします。 使用しているテーマはDawnです。原型留めてないですけど（笑） メタフィールドを新規作成 とにかく先にメタフィールドで定義をつくることから始めましょう。設定からカスタムデータに入り定義します。画像の説明をしますと名前は商品情報のページ（商品管理のページの）で何を定義しているのか分かるように設定しましょう。セールなら”セール”だったり”期間限定”にしたり。ネームスペースとキーはliquidでコーディングするのに必要な項目です。新規で登録する際に”custom.”と入っていますが消して自分の好きな感じで定義していいです。でも分かりやすい名前に定義しておきましょう。新商品なら"newarrival_〇〇"セールなら"sale_〇〇"みたいな。説明は何を定義したものなのかとか、このメタフィールドの使いどころとか明記しておきましょう。タイプではいくつか用意されていますが、”NEW”や”SALE”のような単語を貼りたいので”単一行のテキスト”にしましょう。メタフィールドは極めれば、例えばカラーピッカーを表示してお客さんに好みの色を選んでもらったり、弊社のようにデータを送ってもらったり、ラッピングが必要か？の選択をしてもらうことができます。今後そこもお教えします。 コードを編集する メタフィールドのネームスペースとキーで作成したのを入れ込みます。ここではコーディングが必要になってきますので頑張っていきましょう！…といいたいところですがコピペしたらできるようにコードを貼っときます。スニペットのcard-product.liquidの<div class="card__badge {{ settings.badge_position }}">のdiv内にコピペしてください。 {%- if card_product.metafields.newarrival_product.tag != blank -%} <span class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"> {{card_product.metafields.newarrival_product.tag }} </span> {%- endif -%} 全体のコードです。...
【Shopify 】スライドショーにリンクをつける！！！
※Dawn Ver.9にアップロードされますとものすごくレイアウトが崩れます…現在調査中ですのでそれ以降のバージョンでお試しください…Shopify をカスタマイズし過ぎて何が何だか分からなくなってきました、クロエ・ルメールです。 CMでも言ってますオンラインショップを始めるならショッピファイ♪って言ってますけど、まぁ～絶妙にかゆいところに手が届かないテンプレートばかり。有料はどうか知りませんけど（笑）でも唯一Shopify で褒めるべきなのはカスタマイズ性の高さです！そして今回お教えするのはスライドショーにリンクをつける！というものです。セクションの項目にaタグ付けたらいいんじゃね？と思ったんですけどこれ…for文で生成されるからaタグ付けたら全部のスライドに同じリンクがついてしまう…かといってコーディングすんのもめんどくさい。できたらカスタマイズページで簡単にリンク先をつけれるようにしてほしい… こんな感じで…ってできんの！？できちゃいます！ これがあれば複数してるブログのリンクを貼ったり、おすすめしたい商品ﾊﾞﾅｰにリンクを貼って特集ページに飛ばすことだってできます！てかなんでこれが標準でないねん！って話ですけど！ セクションのslideshow.liquidをいじる Dawnを使っていますが、大体のテーマで使える技術だろうと思います。タイトルの通りにslideshow.liquidを開いてずっと下へ{% schema %}のところに以下のコードをほほいのほ～いと入れます。 { "type": "url", "id": "image_link", "label": "Image Link" } 一応下に前後のコードも入れておきます。たまにエラーになる原因としてカンマ忘れがあります。気を付けてください {% schema %} "blocks": [ { "type":...
【Shopify 】スライドショーにリンクをつける！！！
※Dawn Ver.9にアップロードされますとものすごくレイアウトが崩れます…現在調査中ですのでそれ以降のバージョンでお試しください…Shopify をカスタマイズし過ぎて何が何だか分からなくなってきました、クロエ・ルメールです。 CMでも言ってますオンラインショップを始めるならショッピファイ♪って言ってますけど、まぁ～絶妙にかゆいところに手が届かないテンプレートばかり。有料はどうか知りませんけど（笑）でも唯一Shopify で褒めるべきなのはカスタマイズ性の高さです！そして今回お教えするのはスライドショーにリンクをつける！というものです。セクションの項目にaタグ付けたらいいんじゃね？と思ったんですけどこれ…for文で生成されるからaタグ付けたら全部のスライドに同じリンクがついてしまう…かといってコーディングすんのもめんどくさい。できたらカスタマイズページで簡単にリンク先をつけれるようにしてほしい… こんな感じで…ってできんの！？できちゃいます！ これがあれば複数してるブログのリンクを貼ったり、おすすめしたい商品ﾊﾞﾅｰにリンクを貼って特集ページに飛ばすことだってできます！てかなんでこれが標準でないねん！って話ですけど！ セクションのslideshow.liquidをいじる Dawnを使っていますが、大体のテーマで使える技術だろうと思います。タイトルの通りにslideshow.liquidを開いてずっと下へ{% schema %}のところに以下のコードをほほいのほ～いと入れます。 { "type": "url", "id": "image_link", "label": "Image Link" } 一応下に前後のコードも入れておきます。たまにエラーになる原因としてカンマ忘れがあります。気を付けてください {% schema %} "blocks": [ { "type":...
Shopifyのpowerd by shopifyを消す！！
ShopifyでWEBサイトを開設できた方で割かし見落としなのがこのPowerd by Shopifyの消し忘れ。調べたら公式が消し方を出しているんですが、バージョンが古いので迷うと思います。 Powerd by Shopifyがそこはかとなくカッコイイ… Powerd by Shopifyは簡単に消せる！ テーマページの3点リーダをクリックして『デフォルトテーマのコンテンツを編集する』をクリック。公式ではここが言語を編集になっています…。 画像のように『powered』と検索したら出ます。半角スペースをいれたら消えます。 キエテル… 以上です。付いていると「あ、Shopify使ってるんだ…」となりますので消しておきましょう。
Shopifyのpowerd by shopifyを消す！！
ShopifyでWEBサイトを開設できた方で割かし見落としなのがこのPowerd by Shopifyの消し忘れ。調べたら公式が消し方を出しているんですが、バージョンが古いので迷うと思います。 Powerd by Shopifyがそこはかとなくカッコイイ… Powerd by Shopifyは簡単に消せる！ テーマページの3点リーダをクリックして『デフォルトテーマのコンテンツを編集する』をクリック。公式ではここが言語を編集になっています…。 画像のように『powered』と検索したら出ます。半角スペースをいれたら消えます。 キエテル… 以上です。付いていると「あ、Shopify使ってるんだ…」となりますので消しておきましょう。
Shopifyの構成ってどうなっているの？
今回はShopifyがどういう構造で作られているかご説明します。構造が分かれば自分でカスタマイズするときに、どこをコーディングすればいいか迷わずに済むので覚えておきましょう。 Shopifyはレイアウト、テンプレート、セクション、スニペット、設定、アセット、ロケールというもので成り立っています。図にしたらこんな感じでできています。ワードプレスを弄ったことがある人ならピンとくると思います。 レイアウト レイアウトはメインのところですね！ここにGoogleフォントやFontawesomeのリンクとかいれたり自作したセクションやスニペットをrenderで呼び出して固定したりもできます。sectionはShopifyのセクションを呼び出すコードです。それぞれ呼び出すのに必要なコードですね。 {% section 'header' %} <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1"> {% section 'side_menu' %} <div id="main_content"> {{ content_for_layout }} </div> </main> {{ content_for_layout...
Shopifyの構成ってどうなっているの？
今回はShopifyがどういう構造で作られているかご説明します。構造が分かれば自分でカスタマイズするときに、どこをコーディングすればいいか迷わずに済むので覚えておきましょう。 Shopifyはレイアウト、テンプレート、セクション、スニペット、設定、アセット、ロケールというもので成り立っています。図にしたらこんな感じでできています。ワードプレスを弄ったことがある人ならピンとくると思います。 レイアウト レイアウトはメインのところですね！ここにGoogleフォントやFontawesomeのリンクとかいれたり自作したセクションやスニペットをrenderで呼び出して固定したりもできます。sectionはShopifyのセクションを呼び出すコードです。それぞれ呼び出すのに必要なコードですね。 {% section 'header' %} <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1"> {% section 'side_menu' %} <div id="main_content"> {{ content_for_layout }} </div> </main> {{ content_for_layout...
簡単にオンラインショップを始めたい！最近流行りのShopifyをご紹介！
ネットでオンラインショップを開設したいけど、コーディングとかわかんないし、初期費用も抑えたい…というショップオーナーさんは多いんじゃないでしょうか？そんな方にShopifyをおすすめします。当ブログはそんなShopifyのどこがいいのかを簡単にご紹介します！因みにこのブログShopifyのブログ機能で書いています。 こんな方におすすめ 初期費用を抑えたい 簡単に自分好みのデザインのオンラインショップにしたい 簡単に商品管理がしたい コーディングによるカスタマイズをしたい 初期費用を抑えたい Shopifyでは３つのプランから選びオンラインショップを開くことができます。弊社はベーシックプランを契約しています。スタンダードとプレミアムの恩恵はクレカ決済時の手数料が安くなるというところでしょうか？スモールビジネスを展開する方はずっとベーシックでいいような気がします…Shopifyの価格は円安円高で変わるからちょっと面倒くさいです。 自分好みのデザインのオンラインショップにしたい Shopifyの最大のメリットはなんといっても超簡単にサイトのデザインやカスタマイズができることです。たくさんある無料テーマをダウンロードしてデザインが弄れるし Shopifyのテーマストア画面 有料テーマはすこぶる高い （だいたい２万ぐらい…でもUIとかデザインはいいので購入はぜんぜんありかな） 他社を一気に出し抜けるプレミアムな有料テーマがあったりクーポン配布やポイント付与、配送に便利なあれこれがアプリとしてダウンロードができてより便利にできるし、とにかく超簡単なんです。 自分好みのデザインを直感で組み込むことができて簡単 アプリも有料から無料まであります。弊社は基本的に無料アプリをうまいこと使ってカスタマイズしています。 簡単に商品管理がしたい 商品の写真、説明、価格、これらを入れれば完了です。 商品のオプションも設定できます。例えばサイズや材質、個数など設定ができて、それに対して個別の料金を設定することができます。商品が売れればどのお客さんが何を購入したのかがリアルタイムで確認ができます。 コーディングによるカスタマイズがしたい Shopifyはそれぞれのセクションとスニペットっていうもので構成されています。 Shopifyには専用のテキストエディターが用意されています。 ここは感覚でコーディングしているんで上手く説明しにくいんですがセクションを上手いことカスタマイズするとめっちゃ便利にオンラインショップを運営できます。弊社でしたらスライドメニューに簡単にリンク設定できたりとかブログのところを弄ってます。スニペットは…分かりません。なんか固定のテンプレートって言ったらいいですかね？弊社のサイドメニューとかそうです。ShopifyはLiquidっていうオリジナルの言語で作られています。でも蓋を開けるとJSONやjavascriptとかでコーディングされているんですけどね。ワードプレスを弄ることができる方なら簡単だと思います。 といった感じでShopifyは初めてのオンラインショップを開く方でも簡単にできて玄人のコーダーにとってはカスタマイズ性が高く使い勝手がいいオンラインショップです。
簡単にオンラインショップを始めたい！最近流行りのShopifyをご紹介！
ネットでオンラインショップを開設したいけど、コーディングとかわかんないし、初期費用も抑えたい…というショップオーナーさんは多いんじゃないでしょうか？そんな方にShopifyをおすすめします。当ブログはそんなShopifyのどこがいいのかを簡単にご紹介します！因みにこのブログShopifyのブログ機能で書いています。 こんな方におすすめ 初期費用を抑えたい 簡単に自分好みのデザインのオンラインショップにしたい 簡単に商品管理がしたい コーディングによるカスタマイズをしたい 初期費用を抑えたい Shopifyでは３つのプランから選びオンラインショップを開くことができます。弊社はベーシックプランを契約しています。スタンダードとプレミアムの恩恵はクレカ決済時の手数料が安くなるというところでしょうか？スモールビジネスを展開する方はずっとベーシックでいいような気がします…Shopifyの価格は円安円高で変わるからちょっと面倒くさいです。 自分好みのデザインのオンラインショップにしたい Shopifyの最大のメリットはなんといっても超簡単にサイトのデザインやカスタマイズができることです。たくさんある無料テーマをダウンロードしてデザインが弄れるし Shopifyのテーマストア画面 有料テーマはすこぶる高い （だいたい２万ぐらい…でもUIとかデザインはいいので購入はぜんぜんありかな） 他社を一気に出し抜けるプレミアムな有料テーマがあったりクーポン配布やポイント付与、配送に便利なあれこれがアプリとしてダウンロードができてより便利にできるし、とにかく超簡単なんです。 自分好みのデザインを直感で組み込むことができて簡単 アプリも有料から無料まであります。弊社は基本的に無料アプリをうまいこと使ってカスタマイズしています。 簡単に商品管理がしたい 商品の写真、説明、価格、これらを入れれば完了です。 商品のオプションも設定できます。例えばサイズや材質、個数など設定ができて、それに対して個別の料金を設定することができます。商品が売れればどのお客さんが何を購入したのかがリアルタイムで確認ができます。 コーディングによるカスタマイズがしたい Shopifyはそれぞれのセクションとスニペットっていうもので構成されています。 Shopifyには専用のテキストエディターが用意されています。 ここは感覚でコーディングしているんで上手く説明しにくいんですがセクションを上手いことカスタマイズするとめっちゃ便利にオンラインショップを運営できます。弊社でしたらスライドメニューに簡単にリンク設定できたりとかブログのところを弄ってます。スニペットは…分かりません。なんか固定のテンプレートって言ったらいいですかね？弊社のサイドメニューとかそうです。ShopifyはLiquidっていうオリジナルの言語で作られています。でも蓋を開けるとJSONやjavascriptとかでコーディングされているんですけどね。ワードプレスを弄ることができる方なら簡単だと思います。 といった感じでShopifyは初めてのオンラインショップを開く方でも簡単にできて玄人のコーダーにとってはカスタマイズ性が高く使い勝手がいいオンラインショップです。