ツクるツボ
【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...