Inserting AC form to Shopify

Ask a question
,
1

Hello,

I’m trying to figure out where exactly to place the Active Campaign form within a Shopify template. I recommended Active Campaign to a client, and now that they’ve integrated it with their shop, any help topics about this on shopify forums are a dead end.

Has someone here managed to figure this out? Any tips or suggestions would be extremely appreciated!

1 Like
2

Hi @ralim,

In order to integrate an ActiveCampaign form to Shopify you can do one of two things:

  1. Use the ActiveCampaign embed code and drop it into a Shopify page. Check out the picture below to see where/how you would add the code: http://screen.ac/2H2R0z2v142L

  2. You can edit the theme file and drop the embed code into that. This is a slightly more technical option, but doable. Here is an image of where/how to do that: http://screen.ac/3b2p1510043Q

Hope that helps!

Perry

3

Hi @pleon, thanks so much for taking the time to reply!

It’s the theme file option specifically that’s the issue – there is a form embedded in the code and the client wants replaced, but there’s some javascript that follows and, compared to the AC code we get from the form, this seems more complex than it should be (it’s a form that just stays on all pages of the shopify site).

Here’s a screenshot of the section I’m talking about:

18
18771×317 61.9 KB

Should the full embed AC code replace this entire section in the shopify template, including the javascript bit?

4

Hi @ralim,

A couple of quick things to make sure we’re on the same page, and for anybody else that stumbles across the thread:

  • Everything that is wrapped up in {% tags %} is “liquid,” shopify’s templating language.
  • The JS starts on line 302, and is wrapped in <script type="text/javascript"> tags.

Looking at that liquid code, the theme is referencing some theme settings (line 287). This allows the user to turn on or off the default newsletter (settings.newsletter_enabled) and customize the newsletter to a degree.

Since you will be handling that customization from ActiveCampaign, it is okay to remove that (but I may paste it elsewhere should you want to return to the “old way.”

If it were me, I would remove everything between {% if settings.newsletter_enabled %} (line 287) and the closing {% endif %} tag (line 298).

So the final thing should look like:

<div class="container-fluid">
  <div class="seven columns">
    <!-- Paste ActiveCampaign form embed code here, including JavaScript --> 
  </div><!-- END: .seven .columns -->
</div><!-- END: .container-fluid -->
<!-- <div class="footer">... -->

If you want to really go for a stretch, you can separate the ActiveCampaign form html code from the ActiveCampaign form JavaScript, and place the ActiveCampaign form JavaScript in your footer like you have done, but is not necessary.

Hopefully that helps!

2 Likes
5

@jskole Jordan, thank you SO much for explaining this and for pointing me to the right direction. I can’t tell you how much I appreciate your help!

I have no idea why I’d need to separate the JavaScript element or how that would affect the form function on web or mobile, so I think I’ll just do as you said.

I trust I don’t have to modify anything or add “%” to the AC code, correct? I just grab the simple embed code and paste it in the section you’ve just indicated.

1 Like
6

Hello,

Please, the link is not Opening ? Could you help me :slight_smile: thnak you

Ziryeb