jamey/berrypod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: enhance theme customization with layout controls and real product images

Browse Source 
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:
Jamey Greenwood
2026-01-01 16:16:05 +00:00
parent 1ca703e548
commit a8c0e150c8
16 changed files with 793 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
lib/simpleshop_theme/theme/presets.ex
View File

@@ -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

58
lib/simpleshop_theme/theme/preview_data.ex
View File

@@ -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