How can I align a subscription box next to an image on my site?

Shopify Discussion

Topic summary

A user is attempting to position a subscription form next to an image on their Shopify site, with the image aligned to the right. The initial layout isn’t working as intended.

Proposed Solution:

  • Another user provided custom HTML/CSS code to create a side-by-side layout using a wrapper div with specific styling and a Mailchimp embedded form.
  • The code includes form fields for first name and email, along with CSS for positioning and formatting.

Current Status:

  • The original poster reports the elements are swapping positions rather than appearing side by side.
  • They’ve created a test copy of the site for troubleshooting.
  • The issue remains unresolved, with the layout not achieving the desired side-by-side arrangement.
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

So I am playing around with a different version of my site. I’ve embedded this image and aligned it to the right, but I can’t seem to figure out how to get the subscription box to be next to the image.

https://2ij6zeowyqcuzax7-69358551359.shopifypreview.com

2

Hello @Helpplease_1

Add this below code to your theme.

<div class="both_Sec" style="
max-width: 1300px;
margin: auto;
margin-top: 30px;
"><div class="mailchimp_form"><font size="+2" face:"montserrat"="" style="color:#533851;"> Sign up now & Stay Up to Date!</font>
<link href="//cdn-images.mailchimp.com/embedcode/classic-071822.css" rel="stylesheet" type="text/css">
<div id="mc_embed_signup">
<form action="https://gmail.us21.list-manage.com/subscribe/post?u=8006595e85780c1116aa7b1ce&id=e188e5cae9&f_id=0083cde1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate" display:="" inline-block;="">

<div id="mc_embed_signup_scroll">

<class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="required fname" id="mce-FNAME" aria-required="true">
<span id="mce-FNAME-HELPERTEXT" class="helper_text"></span>

<class="mc-field-group">
<label for="mce-EMAIL">Email Address
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" required="" aria-required="true">
<span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span>
</class="mc-field-group"></class="mc-field-group"></div>

<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_8006595e85780c1116aa7b1ce_e188e5cae9" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button" margin:="" auto="">

</div>
</div>
</form></div>

<style type="text/css">
#mc_embed_signup{background:#f2f2ee; style="text-align: left;" font:14px Montserrat; width:400px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

#mc_embed_signup {
margin: left;
}

</style>
</div><div style="text-align: right;"><img src="https://cdn.shopify.com/s/files/1/0693/5855/1359/files/9C6BC83E-E8FB-4D43-A75B-4105728C92B5.jpg?v=1670999548" width="500" height="500"></div></div>
3

They just seem to swap places not necessarily side by side. I made a copy, so here’s the new link.

https://2ij6zeowyqcuzax7-69358551359.shopifypreview.com