I need help changing the font type on my product description page please!

spennyk93 · April 7, 2024, 10:49pm

Hi,

I am currently stuck on an issue where I am unable to change the font on my product description page. I have attached an image of what the font currently looks like.

I have tried going to the scripting section of my theme and goint to the base.css section and adding script but nothing happens when I do that.

I have also tried going to my products but there is no button to change the font type in the product description section.

EBOOST · April 8, 2024, 4:42am

Hi @spennyk93 ,

May I suggest to update code these steps:

Go to Store Online-> theme → edit code
Sections/main-product.liquid
Find “{%- when ‘description’ -%}”
Replace old code with below( refer the screenshot to add):

{%- when 'description' -%}
  {%- if product.description != blank -%}
  
  
    {{ product.description }}
  

{%- endif -%}

Find “type”: “description”,"
replace with code below likes the screenshot

{
  "type": "description",
  "name": "t:sections.main-product.blocks.description.name",
  "limit": 1,
  "settings": [
     {
      "type": "font_picker",
      "id": "font_description",
      "default": "americana_n4",
      "label": "t:settings_schema.typography.settings.type_header_font.label",
      "info": "t:settings_schema.typography.settings.type_header_font.info"
    }
  ]
},

Go to customize theme → product detail → select font for description

spennyk93 · April 8, 2024, 6:27pm

Hi, thanks for getting back to me!

I should mention that I am using a custom theme “EcomifyLite”, I only have featured products and single products as seen in first screenshot:

I tried going through single product liquid and featured product liquid but the scripting appears to be different as I cannot find what you suggested to look for.

Here is the list of code that I have in single-product.liquid

{% liquid
assign pt = section.settings.pt | prepend: ‘pt-’
assign pb = section.settings.pb | prepend: ‘pb-’
assign mt = section.settings.mt | prepend: ‘mt-’
assign mb = section.settings.mb | prepend: ‘mb-’

assign product = section.settings.product
%}

{% if product == blank %} {{ 'product-1' | placeholder_svg_tag: 'product-item-img bg-light mb-4' }} {% else %} {% render 'product-gallery', product: product %} {% endif %}

{% if product == blank %}

{% else %} {% if section.settings.show_vendor and product.vendor %}

{% endif %}

{% render 'product-rating-badge', product: product %}

{% if product.metafields.descriptors.subtitle %}

{% endif %}

{% if product.first_available_variant.compare_at_price > product.first_available_variant.price %} {{ 'product.price_regular' | t }} ~~{{ product.first_available_variant.compare_at_price | money }}~~ {{ 'product.price_sale' | t }} {{ product.first_available_variant.price | money }} {% else %} {{ product.first_available_variant.price | money }} {% endif %} {% if product.first_available_variant.available and product.first_available_variant.compare_at_price > product.first_available_variant.price %} {{ 'product.save' | t }} {{ product.first_available_variant.compare_at_price | minus: product.first_available_variant.price | times: 100 | divided_by: product.first_available_variant.compare_at_price | round | append: '%' }} {% endif %} {% unless product.first_available_variant.available %} {{ 'product.sold_out' | t }} {% endunless %}

{% render ‘product-form’, product: product %}

{% unless section.settings.description == blank %}

{% endunless %}

{% unless section.settings.btn_text == blank %}

{{ section.settings.btn_text }}

{% endunless %}

{% endif %}

{% schema %}
{
“name”: “Single Product”,
“settings”: [
{
“type”: “header”,
“content”: “General”
},
{
“type”: “select”,
“id”: “bg_color”,
“label”: “Background color”,
“default”: “”,
“options”: [
{ “group”: “Inherit”, “value”: “”, “label”: “Body” },
{ “group”: “Light”, “value”: “bg-white text-body”, “label”: “White” },
{ “group”: “Light”, “value”: “bg-light text-body”, “label”: “Light” }
]
},
{
“type”: “select”,
“id”: “container”,
“label”: “Container”,
“default”: “container”,
“options”: [
{ “value”: “container”, “label”: “Container” },
{ “value”: “container-fluid”, “label”: “Fluid” }
]
},
{
“type”: “text”,
“id”: “max_width”,
“label”: “Max-width (px)”
},
{
“type”: “select”,
“id”: “text_align”,
“label”: “Text align”,
“default”: “text-start”,
“options”: [
{ “value”: “text-start”, “label”: “Left” },
{ “value”: “text-center”, “label”: “Center” }
]
},
{
“type”: “header”,
“content”: “Product”
},
{
“type”: “product”,
“id”: “product”,
“label”: “Product”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “select”,
“id”: “title_size”,
“label”: “Title size”,
“default”: “h2”,
“options”: [
{ “group”: “Heading”, “value”: “h1”, “label”: “H1” },
{ “group”: “Heading”, “value”: “h2”, “label”: “H2” },
{ “group”: “Heading”, “value”: “h3”, “label”: “H3” },
{ “group”: “Heading”, “value”: “h4”, “label”: “H4” },
{ “group”: “Heading”, “value”: “h5”, “label”: “H5” },
{ “group”: “Heading”, “value”: “h6”, “label”: “H6” }
]
},
{
“type”: “richtext”,
“id”: “description”,
“label”: “Description”,
“default”: “

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

”
},
{
“type”: “select”,
“id”: “description_size”,
“label”: “Description size”,
“default”: “fs-6”,
“options”: [
{ “value”: “fs-1”, “label”: “fs-1” },
{ “value”: “fs-2”, “label”: “fs-2” },
{ “value”: “fs-3”, “label”: “fs-3” },
{ “value”: “fs-4”, “label”: “fs-4” },
{ “value”: “fs-5”, “label”: “fs-5” },
{ “value”: “fs-6”, “label”: “fs-6” }
]
},
{
“type”: “header”,
“content”: “Gallery”
},
{
“type”: “select”,
“id”: “gallery_img_orientation”,
“label”: “Image orientation”,
“default”: “square”,
“options”: [
{ “value”: “square”, “label”: “Square” },
{ “value”: “landscape”, “label”: “Landscape” },
{ “value”: “potrait”, “label”: “Potrait” }
]
},
{
“type”: “select”,
“id”: “gallery_img_thumbnail”,
“label”: “Image thumbnail”,
“default”: “img-thumbnail”,
“options”: [
{ “value”: “”, “label”: “None” },
{ “value”: “img-thumbnail”, “label”: “Thumbnail” }
]
},
{
“type”: “checkbox”,
“id”: “gallery_show_thumbnails_mobile”,
“label”: “Show thumb images on mobile”,
“default”: true
},
{
“type”: “header”,
“content”: “Form”
},
{
“type”: “checkbox”,
“id”: “form_light_bg”,
“label”: “Light bg color”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “form_show_qty_field”,
“label”: “Show quantity field”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “form_show_buy_btn”,
“label”: “Show Buy button”,
“default”: true
},
{
“type”: “header”,
“content”: “Button”
},
{
“type”: “text”,
“id”: “btn_text”,
“label”: “Button text”,
“default”: “Learn more”,
“info”: “Leave empty to disable”
},
{
“type”: “select”,
“id”: “btn_color”,
“label”: “Button color”,
“default”: “btn-outline-primary”,
“options”: [
{ “group”: “Normal”, “value”: “btn-link”, “label”: “Link” },
{ “group”: “Normal”, “value”: “btn-light”, “label”: “Light” },
{ “group”: “Normal”, “value”: “btn-dark”, “label”: “Dark” },
{ “group”: “Normal”, “value”: “btn-primary”, “label”: “Primary” },
{ “group”: “Normal”, “value”: “btn-secondary”, “label”: “Secondary” },
{ “group”: “Normal”, “value”: “btn-success”, “label”: “Success” },
{ “group”: “Normal”, “value”: “btn-danger”, “label”: “Danger” },
{ “group”: “Normal”, “value”: “btn-warning”, “label”: “Warning” },
{ “group”: “Normal”, “value”: “btn-info”, “label”: “Info” },
{ “group”: “Outline”, “value”: “btn-outline-light”, “label”: “Light Outline” },
{ “group”: “Outline”, “value”: “btn-outline-dark”, “label”: “Dark Outline” },
{ “group”: “Outline”, “value”: “btn-outline-primary”, “label”: “Primary Outline” },
{ “group”: “Outline”, “value”: “btn-outline-secondary”, “label”: “Secondary Outline” },
{ “group”: “Outline”, “value”: “btn-outline-success”, “label”: “Success Outline” },
{ “group”: “Outline”, “value”: “btn-outline-danger”, “label”: “Danger Outline” },
{ “group”: “Outline”, “value”: “btn-outline-warning”, “label”: “Warning Outline” },
{ “group”: “Outline”, “value”: “btn-outline-info”, “label”: “Info Outline” }
]
},
{
“type”: “select”,
“id”: “btn_size”,
“label”: “Button size”,
“default”: “btn-md”,
“options”: [
{ “value”: “btn-sm”, “label”: “Small” },
{ “value”: “btn-md”, “label”: “Normal” },
{ “value”: “btn-lg”, “label”: “Large” }
]
},
{
“type”: “header”,
“content”: “Spacing”
},
{
“type”: “range”,
“id”: “pt”,
“label”: “Padding top”,
“min”: 0,
“max”: 20,
“step”: 1,
“default”: 0
},
{
“type”: “range”,
“id”: “pb”,
“label”: “Padding bottom”,
“min”: 0,
“max”: 20,
“step”: 1,
“default”: 0
},
{
“type”: “range”,
“id”: “mt”,
“label”: “Margin top”,
“min”: 0,
“max”: 20,
“step”: 1,
“default”: 0
},
{
“type”: “range”,
“id”: “mb”,
“label”: “Margin bottom”,
“min”: 0,
“max”: 20,
“step”: 1,
“default”: 0
}
],
“presets”: [
{
“name”: “Single Product”,
“category”: “Product”
}
]
}
{% endschema %}

EBOOST · April 8, 2024, 10:53pm

Hi,

Maybe I suggest replace code in the single-product.liquid with code below:

{% liquid
assign pt = section.settings.pt | prepend: 'pt-'
assign pb = section.settings.pb | prepend: 'pb-'
assign mt = section.settings.mt | prepend: 'mt-'
assign mb = section.settings.mb | prepend: 'mb-'
assign product = section.settings.product
%}

{% schema %}
{
  "name": "Single Product",
  "settings": [
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "select",
      "id": "bg_color",
      "label": "Background color",
      "default": "",
      "options": [
        {
          "group": "Inherit",
          "value": "",
          "label": "Body"
        },
        {
          "group": "Light",
          "value": "bg-white text-body",
          "label": "White"
        },
        {
          "group": "Light",
          "value": "bg-light text-body",
          "label": "Light"
        }
      ]
    },
    {
      "type": "select",
      "id": "container",
      "label": "Container",
      "default": "container",
      "options": [
        {
          "value": "container",
          "label": "Container"
        },
        {
          "value": "container-fluid",
          "label": "Fluid"
        }
      ]
    },
    {
      "type": "text",
      "id": "max_width",
      "label": "Max-width (px)"
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text align",
      "default": "text-start",
      "options": [
        {
          "value": "text-start",
          "label": "Left"
        },
        {
          "value": "text-center",
          "label": "Center"
        }
      ]
    },
    {
      "type": "header",
      "content": "Product"
    },
    {
      "type": "product",
      "id": "product",
      "label": "Product"
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": "Show vendor",
      "default": true
    },
    {
      "type": "select",
      "id": "title_size",
      "label": "Title size",
      "default": "h2",
      "options": [
        {
          "group": "Heading",
          "value": "h1",
          "label": "H1"
        },
        {
          "group": "Heading",
          "value": "h2",
          "label": "H2"
        },
        {
          "group": "Heading",
          "value": "h3",
          "label": "H3"
        },
        {
          "group": "Heading",
          "value": "h4",
          "label": "H4"
        },
        {
          "group": "Heading",
          "value": "h5",
          "label": "H5"
        },
        {
          "group": "Heading",
          "value": "h6",
          "label": "H6"
        }
      ]
    },
    {
      "type": "richtext",
      "id": "description",
      "label": "Description",
      "default": "

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

"
    },
    {
      "type": "font_picker",
      "id": "font_description",
      "default": "americana_n4",
      "label": "t:settings_schema.typography.settings.type_header_font.label",
      "info": "t:settings_schema.typography.settings.type_header_font.info"
    },
    {
      "type": "select",
      "id": "description_size",
      "label": "Description size",
      "default": "fs-6",
      "options": [
        {
          "value": "fs-1",
          "label": "fs-1"
        },
        {
          "value": "fs-2",
          "label": "fs-2"
        },
        {
          "value": "fs-3",
          "label": "fs-3"
        },
        {
          "value": "fs-4",
          "label": "fs-4"
        },
        {
          "value": "fs-5",
          "label": "fs-5"
        },
        {
          "value": "fs-6",
          "label": "fs-6"
        }
      ]
    },
    {
      "type": "header",
      "content": "Gallery"
    },
    {
      "type": "select",
      "id": "gallery_img_orientation",
      "label": "Image orientation",
      "default": "square",
      "options": [
        {
          "value": "square",
          "label": "Square"
        },
        {
          "value": "landscape",
          "label": "Landscape"
        },
        {
          "value": "potrait",
          "label": "Potrait"
        }
      ]
    },
    {
      "type": "select",
      "id": "gallery_img_thumbnail",
      "label": "Image thumbnail",
      "default": "img-thumbnail",
      "options": [
        {
          "value": "",
          "label": "None"
        },
        {
          "value": "img-thumbnail",
          "label": "Thumbnail"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "gallery_show_thumbnails_mobile",
      "label": "Show thumb images on mobile",
      "default": true
    },
    {
      "type": "header",
      "content": "Form"
    },
    {
      "type": "checkbox",
      "id": "form_light_bg",
      "label": "Light bg color",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "form_show_qty_field",
      "label": "Show quantity field",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "form_show_buy_btn",
      "label": "Show Buy button",
      "default": true
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "btn_text",
      "label": "Button text",
      "default": "Learn more",
      "info": "Leave empty to disable"
    },
    {
      "type": "select",
      "id": "btn_color",
      "label": "Button color",
      "default": "btn-outline-primary",
      "options": [
        {
          "group": "Normal",
          "value": "btn-link",
          "label": "Link"
        },
        {
          "group": "Normal",
          "value": "btn-light",
          "label": "Light"
        },
        {
          "group": "Normal",
          "value": "btn-dark",
          "label": "Dark"
        },
        {
          "group": "Normal",
          "value": "btn-primary",
          "label": "Primary"
        },
        {
          "group": "Normal",
          "value": "btn-secondary",
          "label": "Secondary"
        },
        {
          "group": "Normal",
          "value": "btn-success",
          "label": "Success"
        },
        {
          "group": "Normal",
          "value": "btn-danger",
          "label": "Danger"
        },
        {
          "group": "Normal",
          "value": "btn-warning",
          "label": "Warning"
        },
        {
          "group": "Normal",
          "value": "btn-info",
          "label": "Info"
        },
        {
          "group": "Outline",
          "value": "btn-outline-light",
          "label": "Light Outline"
        },
        {
          "group": "Outline",
          "value": "btn-outline-dark",
          "label": "Dark Outline"
        },
        {
          "group": "Outline",
          "value": "btn-outline-primary",
          "label": "Primary Outline"
        },
        {
          "group": "Outline",
          "value": "btn-outline-secondary",
          "label": "Secondary Outline"
        },
        {
          "group": "Outline",
          "value": "btn-outline-success",
          "label": "Success Outline"
        },
        {
          "group": "Outline",
          "value": "btn-outline-danger",
          "label": "Danger Outline"
        },
        {
          "group": "Outline",
          "value": "btn-outline-warning",
          "label": "Warning Outline"
        },
        {
          "group": "Outline",
          "value": "btn-outline-info",
          "label": "Info Outline"
        }
      ]
    },
    {
      "type": "select",
      "id": "btn_size",
      "label": "Button size",
      "default": "btn-md",
      "options": [
        {
          "value": "btn-sm",
          "label": "Small"
        },
        {
          "value": "btn-md",
          "label": "Normal"
        },
        {
          "value": "btn-lg",
          "label": "Large"
        }
      ]
    },
    {
      "type": "header",
      "content": "Spacing"
    },
    {
      "type": "range",
      "id": "pt",
      "label": "Padding top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0
    },
    {
      "type": "range",
      "id": "pb",
      "label": "Padding bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0
    },
    {
      "type": "range",
      "id": "mt",
      "label": "Margin top",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0
    },
    {
      "type": "range",
      "id": "mb",
      "label": "Margin bottom",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0
    }
  ],
  "presets": [
    {
      "name": "Single Product",
      "category": "Product"
    }
  ]
}
{% endschema %}

magenest · April 12, 2024, 4:12am

Hi @spennyk93 , you may want to try to add this CSS

Online Store > Theme > Customize > Product Page > Custom Css (like this https://prnt.sc/pYrUfiEFUZ9N)

.product_description {
      font-family: san-serif;
}

Try it and see if it works for your store and tag us if you have any more question, we are happy to help you with your problems

Topic		Replies	Views
How to change the font of my product discr Store Design design , css , product-page	7	2	October 6, 2023
Changing the font of the description Store Design cart-page , product-page	1	6	June 15, 2024
How to change font of product description Shopify Discussion troubleshooting	3	23	March 6, 2025
Change color product description font dawn theme Store Design design , css , html	1	0	October 28, 2023
How change product title font size & description - only on product page ( ella theme ) Store Design	1	36	January 25, 2022

I need help changing the font type on my product description page please!

{{ 'Product Title' }}

{{ product.title | default: 'Product Title' }}

I need help changing the font type on my product description page please!

{{ 'Product Title' }}

{{ product.title | default: 'Product Title' }}

Related topics