> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Shopify ストアフロントを構築する
> Replit を使ってカスタム Shopify ストアフロントをデザインしてローンチする方法を学びましょう。
export const CANDLE_STORE_PROMPT = `Build me an online store that sells hand-poured soy candles for a brand called "Ember & Oak." Use Shopify as the backend for the store and its products.
It should feel warm, calm, and premium — like a boutique home-goods brand. Use a soft cream background, deep charcoal text, and a muted amber accent. Elegant serif headlines, generous spacing, and soft rounded product cards.
Top to bottom:
A simple header with a small "Ember & Oak" wordmark on the left, a few links in the middle (Shop, Scents, Our Story), and a cart icon on the right.
A hero section with a large lifestyle photo of a lit candle on a wooden table in warm light, a headline like "Light that feels like home," a one-line subhead, and a "Shop candles" button.
A product grid that shows each candle with its photo, name, scent, and price, with an "Add to cart" button on each card. Read the products from the connected Shopify store.
A short "Our Story" band with a sentence or two about small-batch, hand-poured candles.
A simple footer with the wordmark and the same links.
Generate warm, cozy candle and home photography. Make it look like a real boutique brand, not a template. Wire the product grid and cart to the Shopify store you set up — don't ask me for any Shopify API keys.`;
export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
const ensureLZString = () => {
if (typeof document === "undefined") return;
if (window.LZString) return;
if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
const s = document.createElement("script");
s.src = LZ_SRC;
s.async = true;
document.head.appendChild(s);
};
const handleCopy = async e => {
const btn = e.currentTarget;
if (!prompt) return;
try {
await navigator.clipboard.writeText(prompt);
} catch {
const ta = document.createElement("textarea");
ta.value = prompt;
document.body.appendChild(ta);
ta.select();
try {
document.execCommand("copy");
} catch {}
document.body.removeChild(ta);
}
const original = btn.dataset.label || btn.innerText;
btn.dataset.label = original;
btn.innerText = "Copied!";
setTimeout(() => {
if (btn.isConnected) btn.innerText = original;
}, 1500);
};
const handleBuild = () => {
if (!prompt || typeof window === "undefined") return;
const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
let url;
if (window.LZString) {
const encoded = window.LZString.compressToEncodedURIComponent(prompt);
url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
} else {
url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
}
window.open(url, "_blank", "noopener,noreferrer");
};
ensureLZString();
const baseButtonStyle = {
display: "inline-flex",
alignItems: "center",
gap: "6px",
padding: "8px 16px",
borderRadius: "8px",
fontSize: "14px",
fontWeight: 500,
cursor: "pointer",
lineHeight: 1.2,
fontFamily: "inherit",
textDecoration: "none"
};
return
既存の Shopify アカウントでログインするか、招待を承認するために新規アカウントを作成してください。
**Claim store** を選択して、ストアの Replit アプリを承認し、無料トライアルを開始してください。その後、プライマリオーナーとして Shopify 管理画面に移動します。
