Publishing landing pages on Shopify

Last updated: December 6, 2021 Written by: Avatar Marta Szeliga
share
Table of contents
share
Table of contents

You can publish your landing pages to Shopify to sell and promote your services or products. This feature is one of the four Publishing options available in Landingi.

Your landing page will be published on our default (test) domain, and in your Shopify story as an iframe. We recommend that you publish your page on your own domain, because if you keep your page on the test domain, you may have issues such as your page being blocked by some firewalls.

Publish your landing page in Shopify

1. Log in to your account on the Landingi platform, then from the landing page list or dashboard, go to the Publishing options of the selected landing page.

2. Click the Publish on Shopify tile.

3. Copy the code:

4. Log in to your store in Shopify, then go to the Online Store tab and click Themes (1). In the new window on the right, click Actions (2) and select Edit code (3).

5. In the list on the left of the code editor, search for Templates, then click Add a new template.

6. Select page (1) from the Create a new template list. Choose liquid (2) as the Template type and enter the name (3) of the template that will allow you to identify it later, and then confirm by clicking Create template.

7. In the new window, in the code editing mode, write the {{page.content}} variable as shown below and click Save.

8. Navigate to the Online store tab and go to the Pages subpage (1). Then click Add page (2). 

9. On the editing page, go to the HTML code mode.

10. Add title and paste the previously copied code (1) for publishing in Shopify from the Landingi platform. From the Theme template list, select the template (2) you created in the previous step. Confirm all actions by clicking the Save button.

IMPORTANT: Due to technical limitations, you will not be able to direct to a specific section.

11. To view your landing page on Shopify page, go to Online Store (1), Pages (2) and click on View page (3).

12. From now, your landing page is published in your Shopify store. You can edit it any time in Landingi and publish it and all changes will update automatically.

Button settings with the Core and Create plans

If you want to place a button on your landing page that redirects to a product's page in Shopify or another URL outside your Shopify store, you need to configure the redirection in the button Settings.

 

Open in a new tab

Go to Type > Redirection, enter the target URL, select Open in a new tab, and Save changes.

Once the user clicks on the button, they will be taken to a new browser tab.

OnCLick event

Add an OnClick event to the button if the product page or the landing page should open in the same tab.

1. In the Section link tab, link the button to any section.

2. Navigate to the Settings tab and add the following code in the onClick event field, replace 

window.top.location = 'YOUR_TARGET_URL'

3. Click on Save and close. Publish your landing page. Now you can verify that your landing page displays correctly in Shopify. 

share

Was this manual helpful?