Adding custom text to Shopify Products

Shopify is awesome for selling products (Hi WooCommerce), and mostly works nicely out of the box with a few added extras, but there are occasions when you need to add custom text or custom titles on certain Shopify products.

In our case, we needed to show a Pre-Order / Coming Soon title on the clothing products that were not yet in stock.

The first thing to do is tag all the products you want to display this custom text using a Shopify Tag, we called ours “comingsoon”

Then you need to create a Custom Product Collection by going to Products – Collections – Create collection, giving your Collection a unique name, in our case we called it “ComingSoon” and then for the Conditions we selected Product tag  – is equal to –  comingsoon

The next step is to place the code at the end of this post in your Shopify theme.

We wanted this text to display on the single product pages, so for the Prestige theme we were using, the file to edit was called product-meta.liquid, and we decided to place at the end of the opening title <h1 class=”ProductMeta__Title Heading u-h2″>… </h1>

Below is the code, and keep in mind it doesn’t seem to work when you manually select products to display the text in your Collections, hence the need to tag your products and then use that tag in the Collections conditions.

Before you do any changes to your Shopify theme, always ensure to make a backup by clicking the ‘Download theme file’ and also Duplicate, then if you run in to any issues you can quickly revert to the previous code.

{% comment %}
Show custom text message
{% endcomment %}

{% assign comingsoon = false %}
{% for c in product.collections %}
{% if c.handle == "comingsoon" %}
{% assign comingsoon = true %}
{% endif %}
{% endfor %}

{% if comingsoon == true %}
<div style="color:black;font-size:10px;margin-bottom:10px;font-weight:bold;text-transform: uppercase;">These products are available for Pre-Order.</div>
{% endif %}

Creating beautiful websites since 2006