Personalized checkout and custom promotions with Shopify Scripts
Hello all,
Hi Anna,
Are you on Shopify or Shopify Plus?
Not sure you can customize checkout.liquid on Shopify only. Shopify plus account is required to customize checkout page.
Thanks.
Yes, it is Shopify Plus
Hi Annal,
Good to hear that it is on Shopify Plus. Can you please tell what scripts/events are you looking to add on the page. If you have access to checkout.liquid, please send me that as well. If you do not have access to checkout.liquid file in your theme code, then contact Shopify Plus Support to gain access.
One suggestion - It would have been easier to manage these kinds of scripts if you had used Google Tag Manager, as it is more customizable and most of the scripts could have been added on GTM instead of each code file.
Thanks,
Sajat
Hi Annal,
Here is a sample checkout.liquid file with integrated GA4 Property
<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXX');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
<meta name="referrer" content="origin">
<title>{{ page_title }}</title>
{{ content_for_header }}
{{ checkout_stylesheets }}
{{ checkout_scripts }}
</head>
<body>
{{ skip_to_content_link }}
<header class="banner" data-header role="banner">
<div class="wrap">
{{ content_for_logo }}
</div>
</header>
{{ order_summary_toggle }}
<div class="content" data-content>
<div class="wrap">
<div class="main">
<header class="main__header" role="banner">
{{ content_for_logo }}
{{ breadcrumb }}
{{ alternative_payment_methods }}
</header>
<main class="main__content" role="main">
{{ content_for_layout }}
</main>
<footer class="main__footer" role="contentinfo">
{{ content_for_footer }}
</footer>
</div>
<aside class="sidebar" role="complementary">
<div class="sidebar__header">
{{ content_for_logo }}
</div>
<div class="sidebar__content">
{{ content_for_order_summary }}
</div>
</aside>
</div>
</div>
{{ tracking_code }}
</body>
</html>
Dear Sajat,
Thank you so much for your help! Now it is working 😀
Wish you a great weekend!
Anna
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024