Below is how I want the Newsletter sign-up to look.
@Suavemart
can you please share page url?
Hello @Suavemart ,
Here’s a general guide for you
Go to Online Store → Themes → Actions → Edit code
Go to the file generate your email sign up form, this can be “Newsletter”
Modify the code to include First Name and Last Name fields:
You can style the form by go to Assets folder → theme.css file or base.css file
Add this following code at the bottom of page
/* Example styling, adjust as needed */
form input[type="text"],
form input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
form input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
Save and preview
Hope this can help.
Transcy
Hi @Suavemart , you might want to check out the “Bevy Design” app for your purpose. With this app’s help, you can create a customized newsletter sign-up campaign for your store’s Dawn Theme and place it anywhere you want without the hassle of any coding. It also offers some powerful tools such as upsell features, bundle offers, and even a way for customers to leave feedback. Let me know if you want more details, and you can go through the reviews of other shop owners on how it might help your store – I’d love to hear what you think!
Link of the app - https://apps.shopify.com/aiva-labs
For additional information, visit our website: https://bevycommerce.com/design/
This is the code to the newsletter.liquid file. Please add in your code so i can copy and replace. Thank you.
{{ ‘component-newsletter.css’ | asset_url | stylesheet_tag }}
{{ ‘newsletter-section.css’ | asset_url | stylesheet_tag }}
{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{{ block.settings.heading }}
{%- when 'paragraph' -%}{% render 'icon-success' -%} {{- 'newsletter.success' | t }}
{%- endif -%} {% endform %}{% schema %}
{
“name”: “t:sections.newsletter.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”]
},
“settings”: [
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“default”: “background-1”
},
{
“type”: “checkbox”,
“id”: “full_width”,
“default”: true,
“label”: “t:sections.newsletter.settings.full_width.label”
},
{
“type”: “paragraph”,
“content”: “t:sections.newsletter.settings.paragraph.content”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 40
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 52
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.newsletter.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “Subscribe to our emails”,
“label”: “t:sections.newsletter.blocks.heading.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
}
]
},
{
“type”: “paragraph”,
“name”: “t:sections.newsletter.blocks.paragraph.name”,
“limit”: 1,
“settings”: [
{
“type”: “richtext”,
“id”: “text”,
“default”: “
Be the first to know about new collections and exclusive offers.
”,“label”: “t:sections.newsletter.blocks.paragraph.settings.paragraph.label”
}
]
},
{
“type”: “email_form”,
“name”: “t:sections.newsletter.blocks.email_form.name”,
“limit”: 1
},
{
“type”: “@app”
}
],
“presets”: [
{
“name”: “t:sections.newsletter.presets.name”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “paragraph”
},
{
“type”: “email_form”
}
]
}
]
}
{% endschema %}