デモショップ


『 Twinkle(トゥインクル)』を適用したデモショップをご用意しています。
まずはぜひ、デモショップでテーマの実際のデザインや機能をご確認ください。
実際にBASEで開設したショップを「Twinkleのテーマ機能」「無料のBASE Apps」のみを利用してカスタマイズしています。

デモショップをご用意しています。 デモショップは実際にBASEで開設したショップを「Twinkleのテーマ機能」「無料のBASE Apps」のみを利用してカスタマイズしています。

Twinkle(トゥインクル)の特徴

美しく洗練されたデザイン

『Twinkle』は印象的なメインビジュアルをはじめとした洗練されたデザインと、
多彩なカスタマイズ機能を兼ね備えたおしゃれなテーマです。

カスタマイズ例 1
デザイン
カスタマイズ例 2
デザイン
カスタマイズ例 3
デザイン

人気テーマがさらに進化

Fortuneの後継テーマ

『Twinkle』は人気テーマ『Fortune』の後継テーマとして、美しく洗練された印象はそのままに
多数のカスタマイズ機能が追加されており、ショップ表示速度も大幅に向上しました。

現在『Fortune』をご利用されているショップ様へ『Fortune』をご利用中のショップ様へ

『Fortune』は今後も引き続きご利用いただけますが、
機能やデザインがさらに進化した『Twinkle』へのアップグレードをおすすめします。

ショップの表示速度が大幅に向上

『Twinkle』はショップの全体構造を最新技術で再設計することで、ページの表示速度が大幅に向上しました。

自然な印象のショップリニューアルが可能

『Twinkle』は『Fortune』の基本レイアウトを継承しているため、
顧客に違和感のないショップリニューアルが可能です。
ショップの印象やブランディングを損なわずに機能をアップグレードすることができます。

テーマ移行も簡単

『Twinkle』は多数の新機能が追加されていますが、
『Fortune』と共通する機能の設定内容は『Twinkle』に移行しても維持されるため、
設定を0からやり直す必要がなく、簡単にテーマ移行することが可能です。

多数の新機能が追加

『Twinkle』には多数の新機能が追加され、『Fortune』からの既存機能もアップグレードされています。

NEW「おすすめアイテム」表示機能

『Twinkle』ではトップページに「おすすめアイテム」を表示することができます。
おすすめ商品を紹介するだけでなく、ショップのコンセプトなどを紹介する目的にも利用可能です。
おすすめアイテム

NEW フローティングバナー機能

『Twinkle』ではトップページの固定位置に追従するフローティングバナーを設置することができます。
フローティングバナー

NEW 最近チェックした商品(閲覧履歴)機能

『Twinkle』ではトップページと商品ページに「最近チェックした商品(閲覧履歴)」を表示することができます。
閲覧履歴

NEW ブログ最新記事表示機能

『Twinkle』ではトップページに「ブログApps」の記事を4件まで自動的に取得して表示可能です。
ブログ最新記事表示

NEW Instagram

『Twinkle』では“SnapWidget” のような外部サービスを利用してInstagramの埋め込みが可能です。
Instagram

NEW 商品ページバナー機能

『Twinkle』では全ての商品ページに共通するバナーを設定することができます。
商品ページ

NEW 商品一覧の画像を正方形に切り抜くオプションが利用可能

『Twinkle』では商品画像を正方形に自動トリミングすることが可能です。
商品の写真サイズがバラバラの場合でも加工する必要なく、統一感のあるレイアウトを実現します。
「商品ページでは縦長で見せたいけれど、トップページでは見やすく正方形にしたい」ということもできます。
アイテム設定

UPDATE ピックアップエリアにランキングアイコンを表示可能

『Twinkle』ではピックアップ機能が進化し、ランキングアイコンを表示することができるようになりました。
ピックアップ表示

UPDATE「カートバッジ表示機能」に対応

『Twinkle』ではカートアイコンにカート内の商品数を示すカートバッジが表示されます。
また、カートアイコンが追従して常に画面内に表示されるため、ユーザーが購入状況をいつでも確認することができます。
カートバッジ

UPDATE 簡単なカラー設定

『Twinkle』ではテーマカラーを「明るい背景用」と「暗い背景用」から選択してワンクリックで簡単に切り替えることができます。
(『Fortune』のようにテキストやリンクの色を個別に指定することはできません。)
カラーカスタマイズ

UPDATE サイドバナーが2枚に増加

『Twinkle』では設定可能な「サイドバナー」が2枚に増加しました。

UPDATE 外部リンクが3件までに増加

『Twinkle』では設定可能な「外部リンク」が3件までに増加しました。

UPDATE ショップ全体をWebフォント対応

『Twinkle』ではショップ全体がどのような環境でも美しい文字が表示されます。
まずはぜひ、デモショップで『Twinkle』の実際のデザインや機能をご確認ください。
BASEにログインした状態でテーマ購入ページの「プレビュー」からも実際のイメージをご確認いただけます。


直感的な操作で簡単カスタマイズ

『Twinkle』は簡単な設定で自由にカスタマイズすることが可能となっており、
はじめて有料テーマをご利用される方にも最適なテーマです。
全ての設定や機能には分かりやすいオンラインマニュアルもご用意しています。

メインビジュアル

PCではサイドバー以外の画面全体、スマホではファーストビュー全体を覆う印象的なスライダーです。
どんな画面サイズでも最適化されて美しく表示されます。
画像はPC用/スマホ用にそれぞれ5枚まで設定可能です。
(スライダー機能を利用せず画像1枚のみをメインビジュアルとして設定することもできます。)

レスポンシブスライダー

ワンポイントアイコン

         
デザインのアクセントとしてワンポイントアイコンを表示することができます。
ショップイメージに応じたアイコンを選ぶことが可能で、アイコンの色も自由に変更することができます。
ワンポイントアイコンが不要な場合は非表示にすることも可能です。

ワンポイントアイコン

フローティングバナー

トップページの固定位置に追従するフローティングバナーを設置することができます。
フローティングバナーは「毎回表示」と「閉じられた後は10分後に再表示」が選択可能です。

フローティングバナー

ピックアップ

ピックアップアイテムを4件まで表示することができます。
画像/テキスト/リンクを自由に設定可能で、ランキングアイコンを表示することもできます。
PCでは最大4アイテムが1行で表示され、スマホでは横に2アイテム表示されます。

ピックアップ表示

おすすめアイテム

トップページに「おすすめアイテム」を表示することができます。
画像/見出し/テキスト/リンクボタンを設定することができ、
おすすめ商品を紹介するだけでなく、ショップのコンセプトなどを紹介する目的にも利用可能です。

おすすめアイテム

イメージバナー

トップページにバナーを表示することができます。
バナーには自由なリンク先を設定することができます。

イメージバナー

サイドバナー

サイドバー/スライドメニューにバナーを2枚まで設定可能です。
各バナーには自由なリンク先を設定することができます。

モーダルバナー

最近チェックした商品

トップページと商品ページに「最近チェックした商品(閲覧履歴)」を表示することができます。
閲覧履歴はトップページでは4件、商品ページでは3件が自動的に取得されて表示されます。

閲覧履歴

ニュース / 新着情報

新着情報を3件まで表示することができます。
日付、内容、リンクを自由に設定することができます。

ニュース / 新着情報表示

ブログ最新記事

トップページに「ブログApps」の記事を4件まで自動的に取得して表示可能です。
「この記事を固定にする」に設定した記事はトップページにも表示されます。

ブログ最新記事表示

Instagram

“SnapWidget” のような外部サービスを利用してInstagramの埋め込みが可能です。
アカウントのリンクボタンを表示させることもできます。
(Instagramの埋め込みコードの取得方法はこちら

Instagram

重要なお知らせ

お客様に伝えたい重要なお知らせを見やすく表示することができます。
お知らせのテキスト内容、カラー、リンク先を自由に設定することが可能です。

重要なお知らせ

送料表示

サイドバー/スライドメニューに送料を表示することができます。
送料のテキスト内容やカラーを自由に設定することが可能です。

送料表示

アバウトページカスタマイズ

アバウトページにBASE管理画面で設定した「ショップの説明」に追加して、
画像やカスタムショップ情報を表示することができます。

アバウトページ

商品ページカスタマイズ

全ての商品ページに共通するバナーを設定することができます。
購入ボタンのカラーを変更することも可能です。
商品ページには「関連商品」と「最近チェックした商品」を表示することができます。

アバウトページ

簡単なカラー設定

テーマカラーは「明るい背景用」と「暗い背景用」をワンクリックで簡単に切り替えることが可能です。
購入ボタンや各機能の色は個別に設定することができます。

カラーカスタマイズ

自由なメニュー設定

「HOME」「ABOUT」「BLOG」「CONTACT」などのメニューテキストや、
「CATEGORY」「SHOP INFO」などのタイトルを変更することができます。
任意のタイトルとリンク先を設定できる『外部リンク』も3つまで表示可能です。


ナビゲーション

商品一覧 アイテム設定

商品画像を正方形に自動トリミングすることが可能です。
商品の写真サイズがバラバラの場合でも加工する必要なく、統一感のあるレイアウトを実現します。
1行の商品説明を表示したり、拡大エフェクトをつけることもできます。

アイテム設定

上級者向けオプション機能

知識のある上級者の方は「 独自スタイルシート(CSS)設定 」でCSSを追加記述していただくことも可能です。


初めての方でも簡単にカスタマイズ可能

カスタマイズはBASE管理画面上で簡単に操作できます。
ON/OFFを切り替えたり、テキストを入れたり、色や画像を指定するだけで
どなたでも簡単にオリジナルのショップデザインにしていただけます。

スクリーンショット付きの丁寧で分かりやすいオンラインマニュアルもご用意しています。
詳しくは「オンラインマニュアル(テーマの設定方法)をご覧ください。

簡単カスタマイズ

安心の無料アップデート

BASEに新機能が追加された際には、新機能に合わせたテーマの無料アップデートを提供
アップデートが行われた際には自動的に更新されますので、ご購入後も安心してご利用いただけます。


* BASEの『HTML編集Apps』でテーマを編集している場合には、編集内容を保護する為に自動アップデートは適用されません。
「カスタムテーマ(HTML編集したテーマ)」から「Twinkle」に変更することで、アップデートされた最新版のテーマが適用されます。


各種BASE Appsに対応

セール / レビュー / ブログ / ラベルをはじめとした全てのBASE Appsに対応しています
HTML編集Appsにも対応しており、Twinkleを改造した独自のショップデザインを構築することも可能です。

* 例外として、「ページ追加 Apps」はデザインマーケットで販売されている全ての有料テーマでご利用いただけません。


『 Twinkle(トゥインクル)』を適用したデモショップをご用意しています。
まずはぜひ、デモショップでテーマの実際のデザインや機能をご確認ください。
実際にBASEで開設したショップを「Twinkleのテーマ機能」「無料のBASE Apps」のみを利用してカスタマイズしています。
デモショップをご用意しています。 デモショップは実際にBASEで開設したショップを「Twinkleのテーマ機能」「無料のBASE Apps」のみを利用してカスタマイズしています。

オンラインマニュアル(テーマの設定方法)

BASEデザインテンプレート【Twinkle】

『Twinkle(トゥインクル)』は様々なカスタマイズを誰でも簡単に行うことができます。
BASE管理画面の「デザイン」の「テーマ設定」で各種機能の設定を行うことができます。


全体設定ショップ全体(全てのページ)で共通する設定項目です。

カラー設定


1-1.【 カラー設定 】 暗い背景用のテーマカラーを使用 ON/OFF

OFF(グレーの状態)にすると明るい背景用のテーマカラーとなり、テキスト等が黒系に設定されます。
ON(緑の状態)にすると暗い背景用のテーマカラーとなり、テキスト等が白系に設定されます。
背景が白などの明るい色の場合にはOFF、黒などの濃い色の場合にはONにしてご利用ください。
初期状態ではOFF(明るい背景用テーマカラー)になっています。

購入ボタン カラー

購入ボタンの色を変更することができます。
初期値は「 #000000 」になっています。

セール価格 / SOLD OUT カラー

セール価格 / SOLD OUTの色を変更することができます。
初期値は「 #E50F0D 」になっています。

販売期間設定 カラー

販売期間設定Appsで表示される「COMING SOON」などの色を変更することができます。
初期値は「 #00C7B6 」になっています。

予約販売 カラー

予約販売Appsで表示される「予約商品」などの色を変更することができます。
初期値は「 #1e88e5 」になっています。

テイクアウト カラー

テイクアウトAppsで表示される「テイクアウト」などの色を変更することができます。
初期値は「 #ff9800 」になっています。

抽選販売 カラー

抽選販売Appsで表示される「抽選商品」などの色を変更することができます。
初期値は「 #5e35b1 」になっています。

コミュニティ カラー

コミュニティAppsで表示される「会員限定商品」などの色を変更することができます。
初期値は「 #212121 」になっています。

ショップロゴ設定

1-2.【ショップロゴ】PCサイト ロゴ上下の余白(例:40px)

PCで閲覧した際の画像ロゴ / テキストロゴの上下の余白を設定することができます。
「 40px 」のような形式で入力して下さい。
初期設定は40pxです。
(スマホで閲覧した際には上部メニューの高さの都合上、余白設定は無視されます。)

アイテム設定


1-3.【 アイテム設定 】商品アイテムに1行の「商品説明」を表示 ON/OFF

ONにすると商品画像の下に1行の「商品説明」が表示されます。
初期状態ではONになっています。

商品一覧の画像を正方形に切り抜く ON/OFF

トップページやカテゴリページの商品一覧の商品画像を正方形に切り抜いて表示することができます。
ONにすると画像サイズが商品ごとに異なる場合でも統一感のある商品一覧にすることができます。
(商品ページの商品画像はオリジナルの縦横比で表示されます。)
商品一覧の各商品画像の元の縦横比率を維持したい場合にはOFFにしてご利用ください。
初期状態ではOFFになっています。

商品アイテムの画像拡大エフェクト(マウスオーバー時) ON/OFF

ONにするとPC閲覧時に商品アイテムにマウスオーバーした際に画像が少し拡大します。
OFFにするとマウスオーバーした際にも画像の大きさは変わりません。
初期状態ではONになっています。

トップページに商品一覧を表示する ON/OFF

ONにするとトップページに商品一覧が表示されます。
OFFにするとトップページの商品一覧は非表示になります。
初期状態ではONになっています。

ワンポイントアイコン

1-4.【 ワンポイントアイコン 】ON/OFF

ワンポイントアイコンの表示のON/OFFを切り替えることができます。
初期状態ではONになっています。

アイコンカラー

ワンポイントアイコンの色を設定することができます。
初期値は「 #DA0F0F 」になっています。

アイコンタイプ

         
お好みのアイコンタイプを選択してください。

メニュー設定

1-5.【 メニュー設定 】Homeのタイトル

ナビゲーションのHomeへのリンクテキストを変更することができます。
初期値は「 HOME」になっています。

Categoryのタイトル(カテゴリ管理 Apps)

カテゴリのタイトルを変更することができます。
初期値は「 CATEGORY」になっています。

Informationのタイトル

インフォメーションのタイトルを変更することができます。
初期値は「 SHOP INFO 」になっています。

Linkのタイトル

外部リンクのタイトルを変更することができます。
初期値は「 LINK 」になっています。

Aboutのタイトル

ナビゲーションのAboutへのリンクテキストを変更することができます。
初期値は「 ABOUT 」になっています。

Blogのタイトル

ナビゲーションのBlogへのリンクテキストを変更することができます。
初期値は「 BLOG 」になっています。

Contactのタイトル

ナビゲーションのContactへのリンクテキストを変更することができます。
初期値は「 CONTACT 」になっています。

トップページ商品一覧のタイトル

商品一覧のタイトルを変更することができます。
初期値は「 NEW ARRIVAL 」になっています。

関連商品のタイトル

関連商品のタイトルを変更することができます。
初期値は「 関連商品 」になっています。

外部リンク1 テキスト

外部リンク1のタイトルを設定することができます。

外部リンク1 URL

外部リンク1のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

外部リンク2 テキスト

外部リンク2のタイトルを設定することができます。

外部リンク2 URL

外部リンク2のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

外部リンク3 テキスト

外部リンク3のタイトルを設定することができます。

外部リンク3 URL

外部リンク3のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

送料表示


1-6.【送料表示】 ON/OFF

送料表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

送料 テキストカラー

送料のテキストカラーを変更することができます。
初期値は「 #FFFFFF 」になっています。

送料 背景カラー

送料の背景色を変更することができます。
初期値は「 #000000 」になっています。

送料テキスト

送料テキストを設定することができます。
例:「5,000円以上のご購入で送料無料」

補足テキスト

補足テキストを設定することができます。
例:「*沖縄・離島は除きます」

サイドバナー

PCのサイドバー / スマホのスライドメニューにバナーを2枚まで設定可能です。

1-7.【 サイドバナー 】① 画像

サイドバナー①の画像をアップロードする事ができます。

サイドバナー ① URL

サイドバナー①のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

【 サイドバナー 】② 画像

サイドバナー②の画像をアップロードする事ができます。

サイドバナー ② URL

サイドバナー②のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

【画像の推奨サイズ】

『サイドバナー』の推奨サイズは「 横600px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横600px / 縦400px 」の画像を使用しています。

HOME設定トップページに関連する設定項目です。

メインビジュアル


2-1.【 メインビジュアル 】 ON/OFF

メインビジュアルの表示ON/OFFを切り替えることができます。
初期状態ではONになっています。

スライド1 画像(PC)

(メインビジュアルをONにする場合は必須) スライダーの1枚目のPCで表示される画像をアップロードする事ができます。

スライド1 画像(スマホ)

スライダーの1枚目のスマホで表示される画像をアップロードする事ができます。
PC用の画像と同じ画像を設定していただいても問題ありません。
スマホ用画像が設定されていない場合にはスマホ閲覧時にもPC用画像が表示されます。

スライド2 画像(PC)

スライダーの2枚目のPCで表示される画像をアップロードする事ができます。
(2枚目以降の画像がアップロードされていない場合にはスライダー機能がOFFとなり1枚目の画像のみがメインビジュアルとして表示されます。)

スライド2 画像(スマホ)

スライダーの2枚目のスマホで表示される画像をアップロードする事ができます。
PC用の画像と同じ画像を設定していただいても問題ありません。
スマホ用画像が設定されていない場合にはスマホ閲覧時にもPC用画像が表示されます。

「スライド3」~「スライド5」も同様の設定方法となっています。

【画像の推奨サイズ】

Twinkleのメインビジュアルは、 PCではサイドバー以外の画面全体、スマホではファーストビュー全体を覆う形で、 画面サイズに応じて画像が切り抜かれて表示されます。 Retinaディスプレイを考慮して画像は大きめのものをご用意ください。
「PC用」の推奨サイズは「 横 1600px / 縦 1080px 」です。
ご参考までに、デモショップでは「 横3200px / 縦2160px 」の画像を使用しています。
「スマホ用」の推奨サイズは「 横 840px / 縦 1500px 」です。
ご参考までに、デモショップでは「 横 840px / 縦 1500px 」の画像を使用しています。
スライド画像は「PC用」と「スマホ用」で同じ画像を設定していただいても問題ありません。

フローティングバナー


2-2.【フローティングバナー】 ON/OFF

フローティングバナーの表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

フローティングバナーが閉じられた後は10分間再表示しない ON/OFF

商品ページなどからトップページに戻る度に毎回バナーが表示されると煩雑に感じる場合があります。
ONにすることで一度フローティングバナーが閉じられた後は10分間再表示されなくなります。
10分間再表示されないのは「その端末から再度アクセスした場合のみ」となります。
別の端末やお客様がショップにアクセスした場合には通常通り表示されますのでご安心ください。
初期状態ではOFF(トップページを開くたびに毎回表示)になっています。

フローティングバナー 画像

フローティングバナーの画像をアップロードする事ができます。

フローティングバナー リンク

フローティングバナーのリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

【画像の推奨サイズ】

フローティングバナーは最大で横280pxで表示されますが、Retinaディスプレイを考慮して大きめの画像をご利用いただくことを推奨します。
『フローティングバナー』の推奨サイズは「 横560px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横560px / 縦240px 」の画像を使用しています。

重要なお知らせ


2-3.【重要なお知らせ】 ON/OFF

重要なお知らせ表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

重要なお知らせ テキストカラー

お知らせのテキスト色を選択することができます。

重要なお知らせ 背景色

お知らせの背景色を選択することができます。

重要なお知らせ テキスト

お知らせの内容をテキストで入力することができます。

重要なお知らせ URL

(任意)お知らせのリンク先URLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください

ピックアップ

2-4.【 ピックアップ 】 ON/OFF

「ピックアップ」の表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

ランキングアイコンを表示 ON/OFF

ONにするとランキングとして利用するための順位ラベル(1~4)が表示されます。
初期状態ではOFFになっています。

ピックアップ タイトル

任意のタイトルに変更することが可能です。

ピックアップ1 画像

1件目のピックアップアイテムの画像をアップロードすることができます。
画像の表示サイズは画面サイズに応じて自動的に調整されます。
推奨サイズは「 横640px 」です。縦の高さはお好みのサイズで構いません。
デザインの仕様上、全ての画像サイズを合わせることをお勧めします。
ご参考までに、デモショップでは「 横1200px / 縦900px 」の画像を使用しています。

ピックアップ1 テキスト

(任意)1件目のピックアップアイテムの内容をテキストで入力することができます。

ピックアップ1 URL

(任意)1件目のピックアップアイテムのURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

「ピックアップ2」~「ピックアップ4」も同様の設定方法となっています。

トップページバナー


2-5.【 トップページバナー 】 画像

トップページバナーの画像をアップロードする事ができます。
トップページバナーの画像の推奨サイズは「 横1800px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横2400px / 縦480px 」の画像を使用しています。

トップページバナー URL

(任意)トップページバナー ① のリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

おすすめアイテム


2-6.【 おすすめアイテム 】 ON/OFF

「おすすめアイテム」の表示のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

おすすめアイテム タイトル

任意のタイトルに変更することが可能です。

おすすめアイテム 画像

「おすすめアイテム」の画像をアップロードする事ができます。
画像の推奨サイズは「 横1200px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横1200px / 縦680px 」の画像を使用しています。

テキストを中央寄せ ON/OFF

ONにすると「おすすめアイテム」の見出しやテキスト、リンクボタンが中央寄せになります。
初期状態ではOFFになっています。

おすすめアイテム 見出し

(任意)「おすすめアイテム」の見出しテキストを設定することができます。

おすすめアイテム テキスト

「おすすめアイテム」のテキストを設定することができます。

おすすめアイテム URL

(任意)「おすすめアイテム」のリンク先を設定することができます。
URLが設定されている場合、自動的にリンクボタンが表示されます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

最近チェックした商品


2-7.【 最近チェックした商品 】 ON/OFF

「最近チェックした商品」のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

「最近チェックした商品」 タイトル

「Recently Viewed」や「閲覧履歴」などの任意のタイトルに変更することができます。
初期値は「 最近チェックした商品 」になっています。

新着情報


2-8.【 新着情報 】 ON/OFF

新着情報表示(3件まで設定可能)のON/OFFを切り替えることができます。
初期状態ではOFFになっています。

新着情報のタイトル

新着情報表示のタイトルを変更することができます。

新着情報 1 日付

1件目の新着情報の日付/タイトルをテキストで入力することができます。
ニュース機能として利用する場合には「2025.01.01」や「7月10日」などのように設定してください。
ランキング機能として利用する場合には「人気No.1」などのように設定してください。

新着情報 1 内容

1件目の新着情報の内容をテキストで入力することができます。

新着情報 1 リンク先

(任意)1件目の新着情報のURLを設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

「新着情報 2」~「新着情報 3」も同様の設定方法となっています。

ブログ最新記事


2-9.【 ブログ最新記事 】 ON/OFF

トップページのブログ最新記事の表示ON/OFFを切り替えることができます。
初期状態ではOFFになっています。

Instagram


2-10.【 Instagram 】 ON/OFF

InstagramエリアのON/OFFを切り替えることができます。
初期状態ではOFFになっています。

Instagram タイトル

(任意)Instagramエリアのタイトルを設定することができます。

Instagram 埋め込みコード

Instagram埋め込みコードを設定することができます。

Instagram アカウント表示 ON/OFF

ONにすると、BASE管理画面の「ショップ情報」で設定したInstagramのアカウント名が表示されます。
初期状態ではOFFになっています。
「Instagram 埋め込みコード」には、Instagram埋め込みコード以外にも自由なHTMLを記述していただくことが可能です。
自由なHTMLを記述することで「フリースペース」として利用することもできますが、HTMLについてはサポート対象外となっております。
HTMLの記述方法や記述内容のご案内等は致しかねますことを予めご了承ください。
また、閉じタグの漏れや記述内容の誤りによってショップ全体の表示に影響が出る場合がありますので、
HTMLを記述される場合には十分に注意して設定を行ってください。

ABOUT設定アバウトページに関連する設定項目です。

ABOUT設定


3.【 アバウトページ 】アバウトページ画像

アバウトページに掲載する画像をアップロードすることができます。
画像は縦長/横長に関わらずお好みのサイズで構いません。
ご参考までに、デモショップでは「 横3000px / 縦1000px 」の画像を使用しています。

アバウトページ ショップ住所

ショップの所在地を表示することができます。

アバウトページ ショップTEL

ショップの電話番号を表示することができます。

アバウトページ ショップFAX

ショップのFAX番号を表示することができます。

アバウトページ ショップ営業時間

ショップの営業時間を表示することができます。

アバウトページ ショップ定休日

ショップの定休日を表示することができます。

アバウトページ ショップE-Mail

ショップのメールアドレスを表示することができます。

商品ページ設定商品ページに関連する設定項目です。

商品ページ設定

4-1.【 商品ページ 】「この商品をアプリで見る」ボタンを表示 ON/OFF

スマホ閲覧時、BASEアプリとの連携として、商品ページに「この商品をアプリで見る」ボタンを表示することができます。
初期状態ではONになっています。

商品ページバナー


4-2.【 商品ページバナー 】 画像

商品ページバナーの画像をアップロードする事ができます。
商品ページバナーの画像の推奨サイズは「 横900px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横900px / 縦400px 」の画像を使用しています。

商品ページバナー URL

(任意)商品ページバナーのリンク先を設定することができます。
「 https://dolcevivace.com/ 」のような形式でリンク先のURLを入力してください。

Apps設定BASE Appsに関連する設定項目です。

各種BASE Appsのインストール方法や設定方法についてはBASEへ直接お問い合わせください。

コミュニティApps

5-1.【 コミュニティApps 】コミュニティページ ヘッダー画像

コミュニティページに表示するヘッダー画像をアップロードする事ができます。

コミュニティページ タイトル

ナビゲーションのコミュニティページへのリンクテキストを変更することができます。
初期値は「 Community 」になっています。

メンバーシップApps

5-2.【 メンバーシップApps 】メンバーシップページのタイトル

ナビゲーションのメンバーシップページへのリンクテキストを変更することができます。
初期値は「 メンバーシップ 」になっています。

マイページ/ログインのタイトル

ナビゲーションのマイページ/ログインへのリンクテキストを変更することができます。
初期値は「 マイページ 」になっています。

メンバーシップApps

5-2.【 メールマガジン登録フォーム 】 タイトル

メールマガジン登録フォームのタイトルを設定することができます。
初期値は「 NEWSLETTER 」になっています。

登録フォーム テキスト

メールマガジン登録フォームのテキストを設定することができます。
例:「ショップからのお得な情報やクーポンなどをお送りします。」

その他設定その他の設定項目です。

上級者向けの設定

Ex.【上級者向けの設定】独自CSS

オリジナルのスタイルシートを記述することができます。
p { font-size:14px !important;}
独自スタイルシート(CSS)は知識のある上級者向けの設定です。
CSSについてはサポート対象外となっておりますので、
CSSの記述方法やclass名のご案内等は致しかねますことを予めご了承ください。

サポート情報

推奨画像サイズ

Twinkleをご利用いただく際の登録する画像の推奨サイズは以下の通りです。
推奨サイズ以外のサイズの画像をご利用いただいても基本的には問題ありませんが、目安としてご参考になさってください。

【ロゴ画像】

お好みのサイズで構いません。
正方形や縦長のロゴの場合、スマホサイトでは表示が小さくなる場合がありますので横長の画像をお勧めします。
ご参考までに、デモショップでは「 横660px / 縦140px 」の画像を使用しています。

【メインビジュアル】

Twinkleのメインビジュアルは、 PCではサイドバー以外の画面全体、スマホではファーストビュー全体を覆う形で、 画面サイズに応じて画像が切り抜かれて表示されます。 Retinaディスプレイを考慮して画像は大きめのものをご用意ください。
(メインビジュアルの画像は「PC用」と「スマホ用」で同じ画像を設定していただいても問題ありません。 )

「PC用」の推奨サイズは「 横 1600px / 縦 1080px 」です。
ご参考までに、デモショップでは「 横3200px / 縦2160px 」の画像を使用しています。

「スマホ用」の推奨サイズは「 横 840px / 縦 1500px 」です。
ご参考までに、デモショップでは「 横 840px / 縦 1500px 」の画像を使用しています。

【フローティングバナー】

推奨サイズは「 横560px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横560px / 縦240px 」の画像を使用しています。

【ピックアップ】

推奨サイズは「 横640px 」です。縦の高さはお好みのサイズで構いません。
デザインの仕様上、全ての画像サイズを合わせることをお勧めします
ご参考までに、デモショップでは「 横1200px / 縦900px 」の画像を使用しています。

【おすすめアイテム】

推奨サイズは「 横1200px 」です。縦の高さはお好みのサイズで構いません。
デザインの仕様上、全ての画像サイズを合わせることをお勧めします
ご参考までに、デモショップでは「 横1200px / 縦680px 」の画像を使用しています。

【トップページバナー】

推奨サイズは「 横1800px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横2400px / 縦480px 」の画像を使用しています。

【サイドバナー】

推奨サイズは「 横600px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横600px / 縦400px 」の画像を使用しています。

【商品ページバナー】

推奨サイズは「 横900px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横900px / 縦400px 」の画像を使用しています。

【アバウトページ画像】

縦長/横長に関わらずお好みのサイズで構いません。
ご参考までに、デモショップでは「 横3000px / 縦1000px 」の画像を使用しています。

【商品画像】

推奨サイズは「 横1200px 」です。縦の高さはお好みのサイズで構いません。
ご参考までに、デモショップでは「 横1200px / 縦1200px 」の画像を使用しています。

TIPS (設定のヒント)


テキストエリアで改行や段落を入れる方法

テーマ設定のテキストエリアではHTMLが利用可能です。
<br> 」と入力すると改行され、「 <p></p> 」で囲むと段落になり、「 <b></b> 」で囲むと太字になります。

<p>
<b>【営業時間】</b>
<br>
11:30-15:00(L.O. 14:30)
<br>
18:00-23:00(L.O. 22:00)
</p>

<p>
<b>【定休日】</b>
<br>
日曜日・祝日
<br>
神戸市中央区山本通1-1
</p>

以下のように表示されます。
上記以外の自由なHTMLを記述することも可能です。
但し、HTMLについてはサポート対象外となっておりますので、HTMLの記述方法や記述内容のご案内等は致しかねますことを予めご了承ください。
また、閉じタグの漏れや記述内容の誤りによってショップ全体の表示に影響が出る場合がありますので、
HTMLを記述される場合には十分に注意して設定を行ってください。


「FAQ」「お買い物ガイド」「はじめにお読みください」など任意のコンテンツを作る方法

BASEには自由な内容のページを作成するための「ページ追加 Apps」がありますが、
「ページ追加 Apps」は無料テーマのみが対象のAppsとなっているため、
Twinkleをはじめとした有料テーマではご利用いただくことができません。

そこで、自由な内容のページを追加するための代替案として「Blog App」を利用する方法をご提案いたします。

▼ Blog App
https://apps.thebase.in/detail/43

「Blog App」を利用することでブログ記事として自由な内容を記載したページを作成することが可能です。

具体例として、デモショップではブログ記事として「 お買い物ガイド 」のページを作成しています。
デモショップ ブログ「 お買い物ガイド 」
(トップページの「バナー」「ピックアップ」「外部リンク」等からその記事ページへリンクさせるイメージとなります。)

※「Blog App」をはじめとしたBASE Appsのインストール方法や設定方法についてはBASEへ直接お問い合わせください。



ショップを公開する前に商品ページを確認する方法

ショップの準備を進める際、BASE管理画面の「ショップ公開状況」を「公開」にすると商品が購入できる状態になってしまい、「非公開」にするとショップオーナーも商品ページを見ることができなくなります。
デザイン画面の「プレビュー」でもある程度実際の画面を確認することができますが、バナーやピックアップで設定するために商品ページURLを取得したいような場合、プレビュー画面では確認することができません。

そこで、ショップの準備中は「公開」した状態で「シークレットEC」でパスワードをかけることをお勧めします

▼ シークレットEC App
https://apps.thebase.com/detail/12

実際にショップを公開する際には、「シークレットEC Apps」を無効にすることで、誰でもショップを閲覧できる状態になります。


よくある質問

Twinkle(トゥインクル)に関するよくあるお問い合わせとその回答です。


テーマについて

  • 有料テーマの利用は初めてなのですが、設定やカスタマイズは私にもできますか?

    カスタマイズはBASE管理画面上で簡単に操作できます。
    自由にカスタマイズしていただけるようにたくさんの設定項目をご用意しておりますが、
    どれも「ON/OFFを切り替える」「テキストを入れる」「色を選ぶ」「画像を選ぶ」などの簡単な設定になっています。
    どなたでも簡単にオリジナルのショップデザインにしていただけます。

    詳しくはオンラインマニュアル(テーマの設定方法)をご覧ください。

    簡単カスタマイズ
  • 本当にデモショップのようなデザインになるのですか?

    ご安心ください。

    デモショップ1 】 や 【 デモショップ2 】 は実際にBASEで開設したショップにTwinkleテーマを適用した上で、
    BASE管理画面の「デザイン編集」で画像やテキストの設定をしただけのものとなっています。

    もちろん写真や商品画像はご自身でご用意いただく必要がありますが、 「ON/OFFを切り替える」「テキストを入れる」「色を選ぶ」「画像を選ぶ」などの簡単な設定をするだけで、 どなたでも簡単にデモショップのようなオリジナルのデザインにしていただけます。

  • 設定する画像の推奨サイズを教えてください。

    Twinkleの各機能の推奨画像サイズは 推奨画像サイズをご覧ください。

  • 対応している「BAES Apps」を教えてください。

    Twinkleは「ページ追加 Apps」を除く全てのBASE Appsに対応しています。
    「ページ追加 Apps」は無料テーマのみが対象のAppsとなっているため、
    Twinkleをはじめとした有料テーマではご利用いただくことができません。

    ページ追加 Apps
    「ページ追加 App」は、最新のショップデザイン機能利用時の、オフィシャルテーマのみが対象です。
    BASEデザインマーケットで販売しているデザイナーズテーマ、および「HTML編集 App」で作成されたカスタムテーマには、現在対応しておりません。

    「ページ追加 Apps」以外のBASE Appsは全て利用可能となっておりますのでご安心ください。

    ▼ BASE Apps 一覧
    https://apps.thebase.in/
    ※各種BASE Appsのインストール方法や設定方法についてはBASEへ直接お問い合わせください。


    「ページ追加 App」を使わずにページを追加するための代替方法については、すぐ下の「ページを追加したいのですがどうすればいいですか?」をご覧ください。

  • ページを追加したいのですがどうすればいいですか?

    BASEには自由な内容のページを作成するための「ページ追加 Apps」がありますが、
    「ページ追加 Apps」は無料テーマのみが対象のAppsとなっているため、
    Twinkleをはじめとした有料テーマではご利用いただくことができません。

    そこで、自由な内容のページを追加するための代替案として「Blog App」を利用する方法をご提案いたします。

    ▼ Blog App
    https://apps.thebase.in/detail/43

    「Blog App」を利用することでブログ記事として自由な内容を記載したページを作成することが可能です。

    具体例として、デモショップではブログ記事として「 お買い物ガイド 」のページを作成しています。
    デモショップ ブログ「 お買い物ガイド 」
    (トップページの「バナー」「ピックアップ」「外部リンク」等からその記事ページへリンクさせるイメージとなります。)

    ※「Blog App」をはじめとしたBASE Appsのインストール方法や設定方法についてはBASEへ直接お問い合わせください。

  • 「FAQ」「お買い物ガイド」「はじめにお読みください」などを掲載する方法を教えてください。

    BASEには自由な内容のページを作成するための「ページ追加 Apps」がありますが、
    「ページ追加 Apps」は無料テーマのみが対象のAppsとなっているため、
    Twinkleをはじめとした有料テーマではご利用いただくことができません。

    そこで、自由な内容のページを追加するための代替案として「Blog App」を利用する方法をご提案いたします。

    ▼ Blog App
    https://apps.thebase.in/detail/43

    「Blog App」を利用することでブログ記事として自由な内容を記載したページを作成することが可能です。

    具体例として、デモショップではブログ記事として「 お買い物ガイド 」のページを作成しています。
    デモショップ ブログ「 お買い物ガイド 」
    (トップページの「バナー」「ピックアップ」「外部リンク」等からその記事ページへリンクさせるイメージとなります。)

    ※「Blog App」をはじめとしたBASE Appsのインストール方法や設定方法についてはBASEへ直接お問い合わせください。

  • HTML編集Appsを利用して購入したテーマを改造することはできますか?

    可能です。

    ご購入いただいたテーマをBASE管理画面の「デザイン」で適用した状態にてHTML編集Appsを利用することで、
    Twinkleを元にしたオリジナルのショップデザインを構築していただくことが可能です。
    HTML編集Appsの操作方法や改造方法はサポート対象外となりますことについては予めご了承ください。

    また、BASEに新機能が追加された際などには、新機能に合わせたテーマの無料アップデートをさせていただきますが、
    HTML編集Appsを利用している場合には、編集内容を保護する為に自動では更新されません。
    その際には手動でアップデート内容を適用していただく必要があります。

    HTML編集Appsを利用してテーマを改造している場合には、現在選択されているテーマが「カスタムテーマ」となっています。
    「Twinkle」テーマを選択していただくことでアップデートが適用された最新の状態のテーマとなりますので、
    改めてHTML編集Appsを利用してオリジナルの改造/編集を行ってください。

  • テーマのアップデートはありますか?

    BASEに新機能が追加された際などには、新機能に合わせたテーマの無料アップデートをさせていただきます。
    アップデートが行われた際には、ご購入いただいたテーマも自動的に更新されますので安心してご利用いただけます。

    BASEの『HTML編集Apps』でテーマを編集している場合には、編集内容を保護する為に自動アップデートは適用されません。
    「カスタムテーマ(HTML編集したテーマ)」から「Twinkle」に変更することで、アップデートされた最新版のテーマが適用されます。

「メインビジュアル」について

  • メインビジュアルを全画面にすると画像が見切れてしまいます。

    Twinkleのメインビジュアルは、PCではサイドバー以外の画面全体、
    スマホではファーストビュー全体を覆う形で、画面サイズに応じて画像が切り抜かれて表示されます

    画面サイズはPCやスマホごとに異なり、画像の縦横比率を保ったまま画像全体を全画面に表示することは不可能であるため、画像の上下左右の余った部分(縦横比率を維持した場合に画面サイズからはみ出る部分)が切り抜かれる仕様になっています。
    メインビジュアル画像内において、テキスト等の見切れては困る部分は中央寄りに配置してください。

    メインビジュアルの推奨画像サイズは「 推奨画像サイズ 」をご覧ください。

「Instagram」について

  • Instagramを埋め込みたいのですがどうすればいいですか? / 『埋め込みコード』の取得方法を教えてください。

    Instagramの埋め込み方法については「 Instagramの埋め込み方法 」をご確認ください。
    (外部サービスについてはサポート対象外となっております。個別のお問い合わせに対しての回答は致しかねますことを予めご了承ください。)

「最近チェックした商品」について

  • 「最近チェックした商品」に何も表示されません。

    「最近チェックした商品」はユーザーごとの商品ページの閲覧履歴となっています。
    はじめてショップを訪れた場合や、ひとつも商品を見ていない状態では何も表示されません。
    いくつか商品を見た後にはその商品が「最近チェックした商品」に表示されます。

トラブルシューティング

  • デザイン画面のプレビューでショップのレイアウトが崩れて見えます。

    デザイン画面の右側に表示される「プレビュー」は、左側に設定メニューが表示されているため通常のブラウザ幅よりも狭くなっているため、意図しない改行が入るなど一部のレイアウトが崩れて見える場合があります。

    ほとんどの場合、実際のショップのレイアウトは崩れませんのでご安心ください。
    レイアウトが崩れて見える場合には、右上の「プレビュー」をクリックした際の大きなプレビューやブラウザで見た実際のショップ画面もご確認ください。

  • イメージスライダーやバナー、ピックアップ等の設定を行ってもサイトに表示されません。

    イメージスライダーやバナー、ピックアップ等の機能を設定しても表示されない場合は、その項目の表示設定がOFFになっている可能性があります。
    ON/OFFの切替ができる項目についてはOFF(グレーの状態)からON(緑の状態)に切り替わっているかご確認ください。

  • テキストを入力する際に改行ができません。

    テーマ設定のテキストエリアではHTMLが利用可能です。
    <br> 」と入力すると改行され、「 <p></p> 」で囲むと段落になり、「 <b></b> 」で囲むと太字になります。

    
    <p>
    <b>【営業時間】</b>
    <br>
    11:30-15:00(L.O. 14:30)
    <br>
    18:00-23:00(L.O. 22:00)
    </p>
    
    <p>
    <b>【定休日】</b>
    <br>
    日曜日・祝日
    <br>
    神戸市中央区山本通1-1
    </p>
    
    

    以下のように表示されます。

    上記以外の自由なHTMLを記述することも可能です。
    但し、HTMLについてはサポート対象外となっておりますので、HTMLの記述方法や記述内容のご案内等は致しかねますことを予めご了承ください。
    また、閉じタグの漏れや記述内容の誤りによってショップ全体の表示に影響が出る場合がありますので、
    HTMLを記述される場合には十分に注意して設定を行ってください。

  • デザイン編集画面で設定した内容がショップに反映されません。

    1. ご確認いただいている端末のブラウザにキャッシュが残っているために最新の情報が取得できていない可能性があります。
    まずは、ブラウザのキャッシュを削除してから再度ショップを確認することをお試しください。

    2. ブラウザのキャッシュを削除しても設定内容が反映されない場合、
    一時的にBASEのデータサーバとの通信が正常に行われていないために、設定内容が保存されていない可能性があります。

    (この現象はテーマではなくBASEのシステム側の問題となりますので、利用しているテーマに関わらず起こりうる現象となります。)

    【 解決方法 】
    一旦、設定しようとしている項目を空欄にした状態で「保存」を押して「終了」してBASE管理画面のトップに戻ります。
    (設定しようとしている項目を空欄にしても「保存」がクリックできる状態にならない時は、別の項目のON/OFFを切り替えるなどして「保存」ができるようになるかお試しください。)

    次に、再度BASE管理画面のトップからデザイン編集画面に進んで上記項目が正常に空欄として保存されていることをご確認ください。

    その状態で改めてその項目を設定して「保存」→「終了」としていただき、正常にデータが更新されていることをお確かめください。
    (通常、設定は複数を同時に行っていただけますが、うまくいかない場合には1項目ずつ「設定」→「保存」→「終了」を繰り返してください。)

    また、テキストエリア形式の設定項目において正常にデータが保存されない(「保存」が押せない)場合には、
    入力する際にコピーペーストするのではなく、空欄の状態から手動でテキストを入力する形で記述することもお試しください。

    上記の方法でもうまくいかない場合には、BASE側のサーバーに一時的な問題が生じている可能性がありますので、
    お手数ですがしばらく時間をおいてから再度お試しください。

  • デザイン編集画面で「保存」ボタンが押せません。(設定内容がプレビューに反映されません。)

    一時的にBASEのデータサーバとの通信が正常に行われていないために、
    設定内容がBASEのシステム側に反映されず「保存」ボタンが押せなくなっている可能性があります。

    (この現象はテーマではなくBASEのシステム側の問題となりますので、利用しているテーマに関わらず起こりうる現象となります。)

    【 解決方法 】
    設定しようとしている項目を空欄にした状態(またはON/OFFを切り替えた状態)にして「保存」ができるようになるかお試しください。
    それでも「保存」がクリックできる状態にならない時は、別の項目のON/OFFを切り替えるなどして「保存」できる状態になるかご確認ください。

    「保存」ができる状態になったら一度そのまま「保存」→「終了」していただき、正常にデータが更新されていることをお確かめください。
    その後、改めてデザイン画面にて設定を続けてください。
    (通常、設定は複数を同時に行っていただけますが、うまくいかない場合には1項目ずつ「設定」→「保存」→「終了」を繰り返してください。)

    また、テキストエリア形式の設定項目において正常にデータが保存されない(「保存」が押せない)場合には、
    入力する際にコピーペーストするのではなく、空欄の状態から手動でテキストを入力する形で記述することもお試しください。

    上記の方法でもうまくいかない場合には、BASE側のサーバーに一時的な問題が生じている可能性がありますので、
    お手数ですがしばらく時間をおいてから再度お試しください。

  • テーマが自動的にアップデートされないのですが、どうすればいいですか?

    通常、アップデートが行われた際にはご購入いただいたテーマも自動的に更新されますが、
    HTML編集Appsを利用している場合には、編集内容を保護する為に自動では更新されません。
    その際には手動でアップデート内容を適用していただく必要があります。

    HTML編集Appsを利用してテーマを改造している場合には、現在選択されているテーマが「カスタムテーマ」となっています。
    これはご購入いただいたテーマを元にしたオリジナルの別のテーマとして保存されているためです。
    「Twinkle」テーマを選択していただくことでアップデートが適用された最新の状態のテーマとなりますので、
    改めてHTML編集Appsを利用してオリジナルの改造/編集を行ってください。

ご購入

BASE専用テーマ【 Twinkle(トゥインクル) 】はBASEデザインマーケットにてご購入いただけます。

お問い合わせ

【 Twinkle(トゥインクル)】に関するお問い合わせは下記のメールフォームよりお問い合わせください。

テーマの設定に関するお問い合わせの際には、事前に「オンラインマニュアル」や「よくある質問」をご確認ください。

お問い合わせへの対応は通常2営業日以内に行っております。
場合によってはお時間を頂く場合があります事を予めご了承ください。

デザインテーマ一覧

Dolce & Vivaceでは豊富なBASEデザインテーマを取り扱っています。
ショップのイメージに合わせた理想のテーマがきっと見つかります。

有料カスタマイズ

テーマはご購入時の状態でも多彩なカスタマイズ機能を備えていますが、
さらにオリジナルのカスタマイズをご希望の方は「BASEテーマの有料カスタマイズサービス」をご検討ください。

カスタマイズ対応はTwinkleをはじめとした Dolce & Vivace のテーマのみを対象とさせていただいております。
(BASEデザインマーケット内の他社様が販売しているテーマのカスタマイズ依頼はお引き受け致しかねます。)