From c57e1cca25b57b15df32cb7404fa9088465eca19 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Fri, 16 Feb 2024 09:36:41 +0100
Subject: [PATCH] Shopify: Improve instruction display (#5752)

---
 .../Views/UIShopify/EditShopify.cshtml        | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/BTCPayServer/Views/UIShopify/EditShopify.cshtml b/BTCPayServer/Views/UIShopify/EditShopify.cshtml
index 480c134d4..e3025599e 100644
--- a/BTCPayServer/Views/UIShopify/EditShopify.cshtml
+++ b/BTCPayServer/Views/UIShopify/EditShopify.cshtml
@@ -61,16 +61,17 @@
             @if (shopifyCredsSet)
             {
                 <div class="alert alert-warning">
-                    <p>
-                        In Shopify please paste following script at <a href="@shopifyUrl/admin/settings/checkout#PolarisTextField1" target="_blank" class="fw-bold" rel="noreferrer noopener"> Settings &gt; Checkout &gt; Order Processing &gt; Additional Scripts</a>
-                    </p>
-                    <kbd style="display: block; word-break: break-all;" class="bg-dark">
-                        @($"<script src='{Url.Action("ShopifyJavascript", "UIShopify", new { storeId = Context.GetRouteValue("storeId") }, Context.Request.Scheme)}'></script>")
-                    </kbd>
+                    <h5 class="alert-heading">In Shopify, please do the following …</h5> 
+                    <ul>
+                        <li>
+                            Add a payment method at <a href="@shopifyUrl/admin/settings/payments" class="alert-link fw-bold" target="_blank" rel="noreferrer noopener">Settings &gt; Payments &gt; Manual Payment Methods</a> with the name <strong>Bitcoin with BTCPay Server</strong>
+                        </li>
+                        <li>
+                            Paste this script at <a href="@shopifyUrl/admin/settings/checkout#PolarisTextField1" class="fw-bold alert-link" target="_blank" rel="noreferrer noopener">Settings &gt; Checkout &gt; Order Processing &gt; Additional Scripts</a>:
+                            <pre class="mt-2 mb-0 text-wrap">@($"<script src='{Url.Action("ShopifyJavascript", "UIShopify", new { storeId = Context.GetRouteValue("storeId") }, Context.Request.Scheme)}'></script>")</pre>
+                        </li>
+                    </ul>
                 </div>
-                <p class="alert alert-warning">
-                    In Shopify please add a payment method at <a target="_blank" href="@shopifyUrl/admin/settings/payments" class="fw-bold" rel="noreferrer noopener"> Settings &gt; Payments &gt; Manual Payment Methods</a> with the name <kbd class="bg-dark">Bitcoin with BTCPay Server</kbd>
-                </p>
                 <p class="alert alert-success">
                     Orders on <b>@Model.ShopName</b>.myshopify.com will be marked as paid on successful invoice payment.
                     Started: @Model.IntegratedAt.Value.ToBrowserDate()