Hello there,
I am currently trying to organise my footer and use a custom api to sign up to a third party newsletter. This is its current look, with the sign up in the footer, aligned left and social icons underneath. The social icons are put on from within the footer customise page.
However, I want the social icons aligned on the right and in line with the subscribe sign up (see mockup image I made for how I want it to appear).
Currently, to get it into the footer as is, I have added this code to footer.liquid, starting at line 155, finishing at line 204.
The code that i’ve added to footer.liquid:
<!-- Substack sign up -->
<div class="container">
<h2 class="subscribe-text">Get a dose of motivation to your inbox</h2>
<div id="custom-substack-embed"></div>
</div>
<style>
.container {
display: flex;
flex-direction: column;
align-items: left;
text-align: left;
padding-top: 30px;
}
.subscribe-text {
margin-top: 10px;
font-weight: normal;
}
/* Updated styles */
.substack-button {
border-radius: 0;
background-color: #121212;
color: #FFFFFF;
border: 1px solid #7D7D7D;
}
.substack-input {
background-color: #FFFFFF00;
color: #FFFFFF;
}
</style>
<script>
window.CustomSubstackWidget = {
substackUrl: "quotedvisually.substack.com",
placeholder: "enter your email",
buttonText: "Subscribe",
theme: "custom",
colors: {
primary: "#7D7D7D",
input: "#FFFFFF00",
email: "#0E1014",
text: "#FFFFFF",
}
};
</script>
<script src="https://substackapi.com/widget.js" async></script>
I also am looking for the line border etc of the code above to match that of the contact form from Shopify as well as being able to have full control over the width of the textfield where you put your email (but not sure if this is possible and if it is predefined from where I got the widget).
Website link: www.quotedvisually.myshopify.com
Password: Han
Any help would be greatly appreciated.
Thanks in advance.
Jonathan
