How do I add an embed sign up form to footer in Streamline theme

Solved

How do I add an embed sign up form to footer in Streamline theme

getHeliGirl
Tourist
7 0 2

Hi, I'm trying to add a Klaviyo embed sign up form to my store footer. I have Streamline - however it is version 4.4.3 and I cannot add a section to the Footer. Would I add it to the theme code and if so where in the code (like what line in footer.liquid, etc) and what is the code? thank you.

 

UPDATE: I found footer.liquid and added the Klaviyo embed code to Line 1 -- so the embed form is sandwiched awkwardly right above my social media icons. Where would I move the code in the footer so it looks less klunky? thank you

 

P.S. I plan to migrate to Streamline 6.6 after I finish adding the customizations -- I added the form following these instructions: https://help.klaviyo.com/hc/en-us/articles/32004602396443 but the updated theme is not published yet so I don't know if it worked. 

Accepted Solution (1)

Small_Task_Help
Shopify Partner
991 39 94

This is an accepted solution.

Hi,

Hope this will help

- At editr code Scroll through footer.liquid and locate section that renders social media icons.
- Place Klaviyo embed code just above closing </footer> tag but below the social icons.
Code

</footer>

- Add the Klaviyo code
- Use css for styling
CSS code example

.footer-signup {
  text-align: center;
  margin-top: 20px;
}

.klaviyo-form {
  max-width: 400px;
  margin: 0 auto;
}
To Get Shopify Experts Help, Click Here or E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert India
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad

View solution in original post

Replies 2 (2)

Small_Task_Help
Shopify Partner
991 39 94

This is an accepted solution.

Hi,

Hope this will help

- At editr code Scroll through footer.liquid and locate section that renders social media icons.
- Place Klaviyo embed code just above closing </footer> tag but below the social icons.
Code

</footer>

- Add the Klaviyo code
- Use css for styling
CSS code example

.footer-signup {
  text-align: center;
  margin-top: 20px;
}

.klaviyo-form {
  max-width: 400px;
  margin: 0 auto;
}
To Get Shopify Experts Help, Click Here or E-mail - hi@ecommercesmalltask.com
About Us - We are Shopify Expert India
At Google My Business - Ecommerce Small Task - Hire Shopify Developers Ahmedabad
getHeliGirl
Tourist
7 0 2

Thank you, was able to move the form. However, 

The CSS for styling code is visible on website when I enter it underneath the Klaviyo code. Any suggestions? thanks