<%= if @sidebar_collapsed do %>
<% else %> <.link href={~p"/admin"} class="theme-back-link"> <.icon name="hero-arrow-left-mini" class="size-4" /> Admin
<.icon name="hero-clipboard-document-check" class="size-5 admin-checklist-banner-icon" /> You're customising your theme. <.link navigate={~p"/admin"} class="admin-link admin-checklist-banner-link"> ← Back to checklist

Theme

Logo & header
<%= if @theme_settings.show_logo do %>
Upload logo (SVG or PNG)
<%= if @logo_image do %> <% 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 %>
Logo size {@theme_settings.logo_size}px
<%= if @logo_image.is_svg do %>
<%= if @theme_settings.logo_recolor do %>
{@theme_settings.logo_color}
<% end %>
<% end %> <% end %>
<% end %>

Your icon appears in browser tabs and on home screens.

<%= if !@theme_settings.use_logo_as_icon do %>
Upload icon (PNG or SVG, 512×512+)
<%= if @icon_image do %>
<%= if @icon_image.is_svg do %> Current icon <% else %> Current icon <% end %>
<% end %>
<%= for entry <- @uploads.icon_upload.entries do %>
{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 %>
<% end %>
Icon background {@theme_settings.icon_background_color}
<%= if @theme_settings.header_background_enabled do %>
Upload header image
<%= if @header_image do %>
<%= if @header_contrast_warning != :ok do %>
<.icon name="hero-exclamation-triangle" class="size-5" />
<%= if @header_contrast_warning == :poor do %> Text may be hard to read <% else %> Text contrast could be better <% end %>

The header text might blend into this background. Try switching to a <%= if @theme_settings.mood == "dark" do %> lighter mood <% else %> dark mood <% end %> or choosing a different image.

<% end %>
Zoom {@theme_settings.header_zoom}%
<%= if @theme_settings.header_zoom > 100 do %>
Horizontal position {@theme_settings.header_position_x}%
Vertical position {@theme_settings.header_position_y}%
<% end %>
<% end %> <%= for entry <- @uploads.header_upload.entries do %>
{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 %>
<% end %>
<%= for {preset_name, description} <- @presets_with_descriptions do %> <% end %>
{@theme_settings.accent_color}
{@theme_settings.secondary_accent_color}
{@theme_settings.sale_color}
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
<% end %>
<%= for {page_name, label} <- [ {:home, "Home"}, {:collection, "Collection"}, {:pdp, "Product"}, {:cart, "Cart"}, {:about, "About"}, {:delivery, "Delivery"}, {:privacy, "Privacy"}, {:terms, "Terms"}, {:contact, "Contact"}, {:error, "404"} ] do %> <% end %>
{@site_name |> String.downcase() |> String.replace(" ", "")}.myshopify.com
<.preview_page page={@preview_page} preview_data={@preview_data} theme_settings={@theme_settings} site_name={@site_name} logo_image={@logo_image} header_image={@header_image} cart_drawer_open={@cart_drawer_open} />