Inserting AC form to Shopify

ralim
edited December 2017 in Integrations

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!

Comments

  • pleon
    edited December 2017

    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

  • ralim
    edited December 2017

    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:

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

  • jskole
    jskole Leader Chicago
    edited December 2017

    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!

  • ralim
    edited December 2017

    @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.

  • montessori-family
    edited September 2020

    Hello,

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

    Ziryeb

Sign In or Register to comment.