Shopify themes, liquid, logos, and UX
Hi, i created a code for my customer registration page that adds selection for customers to choose which type of emails they want. I am trying to figure out how to also add that code to the emails i send out. i am using shopify emails, so it gives the option to add "custom liquid". Can someone please help me adjust the code with the portion needed to make it work on the emails?
this is the current code i use for the customer registration, and the selections are toward the bottom. and below that is am image of how the options show on the registration. i want those same options to show at the bottom of my email by using the custom liquid option.
Thank you
{%- liquid
assign NS = 'customer-form'
assign cn = '#' | append: NS
-%}
{% render 'load-css', file: NS %}
<div class="{{ cn }}">
<h1 class="{{ cn }}-heading heading-font">
{{ 'customer.register.title' | t }}
</h1>
{%- form 'create_customer', novalidate: 'novalidate' -%}
{%- if form.errors -%}
<div class="{{ cn }}-alert">
{%- assign alert_heading = 'templates.contact.form.error_heading' | t -%}
{%- capture Alert_text -%}
<ul>
{%- for field in form.errors -%}
<li>
{%- if field == 'form' -%}
{{ form.errors.messages[field] }}
{%- else -%}
<a href="#RegisterForm-{{ field }}">
{{ form.errors.translated_fields[field] | capitalize }}
{{ form.errors.messages[field] }}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endcapture -%}
{% render 'alert',
type: 'danger',
heading: alert_heading,
text: Alert_text
%}
</div>
{%- endif -%}
<div class="{{ cn }}-field">
<input
class="{{ cn }}-input"
type="text"
name="customer[first_name]"
id="RegisterForm-FirstName"
{% if form.first_name %}value="{{ form.first_name }}"{% endif %}
autocomplete="given-name"
placeholder="{{ 'customer.register.first_name' | t }}"
>
</div>
<div class="{{ cn }}-field">
<input
class="{{ cn }}-input"
type="text"
name="customer[last_name]"
id="RegisterForm-LastName"
{% if form.last_name %}value="{{ form.last_name }}"{% endif %}
autocomplete="family-name"
placeholder="{{ 'customer.register.last_name' | t }}"
>
</div>
<div class="{{ cn }}-field">
<input
class="{{ cn }}-input"
type="email"
name="customer[email]"
id="RegisterForm-email"
{% if form.email %} value="{{ form.email }}"{% endif %}
spellcheck="false"
autocapitalize="off"
autocomplete="email"
aria-required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="RegisterForm-email-error"
{% endif %}
placeholder="{{ 'customer.register.email' | t }}"
>
</div>
<div class="{{ cn }}-field">
<input
class="{{ cn }}-input"
type="password"
name="customer[password]"
id="RegisterForm-password"
aria-required="true"
{% if form.errors contains 'password' %}
aria-invalid="true"
aria-describedby="RegisterForm-password-error"
{% endif %}
placeholder="{{ 'customer.register.password' | t }}"
>
</div>
<!-- Email Signup Options with Dynamic Subscription -->
<label>
<input type="radio" name="customer[tags]" value="all emails" checked>
Sign me up for all emails
</label><br>
<label>
<input type="radio" name="customer[tags]" value="upholstery emails">
Sign me up for upholstery emails only
</label><br>
<label>
<input type="radio" name="customer[tags]" value="window treatment emails">
Sign me up for window treatment emails only
</label><br>
<label>
<input type="radio" name="customer[tags]" value="unsubscribed">
No, don't sign me up. I don't want extra discounts
</label><br>
<!-- Hidden field for accepts marketing -->
<input type="hidden" name="customer[accepts_marketing]" id="accepts-marketing" value="true">
<!-- Script to update accepts_marketing based on selected option -->
<script>
document.querySelectorAll('input[name="customer[tags]"]').forEach((radio) => {
radio.addEventListener('change', () => {
if (radio.value === 'unsubscribed') {
document.getElementById('accepts-marketing').value = 'false';
} else {
document.getElementById('accepts-marketing').value = 'true';
}
});
});
</script>
<div class="{{ cn }}-footer">
{% render 'button',
t_text: 'customer.register.submit',
shadow: true,
block: true,
size: 'h4'
%}
<a class="{{ cn }}-switch-form" href="{{ routes.account_login_url }}">
{{ 'customer.login_page.sign_in' | t }}
</a>
</div>
{%- endform -%}
</div>
{% schema %}
{
"name": "Register"
}
{% endschema %}
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025