404 page newsletter fields into

404 page newsletter fields into

Ste_cor
Tourist
14 0 1

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

Replies 4 (4)

rajweb
Shopify Partner
214 16 13

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

 

-Need a Shopify developer?
https://rajatweb.dev/
Email: [email protected]
Ste_cor
Tourist
14 0 1

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? 

 

Screenshot 2024-10-23 alle 20.37.08.png

 

 

 

rajweb
Shopify Partner
214 16 13

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

-Need a Shopify developer?
https://rajatweb.dev/
Email: [email protected]
Ste_cor
Tourist
14 0 1

Sadly, once i copied the system gave me an error:

 

L'impostazione "text" non è valida. Tutti i nodi di livello superiore devono essere tag &quot;<p>&quot;, &quot;<ul>&quot; &quot;<ol>&quot; o &quot;<h1>&quot;-&quot;<h6>&quot;, 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>"