Example output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopify Store Optimizer</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1em 0;
}
.container {
display: flex;
}
nav {
width: 250px;
background-color: #2c3e50;
padding: 20px;
height: 100vh;
color: white;
}
nav a {
display: block;
color: white;
padding: 10px 0;
text-decoration: none;
}
nav a:hover {
background-color: #34495e;
}
main {
flex-grow: 1;
padding: 20px;
}
.card {
background-color: white;
margin: 20px 0;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card h3 {
margin: 0;
}
.analytics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
</style>
</head>
<body>
<header>
<h1>Shopify Store Optimizer</h1>
</header>
<div class="container">
<nav>
<h2>Dashboard</h2>
<a href="#">Overview</a>
<a href="#">Product Performance</a>
<a href="#">Customer Analytics</a>
<a href="#">Sales Trends</a>
<a href="#">Inventory Management</a>
<a href="#">Marketing</a>
<a href="#">Settings</a>
</nav>
<main>
<div class="card">
<h3>Store Overview</h3>
<p>Get a quick snapshot of your store's performance</p>
</div>
<div class="analytics-grid">
<div class="card">
<h3>Real-time Sales</h3>
<p>$12,345</p>
<p>Today</p>
</div>
<div class="card">
<h3>Top Products</h3>
<ul>
<li>Product 1 - 120 sales</li>
<li>Product 2 - 90 sales</li>
<li>Product 3 - 60 sales</li>
</ul>
</div>
<div class="card">
<h3>Customer Retention</h3>
<p>45% repeat customers</p>
</div>
</div>
<div class="card">
<h3>Marketing Insights</h3>
<p>View recommendations on personalized marketing strategies to boost your sales.</p>
</div>
</main>
</div>
</body>
</html>