Shopify Landing Pages: Templates, Apps or Code, and What Happens at Checkout

A Shopify landing page is a page built for one campaign, on your Shopify store, that sends the visitor to one product and one checkout. This guide covers how to build it: the native way with theme templates, when a page builder app is worth it, what code adds, and the parts most guides skip, from hiding ad pages from Google to what you can and can't change in Shopify Checkout. What to put on the page (layout, copy, message match, ad rules) is in our guide to product landing pages.

What is a Shopify landing page?

On Shopify, a landing page is any page an ad, email or creator link points to on purpose: a standalone page under Online Store > Pages, a product page with its own template, or a page served by an app. What makes it a landing page isn't where it lives. It's that it carries one offer, has fewer exits than your store, and is measured on orders from one traffic source. For supplement and skincare brands: landing pages for supplement brands and landing pages for skincare brands.

The three common types, and where each is usually built:

Four ways to build one

Most brands start with the first, add custom sections when the theme runs out, and move to an app when they need many pages fast or built-in testing. The decision table further down sums it up.

Method 1: a page template in the theme editor

Online Store 2.0 themes are built from JSON templates, which let you add and remove sections on any page from the theme editor.24Shopify Developer Changelog, Online Store 2.0: JSON templates and improvements to Liquid That's what makes a no-app landing page possible. A JSON template "can render up to 25 sections, and each section can have up to 50 blocks", and a theme holds up to 1,000 of them.2Shopify Dev Docs, JSON templates

A few rules from Shopify's documentation that trip people up:1Shopify Help Center, Templates

• You need a compatible theme. "You can create a new template only with a compatible theme." Vintage themes, built before Online Store 2.0, don't support it.
• Assign in the admin, build in the editor. The template is created in the theme editor, but chosen on the page or product in the admin.
• Only the live theme counts. "The template options that display are based on the available templates only in your current live theme." Publish the theme before you look for the template.
• One template, many pages. "When you edit a template, your changes apply to every page that uses the template." Duplicate it for each campaign you want to change separately.

Method 2: an alternate product template

When an ad sells one product, the landing page is often that product's page with a different template: a longer story, a comparison block, a guarantee section, no related products. It keeps the real product, the variant picker, the price and the Add to cart button, and nothing has to be synced.

Create it the same way, choosing Products in the editor's drop-down, then assign it in Products > [product] > Theme template. In the theme's code, it's a file like product.alternate.json.3Shopify Dev Docs, Alternate templates Shopify also lets you preview any alternate template with ?view= in the URL: /products/example-product?view=alternate renders that product with the alternate template.3Shopify Dev Docs, Alternate templates

Per-product content with metafields

A template is shared. The words on it don't have to be. Metafields let you add your own fields to products and pages ("Metafields allow you to extend an existing platform data model"), and on themes that support dynamic sources you can "connect most metafields to your theme by using the theme editor".5Shopify Help Center, Metafields One landing template can then serve ten products, each with its own headline, benefits and FAQ.

Create the metafield definitions once, fill them on each product, then connect each one to a section setting in the theme editor. Metafield types your theme doesn't support, and vintage themes, need theme code to display them.5Shopify Help Center, Metafields

Removing the header and the menu

A landing page usually drops the store's navigation: every link is a way out. In current themes, the header and footer are section groups placed in the layout file, and a group in theme.liquid is "rendered on all pages that use that layout".4Shopify Dev Docs, Section groups That's why hiding the header in the theme editor hides it everywhere.

The clean fix is a second layout. Duplicate layout/theme.liquid as layout/landing.liquid, remove the line that renders the header section group (usually named header-group) (and the footer if you want), then point your landing template at it with the layout attribute of the JSON template:2Shopify Dev Docs, JSON templates

{
  "layout": "landing",
  "sections": { "...": "..." },
  "order": ["..."]
}

Keep a layout, don't set it to false. Shopify's documentation is explicit: "Templates without a layout can't be customized in the theme editor."2Shopify Dev Docs, JSON templates With landing.liquid, your marketing team still edits the page in the editor.

Method 3: a landing page app

Page builder apps install a drag-and-drop editor on top of your theme. What they add over the native editor, according to their own listings: hundreds of templates, extra elements (countdowns, bundles, quantity breaks), AI generation, and in several cases A/B testing. Here are four builders as their Shopify App Store pages describe them, in alphabetical order. This isn't a ranking.

Source: each app's Shopify App Store listing, read October 14, 2026. Plans and features change; check the listing before you install.20Shopify App Store, EComposer Landing Page Builder (read October 14, 2026)21Shopify App Store, GemPages Landing Page Builder (read October 14, 2026)22Shopify App Store, PageFly AI Page Builder (read October 14, 2026)23Shopify App Store, Shogun Landing Page Builder (read October 14, 2026)

Inside Tagada

Build the funnel once, route every customer to the right offer

Checkout, upsells and subscriptions on one flow, with conditions per country, order or customer.

Start free

Method 4: custom code and headless

Custom Liquid covers what neither the editor nor an app does well: a new section built for your offer, the alternate layout above, a quiz that adds the right variant to the cart. Developers add sections to the theme, and merchants then use them in the editor like any other. It costs developer time, not a monthly fee, and adds no third-party script.

Headless means building the store front end outside the theme, for example with Hydrogen, Shopify's toolkit for custom storefronts on the Storefront API. It suits brands that already run a custom front end. It doesn't move the checkout: "Hydrogen doesn't include checkout UI, because checkout stays on Shopify."16Shopify Dev Docs, Hydrogen Shopify also notes that full customer journey tracking in the order's conversion summary "isn't available" on headless storefronts.10Shopify Help Center, Order conversion summary

Which method for which need

URL, SEO and hiding ad-only pages from Google

Shopify pages live under /pages/your-handle. In the page's Search engine listing, you can edit the page title, the meta description and the URL handle; Shopify warns that titles over 70 characters and descriptions over 160 may be cut off in results. If you change the handle of a live page, the pre-selected Create a URL redirect option sends the old address to the new one: leave it on.6Shopify Help Center, Adding and editing pages

Then decide whether the page should be found at all. A page built for SEO traffic stays indexed. A presell page, a discount page or a near-copy of a product page made for one ad set is better hidden: it can't rank against your real product page, and it shouldn't hand out the discount to search visitors. Shopify documents three ways:7Shopify Help Center, Hiding a page from search engines

For the metafield, create an integer definition with namespace and key seo.hidden on Pages (or Products), then set the value to 1 on the page. For the code route, Shopify's snippet goes on a blank line in the <head> of layout/theme.liquid, with your page handle in place of the example:7Shopify Help Center, Hiding a page from search engines

{% if handle contains 'page-handle-you-want-to-exclude' %}
<meta name="robots" content="noindex">
{% endif %}

If you created landing.liquid, add the same lines to it too: a template using the alternate layout doesn't load theme.liquid.

From the click to checkout: cart links and tracking

A landing page can send the buyer to the cart, or straight to checkout. Shopify gives you two native ways to skip steps.

Cart permalinks are links that open checkout with products already in the cart. The format is /cart/ followed by variant_id:quantity, comma-separated for several products.8Shopify Dev Docs, Create cart permalinks Useful parameters, all documented by Shopify:8Shopify Dev Docs, Create cart permalinks

Accelerated checkout buttons (Buy it now, Shop Pay, Apple Pay, Google Pay, PayPal, Amazon Pay, Venmo, depending on what you've activated) sit next to Add to cart on product sections. The unbranded button skips the cart and goes to Shopify Checkout. The limit: "Customers can purchase only single variants of a product."9Shopify Help Center, Accelerated checkout buttons Fine for one product, not for a bundle of different sizes.

For tracking, three pieces fit together:

1. UTM parameters on every ad link. Each order's conversion summary shows the landing page, the referrer and the UTM parameters of the visit, "if available": not on headless storefronts or when cookies are blocked, and up to 48 hours later.10Shopify Help Center, Order conversion summary
2. The ref parameter on cart links, which lands in the order even when the cookie trail breaks.8Shopify Dev Docs, Create cart permalinks
3. Customer events (pixels) for ad platforms. Checkout isn't rendered by your theme, so scripts added to theme files don't follow the buyer there. Custom pixels do: they "help you to collect customer events on even more pages", including checkout, and are "loaded in a Lax sandbox".11Shopify Help Center, Custom pixels Shopify's standard events include page_viewed, product_added_to_cart, checkout_started, payment_info_submitted and checkout_completed.12Shopify Dev Docs, Web Pixels API standard events

The full sequence, from ad to order and the events to track at each step, is in our guide to building a funnel.

What you can change in Shopify Checkout, by plan

On a standard Shopify store, every landing page, native, app-built or headless, ends in Shopify Checkout. The page can be anything; the checkout follows Shopify's rules. What you can change there depends on your plan:13Shopify Help Center, Checkout and accounts editor (plan availability)

The old way to customize checkout, the checkout.liquid file, is gone. Shopify announced its deprecation on February 13, 2023, and the rest followed in steps:14Shopify Changelog, The checkout.liquid theme file is being deprecated, February 13, 202315Shopify Dev Docs, checkout.liquid

Stores that hadn't upgraded by August 13, 2024 were "automatically upgraded to an un-customized, out-of-the-box Shopify Checkout".14Shopify Changelog, The checkout.liquid theme file is being deprecated, February 13, 2023 Anything you track or show on the order status page now goes through checkout apps and pixels.

Two consequences for landing pages. First, keep the landing page's promise inside what checkout can show: if the offer needs a custom line on the payment step, that's a Plus feature. Second, offers after the payment (one-click upsells) run through Shopify's post-purchase page, with its own conditions on payment methods and access, covered in our guide to the 1-click upsell. The steps of the checkout itself are in checkout flow.

Speed: what to check on a landing page

Paid traffic lands on one page, often on a phone, so that page's speed is the one that matters. Google's Core Web Vitals give the targets, measured at the 75th percentile of page loads:19web.dev, Web Vitals (updated October 31, 2024)

Shopify's admin measures them on your real visitors. The web performance dashboard is "based on real user data from the past 30 days", and the reports in Analytics > Reports break each metric down by page URL, so you can check the landing page alone.18Shopify Help Center, Web performance dashboard

What Shopify's own theme performance guide recommends, applied to a landing page:17Shopify Dev Docs, Performance best practices for themes

• Never lazy-load the hero image. "Apply loading="lazy" only to images outside the initial viewport", and add fetchpriority="high" to the LCP image.
• Serve sized images. Use srcset and sizes with image_tag, not hand-built CDN URLs.
• Cut and defer scripts. "Identify and remove or defer app scripts that block HTML parsing", use defer on non-critical scripts, and audit "all scripts, including apps, tracking pixels, and theme code".
• Preload little. "Only 1 or 2 critical resources the browser discovers late."

Test the page with the page builder app on and off, and before and after each new tracking pixel. For reference, the Shopify Theme Store requires a "minimum average Lighthouse performance score of 60" across home, product and collection pages.17Shopify Dev Docs, Performance best practices for themes

Best practices for a high-converting Shopify landing page

The build method decides how fast you can ship. What converts is the page itself. The short version, for a store or a dropshipping offer alike:

For what each block of the page should say, read product landing pages. For the steps after the page, read building a funnel.

Running Tagada's checkout with Shopify