How can I add a subtitle bar to my website's title?

[sharon_wigg]

Hi,

Don’t know if anyone can help with this but I really could do with a ‘sub-title’ bar below the title.

My html knowledge is minimal, although I do know how to inspect code so if anyone can give me a piece of code to do this and tell me where to insert it, I would be happy to try.

Not even sure if this is possible but any help would be gratefully received.

Many thanks,

Sharon

[made4Uo]

Hi @sharon_wigg ,

Usually title is using h1 or h2. You can add the code below after title code.

### THIS IS YOUR CONTENT

[JHKCreate]

Hi @sharon_wigg

Is that subtitle going to be the same for all products or product dependent? Let me know!

[sharon_wigg]

Hi,

I would need it for all existing and future products. If it makes a difference I currently have 2 - 3 thousand books in stock.

Sharon

[JHKCreate]

Clear, can you locate your product-template.liquid file and share it here? What theme are you using?

Let me know!

[sharon_wigg]

Hi,

Theme is Sunrise by Rawsterne.

Sorry, don’t know where to look for a ‘liquid’ file

[sharon_wigg]

Think this is it

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- assign product_image_zoom_size = ‘1024x1024’ -%}
{%- assign thumbnail_size = ‘100x100’ -%}
{%- assign zoom_enabled = section.settings.zoom_product -%}

{{ product.title | escape}}

{% assign image = featured_image %} {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% if product.compare_at_price > product.price %} {% if section.settings.show_sale_sticker %} {{ 'products.general.sale' | t }} {% endif %} {% endif %}

{% for image in product.images %} {%- assign active_image = "" -%} {%- if featured_image == image -%} {%- assign active_image = "active-img" -%} {%- endif -%} {% endfor %}

{% for image in product.images %} {% endfor %}

{% assign product_vendor_handle = product.vendor | handle %} {% if collections[product_vendor_handle].handle == product_vendor_handle %} {% assign vendor_url = collections[product_vendor_handle].url %} {% else %} {% assign vendor_url = product.vendor | url_for_vendor %} {% endif %}

{{ product.vendor | link_to: vendor_url }}

{% if product.available %} {% else %} {% endif %} {% if product.compare_at_price > product.price %} {{ current_variant.price | money }} {{ current_variant.compare_at_price | money }} {% else %} {{ current_variant.price | money }}  {% endif %}

{% if section.settings.show_product_sku %}

{% if current_variant.sku != blank %}{{'products.product.sku' | t}} {{current_variant.sku}}{% endif %}

{% endif %}

{% if product.available %}
{% form ‘product’, product %}

{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %} {% for option in product.options_with_values %}

{{ option.name }} {% for value in option.values %} {{ value }} {% endfor %}

{% endfor %} {% endunless %} {% for variant in product.variants %} {% if variant.available %} {{ variant.title }} - {{ variant.price | money_with_currency }} {% else %} {{ variant.title }} - {{ 'products.product.sold_out' | t }} {% endif %} {% endfor %}

{% if section.settings.show_preorder and current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.inventory_policy == "continue" %}

{{'products.product.preorder_msg' | t}}

{% elsif section.settings.show_inventory and current_variant.inventory_management %}

{{'products.product.availability' | t}} {{current_variant.inventory_quantity}} {{ 'products.product.in_stock' | t }}

{% endif %}

{% if section.settings.show_qty %}

{{'products.product.quantity' | t}}

{% endif %} {% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}

{% if section.settings.show_payment_button %}

{{ form | payment_button }}

{% endif %}

{% endform %} {% else %}

{{'products.product.out_of_stock_msg' | t}}

{% endif %}

{% if collection %}
{% if collection.previous_product or collection.next_product %}

{% if collection.previous_product %} {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %} {{ 'products.general.previous_product_html' | t | link_to: prev_url }} {% endif %} {% if collection.next_product %} {% capture next_url %}{{ collection.next_product}}#content{% endcapture %} {{ 'products.general.next_product_html' | t | link_to: next_url }} {% endif %}

{% endif %} {% endif %}

{% if section.settings.product_social %}

{% capture shareHeading %}{{ 'products.general.share' | t }}{% endcapture %} {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product, share_heading:shareHeading %}

{% endif %}

{{ product.description }}

{{ product.metafields.spr.reviews }}

{% if section.settings.product_related %}
{% include ‘related’ %}
{% endif %}

{% unless product.empty? %}

{% endunless %}

{% schema %}
{
“name”: “Product pages”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“default”: false,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”
},
{
“type”: “checkbox”,
“id”: “show_inventory”,
“label”: “Show inventory quantity”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_preorder”,
“label”: “Show "pre-order" message”,
“default”: true,
“info”: “This will only appear when a product has managed inventory that is 0 or less and still available to buy”
},
{
“type”: “checkbox”,
“id”: “zoom_product”,
“label”: “Enable image zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_qty”,
“label”: “Show qty box on product screen”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_product_sku”,
“label”: “Show SKU”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_sale_sticker”,
“label”: “Show sale sticker”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “product_social”,
“label”: “Show sharing buttons”,
“default”: true
},
{
“type”: “header”,
“content”: “Related items”
},
{
“type”: “checkbox”,
“id”: “product_related”,
“label”: “Enable”,
“default”: true
},
{
“type”: “text”,
“id”: “title_related”,
“label”: “Title”,
“default”: “You may also like…”
},
{
“type”: “checkbox”,
“id”: “mobile_related_items”,
“label”: “Hide related items on mobile”,
“default”: false
}
]
}
{% endschema %}

[sharon_wigg]

Sorry, is this it?

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- assign product_image_zoom_size = ‘1024x1024’ -%}
{%- assign thumbnail_size = ‘100x100’ -%}
{%- assign zoom_enabled = section.settings.zoom_product -%}

{{ product.title | escape}}

{% assign image = featured_image %} {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% if product.compare_at_price > product.price %} {% if section.settings.show_sale_sticker %} {{ 'products.general.sale' | t }} {% endif %} {% endif %}

{% for image in product.images %} {%- assign active_image = "" -%} {%- if featured_image == image -%} {%- assign active_image = "active-img" -%} {%- endif -%} {% endfor %}

{% for image in product.images %} {% endfor %}

{% assign product_vendor_handle = product.vendor | handle %} {% if collections[product_vendor_handle].handle == product_vendor_handle %} {% assign vendor_url = collections[product_vendor_handle].url %} {% else %} {% assign vendor_url = product.vendor | url_for_vendor %} {% endif %}

{{ product.vendor | link_to: vendor_url }}

{% if product.available %} {% else %} {% endif %} {% if product.compare_at_price > product.price %} {{ current_variant.price | money }} {{ current_variant.compare_at_price | money }} {% else %} {{ current_variant.price | money }}  {% endif %}

{% if section.settings.show_product_sku %}

{% if current_variant.sku != blank %}{{'products.product.sku' | t}} {{current_variant.sku}}{% endif %}

{% endif %}

{% if product.available %}
{% form ‘product’, product %}

{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %} {% for option in product.options_with_values %}

{{ option.name }} {% for value in option.values %} {{ value }} {% endfor %}

{% endfor %} {% endunless %} {% for variant in product.variants %} {% if variant.available %} {{ variant.title }} - {{ variant.price | money_with_currency }} {% else %} {{ variant.title }} - {{ 'products.product.sold_out' | t }} {% endif %} {% endfor %}

{% if section.settings.show_preorder and current_variant.inventory_management and current_variant.inventory_quantity <= 0 and current_variant.inventory_policy == "continue" %}

{{'products.product.preorder_msg' | t}}

{% elsif section.settings.show_inventory and current_variant.inventory_management %}

{{'products.product.availability' | t}} {{current_variant.inventory_quantity}} {{ 'products.product.in_stock' | t }}

{% endif %}

{% if section.settings.show_qty %}

{{'products.product.quantity' | t}}

{% endif %} {% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}

{% if section.settings.show_payment_button %}

{{ form | payment_button }}

{% endif %}

{% endform %} {% else %}

{{'products.product.out_of_stock_msg' | t}}

{% endif %}

{% if collection %}
{% if collection.previous_product or collection.next_product %}

{% if collection.previous_product %} {% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %} {{ 'products.general.previous_product_html' | t | link_to: prev_url }} {% endif %} {% if collection.next_product %} {% capture next_url %}{{ collection.next_product}}#content{% endcapture %} {{ 'products.general.next_product_html' | t | link_to: next_url }} {% endif %}

{% endif %} {% endif %}

{% if section.settings.product_social %}

{% capture shareHeading %}{{ 'products.general.share' | t }}{% endcapture %} {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product, share_heading:shareHeading %}

{% endif %}

{{ product.description }}

{{ product.metafields.spr.reviews }}

{% if section.settings.product_related %}
{% include ‘related’ %}
{% endif %}

{% unless product.empty? %}

{% endunless %}

{% schema %}
{
“name”: “Product pages”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“default”: false,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”
},
{
“type”: “checkbox”,
“id”: “show_inventory”,
“label”: “Show inventory quantity”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_preorder”,
“label”: “Show "pre-order" message”,
“default”: true,
“info”: “This will only appear when a product has managed inventory that is 0 or less and still available to buy”
},
{
“type”: “checkbox”,
“id”: “zoom_product”,
“label”: “Enable image zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_qty”,
“label”: “Show qty box on product screen”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_product_sku”,
“label”: “Show SKU”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_sale_sticker”,
“label”: “Show sale sticker”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “product_social”,
“label”: “Show sharing buttons”,
“default”: true
},
{
“type”: “header”,
“content”: “Related items”
},
{
“type”: “checkbox”,
“id”: “product_related”,
“label”: “Enable”,
“default”: true
},
{
“type”: “text”,
“id”: “title_related”,
“label”: “Title”,
“default”: “You may also like…”
},
{
“type”: “checkbox”,
“id”: “mobile_related_items”,
“label”: “Hide related items on mobile”,
“default”: false
}
]
}
{% endschema %}

[JHKCreate]

Would you mind if we requested Collaborator access and got this done for you quickly? Please find the Shopify documentation related to Collaborator access here: Collaborator permissions · Shopify Help Center

Do let us know what the subtitle should be and we will take care of the rest and post the solution here shortly after.

Cheers!

[sharon_wigg]

Hi,

thank you for getting back to me so quickly and sorry that I am so thick when it comes to this stuff.

The sub title wouldn’t have to say any, just be a blank box like the title, as it would have different contents for each item (I have a great family network who will help me fill in for existing products).

I am happy for your to do what you suggested but can you give me a rough idea of cost, simply because my need for a sub title has to be balanced again the cost of obtaining one.

Thank you

[JHKCreate]

Not to worry, this is a free service. We will create a field in the product pages on the backend for them to be filled, and add the coding the product page on the store so that once the field is filled it would show.

Let me know !

[sharon_wigg]

Wow, thank you.

I would be very grateful for this help. What do I have to do?

[JHKCreate]

Just sharing your store’s URL would be enough, thanks!

[sharon_wigg]

href=“https://www.booksfromsharon.com/” target=“_blank”>Books From Sharon | Books From Sharon

Books From Sharon ~ Home ~ Shopify (sharon1265.myshopify.com)

[JHKCreate]

Request Sent, Thanks!

[JHKCreate]

This is now done:

A new field has been added to your product entry page at the very bottom as per the below:

And this is how it looks: 10 Notecards: Geese | Books From Sharon. You only need to fill this, all the rest is fully automated.

Should that help answer your query, we always appreciate liking & marking an as answer to let the community find quality solutions faster. Thanks!

[sharon_wigg]

Thank you so much. I am very grateful.

[JHKCreate]

You’re most welcome @sharon_wigg !

[JHKCreate]

For anyone looking for an answer, this was the code used after creating the metafield in the settings:

{% if product.metafields.my_fields.subtitle %}
## {{product.metafields.my_fields.subtitle}}
{%endif%}

Cheers!