Docs Menu

Global gift card message

This code is designed to be used on product pages and remind shoppers that gift cards can be an ideal alternative to picking out a product. You can include the shortcode on every product page — or just on select products.

The optional CSS below will put the content in a box with a light gray border.

Some possible text could include: "Not sure what to give? Try our gift cards instead" or "Not sure on size or color? Gift a gift card and let your recipient choose!"

Please note: Using these code snippets may require some knowledge of HTML, CSS and Liquid. If you need assistance getting the code examples to work or meet your more specific needs, consider hiring a developer to help. These code snippets may not work in all themes or store configurations, so be sure to test everything thoroughly.

Add this Code to My Content

Change the values in bold to fit your needs.

<div class="gcontent-gift-card-msg"><p>Any text here. <a href="/products/gift-card">Link text</a>.</p></div>

Add this Code to Your Theme's CSS File

We recommend adding it to the end of the file. Please note you can adjust the code in bold to change sizes and spacing as needed.

.gcontent-gift-card-msg { border: 1px solid #ccc; padding: 20px; margin-left: 0px; margin-right: 0px; margin-top: 20px; margin-bottom: 20px; }
.gcontent-gift-card-msg p { font-size: 18px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; }