Adding a line of text underneath the price on product page

Store Design
1

Hi,

I am looking to add a line of text underneath the price on the product page of my shop https://pawcopets.co.uk/products/calming-comfort-bed

As seen on this website (green line)

Screenshot 2021-06-08 at 22.04.23.png
Screenshot 2021-06-08 at 22.04.23.png1532×602 107 KB

Ideally a customizable colour like here would be great. I am hoping not to need an app for this but if the website in picture is using an app then I would appreciate any recommendations.

Appreciate any help. Thanks

2

Hi, I found a solution. You will need to add some code to your “product-template.liquid” file.

Step 1: In the “product-template.liquid” add this chunk of code at the very top:

( ^^You can add other css for the text here too)

Step 2:

In the template file directly under your “product__price” div element and still within the “product-single__meta” div element, ADD this chunk of code:


{{ section.settings.product_message }}

Step 3: This final step allows you to change the message and message color in your store editor. Towards the bottom of the template file, find the chunk of code that looks similar to this:

{% schema %}
{
  "name": {
    "cs": "Stránky produktů",
    "da": "Produktsider",
    "de": "Produktseiten",
    "en": "Product pages",
    "es": "Páginas de productos",
    "fi": "Tuotesivut",
    "fr": "Pages de produits",
    "it": "Pagine di prodotto",
    "ja": "商品ページ",
    "ko": "제품 페이지",
    "nb": "Produktsider",
    "nl": "Productpagina's",
    "pl": "Strony produktu",
    "pt-BR": "Páginas de produtos",
    "pt-PT": "Páginas de produtos",
    "sv": "Produktsidor",
    "th": "หน้าสินค้า",
    "tr": "Ürün sayfaları",
    "vi": "Trang sản phẩm",
    "zh-CN": "产品页面",
    "zh-TW": "產品頁面"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "product_quantity_enable",
      "label": {
        "cs": "Zobrazit výběr množství",
        "da": "Vis antalsvælger",
        "de": "Mengenauswahl anzeigen",
        "en": "Show quantity selector",
        "es": "Mostrar selector de cantidad",
        "fi": "Näytä määrän valitsin",
        "fr": "Afficher le sélecteur de quantité",
        "it": "Mostra selettore quantità",
        "ja": "数量セレクターを表示する",
        "ko": "수량 선택기 표시",
        "nb": "Vis mengdevelger",
        "nl": "Hoeveelheidskiezer weergeven",
        "pl": "Pokaż selektor ilości",
        "pt-BR": "Exiba um seletor de quantidade",
        "pt-PT": "Mostrar um seletor de quantidade",
        "sv": "Visa kvantitetsväljare",
        "th": "แสดงตัวเลือกจำนวน",
        "tr": "Adet seçiciyi göster",
        "vi": "Hiển thị hộp chọn số lượng",
        "zh-CN": "显示数量选择器",
        "zh-TW": "顯示數量選擇器"
      }
    },

Directly under this line:

"settings": [

ADD this:

{
     "type": "text",
     "id": "product_message",
     "label": "text",
     "default": "Buy 2 or more and save an extra 10%!",
     "info": "text",
     "placeholder": "Enter custom product message"
	},
	{
     "type": "color",
     "id": "custom_message_color",
     "label": "custom message color",
     "default": "#00FF00"
	},

That should be all it takes. I hope that helps.

1 Like
3

Wow @bdowling this worked perfectly. Thanks for help, really appreciated.