Shopify allows us to add a discount to a URL. That discount code gets stored in a cookie and then gets read by the checkout to pre-populate the discount code. You can see how that whole process works here - https://help.shopify.com/manual/promoting-marketing/discount-codes/managing-discount-codes#promote-a-discount-using-a-shareable-link.
This functionality is great. But customers don't get to see the code until it gets applied in step 2 of the checkout. And that can be many clicks and page-views away. So I wanted to display the code on the site in every page. That way customers have increased confidence that the code will be applied.
Here's what my solution looks like:
The grey row between the logo and banner only shows if the customer has a discount code stored in a cookie.
To make this happen in the Turbo theme, I created a snippet:
And then I added this to my CSS file for styling:
I included the snippet in the header section for the theme.