Theme Studio
One theme, infinite possibilities. Every combination is designed to work beautifully.
<%= for {value, title, desc} <- [
{"text-only", "Shop name only", "Your name in the heading font"},
{"logo-text", "Logo + shop name", "Your logo image with name beside it"},
{"logo-only", "Logo only", "Just your logo (with text built in)"}
] do %>
<% end %>
<%= if @theme_settings.logo_mode in ["logo-text", "logo-only"] do %>
<%= if @logo_image do %>
![Current logo]({"/image_cache/#{@logo_image.id}.webp"})
<% end %>
<%= for entry <- @uploads.logo_upload.entries do %>
{entry.progress}%
<%= for err <- upload_errors(@uploads.logo_upload, entry) do %>
{error_to_string(err)}
<% end %> <% end %> <%= for err <- upload_errors(@uploads.logo_upload) do %>{error_to_string(err)}
<% end %> <%= if @logo_image do %> <%= if @logo_image.is_svg do %>
<%= if @theme_settings.logo_recolor do %>
<% end %>
<% end %>
<% end %>
Your icon appears in browser tabs and on home screens.
<%= if !@theme_settings.use_logo_as_icon do %>
<%= if @icon_image do %>
<%= for entry <- @uploads.icon_upload.entries do %>
<%= if @icon_image.is_svg do %>
![Current icon]({"/images/#{@icon_image.id}/recolored/000000"})
<% else %>
![Current icon]({"/image_cache/#{@icon_image.id}.webp"})
<% end %>
<% end %>
<% else %>
<% end %>
{entry.progress}%
<%= for err <- upload_errors(@uploads.icon_upload, entry) do %>
{error_to_string(err)}
<% end %> <% end %> <%= for err <- upload_errors(@uploads.icon_upload) do %>{error_to_string(err)}
<% end %>
<%= if @header_image do %>
![Current header background]({"/image_cache/#{@header_image.id}.webp"})
<% end %>
<%= for entry <- @uploads.header_upload.entries do %>
<% end %>
{entry.progress}%
<%= for err <- upload_errors(@uploads.header_upload, entry) do %>
{error_to_string(err)}
<% end %> <% end %> <%= for err <- upload_errors(@uploads.header_upload) do %>{error_to_string(err)}
<% end %>
<%= for {preset_name, description} <- @presets_with_descriptions do %>
<% end %>
Customise
Typography
<%= for typo <- ["clean", "editorial", "modern", "classic", "friendly", "minimal"] do %>
<% end %>
<%= for {value, label} <- [{"small", "Small"}, {"medium", "Medium"}, {"large", "Large"}] do %>
<% end %>
<%= for {value, label} <- [{"regular", "Regular"}, {"medium", "Medium"}, {"bold", "Bold"}] do %>
<% end %>
Colours
<%= for mood <- ["warm", "neutral", "cool", "dark"] do %>
<% end %>
Layout
<%= for cols <- ["2", "3", "4"] do %>
<% end %>
<%= for density <- ["spacious", "balanced", "compact"] do %>
<% end %>
<%= for layout <- ["standard", "centered", "left"] do %>
<% end %>
Shape
<%= for shape <- ["sharp", "soft", "round", "pill"] do %>
<% end %>
<%= for {value, label} <- [{"none", "None"}, {"sm", "Subtle"}, {"md", "Medium"}, {"lg", "Strong"}] do %>
<% end %>
<%= for {value, label} <- [{"filled", "Filled"}, {"outline", "Outline"}, {"soft", "Soft"}] do %>
<% end %>
Products
<%= for width <- ["contained", "wide", "full"] do %>
<% end %>
<%= for {value, label} <- [{"square", "Square"}, {"portrait", "Portrait"}, {"landscape", "Landscape"}] do %>
<% end %>
<%= for {value, label} <- [{"left", "Left"}, {"center", "Centre"}] do %>
<% end %>
Product page
Current combination
{String.capitalize(@theme_settings.mood)} · {String.capitalize(
@theme_settings.typography
)} · {String.capitalize(@theme_settings.shape)} · {String.capitalize(
@theme_settings.density
)} · {@theme_settings.grid_columns}-up · {String.capitalize(
@theme_settings.header_layout
)}
One of 100,000+ possible combinations