Hello, in the footer of my client’s site I have a newsletter sign up element. Can you please help me add a first + last name field? I’ve tried following other tutorials but haven’t had any luck.
The below is the sections/newsletter-compact.liquid
{%- liquid
assign overlay_opacity = section.settings.overlay_opacity | divided_by: 100.0
assign has_background = false
if section.settings.background_color != blank and section.settings.background_color != 'rgba(0,0,0,0)' or section.settings.background_image != blank or overlay_opacity > 0
assign has_background = true
endif
assign has_background_image = false
if section.settings.background_image != blank or section.settings.background_image_mobile != blank
assign has_background_image = true
endif
-%}
{% capture section_classes %}
section section--divider-{{ section.settings.divider_style }}
{{ section.settings.section_padding }}
{% endcapture %}
<div
class="
newsletter-compact
{% unless has_background %}
{{ section_classes }}
{% endunless %}
newsletter-compact--spacing-mode-{{ section.settings.spacing_mode }}
{% if settings.enable_section_animations and section.settings.enable_animation %}
animation
animation--newsletter-compact
{% endif %}
"
data-section-id="{{ section.id }}"
data-section-type="newsletter-compact"
style="
--color-background: {{ section.settings.background_color }};
--color-text: {{ section.settings.text_color }};
--color-text-link: {{ section.settings.text_color }};
--color-text-input: {{ section.settings.input_color }};
--color-background-input: {{ section.settings.input_background }};
--overlay-background: {{ section.settings.color_overlay }};
{% if section.settings.color_overlay_gradient != blank %}
--overlay-background-gradient: {{ section.settings.color_overlay_gradient }};
{% endif %}
--overlay-opacity: {{ overlay_opacity }};
{% render 'overlay-button-vars', color_button_text: section.settings.button_text_color, color_button_background: section.settings.button_background_color %}
--max-signup-width: {{ section.settings.max_signup_width }}px;
--max-block-content-width: {{ section.settings.max_block_content_width }}px;
--text-alignment: {{ section.settings.alignment }};
"
>
<div
class="
newsletter-compact__inner
{% if has_background %}
{{ section_classes }}
{% endif %}
"
>
{%- if has_background_image -%}
<div class="newsletter-compact__background-image-wrapper">
{%- if section.settings.background_image_mobile != blank -%}
{%- render 'image',
wrapper_class: 'newsletter-compact__background-image newsletter-compact__background-image--mobile',
image: section.settings.background_image_mobile,
sizes: '100vw',
focal_point: section.settings.focal_point_mobile
-%}
{%- endif -%}
{%- if section.settings.background_image != blank -%}
{%- render 'image',
wrapper_class: 'newsletter-compact__background-image',
image: section.settings.background_image,
sizes: '100vw',
focal_point: section.settings.focal_point
-%}
{%- endif -%}
</div>
{%- endif -%}
<div class="newsletter-compact__overlay"></div>
<div class="newsletter-compact__block-content section-blocks animation--section-blocks">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'newsletter_signup' -%}
{%- assign success_msg = 'general.newsletter_form.confirmation' | t -%}
<div class="newsletter-compact__signup newsletter-compact__block-item section-blocks__newsletter-signup">
{% form 'customer', class: 'newsletter-compact__signup-form', id: 'newsletter-subscribe' %}
{% render 'form-status', form: form, form_id: 'newsletter-subscribe', success_message: success_msg %}
{%- unless form.posted_successfully? -%}
<div class="newsletter-compact__signup-inner">
<input type="hidden" name="contact[tags]" value="newsletter">
<label for="newsletter-subscribe-email" class="visually-hidden">
{{- 'general.newsletter_form.email_placeholder' | t -}}
</label>
<input
type="email"
class="input newsletter-compact__signup-input"
name="contact[email]"
id="newsletter-subscribe-email"
value="{% if customer.email != blank %}{{ customer.email }}{% endif %}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
autocorrect="off"
autocapitalize="off"
required
>
{%- render 'button-block',
wrapper_class: 'newsletter-compact__signup-button',
label: block.settings.signup_link_text,
is_full: true,
is_overlay: true,
allow_linkless: true,
type: 'submit'
-%}
</div>
{%- endunless -%}
{% endform %}
{%- unless block.settings.footer_text == blank -%}
<div class="newsletter-compact__signup-footer ff-body fs-body-50 rte">
{{ block.settings.footer_text }}
</div>
{%- endunless -%}
</div>
{%- unless block.settings.text == blank -%}
<div class="newsletter-compact__block-content-text newsletter-compact__block-item rte ff-body {{ block.settings.text_font_class }} section-blocks__text">
{{ block.settings.text }}
</div>
{%- endunless -%}
{%- when 'text_content' -%}
{%- if block.settings.title != blank
or block.settings.text != blank
or block.settings.subheading != blank
-%}
<div
class="newsletter-compact__block-text-content section-blocks newsletter-compact__block-item"
style="--max-width: {{ block.settings.width }}px;"
>
{%- unless block.settings.title == blank -%}
<{{ block.settings.heading_tag }} class="newsletter-compact__block-text-content-heading ff-heading {{ block.settings.heading_font_class }} section-blocks__heading">
{{ block.settings.title }}
</{{ block.settings.heading_tag }}>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<{{ block.settings.subheading_tag }} class="newsletter-compact__block-text-content-subheading newsletter-compact__block-item ff-subheading {{ block.settings.subheading_font_class }} section-blocks__subheading">
{{ block.settings.subheading }}
</{{ block.settings.subheading_tag }}>
{%- endunless -%}
{%- unless block.settings.text == blank -%}
<div class="newsletter-compact__block-text-content-text rte ff-body {{ block.settings.text_font_class }} section-blocks__text">
{{ block.settings.text }}
</div>
{%- endunless -%}
</div>
{%- endif -%}
{%- when 'image' -%}
{%- render 'image-block',
shopify_attributes: block.shopify_attributes,
wrapper_class: 'newsletter-compact__block-content-image newsletter-compact__block-item section-blocks__image section-blocks__image',
image: block.settings.image,
width: block.settings.image_size,
mobile_width: block.settings.image_size_mobile,
break_to_mobile_at: '720',
align: section.settings.alignment
-%}
{%- when 'social_icons' -%}
{% render 'social-icons-block',
position: section.settings.alignment,
classes: 'newsletter-compact__block-content-social-icons newsletter-compact__block-item'
%}
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.newsletter_compact.name",
"tag": "section",
"disabled_on": {
"groups": ["header", "custom.overlay"]
},
"settings": [
{
"type": "select",
"id": "spacing_mode",
"label": "t:sections.newsletter_compact.settings.spacing_mode.label",
"default": "between",
"options": [
{
"value": "compact",
"label": "t:sections.newsletter_compact.settings.spacing_mode.option_compact"
},
{
"value": "between",
"label": "t:sections.newsletter_compact.settings.spacing_mode.option_between"
},
{
"value": "evenly",
"label": "t:sections.newsletter_compact.settings.spacing_mode.option_evenly"
}
]
},
{
"type": "select",
"id": "alignment",
"label": "t:sections.newsletter_compact.settings.alignment.label",
"default": "left",
"options": [
{
"value": "left",
"label": "t:sections.newsletter_compact.settings.alignment.option_left"
},
{
"value": "center",
"label": "t:sections.newsletter_compact.settings.alignment.option_center"
},
{
"value": "right",
"label": "t:sections.newsletter_compact.settings.alignment.option_right"
}
]
},
{
"type": "image_picker",
"id": "background_image",
"label": "t:sections.newsletter_compact.settings.background_image.label"
},
{
"type": "image_picker",
"id": "background_image_mobile",
"label": "t:sections.newsletter_compact.settings.background_image_mobile.label"
},
{
"id": "focal_point",
"type": "select",
"label": "t:shared.settings.focal_point.label",
"options": [{"label":"t:shared.settings.focal_point.option_image","value":"image_presentation"},{"label":"t:shared.settings.focal_point.option_center","value":"center"},{"label":"t:shared.settings.focal_point.option_top","value":"top"},{"label":"t:shared.settings.focal_point.option_bottom","value":"bottom"},{"label":"t:shared.settings.focal_point.option_left","value":"left"},{"label":"t:shared.settings.focal_point.option_right","value":"right"}],
"default": "image_presentation"
},
{
"id": "focal_point_mobile",
"type": "select",
"label": "t:shared.settings.focal_point_mobile.label",
"options": [{"label":"t:shared.settings.focal_point.option_image","value":"image_presentation"},{"label":"t:shared.settings.focal_point.option_center","value":"center"},{"label":"t:shared.settings.focal_point.option_top","value":"top"},{"label":"t:shared.settings.focal_point.option_bottom","value":"bottom"},{"label":"t:shared.settings.focal_point.option_left","value":"left"},{"label":"t:shared.settings.focal_point.option_right","value":"right"}],
"default": "image_presentation"
},
{
"type": "header",
"content": "t:shared.settings.header_color.content"
},
{
"type": "color",
"id": "background_color",
"label": "t:shared.settings.background_color.label",
"default": "#f5f5f5"
},
{
"type": "color",
"id": "text_color",
"label": "t:shared.settings.text_color.label",
"default": "#000000"
},
{
"type": "color",
"id": "input_color",
"label": "t:shared.settings.input_color.label",
"default": "#000000"
},
{
"type": "color",
"id": "input_background",
"label": "t:shared.settings.input_background.label",
"default": "#fff"
},
{
"type": "color",
"id": "button_background_color",
"label": "t:shared.settings.button_background_color.label",
"default": "#000000"
},
{
"type": "color",
"id": "button_text_color",
"label": "t:shared.settings.button_text_color.label",
"default": "#FFFFFF"
},
{
"id": "color_overlay",
"type": "color",
"label": "t:shared.settings.color_overlay.label",
"default": "#000"
},
{
"id": "color_overlay_gradient",
"type": "color_background",
"label": "t:shared.settings.color_overlay_gradient.label"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "t:shared.settings.overlay_opacity.label",
"unit": "%",
"min": 0,
"max": 100,
"step": 1,
"default": 0
},
{
"type": "header",
"content": "t:shared.settings.section_style.header_style.content"
},
{
"id": "enable_animation",
"type": "checkbox",
"label": "t:shared.settings.section_style.enable_animation.label",
"info": "t:shared.settings.section_style.enable_animation.info",
"default": true
},
{
"type": "select",
"id": "divider_style",
"label": "t:shared.settings.section_style.divider_style.label",
"default": "none",
"options": [
{
"label": "t:shared.settings.section_style.divider_style.option_none",
"value": "none"
},
{
"label": "t:shared.settings.section_style.divider_style.option_solid",
"value": "solid"
}
]
},
{
"type": "select",
"id": "section_padding",
"label": "t:shared.settings.section_style.section_padding.label",
"default": "section--vertical-padding-top-bottom",
"options": [
{
"label": "t:shared.settings.section_style.section_padding.option_none",
"value": "section--vertical-padding-none"
},
{
"label": "t:shared.settings.section_style.section_padding.option_both",
"value": "section--vertical-padding-top-bottom"
},
{
"label": "t:shared.settings.section_style.section_padding.option_top",
"value": "section--vertical-padding-top-only"
},
{
"label": "t:shared.settings.section_style.section_padding.option_bottom",
"value": "section--vertical-padding-bottom-only"
}
]
}
],
"max_blocks": 3,
"blocks": [
{
"type": "newsletter_signup",
"name": "t:shared.section_blocks.newsletter_signup.name",
"settings": [
{
"type": "text",
"id": "signup_link_text",
"label": "t:shared.section_blocks.newsletter_signup.settings.signup_link_text.label",
"default": "Sign up"
},
{
"type": "richtext",
"id": "footer_text",
"label": "t:shared.section_blocks.newsletter_signup.settings.footer_text.label",
"default": "<p>By completing this form, you are signing up to receive our emails and can unsubscribe at any time.</p>"
}
],
"limit": 1
},
{
"type": "text_content",
"name": "t:shared.section_blocks.text_content.name",
"settings": [
{
"type": "select",
"id": "width",
"label": "t:shared.section_blocks.text_content.settings.width.label",
"default": "600",
"options": [
{
"value": "unconstrained",
"label": "t:shared.section_blocks.text_content.settings.width.option_unconstrained"
},
{
"value": "600",
"label": "t:shared.section_blocks.text_content.settings.width.option_wide"
},
{
"value": "500",
"label": "t:shared.section_blocks.text_content.settings.width.option_medium"
},
{
"value": "400",
"label": "t:shared.section_blocks.text_content.settings.width.option_narrow"
}
]
},
{
"id": "title",
"type": "text",
"label": "t:shared.section_blocks.title.settings.title.label",
"default": "Subscribe to our newsletter"
},
{
"id": "heading_tag",
"type": "select",
"label": "t:shared.section_blocks.heading.settings.heading_tag.label",
"default": "h2",
"options": [
{
"value": "h2",
"label": "t:shared.section_blocks.heading.settings.heading_tag.options.h2"
},
{
"value": "h3",
"label": "t:shared.section_blocks.heading.settings.heading_tag.options.h3"
},
{
"value": "h4",
"label": "t:shared.section_blocks.heading.settings.heading_tag.options.h4"
},
{
"value": "h5",
"label": "t:shared.section_blocks.heading.settings.heading_tag.options.h5"
},
{
"value": "h6",
"label": "t:shared.section_blocks.heading.settings.heading_tag.options.h6"
}
]
},
{
"type": "paragraph",
"content": "t:shared.section_blocks.heading.settings.heading_tag.info"
},
{
"type": "select",
"id": "heading_font_class",
"label": "t:shared.settings.heading_font_class.label",
"default": "fs-heading-4-base",
"options": [
{
"value": "fs-heading-4-base",
"label": "t:shared.settings.heading_font_class.option_small"
},
{
"value": "fs-heading-3-base",
"label": "t:shared.settings.heading_font_class.option_medium"
},
{
"value": "fs-heading-2-base",
"label": "t:shared.settings.heading_font_class.option_large"
}
]
},
{
"id": "subheading",
"type": "text",
"label": "t:shared.section_blocks.subheading.settings.text.label"
},
{
"id": "subheading_tag",
"type": "select",
"label": "t:shared.section_blocks.subheading.settings.subheading_tag.label",
"default": "h3",
"options": [
{
"value": "h2",
"label": "t:shared.section_blocks.subheading.settings.subheading_tag.options.h2"
},
{
"value": "h3",
"label": "t:shared.section_blocks.subheading.settings.subheading_tag.options.h3"
},
{
"value": "h4",
"label": "t:shared.section_blocks.subheading.settings.subheading_tag.options.h4"
},
{
"value": "h5",
"label": "t:shared.section_blocks.subheading.settings.subheading_tag.options.h5"
},
{
"value": "h6",
"label": "t:shared.section_blocks.subheading.settings.subheading_tag.options.h6"
}
]
},
{
"type": "paragraph",
"content": "t:shared.section_blocks.subheading.settings.subheading_tag.info"
},
{
"type": "select",
"id": "subheading_font_class",
"label": "t:shared.settings.subheading_font_class.label",
"default": "fs-heading-6-base",
"options": [
{
"value": "fs-heading-6-base",
"label": "t:shared.settings.subheading_font_class.option_small"
},
{
"value": "fs-heading-5-base",
"label": "t:shared.settings.subheading_font_class.option_medium"
},
{
"value": "fs-heading-4-base",
"label": "t:shared.settings.subheading_font_class.option_large"
}
]
},
{
"id": "text",
"type": "richtext",
"label": "t:shared.section_blocks.text.settings.text.label",
"default": "<p>Include a short sentence describing what someone can expect from your newsletter.</p>"
},
{
"type": "select",
"id": "text_font_class",
"label": "t:shared.settings.text_font_class.label",
"default": "fs-body-75",
"options": [
{
"value": "fs-body-75",
"label": "t:shared.settings.text_font_class.option_small"
},
{
"value": "fs-body-100",
"label": "t:shared.settings.text_font_class.option_regular"
},
{
"value": "fs-body-200",
"label": "t:shared.settings.text_font_class.option_large"
}
]
}
]
},
{
"type": "image",
"name": "t:shared.section_blocks.image.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:shared.section_blocks.image.settings.image.label"
},
{
"id": "image_size",
"type": "range",
"min": 50,
"max": 750,
"step": 10,
"unit": "px",
"label": "t:shared.section_blocks.image.settings.image_size.label",
"default": 200
},
{
"id": "image_size_mobile",
"type": "range",
"min": 50,
"max": 350,
"step": 10,
"unit": "px",
"label": "t:shared.section_blocks.image.settings.image_size_mobile.label",
"default": 200
}
]
},
{
"type": "social_icons",
"name": "t:shared.section_blocks.social_icons.name",
"settings": [
{
"type": "paragraph",
"content": "t:shared.section_blocks.social_icons.settings.content"
}
],
"limit": 1
}
],
"presets": [
{
"name": "t:sections.newsletter_compact.presets.name",
"blocks": [
{
"type": "text_content"
},
{
"type": "newsletter_signup"
}
]
}
]
}
{% endschema %}
https://blackgarlicandco.myshopify.com/ password: hellobgc1