feat: enhance theme customization with layout controls and real product images
Add comprehensive layout and styling controls including header layout options (standard, centered, left), content width settings (contained, wide, full), and card shadow levels. Update all theme presets with these new settings. Replace placeholder images with real Unsplash product and category images for more realistic previews. Add announcement bar and sticky header toggle options for enhanced header customization. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
defmodule SimpleshopTheme.Theme.Presets do
|
||||
@moduledoc """
|
||||
Defines the 9 curated theme presets for SimpleShop.
|
||||
Defines the 8 curated theme presets for SimpleShop.
|
||||
"""
|
||||
|
||||
@presets %{
|
||||
@@ -11,7 +11,10 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
density: "spacious",
|
||||
grid_columns: "3",
|
||||
header_layout: "centered",
|
||||
accent_color: "#e85d04"
|
||||
accent_color: "#e85d04",
|
||||
layout_width: "wide",
|
||||
card_shadow: "sm",
|
||||
announcement_bar: true
|
||||
},
|
||||
studio: %{
|
||||
mood: "neutral",
|
||||
@@ -20,7 +23,10 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
density: "balanced",
|
||||
grid_columns: "4",
|
||||
header_layout: "standard",
|
||||
accent_color: "#3b82f6"
|
||||
accent_color: "#3b82f6",
|
||||
layout_width: "wide",
|
||||
card_shadow: "sm",
|
||||
announcement_bar: true
|
||||
},
|
||||
boutique: %{
|
||||
mood: "warm",
|
||||
@@ -28,8 +34,11 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
shape: "soft",
|
||||
density: "balanced",
|
||||
grid_columns: "3",
|
||||
header_layout: "centered",
|
||||
accent_color: "#b45309"
|
||||
header_layout: "left",
|
||||
accent_color: "#b45309",
|
||||
layout_width: "contained",
|
||||
card_shadow: "md",
|
||||
announcement_bar: true
|
||||
},
|
||||
bold: %{
|
||||
mood: "neutral",
|
||||
@@ -38,7 +47,10 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
density: "compact",
|
||||
grid_columns: "4",
|
||||
header_layout: "standard",
|
||||
accent_color: "#dc2626"
|
||||
accent_color: "#dc2626",
|
||||
layout_width: "full",
|
||||
card_shadow: "none",
|
||||
announcement_bar: true
|
||||
},
|
||||
playful: %{
|
||||
mood: "neutral",
|
||||
@@ -47,16 +59,22 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
density: "balanced",
|
||||
grid_columns: "4",
|
||||
header_layout: "standard",
|
||||
accent_color: "#8b5cf6"
|
||||
accent_color: "#8b5cf6",
|
||||
layout_width: "wide",
|
||||
card_shadow: "md",
|
||||
announcement_bar: true
|
||||
},
|
||||
minimal: %{
|
||||
mood: "cool",
|
||||
typography: "minimal",
|
||||
mood: "neutral",
|
||||
typography: "impulse",
|
||||
shape: "sharp",
|
||||
density: "spacious",
|
||||
grid_columns: "2",
|
||||
header_layout: "minimal",
|
||||
accent_color: "#171717"
|
||||
header_layout: "standard",
|
||||
accent_color: "#171717",
|
||||
layout_width: "full",
|
||||
card_shadow: "none",
|
||||
announcement_bar: false
|
||||
},
|
||||
night: %{
|
||||
mood: "dark",
|
||||
@@ -65,7 +83,10 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
density: "balanced",
|
||||
grid_columns: "4",
|
||||
header_layout: "standard",
|
||||
accent_color: "#f97316"
|
||||
accent_color: "#f97316",
|
||||
layout_width: "wide",
|
||||
card_shadow: "lg",
|
||||
announcement_bar: true
|
||||
},
|
||||
classic: %{
|
||||
mood: "warm",
|
||||
@@ -74,22 +95,10 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
density: "spacious",
|
||||
grid_columns: "3",
|
||||
header_layout: "standard",
|
||||
accent_color: "#166534"
|
||||
},
|
||||
impulse: %{
|
||||
mood: "neutral",
|
||||
typography: "impulse",
|
||||
shape: "sharp",
|
||||
density: "spacious",
|
||||
grid_columns: "3",
|
||||
header_layout: "centered",
|
||||
accent_color: "#000000",
|
||||
font_size: "medium",
|
||||
heading_weight: "regular",
|
||||
layout_width: "full",
|
||||
button_style: "filled",
|
||||
card_shadow: "none",
|
||||
product_text_align: "center"
|
||||
accent_color: "#166534",
|
||||
layout_width: "contained",
|
||||
card_shadow: "sm",
|
||||
announcement_bar: true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,14 +108,13 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
boutique: "Warm & sophisticated",
|
||||
bold: "High contrast, strong",
|
||||
playful: "Fun & approachable",
|
||||
minimal: "Understated & modern",
|
||||
minimal: "Light & airy",
|
||||
night: "Dark & dramatic",
|
||||
classic: "Traditional & refined",
|
||||
impulse: "Light & airy"
|
||||
classic: "Traditional & refined"
|
||||
}
|
||||
|
||||
# Core keys used to match presets (excludes branding-specific settings)
|
||||
@core_keys ~w(mood typography shape density grid_columns header_layout accent_color)a
|
||||
@core_keys ~w(mood typography shape density grid_columns header_layout accent_color layout_width card_shadow announcement_bar)a
|
||||
|
||||
@doc """
|
||||
Returns all available presets.
|
||||
@@ -141,7 +149,7 @@ defmodule SimpleshopTheme.Theme.Presets do
|
||||
## Examples
|
||||
|
||||
iex> list_names()
|
||||
[:gallery, :studio, :boutique, :bold, :playful, :minimal, :night, :classic, :impulse]
|
||||
[:gallery, :studio, :boutique, :bold, :playful, :minimal, :night, :classic]
|
||||
|
||||
"""
|
||||
def list_names do
|
||||
|
||||
@@ -79,8 +79,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Soft, breathable cotton tee perfect for everyday wear",
|
||||
price: 2999,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/e5e5e5/525252?text=Cotton+Tee",
|
||||
hover_image_url: "https://placehold.co/600x800/d4d4d4/525252?text=Cotton+Tee",
|
||||
image_url: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1622445275576-721325763afe?w=600&h=800&fit=crop&q=80",
|
||||
category: "Clothing",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -91,8 +91,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Handcrafted genuine leather bag with adjustable strap",
|
||||
price: 8999,
|
||||
compare_at_price: 11999,
|
||||
image_url: "https://placehold.co/600x800/d4a574/1c1917?text=Leather+Bag",
|
||||
hover_image_url: "https://placehold.co/600x800/c49563/1c1917?text=Leather+Bag",
|
||||
image_url: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1590874103328-eac38a683ce7?w=600&h=800&fit=crop&q=80",
|
||||
category: "Accessories",
|
||||
in_stock: true,
|
||||
on_sale: true
|
||||
@@ -103,8 +103,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Handmade ceramic mug with unique glaze finish",
|
||||
price: 2499,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/94a3b8/0f172a?text=Coffee+Mug",
|
||||
hover_image_url: "https://placehold.co/600x800/64748b/0f172a?text=Coffee+Mug",
|
||||
image_url: "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1481833761820-0509d3217039?w=600&h=800&fit=crop&q=80",
|
||||
category: "Home",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -115,8 +115,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Sleek design with Japanese quartz movement",
|
||||
price: 12999,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/171717/fafafa?text=Watch",
|
||||
hover_image_url: "https://placehold.co/600x800/262626/fafafa?text=Watch",
|
||||
image_url: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1524592094714-0f0654e20314?w=600&h=800&fit=crop&q=80",
|
||||
category: "Accessories",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -127,8 +127,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Cozy merino wool blanket in herringbone pattern",
|
||||
price: 7999,
|
||||
compare_at_price: 9999,
|
||||
image_url: "https://placehold.co/600x800/a3a3a3/171717?text=Blanket",
|
||||
hover_image_url: "https://placehold.co/600x800/8a8a8a/171717?text=Blanket",
|
||||
image_url: "https://images.unsplash.com/photo-1580301762395-21ce84d00bc6?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1600369671854-2d9f5db4a5e0?w=600&h=800&fit=crop&q=80",
|
||||
category: "Home",
|
||||
in_stock: false,
|
||||
on_sale: true
|
||||
@@ -139,8 +139,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Natural handmade soaps with essential oils",
|
||||
price: 3499,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/fdf8f3/1c1917?text=Soap+Set",
|
||||
hover_image_url: "https://placehold.co/600x800/f5ebe0/1c1917?text=Soap+Set",
|
||||
image_url: "https://images.unsplash.com/photo-1607006344380-b6775a0824a7?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1600857544200-b2f666a9a2ec?w=600&h=800&fit=crop&q=80",
|
||||
category: "Beauty",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -151,8 +151,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Classic cut denim jacket with vintage wash",
|
||||
price: 8499,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/3b82f6/ffffff?text=Denim+Jacket",
|
||||
hover_image_url: "https://placehold.co/600x800/2563eb/ffffff?text=Denim+Jacket",
|
||||
image_url: "https://images.unsplash.com/photo-1576995853123-5a10305d93c0?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1601333144130-8cbb312386b6?w=600&h=800&fit=crop&q=80",
|
||||
category: "Clothing",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -163,8 +163,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Durable organic cotton canvas with reinforced handles",
|
||||
price: 2999,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/f5f5f5/171717?text=Tote+Bag",
|
||||
hover_image_url: "https://placehold.co/600x800/e5e5e5/171717?text=Tote+Bag",
|
||||
image_url: "https://images.unsplash.com/photo-1622560480605-d83c853bc5c3?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1597633125097-5a9ae3cb8a8f?w=600&h=800&fit=crop&q=80",
|
||||
category: "Accessories",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -175,8 +175,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Soy wax candle with cedar and vanilla notes",
|
||||
price: 3299,
|
||||
compare_at_price: 3999,
|
||||
image_url: "https://placehold.co/600x800/fdf8f3/57534e?text=Candle",
|
||||
hover_image_url: "https://placehold.co/600x800/f5ebe0/57534e?text=Candle",
|
||||
image_url: "https://images.unsplash.com/photo-1602028915047-37269d1a73f7?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1603006905003-be475563bc59?w=600&h=800&fit=crop&q=80",
|
||||
category: "Home",
|
||||
in_stock: true,
|
||||
on_sale: true
|
||||
@@ -187,8 +187,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Insulated bottle keeps drinks cold for 24 hours",
|
||||
price: 3999,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/0a0a0a/fafafa?text=Water+Bottle",
|
||||
hover_image_url: "https://placehold.co/600x800/171717/fafafa?text=Water+Bottle",
|
||||
image_url: "https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1570831739435-6601aa3fa4fb?w=600&h=800&fit=crop&q=80",
|
||||
category: "Accessories",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -199,8 +199,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Comfortable crew socks in solid colors",
|
||||
price: 1499,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/e5e5e5/525252?text=Socks",
|
||||
hover_image_url: "https://placehold.co/600x800/d4d4d4/525252?text=Socks",
|
||||
image_url: "https://images.unsplash.com/photo-1586350977771-b3b0abd50c82?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1582966772680-860e372bb558?w=600&h=800&fit=crop&q=80",
|
||||
category: "Clothing",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -211,8 +211,8 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
description: "Sustainable bamboo with juice groove",
|
||||
price: 4499,
|
||||
compare_at_price: nil,
|
||||
image_url: "https://placehold.co/600x800/d4a574/1c1917?text=Cutting+Board",
|
||||
hover_image_url: "https://placehold.co/600x800/c49563/1c1917?text=Cutting+Board",
|
||||
image_url: "https://images.unsplash.com/photo-1594226801341-41427b4e5c22?w=600&h=800&fit=crop&q=80",
|
||||
hover_image_url: "https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?w=600&h=800&fit=crop&q=80",
|
||||
category: "Kitchen",
|
||||
in_stock: true,
|
||||
on_sale: false
|
||||
@@ -296,35 +296,35 @@ defmodule SimpleshopTheme.Theme.PreviewData do
|
||||
name: "Clothing",
|
||||
slug: "clothing",
|
||||
product_count: 3,
|
||||
image_url: "https://placehold.co/400x300/e5e5e5/525252?text=Clothing"
|
||||
image_url: "https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?w=400&h=300&fit=crop&q=80"
|
||||
},
|
||||
%{
|
||||
id: "2",
|
||||
name: "Accessories",
|
||||
slug: "accessories",
|
||||
product_count: 4,
|
||||
image_url: "https://placehold.co/400x300/d4a574/1c1917?text=Accessories"
|
||||
image_url: "https://images.unsplash.com/photo-1606760227091-3dd870d97f1d?w=400&h=300&fit=crop&q=80"
|
||||
},
|
||||
%{
|
||||
id: "3",
|
||||
name: "Home",
|
||||
slug: "home",
|
||||
product_count: 3,
|
||||
image_url: "https://placehold.co/400x300/94a3b8/0f172a?text=Home"
|
||||
image_url: "https://images.unsplash.com/photo-1616046229478-9901c5536a45?w=400&h=300&fit=crop&q=80"
|
||||
},
|
||||
%{
|
||||
id: "4",
|
||||
name: "Kitchen",
|
||||
slug: "kitchen",
|
||||
product_count: 1,
|
||||
image_url: "https://placehold.co/400x300/fdf8f3/1c1917?text=Kitchen"
|
||||
image_url: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=300&fit=crop&q=80"
|
||||
},
|
||||
%{
|
||||
id: "5",
|
||||
name: "Beauty",
|
||||
slug: "beauty",
|
||||
product_count: 1,
|
||||
image_url: "https://placehold.co/400x300/f5f5f5/171717?text=Beauty"
|
||||
image_url: "https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=400&h=300&fit=crop&q=80"
|
||||
}
|
||||
]
|
||||
end
|
||||
|
||||
Reference in New Issue
Block a user