Tee Simulator — WordPress Plugin

Features

できること

🔀

リアルタイムレイヤー合成

ベース画像とオーバーレイ画像を重ねてリアルタイムプレビュー。ユーザーがクリックで組み合わせを選べます。

🔗

組み合わせ別リンク

カラー×柄の組み合わせごとにBASEやShopifyなどの商品ページURLを設定。ボタンクリックで直接購入ページへ。

🖼️

サムネイル画像の個別設定

選択ボタンに本画像とは別のサムネイル画像を設定可能。カラースウォッチや柄アイコンで見やすく。

🎨

ブレンドモード

Normal / Multiply / Screen / Overlay など6種類のブレンドモードと不透明度調整。透過PNGにも対応。

📝

自由な見出しテキスト

「カラーを選ぶ」「デザインを選ぶ」など、レイヤーごとの見出しを自由にカスタマイズ。

📱

レスポンシブ対応

PC・タブレット・スマホに自動対応。Elementorのコンテナ幅にもフィットします。

Features

What It Does

🔀

Live Layer Compositing

Overlay base and pattern images with real-time preview. Users click to choose their combination.

🔗

Per-Combination Links

Set a unique URL for each color × pattern combo. One click takes customers to BASE, Shopify, or any shop.

🖼️

Custom Thumbnails

Set separate thumbnail images for selection buttons — perfect for color swatches or pattern icons.

🎨

Blend Modes

6 blend modes (Normal, Multiply, Screen, Overlay, Darken, Lighten) plus opacity control. Works with transparent PNGs.

📝

Custom Headings

Customize the heading text for each layer selector — "Choose Color", "Choose Design", or anything you like.

📱

Responsive

Adapts to PC, tablet, and mobile. Fits within Elementor containers automatically.

How to Use

使い方

プラグインをインストール

ZIPファイルをダウンロードし、WordPress管理画面 → プラグイン → 新規追加 → アップロードでインストール＆有効化。

画像を登録

管理画面の「Tee Simulator」メニューでセットを作成。レイヤー1（ベース画像）とレイヤー2（柄画像）にそれぞれ画像を複数登録します。

リンクを設定

各組み合わせに対応する商品ページのURLを入力。BASE、Shopify、自社ECなど何でもOK。

ショートコードを貼る

ページやElementorに [tee_simulator] を貼り付けるだけ。すぐに使えます。

How to Use

Getting Started

Install the Plugin

Download the ZIP, go to WordPress Admin → Plugins → Add New → Upload, then activate.

Register Images

Go to "Tee Simulator" in the admin menu. Create a set and add multiple images to Layer 1 (base) and Layer 2 (overlay).

Set Links

Enter the product page URL for each combination. Works with BASE, Shopify, WooCommerce, or any URL.

Add the Shortcode

Paste [tee_simulator] into any page or Elementor widget. That's it!

Use Cases

こんな用途に

👕

アパレル商品カタログ

Tシャツのカラー×柄の組み合わせを一覧表示

📱

スマホケース

機種別ベース×デザインの組み合わせプレビュー

🎨

インテリア・壁紙

壁の色×柄パターンのシミュレーション

🏠

建材・外壁

素材×カラーの組み合わせを視覚的に確認