Contact information
{{ 'sb-base.css' | asset_url | stylesheet_tag }}
{{ 'sb-base.js' | asset_url | script_tag }}
{%- comment -%} Signature Beauty — Contact. Shopify contact form, brand styled. {%- endcomment -%}
{%- if section.settings.quick_links != blank -%}
{%- endif -%}
{%- if section.settings.hours != blank -%}
{%- endif -%}
{%- stylesheet -%}
.sb-contact{padding:5.5rem 0}
.sb-contact__grid{display:grid;grid-template-columns:340px 1fr;gap:2rem;align-items:start;max-width:1040px;margin:0 auto}
.sb-contact__aside{display:flex;flex-direction:column;gap:1rem}
.sb-contact__card{background:#fff;border:1px solid var(--sb-line);border-radius:18px;padding:1.5rem 1.6rem}
.sb-contact__label{text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;font-weight:600;color:var(--sb-deep);margin:0 0 .7rem}
.sb-contact__email{font-family:var(--sb-serif);font-size:1.35rem;color:var(--sb-ink);border-bottom:1px solid var(--sb-rose);padding-bottom:2px;word-break:break-word}
.sb-contact__email:hover{color:var(--sb-deep)}
.sb-contact__note{font-size:.9rem;opacity:.72;margin:.8rem 0 0;line-height:1.55}
.sb-contact__links{list-style:none;margin:0;padding:0}
.sb-contact__links li{margin-bottom:.6rem}
.sb-contact__links li:last-child{margin-bottom:0}
.sb-contact__links a{font-size:.94rem;border-bottom:1px solid var(--sb-line);padding-bottom:2px}
.sb-contact__links a:hover{color:var(--sb-deep);border-color:var(--sb-rose)}
.sb-contact__formwrap{background:#fff;border:1px solid var(--sb-line);border-radius:22px;padding:2.2rem;box-shadow:0 24px 60px rgba(90,46,64,.10)}
.sb-contact__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sb-contact__field{display:block;margin-bottom:1.1rem}
.sb-contact__field span{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.45rem;color:var(--sb-ink)}
.sb-contact__field span em{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0;opacity:.5;margin-left:.35rem}
.sb-contact__field input,.sb-contact__field select,.sb-contact__field textarea{
width:100%;padding:.85rem 1rem;border:1px solid var(--sb-line);border-radius:12px;background:var(--sb-cream);
font-family:var(--sb-sans);font-size:.97rem;color:var(--sb-ink);outline:none;transition:border-color .2s,box-shadow .2s}
.sb-contact__field textarea{resize:vertical;min-height:130px}
.sb-contact__field input:focus,.sb-contact__field select:focus,.sb-contact__field textarea:focus{
border-color:var(--sb-rose);box-shadow:0 0 0 3px rgba(227,167,183,.25);background:#fff}
.sb-contact__submit{width:100%;margin-top:.4rem}
.sb-contact__msg{padding:.9rem 1.1rem;border-radius:12px;font-size:.93rem;margin:0 0 1.4rem}
.sb-contact__msg--ok{background:rgba(46,125,79,.10);color:#2e7d4f}
.sb-contact__msg--err{background:rgba(192,57,43,.10);color:#c0392b}
@media(max-width:900px){
.sb-contact__grid{grid-template-columns:1fr}
.sb-contact__formwrap{padding:1.6rem;order:-1}
.sb-contact__row{grid-template-columns:1fr;gap:0}
}
{%- endstylesheet -%}
{% schema %}
{
"name": "SB Contact",
"tag": "section",
"settings": [
{ "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Contact" },
{ "type": "text", "id": "heading", "label": "Heading", "default": "Talk to a real person." },
{ "type": "textarea", "id": "sub", "label": "Subheading", "default": "Questions about an order, a routine, or your skin. We answer every message ourselves." },
{ "type": "text", "id": "email", "label": "Email address", "default": "info@shopsignaturebeauty.com" },
{ "type": "textarea", "id": "response_time", "label": "Response time note", "default": "We reply within one business day, Monday through Friday." },
{ "type": "textarea", "id": "hours", "label": "Hours", "default": "Monday to Friday, 9am to 5pm Pacific." },
{ "type": "textarea", "id": "quick_links", "label": "Quick links", "info": "One per line: Label | /url", "default": "Returns and refunds | /policies/refund-policy\nShipping information | /policies/shipping-policy\nShop all routines | /collections/all" },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Send message" },
{ "type": "color", "id": "bg", "label": "Background", "default": "#FFF9F6" }
],
"presets": [{ "name": "SB Contact" }]
}
{% endschema %}
{%- if section.settings.eyebrow != blank -%}
{{ section.settings.eyebrow }}
{%- endif -%}{{ section.settings.heading }}
{%- if section.settings.sub != blank -%}{{ section.settings.sub }}
{%- endif -%}Email us
{{ section.settings.email }} {%- if section.settings.response_time != blank -%}{{ section.settings.response_time }}
{%- endif -%}Before you write
-
{%- assign rows = section.settings.quick_links | newline_to_br | split: '
- {{ label }} {%- endif -%} {%- endfor -%}
' -%} {%- for row in rows -%} {%- assign parts = row | strip | split: '|' -%} {%- assign label = parts[0] | strip -%} {%- assign url = parts[1] | strip -%} {%- if label != blank -%}
Hours
{{ section.settings.hours }}
{%- form 'contact', class: 'sb-contact__form' -%}
{%- if form.posted_successfully? -%}
Thanks, we got it. You will hear back from us within one business day.
{%- elsif form.errors -%}Something did not go through. {{ form.errors.translated_fields.email }} {{ form.errors.messages.email }}
{%- endif -%}
Name
Email required
Order number if you have one
What is this about
Order status
Return or refund
Product question
Wholesale or partnership
Something else
Message required
{{ form.body }}
{{ section.settings.button_label }}
{%- endform -%}