How can I create a subscribe drop down menu on my website?

Store Design
, , ,

Topic summary

Goal: Implement a “Suscríbete” subscribe dropdown that overlays the site, reveals a name/email newsletter form, and makes an email icon twinkle, matching the example at greenglass.cl (screenshots provided).

Proposed approach: Use HTML/CSS with JavaScript/jQuery.

  • A button (.subscribe-btn) toggles visibility of the form (.subscribe-form) via slideToggle.
  • The email icon toggles a “twinkle” class for animation.

Key terms:

  • jQuery: A JavaScript library that simplifies DOM manipulation and animations (e.g., slideToggle, class toggling).

Attachments and references: URL to the example site and images are central to visualizing the desired design and behavior.

Open questions / latest updates:

  • The requester asked where to place the code within a Shopify theme (which files and order) and how to implement it.
  • No guidance yet on Shopify-specific placement (e.g., theme.liquid, sections/snippets, assets) or connecting the form to Shopify’s newsletter endpoint.

Status: Ongoing. No final implementation instructions or resolution provided yet.

Summarized with AI on January 30. AI used: gpt-5.
1

Hello everyone, im looking how to create this type of subscribe drop menu.

The button “Suscríbete” / Subscribe drop down entire website and appears a menu to add name and email to subscribe to newsletter and the email icon are twinkle…

Any ideas, app or code to create it?

you can check i this website: https://www.greenglass.cl/

Captura de pantalla 2023-02-26 a la(s) 08.24.24.png
Captura de pantalla 2023-02-26 a la(s) 08.24.24.png2940×392 30.2 KB

Captura de pantalla 2023-02-26 a la(s) 08.24.31.png

2

hello there

To create a similar subscribe dropdown menu like on the website https://www.greenglass.cl/, you can use a combination of HTML, CSS, and JavaScript/jQuery. Here is an example code snippet that you can modify to suit your needs:

HTML:


  Suscríbete
  

    ### ¡Suscríbete a nuestro boletín!

JavaScript/jQuery:

$(document).ready(function() {
  $('.subscribe-btn').click(function(e) {
    e.preventDefault();
    $('.subscribe-form').slideToggle();
    $('.email-icon').toggleClass('twinkle');
  });
});

This code will create a button that when clicked, toggles the display of a subscription form with a name and email input field and a submit button. The email icon will also twinkle when the form is displayed. You can modify the HTML and CSS to match the design of the example website, and adjust the JavaScript/jQuery as needed.

1 Like
3

thank you very much!! where do you recommend to add in shopify? i mean… before or after what code? and file?

4

how can i do this?