Help needed to add HTML code to a Shopify page

Store Design
,

Topic summary

A Shopify store owner needed help embedding a Mailchimp subscription form using HTML code on their website page. The form code was successfully added but displayed with formatting issues.

Initial Problem:

  • HTML code pasted onto page but form styling wasn’t rendering correctly
  • Another user (missy333) encountered the identical issue

Solution Provided:
The original poster found a fix by:

  • Navigating to Online Store → Edit Code → theme.css file
  • Adding custom CSS code to the bottom of theme.css to style the Mailchimp embed elements
  • The CSS included styling for #mc_embed_signup, #mc_embed_shell, button colors, hover states, and form error displays
  • Adjusting settings within Mailchimp’s form generator was also key (specific setting not recalled)

Alternative Approach:
missy333 resolved it by creating a new page template and hard-coding both the MailChimp form and text directly, though acknowledged the CSS solution might be preferable.

Status: Resolved through CSS customization after some trial and error.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi I hope someone can help…

I have the following page on my Shopify site: https://www.echoesofpinkfloyd.com.au/pages/diamonds-club

and I want to add HTML code that will add a data collection form onto the page which will automatically capture required data in Mailchimp. I’ve pasted the required code below. Can someone please help me to add this as I’m not sure how to do it?

#mc_embed_signup{background:#fff; false;clear:left; font:14px Helvetica,Arial,sans-serif; width: 600px;} /* 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. */

Subscribe

* indicates required
Email Address *
First Name
Last Name
Favourite PF Album
Favourite PF Song
Mobile Phone
Suburb
State
/* real people should not fill this in and expect good things - do not remove this or risk form bot signups */

Intuit Mailchimp

1 Like
2

I’ve managed to get the code onto the page but the form doesn’t look right. It needs some style formatting. Any idea how to do this?

3

I’m having the same issue. Did you find a solution?

4

I did receive a solution from someone.

Go to the online store → Edit Code → Search theme.css file

Then I added the following code to the bottom of the theme.css file. If you’re still having problems, play around with the settings on the code that Mailchimp generates. This was the key for me (but I can’t remember what the setting was now, sorry).

divhashtag#mc_embed_signup {
background: var(–color-body);
display: flex;
justify-content: center;
}

divhashtag#mc_embed_shell {
background: var(–color-body);
display: flex;
justify-content: center;
}

divhashtag#mc_embed_signup .button {
clear: both;
background-color: hashtag#46abe4;
border: 0 none;
border-radius: 4px;
transition: all 0.23s ease-in-out 0s;
color: hashtag#FFFFFF;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: normal;
height: 32px;
line-height: 14px;
margin: 0 5px 10px 0;
padding: 0 22px;
text-align: center;
text-decoration: none;
vertical-align: top;
white-space: nowrap;
padding: 10px 18px;
width: fit-content;
width: -moz-fit-content;
}

divhashtag#mc_embed_signup .button:hover {

background-color: hashtag#46abe4;

}

divhashtag#mc_embed_signup hashtag#mc-embedded-subscribe-form div.mce_inline_error {
background: none;
}

5

Ok, thanks! I ended up just making a new page template and then hard coding the MailChimp code and my text. I’m not sure if that’s the best solution, but it worked. I may switch to this option though if I can make it work.

I appreciate your quick response!

6

No problem at all. I hope it all works out. Took me a bit of experimenting and playing around with it but I got there in the end.

Good luck!

1 Like