Shopify themes, liquid, logos, and UX
Good morning everyone,
I need to personalize my 404 page, and put over the section "Image with text overlay" the fields for the newsletter and submit button, with the theme design's characteristics!
Thank you
Hey @Ste_cor ,
To personalize your 404 page in Shopify and add a newsletter sign-up section over the "Image with text overlay," you can follow these steps. This involves editing the 404 template and customizing the layout. Here's a step-by-step guide:
1. Online Store > Themes > Edit Code
2. Locate the 404 Template: In the left sidebar, look for the Templates directory and find the 404.liquid file. Click on it to open.
3. Add the Newsletter Section: Within the 404.liquid file, find the section where you want to add the newsletter fields.
-You can add the following code snippet to include a newsletter form. Make sure to replace the form fields with your theme's design characteristics if necessary.
<div class="newsletter-section" style="text-align: center; padding: 20px;">
<h2>Stay Updated!</h2>
<p>Sign up for our newsletter to receive the latest news and updates.</p>
<form method="post" action="/contact#contact_form" id="newsletter-form">
<input type="email" name="email" placeholder="Enter your email" required style="padding: 10px; margin: 5px;">
<button type="submit" class="btn" style="padding: 10px 15px; background-color: #000; color: #fff;">Subscribe</button>
</form>
</div>
Add Overlay to Your Image:
If you already have an "Image with text overlay" section, you can place the newsletter form inside that section. You can find it by checking if there’s a relevant section in your theme that corresponds to the 404 page.
Style Your Section:
Customize the styles (colors, fonts, spacing) in the inline styles or through your theme’s CSS files to ensure it matches your store’s design.
Best Regard,
Rajat Sharma
Thank you Rajat Sharma, but i don't have the 404.liquid file but 404.json also.
/*
* ------------------------------------------------------------
* IMPORTANT: The contents of this file are auto-generated.
*
* This file may be updated by the Shopify admin theme editor
* or related systems. Please exercise caution as any changes
* made to this file may be overwritten.
* ------------------------------------------------------------
*/
{
"sections": {
"main": {
"type": "main-404",
"disabled": true,
"settings": {
}
},
"image_with_text_overlay_9hA63p": {
"type": "image-with-text-overlay",
"settings": {
"image": "shopify://shop_images/ComingSoonPage_Hidden_Garage_2e1db53d-d512-49bd-9ebd-2ddc64b4d2ec.jpg",
"image_mobile": "shopify://shop_images/ComingSoonPage_Hidden_Garage_1.jpg",
"indent_image": false,
"height": "full_screen",
"title": "",
"heading_size": "text-2xl lg:text-5xl",
"text": "<h1><strong>SHOP LOCKED.</strong></h1><h4>Be the first to know when we launch.</h4>",
"content_position": "justify-center items-center text-center",
"content_width_desktop": "lg:w-2/3",
"text_color": "primary",
"background_color": "primary",
"cta_link": "shopify://blogs/archivio",
"cta_text": "OUR MANIFESTO",
"cta_style": "button"
}
}
},
"order": [
"main",
"image_with_text_overlay_9hA63p"
]
}
This is the code within the 404.json file.
Where i need to insert the code to have over the image?
Hey @Ste_cor ,
Since you 404.json file already contains the "image-with-text-overlay" section, you can enhance it by embedding the newsletter form inside the content of that section.
Steps to Insert the Newsletter Form Over the Image:
Modify 404.json:
1. Add the newsletter form HTML code inside the "text" field of the "image_with_text_overlay_9hA63p" section.
2. Update 404.json like this:
{
"sections": {
"main": {
"type": "main-404",
"disabled": true,
"settings": {}
},
"image_with_text_overlay_9hA63p": {
"type": "image-with-text-overlay",
"settings": {
"image": "shopify://shop_images/ComingSoonPage_Hidden_Garage_2e1db53d-d512-49bd-9ebd-2ddc64b4d2ec.jpg",
"image_mobile": "shopify://shop_images/ComingSoonPage_Hidden_Garage_1.jpg",
"indent_image": false,
"height": "full_screen",
"title": "",
"heading_size": "text-2xl lg:text-5xl",
"text": "<h1><strong>SHOP LOCKED.</strong></h1><h4>Be the first to know when we launch.</h4><form method='post' action='/contact#contact_form' id='newsletter-form'><input type='email' name='email' placeholder='Enter your email' required style='padding: 10px; margin: 5px; max-width: 300px; width: 100%;'><button type='submit' class='btn' style='padding: 10px 15px; background-color: #000; color: #fff;'>SUBMIT</button></form>",
"content_position": "justify-center items-center text-center",
"content_width_desktop": "lg:w-2/3",
"text_color": "primary",
"background_color": "primary",
"cta_link": "shopify://blogs/archivio",
"cta_text": "OUR MANIFESTO",
"cta_style": "button"
}
}
},
"order": [
"main",
"image_with_text_overlay_9hA63p"
]
}
Optional CSS Styling:
1. To make sure the form looks great, you may need to fine-tune the layout using CSS.
2. Add this CSS in your theme's Assets > theme.css or theme.liquid.scss:
#newsletter-form {
margin-top: 15px;
}
#newsletter-form input {
border: 1px solid #000;
border-radius: 4px;
}
#newsletter-form button {
cursor: pointer;
border: none;
border-radius: 4px;
}
If I was able to help you, please don't forget to Like and mark it as the Solution!
Best Regard,
Rajat Sharma
Sadly, once i copied the system gave me an error:
L'impostazione "text" non è valida. Tutti i nodi di livello superiore devono essere tag "<p>", "<ul>" "<ol>" o "<h1>"-"<h6>", Il tag "input>" non è consentito, L'attributo "type="email"" non è consentito sul tag "<input>", L'attributo "name="email"" non è consentito sul tag "<input>", L'attributo "placeholder="Enter your email"" non è consentito sul tag "<input>", L'attributo "required=""" non è consentito sul tag "<input>", L'attributo "style="padding: 10px; margin: 5px; max-width: 300px; width: 100%;"" non è consentito sul tag "<input>", Il tag "button>" non è consentito, L'attributo "type="submit"" non è consentito sul tag "<button>", L'attributo "class="btn"" non è consentito sul tag "<button>", L'attributo "style="padding: 10px 15px; background-color: #000; color: #fff;"" non è consentito sul tag "<button>", Il tag "form>" non è consentito, L'attributo "method="post"" non è consentito sul tag "<form>", L'attributo "action="/contact#contact_form"" non è consentito sul tag "<form>"e L'attributo "id="newsletter-form"" non è consentito sul tag "<form>"
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024