Edit Opening Hours

Name

Also known as (comma separated)

Brief definition Display of business operating times.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Opening hours" }, { "id": "todayHours", "type": "text", "label": "Today's hours", "default": "9:00 - 18:00" }, { "id": "openNow", "type": "toggle", "label": "Open now", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"hours\">\n <div class=\"hours__head\">\n <h3 class=\"hours__heading\">{{heading}}</h3>\n <span class=\"hours__status\" style=\"--accent:{{accent}};\">{{#if openNow}}Open now{{/if}}{{#unless openNow}}Closed now{{/unless}}</span>\n </div>\n <dl class=\"hours__list\">\n <div class=\"hours__row hours__row--today\"><dt>Today</dt><dd>{{todayHours}}</dd></div>\n <div class=\"hours__row\"><dt>Tue</dt><dd>9:00 - 18:00</dd></div>\n <div class=\"hours__row\"><dt>Wed</dt><dd>9:00 - 18:00</dd></div>\n <div class=\"hours__row\"><dt>Sat</dt><dd>10:00 - 14:00</dd></div>\n <div class=\"hours__row\"><dt>Sun</dt><dd>Closed</dd></div>\n </dl>\n</div>\n<style>\n.hours { font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; padding: 18px; border: 1px solid #24143022; border-radius: 14px; background: #FAF7F2; }\n.hours__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n.hours__heading { margin: 0; font-size: 16px; font-weight: 700; }\n.hours__status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; background: var(--accent); color: #241430; }\n.hours__list { margin: 0; }\n.hours__row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #24143012; }\n.hours__row dt { font-weight: 600; }\n.hours__row dd { margin: 0; color: #241430cc; }\n.hours__row--today dt, .hours__row--today dd { color: #241430; font-weight: 700; }\n</style>", "tailwind": "<div class=\"font-sans text-sm text-[#241430] max-w-[280px] p-4.5 border border-[#24143022] rounded-2xl bg-[#FAF7F2]\">\n <div class=\"flex items-center justify-between mb-3\">\n <h3 class=\"m-0 text-base font-bold\">{{heading}}</h3>\n <span class=\"text-[11px] font-bold uppercase tracking-wide px-2.5 py-1 rounded-full text-[#241430]\" style=\"background:{{accent}};\">{{#if openNow}}Open now{{/if}}{{#unless openNow}}Closed now{{/unless}}</span>\n </div>\n <dl class=\"m-0\">\n <div class=\"flex justify-between py-1.5 border-b border-[#24143012] text-[#241430] font-bold\"><dt>Today</dt><dd class=\"m-0\">{{todayHours}}</dd></div>\n <div class=\"flex justify-between py-1.5 border-b border-[#24143012]\"><dt class=\"font-semibold\">Tue</dt><dd class=\"m-0 text-[#241430]/80\">9:00 - 18:00</dd></div>\n <div class=\"flex justify-between py-1.5 border-b border-[#24143012]\"><dt class=\"font-semibold\">Wed</dt><dd class=\"m-0 text-[#241430]/80\">9:00 - 18:00</dd></div>\n <div class=\"flex justify-between py-1.5 border-b border-[#24143012]\"><dt class=\"font-semibold\">Sat</dt><dd class=\"m-0 text-[#241430]/80\">10:00 - 14:00</dd></div>\n <div class=\"flex justify-between py-1.5\"><dt class=\"font-semibold\">Sun</dt><dd class=\"m-0 text-[#241430]/80\">Closed</dd></div>\n </dl>\n</div>", "react": "export function OpeningHours({\n heading = \"{{heading}}\",\n todayHours = \"{{todayHours}}\",\n openNow = {{openNow}},\n accent = \"{{accent}}\",\n}) {\n const rows = [\n [\"Tue\", \"9:00 - 18:00\"],\n [\"Wed\", \"9:00 - 18:00\"],\n [\"Sat\", \"10:00 - 14:00\"],\n [\"Sun\", \"Closed\"],\n ];\n return (\n <div style={{ font: \"14px system-ui, sans-serif\", color: \"#241430\", maxWidth: 280, padding: 18,\n border: \"1px solid #24143022\", borderRadius: 14, background: \"#FAF7F2\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", marginBottom: 12 }}>\n <h3 style={{ margin: 0, fontSize: 16, fontWeight: 700 }}>{heading}</h3>\n <span style={{ fontSize: 11, fontWeight: 700, textTransform: \"uppercase\", letterSpacing: \"0.04em\",\n padding: \"4px 9px\", borderRadius: 999, background: accent, color: \"#241430\" }}>{openNow ? \"Open now\" : \"Closed now\"}</span>\n </div>\n <dl style={{ margin: 0 }}>\n <div style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"5px 0\", borderBottom: \"1px solid #24143012\", fontWeight: 700 }}>\n <dt>Today</dt><dd style={{ margin: 0 }}>{todayHours}</dd>\n </div>\n {rows.map(([day, time]) => (\n <div key={day} style={{ display: \"flex\", justifyContent: \"space-between\", padding: \"5px 0\", borderBottom: \"1px solid #24143012\" }}>\n <dt style={{ fontWeight: 600 }}>{day}</dt><dd style={{ margin: 0, color: \"#241430cc\" }}>{time}</dd>\n </div>\n ))}\n </dl>\n </div>\n );\n}" }