カラーミーショップのフリーページの知っておくと便利な裏技

カラーミーショップのフリーページのアイキャッチ

カラーミーショップは商品ページ以外にも、自由に使えるフリーページがあります。
お店の情報や商品についてのコラムを書いて情報発信したり、お店の概要、注文方法、送料、Q&A、メディア情報、ギフトについてなどショップサイトに関連する内容を書いたりしています。

フリーページは基本的にデザイン自由なので、使用目的は多岐にわたります。
今回は、便利だけど一般的にはあまり知られていない使い方を紹介します。

カラーミーショップのフリーページ概要

まずはフリーページの概要について、下記ページを参照ください。
参考)フリーページ設定 | ネットショップ開業マニュアル

うっかりミスしがちな点は、スマートフォン最適化の場合、フリーページはPC・スマホで別ページになります(ショップ作成>スマートフォンショップ>表示モード設定で「スマートフォン最適化」)。

スマホ用フリーページは10ページまで。11ページからPC用フリーページが代わりに表示されます。
また、スマホ用フリーページが作成されていない場合は、PC用の同じ番号のフリーページが代わりに表示されます。

PC用フリーページは10,000ページ作成できます(レギュラープラン)。

フリーページのCSSは一般的には、ショップ作成>デザイン>テンプレート編集の共通CSS内に書きます。
一方でカラーミーショップの場合は、昔からフリーページ内に<style>~</style>として書くこともできます。

フリーページのCSS場所

フリーページ内では、JavaScript、Smartyも使えます

独自タグは共通のみ使えます(独自タグは使えるページがあらかじめ決まっているため)。
独自タグを使って、売れ筋商品やお気に入り商品をフリーページに一覧表示することは可能ですが、(カテゴリーの)商品一覧をフリーページに表示することはできません。
こういう場合は、独自タグ以外で実装することになります(各商品のHTMLタグを一つずつ直打ちで)。

裏技1 ランディングページを作る

ランディングページ(Landing Page, LP)とは、広告をクリックした際に表示されるページで、ある商品やサービスを販売することに特化した専用ページです。

よく見かけるのは、問題提起、ベネフィット、商品画像、口コミ、カートボタンなどの文章・画像で構成されている縦長の一ページです。

性質上、他ページへのリンクやヘッダー・フッター・サイドメニューは一切なく、その商品の販売にのみ焦点を当てることに注力します。

そういった理由から、カラーミーショップのフリーページでランディングページを制作する場合は、ヘッダー・フッター・サイドメニューを非表示にする必要があります。Smartyの条件文で実装します。

使用しているテンプレートによりますが、 共通HTMLの既存のコードを<{else}>~<{/if}>で括って、その上にif条件文とtrue時の処理を書き加えます。

共通HTMLの該当箇所

<{if $tpl_name == "free1"}>
  <!-- フリーページ1なら -->
  <{include file = $file_name}>
<{else}>
 (省略 その他ページのヘッダー・サイドメニュー)
  <{include file = $file_name}>
 (省略 その他ページのフッター)
<{/if}>

 

ちなみに、全フリーページならという条件文は、以下のように書きます。

<{if $tpl_name|regex_replace:'/free.*/':'free' == 'free'}>

文字列 $tpl_nameに’free1’や’free2’などのフリーページを表す文字列が含まれているか・含んでいないか、という条件文になります。
regex_replaceの正規表現で検索文字列が見つかったときは元の文字列を置換するという方法を使って含む含まないを調べるんですが、回りくどいというかクセのある感じは、Smartyを使った検索文字列を調べる際の書き方のコツのようなものです。

<!-- 正規表現を使わない別の書き方 -->
<{if $tpl_name|truncate:4:"" == "free"}>

 

商品の販売に焦点を当てるのがランディングページですので、当然ながらカートボタンを付ける必要があります。カートボタンはどこでもカラーミー機能で設置します。
参考2)カラーミーショップのどこでもカラーミーについて実践的に学ぶ

 

余談ですが、フリーページ以外にも特定のページなら、という条件文は、カラーミーショップのカスタマイズの際によく使います。
トップページならスライドショーを設置、それ以外は設置しない、など。コードは上と同じような感じになります。

裏技2 任意の場所にHTMLを差し込む

カラーミーショップのフリーページを任意の場所で呼び出して、HTMLタグを出力することができます。機能的にはお知らせ欄に近く、フリーページで書いたHTMLなどを下記コードを設置した場所に出力します。
テンプレートの構造を理解しているとわかりますが、ヘッダー・フッター・サイドメニューは当然のように表示されません。

 

フリーページを使って任意の場所にHTMLを差し込むメリット

修正箇所が狭い範囲に限定されるので、
・HTMLがわからなくても、修正箇所がわかりやすく比較的簡単に更新できる
・うっかりミスって元に戻せなくなる可能性が減る

商品詳細ページに設置する場合は、
・一ヶ所の修正で、設置した全ページを修正しなくてよくなる

サイドメニューの更新する可能性のあるエリアに使ったり、商品詳細ページの商品説明に固定的に埋め込んでいる定型文(送料や返品リンクなど)に使うと便利です。
フリーページの数だけ設置できるので、たりなくなるってことはないはずです。

テンプレートによっては、フッターやグローバルメニューに自動でリスト表示している場合があります。表示されると都合悪いフリーページを非表示にするコーディングが必要になります。

フリーページ1の内容を呼び出す

<{assign var="mydir" value=$file_name|regex_replace:"/\/(.*?)\\.tpl/":""}>
<{include file = "$mydir/free1.tpl"}>

$mydirにはリソースの種類(file:)とテンプレートファイルまでのパス(一部)が入っています。

おわりに

フリーページはコラムを書く以外にも、いろんな使い方ができます。
特に、商品詳細ページに定型文を入れる場合は更新が便利なので、おススメです。

ショップオーナー様ご自身でページの一部を更新し続けたい場合は、フリーページを使う方法を検討してもよいかもしれません。

執筆者

えーじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。