Hi,
I am using the Maranello theme, and it only has the newsletter section available in the footer. We would like to have the newsletter section elsewhere on the page, in the main content.
How do I build in the newsletter sign-up section, currently only available in the footer.liquid file, so that it is a standalone section available for other pages within the builder?
Here’s the code from the footer pertaining to the newsletter:
{% when 'newsletter' %}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{%- form 'customer', class: 'newsletter-form' -%}
{% if block.settings.consent_checkbox and block.settings.consent_text %}
{% endif %}
{%- if form.errors -%}
<small>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
{%- if form.posted_successfully? -%}
##### {{ 'sections.newsletter.success' | t }}
{%- endif -%}
{% endform %}
{% endcase %}
{% endfor %}
{% endif %}
and
{
"type": "newsletter",
"name": "t:sections.footer.blocks.newsletter.name",
"settings": [
{
"type": "header",
"content": "t:sections.footer.blocks.newsletter.settings.header_1.content",
"info": "t:sections.footer.blocks.newsletter.settings.header_1.info"
},
{
"type": "text",
"id": "title",
"label": "t:sections.footer.blocks.newsletter.settings.title.label",
"default": "Newsletter"
},
{
"type": "text",
"id": "text",
"label": "t:sections.footer.blocks.newsletter.settings.text.label",
"default": "Subscribe to our newsletter and receive special offers"
},
{
"type": "checkbox",
"id": "consent_checkbox",
"default": false,
"label": "t:sections.footer.blocks.newsletter.settings.consent_checkbox.label",
"info": "t:sections.footer.blocks.newsletter.settings.consent_checkbox.info"
},
{
"type": "richtext",
"id": "consent_text",
"label": "t:sections.footer.blocks.newsletter.settings.consent_text.label",
"default": "
I agree to receive marketing emails and special deals.
"
}
]
}
],
Hi @3CraftyMs
This is Noah from PageFly - Shopify Page Builder App
In order to make the newsletter become a standalone section. You may need to create a brand new section in liquid code at the section folder.
You can copy/paste the code for the layout, however you will need to re-write the schema settings for that section.
Hope this can help you solve the issue
Best regards,
Noah | PageFly
Hi there,
Do you have example on how I would rewrite the schema?
Hi @3CraftyMs Sorry i dont have an example because an schema settings is unique depend on your sections.
You can search for other sections that show ups on the page like : contact-form or any sections that show ups and you can read the code and do it similar like that
Hi,
I’ve done this, and I think everything looks correct – but, it still isn’t showing up as a section option for the homepage. Is there somewhere else that I need to write code to enable it as a section option for the homepage?
Can you please copy/paste all the code for that section?
And make sure that you don’t forgot the
"presets": [
{
"name": "Name of the section"
}
]
It now shows up as a section option within the builder, but the
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{%- form 'customer', class: 'newsletter-form' -%}
{% if block.settings.consent_checkbox and block.settings.consent_text %}
{% endif %}
{%- if form.errors -%}
<small>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
{%- if form.posted_successfully? -%}
##### {{ 'sections.newsletter.success' | t }}
{%- endif -%}
{% endform %}
{% schema %}
{
"name": "t:sections.newsletter.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": [
"header"
]
},
"settings": [
{
"type": "text",
"id": "title",
"default": "Newsletter",
"label": "t:sections.newsletter.settings.title.label"
},
{
"type": "text",
"id": "text",
"label": "t:sections.newsletter.settings.text.label",
"default": "Subscribe to our newsletter and receive special offers"
},
{
"type": "checkbox",
"id": "consent_checkbox",
"default": false,
"label": "t:sections.newsletter.settings.consent_checkbox.label",
"info": "t:sections.newsletter.settings.consent_checkbox.info"
},
{
"type": "richtext",
"id": "consent_text",
"label": "t:sections.newsletter.settings.consent_text.label",
"default": "
I agree to receive marketing emails and special deals.
"
}
],
"presets": [ { "name": "t:sections.newsletter.presets.name" } ]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
actual subscription form does not work (nothing happens). Here’s the code:
You should change all the label text to a correct one :
Seems like it is return error with translation. Also it is missing the css, make sure you have copy and include the css of newsletter block too
Hi, sorry to keep coming back but I’ve fixed all of the translation errors. Everything looks great within the builder. But, if I publish it, the form does not actually work. Upon submission, it just reloads the page – doesn’t give a success message or add the person to the list.
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{% if block.settings.text != blank %}
{{ block.settings.text }}
{% endif %}
{%- form 'customer', class: 'newsletter-form' -%}
{% if block.settings.consent_checkbox and block.settings.consent_text %}
{% endif %}
{%- if form.errors -%}
<small>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
{%- endif -%}
{%- if form.posted_successfully? -%}
##### {{ 'sections.newsletter.success' | t }}
{%- endif -%}
{% endform %}
{% schema %}
{
"name": "t:sections.footer.blocks.newsletter.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": [
"header"
]
},
"settings": [
{
"type": "text",
"id": "title",
"default": "Newsletter",
"label": "t:sections.footer.blocks.newsletter.settings.title.label"
},
{
"type": "header",
"content": "t:sections.footer.blocks.newsletter.settings.header_1.content",
"info": "t:sections.footer.blocks.newsletter.settings.header_1.info"
},
{
"type": "text",
"id": "text",
"label": "t:sections.footer.blocks.newsletter.settings.text.label",
"default": "Subscribe to our newsletter and receive special offers"
},
{
"type": "checkbox",
"id": "consent_checkbox",
"default": false,
"label": "t:sections.footer.blocks.newsletter.settings.consent_checkbox.label",
"info": "t:sections.footer.blocks.newsletter.settings.consent_checkbox.info"
},
{
"type": "richtext",
"id": "consent_text",
"label": "t:sections.footer.blocks.newsletter.settings.consent_text.label",
"default": "
I agree to receive marketing emails and special deals.
"
}
],
"presets": [ { "name": "t:sections.newsletter.presets.name" } ]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
Nevermind, got it to work!
Sorry for my late response, and i glad that you have figured it out. Let me know if you need further help
