How to Add LeadPages to Shopify

How to Add LeadPages to Shopify

So you created a nice landing page in LeadPages but you want to use it in Shopify?

No problem, I’ve got you covered!

Option 1 – Create a Subdomain in LeadPages

Leadpages has an easy to follow guide for this already, no need to recreate it here 🙂

https://support.leadpages.net/hc/en-us/articles/218820517-Connect-your-domain#subdomain

Pros: Fastest way. You can create all pages in LeadPages without touching Shopify. No dealing with Shopify code.

Cons: Must use a subdomain (ex. offers.yourstore.com). LeadPages allows only 1 custom domain on their smallest plan so if you have multiple stores you won’t be able to use multiple subdomains. (ex. offers.nike.com, offers.addidas.com, offers.puma.com). If you want to add more domains you will need their higher level plans.

  • Pro: connect up to 3 domains
  • Advanced: connect up to 50 domains
    • Sub accounts: connect up to 50 domains

 

Option 2 – Add LeadPages to Shopify Manually as a Template

Pros: You can use on unlimited Shopify stores with just 1 LeadPages account. You can use your main domain with LeadPages (ex. yourstore.com/pages/your-landing-page).

Cons: Requires a bit of work to add a new landing page each time you create one. Each landing page must be added as a new template file in your Shopify theme.

  1. Login to your Shopify admin
  2. Go to Themes

  3. Go to Actions > Edit code

  4. Go to Templates > find page.liquid > Copy all the code from your theme’s page template
  5. Go to Templates >  click add a new template

  6. Paste your page code in the new file.
  7. Rename your new page template whatever you’d like, ideally with ‘landing-page’ in it. (ex. landing-page-bogo, landing-page-1, etc.)
  8. Go back to LeadPages 
  9. Under your LeadPage select the Publishing Options

  10. Select HTML > Download Dynamic HTML

  11. Open your LeadPage HTML file in an HTML or text editor on your computer (Sublime Text is my favorite)
  12. Copy ALL the code between the head tag only from the file
  13. Go back to Shopify
  14. Paste the code you copied below the part that says “{{ page.content }}”.
  15. Save your template.
  16. Go to Online Store > Pages
  17. Click Add Page

  18. Name your page
  19. Select your new template from the template box
  20. Save your page

That’s it!

Bonus – Hide your Shopify header and footer from the LeadPage

  1. Go to Templates > find theme.liquid
  2. Find {% section ‘header’ %}
  3. Change it to the following
    {% unless template.suffix contains "landing-page" %}
    
      {% section 'header' %}
    
    {% endunless %}
  4. Find {% section ‘footer’ %}
  5. Change it to the following
    {% unless template.suffix contains "landing-page" %}
    
    {% section 'footer' %}
    
    {% endunless %}
  6. Save the theme.liquid file.

 

Additional Resources:

Creating Landing Pages in Shopify