How to Create a Landing Page on Shopify

Landing pages are crucial to conversions. They make your marketing efforts more effective by directing shoppers’ attention and speaking to specific customer segments.

But landing pages created from within Shopify leave much to be desired.

To have any control over how a page is displayed, you need to develop theme templates. That requires the help of a developer. And you’ll likely need different layouts for future campaigns, making theme template development an ongoing hassle.

Ultimately, landing pages created in Shopify are time-consuming and hard to customize.

Instead, use a third-party app that enables you to build and customize landing pages without the help of a developer.

ConvertFlow makes it easy for anyone to build landing pages with customizable templates and a drag-and-drop builder. No coding required. So you can create Shopify landing pages for any goal or campaign when you need it.

Create your own Shopify landing pages today with this step-by-step guide using ConvertFlow’s landing page builder and the Shopify integration.

Let’s get started 👇

Step 1: Choose a template for your Shopify landing page

Check out ConvertFlow’s library of landing page templates to help you get started. You’ll find dozens of templates for different use cases, goals, and industries.

We’ll use this Shopify product landing page template:

👉🏽 Need some inspiration to start? Check out 6 Shopify landing pages built by successful brands.

Step 2: Open your template in the builder

Some templates have multiple formats like landing pages, popups, and sticky bars. But this template just has the landing page format which is exactly what we need:

Choose “Landing Page,” then “Use Template.” Name your campaign and click “Create Campaign.”

You’ll land in ConvertFlow’s drag-and-drop builder where you can edit your Shopify landing page 🤩

Step 3: Set your landing page’s theme

Welcome to the builder:

Here you can customize everything about your Shopify landing page including products, images, copy, button actions, and forms.

But before you edit the content of your landing page, you’ll want to define your theme.

In the ConvertFlow builder, you can change your landing page’s appearance at the:

• Theme level: Setting your theme determines the style of each element type across your campaign
• Element level: Changing the style of specific elements overrides any theme-level settings

Starting with your landing page’s theme ensures your design is consistent.

From there, you can change individual elements as needed.

So, to edit your theme, go to the “Theme” tab in the panel on the right. Here you’ll see a full list of element types you can customize—from paragraphs and headings to buttons, forms, and timers:

For example, let’s update the button color to our brand’s signature green.

To do that, expand the “Buttons” section. You’ll see all sorts of ways we can customize the look of our buttons, but we’ll just update the color for now:

Notice how the buttons for the “Add To Cart” and “Get 20% OFF” buttons both changed color.

With a long landing page with so many elements, this is going to be make it so much easier to change the design for every element all at once ⚡

Continue tweaking each element’s theme like this to match your brand’s colors, fonts, and other aesthetic preferences you have for your Shopify landing page.

Remember: Shoppers are going to view this like just another page on your Shopify store, so it should feel congruent with the rest of your website.

Step 4: Customize the content of your Shopify landing page

With the design set, it’s time to make this landing page yours 💃🏾

You’ll want to update your landing page with your:

• Logo
• Images
• Copy
• CTA
• Etc.

To do that, simply click on any element you want to change and you’ll see a range of options to customize it.

For example, if we click on the heading, we can update the copy, padding, alignment, and more:

Let’s update the heading to focus on quality:

The rest of the page adapted when the header became two lines—no need to mess around with spacing!

You’ll notice that the template has several horizontal sections already built in. Each section enables you to customize the layout for a particular block of content with various rows and column sizes:

If you need to add a new section, you can duplicate an existing section and then edit its contents.

Want to add new elements? Click “Add Element” at the top and drag an element from the menu in place:

Or click the “+” icon that appears when hovering over the builder between elements:

And to delete sections or elements, just hover over what you want to delete and click the trash icon:

👉🏻 Learn more: Get to know the anatomy of ConvertFlow’s drag-and-drop builder.

Step 5: Connect Shopify to ConvertFlow

Next, we’ll want to connect Shopify so we can pull in product information automatically for the product elements on this page.

Head to your website’s dashboard in ConvertFlow. Then go to “Settings” and “Integrations” in the menu on the left. Find Shopify and click “Connect”:

Add your Shopify store’s “myshopify.com” URL and click “Connect Integration.”

Then, click, “Install App.”

With Shopify connected, ConvertFlow’s script will be automatically added to your store 💪🏾

Step 6: Connect products to your campaign

The great thing about connecting Shopify is that you won’t need to update your landing page if you change your product’s pricing, images, or product name. It all gets updates automatically.

So let’s connect the right product for this page. The existing template has a few product elements to pull in product information:

• The CTA and pricing above-the-fold
• The product block halfway through
• A final CTA with pricing again toward the bottom of the page

You’ll want to update it in each place.

Let’s start with the product block halfway through since that also contains an image.

Click on the product element, then “Manage Products” in the right-side panel:

That will open up a modal where you can easily find the product you want to display:

Leave the Products Source as “Shopify” and the Default Products Filter as “Select Products.” Then find the product you want to feature under the “Products To Display” dropdown menu:

Adjust the discount percentage if you’re making a special offer and update the button text if you want to say something other than “Add To Cart.”

You can also make other adjustments in this modal—like directing the button to the product page instead of adding the product to the cart, bringing the shopper to the cart when they click the button, and more.

Click “Done” when you’re finished.

The product element will update with the image, product name, pricing, and description 🔥

Repeat this process for the other product elements—which in the case of this template will just show the price, any variants, and the button.

Step 7: Update button actions

You’ve already updated your add-to-cart buttons as part of your product element, but on this landing page, we also have a button offering shoppers 20% off at the top of the page:

You can make this button anything you like. For example, you can trigger a popup to collect the shopper’s email address or phone number. Or you can link it to another URL on your website, like your collection of living room furniture. Or you can delete it altogether.

If you keep the button, connecting it to a signup form is a good idea. Then you won’t run the risk of distracting the shopper with other products.

To choose the button action, click the button element, then “Manage Actions” in the side panel:

You’ll have the option to choose what action the button will perform.

In our case, we want to display a popup to capture an email address. So we’ll select “Display another campaign.”

Then, choose your popup campaign from the dropdown menu and click “Done”:

👉 If you haven’t created a popup yet, check out our guide on how to create a Shopify popup.

Step 8: Preview your Shopify landing page

Congratulations! You’re in the home stretch 👏🏾

When you’ve got your Shopify landing page just how you want it, save and publish your changes. (This won’t publish it on your website just yet.)

Then, click “Preview” to test your landing page:

Here you’ll be able to scroll and click just like a shopper would on your website in a safe testing environment. That means any clicks, adds-to-cart, or form submissions won’t count towards metrics or trigger any automations.

Step 9: Launch your Shopify landing page

When you’re satisfied that your landing page appears how you want it to, click “Launch.”

On this page, you can customize your landing page’s URL:

Just be sure you aren’t using the slug you choose anywhere else on your website.

Congrats! Your landing page is live. Now you can promote it in your ads and other marketing campaigns, or link to it from the navbar and other pages on your website.

Make your Shopify landing page in ConvertFlow

Don’t let the need for a designer to create Shopify theme templates get in your way. When you’re in control of your landing pages, you’re in control of your conversions.

Today we covered how to create a product landing page for Shopify, but you can use ConvertFlow to build landing pages for any campaign like:

• Seasonal sales
• Cross-sell and upsell offers
• Giveaways
• Partnerships and collabs
• List building
• And more

Plus, you can split-test your way to success with unlimited variants to find the best-performing iteration of your core landing pages.