How can I hardcode an image into the Thank You page (without having to install an app)?

Highlighted
Tourist
13 0 2

Wanting to insert a simple image into the Thank You page without having to install an app. I know it's possible to add this via Settings > Checkout > Additional scripts

But am unsure how to go about it. All the apps I've tried load super slow. People have usually left the page before they even load (have watched this on Hotjar recordings)

 

Thanks for any help!

0 Likes
Highlighted
Tourist
13 0 2

Solved it myself. You can add anything you like by adding this into Additional Scripts. It will show up underneath the order status, and look native (with the same border/box as everything else).

 

 
<script>
Shopify.Checkout.OrderStatus.addContentBox(
'<h2>YOUR_CUSTOM_TITLE_HERE</h2>',
'<p>YOUR_CUSTOM_TEXT_HERE</p>',
'<p>ADD_ANOTHER_PARAGRAPH</p>',
'<p><img src="ADD_IMAGE_URL_HERE"></p>'
)
</script>
1 Like
Highlighted
Tourist
13 0 2

UPDATED BUT STILL SEEKING HELP:

So I've played around with this some more and am now trying to include a banner at the top of the page as well. I have got it working. But the thing is, I want to only show this banner if the customer HAS NOT used the code THANKS20 in their order.

At the moment it works, and won't show up if they entered the code THANKS20. And will still show up if someone has entered a discount code at checkout. Which is what I want. BUT it won't show up if someone hasn't used a code at all. So if their order has no discount code applied to it, the banner won't show. I want it to still show up in this case.

I've tried messing around and adding this:

or discount_application.title == nil

 

But it didn't work. Anyone know how to do this? Here's the current code:

 

 

 

{% for discount_application in checkout.discount_applications %}
<!-- DEBUG looking at {{ discount_application.title }} -->
{% if discount_application.title != "THANKS20" or discount_application.title == nil %}

<div id="thankyouoffer" style="display:block;background:#fff5d2;margin-top:20px;padding:20px 20px;border:1px solid #e3df74;font-size:14px;color:#2c2c2c;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin-top:40px;"><b>SPECIAL OFFER </b> For the next 10 minutes you can save 20% on anything in our store. Just continue shopping and use code THANKS20
<br /><br />
<a href="/collections/frontpage?shopagain" class=" btn cart-submit" style="font-size:22px;padding:15px;">Shop again →</a></div>


{% endif %}

{% endfor %}

0 Likes