Debutify Theme - Change Product Page Font and Description Issues

[fenex11]

Hi Shopify Experts,

I am new to Shopify so pardon me if these questions have already been asked somewhere else.

1. I am using the Debutify Theme (not the Debut Theme by Shopify) and want to change the font size of my product title on the product pages. They look really large on desktop/laptop but okay on mobile phones. I have tried changing the font sizes but the laptop view still remains extremely larger.

2. Also, my product descriptions are right aligned but I want them to cover the whole page (full width).

I would really appreciate any help especially to change the CSS code or anything else that could help.

Thank you in advance.

[dmwwebartisan]

Hey @fenex11 ,

Please share your website URL. I will check and provide a solution here.

Thanks!

[fenex11]

@dmwwebartisan thanks for the quick response. Please Can I send you the url privately?

[dmwwebartisan]

Hey @fenex11 ,

Sure, no problem

Thanks!

[fenex11]

@dmwwebartisan Thanks. I have sent you an email with the url. Didn’t know how to contact you privately on this page.

[dmwwebartisan]

Hey @fenex11 ,

As for the product title. Please add the following code at the end of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.page-title, .product-title-big{ font-size:30px !important }
}

Hope this helps!

As for the product description that is on the right align. I noticed that your product template is modified. Is it possible for you to provide the code of sections/product-template.liquid file. So I will check and correct it?

Thanks!

[fenex11]

Many thanks @dmwwebartisan . My product titles look good now.

Please see below the code for the sections/product-template.liquid:

{% comment %}
The contents of the product.liquid template can be found in /snippets/product-template.liquid
{% endcomment %}

{% include 'product-template' %}

{% unless product.empty == empty %}

{% endunless %}

{% schema %}
{
“name”: “Product pages”,
“class”: “product-section”,
“settings”: [
{
“type”: “header”,
“content”: “Product photos”
},
{
“type”: “select”,
“id”: “image_layout”,
“label”: “Image display”,
“default”: “stacked”,
“options”: [
{
“value”: “stacked”,
“label”: “Stacked”
},
{
“value”: “thumbnail”,
“label”: “Thumbnail”
}
]
},
{
“type”: “select”,
“id”: “product_photo_alignement”,
“label”: “Image alignement”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “Left”
},
{
“value”: “right”,
“label”: “Right”
}
]
},
{
“type”: “checkbox”,
“id”: “enable_zoom”,
“label”: “Enable image zoom”,
“default”: true
},
{
“type”: “header”,
“content”: “Product details”
},
{
“type”: “checkbox”,
“id”: “product_vendor”,
“label”: “Show vendor”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “product_title_size”,
“label”: “Big product tite”,
“default”: false
},
{
“type”: “select”,
“id”: “product_header_alignement”,
“label”: “Alignement”,
“default”: “”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “text-center”,
“label”: “Center”
}
]
},
{
“type”: “select”,
“id”: “product_selector”,
“label”: “Variant picker type”,
“options”: [
{
“value”: “radio”,
“label”: “Button”
},
{
“value”: “select”,
“label”: “Dropdown”
}
]
},
{
“type”: “checkbox”,
“id”: “quantity_enabled”,
“label”: “Show quantity picker”
},
{
“type”: “checkbox”,
“id”: “button_cart_icon”,
“label”: “Show button icon”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_description”,
“label”: “Show description”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “social_sharing_products”,
“label”: “Enable product sharing”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_product_tags”,
“label”: “Show product tags”,
“default”: true
}
]
}
{% endschema %}

{% if product.metafields.loox.num_reviews %}

{% endif %}

{{ product.metafields.loox.reviews }}

[dmwwebartisan]

Hey @fenex11 ,

Sorry, It’s my bad. It is a Debufiy theme.

Please provide a code of snippets/product-template.liquid file.

Thanks!

[fenex11]

@dmwwebartisan , no problem. Please see below;

{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}

{% assign on_sale = false %}

{% if current_variant.compare_at_price > current_variant.price %}
{% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}

{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}

{% capture variantStatus %}
{% if sold_out == true %}
variant-soldout
{% else %}
variant-available
{% endif %}
{% endcapture %}

{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_zoom_size = ‘1024x1024’ -%}
{%- assign product_image_scale = ‘2’ -%}

{% capture product_header_layout %}
{% if section.settings.product_vendor %}

{{ product.vendor }}

{% endif %}

{% if settings.review_badge == ‘review_badge_above’ %}
{% include ‘review-badge’, badge_template: ‘product’ %}
{% endif %}

{% if template != "product" %} {% endif %}

{% unless section_onboarding %}
{{ product.title }}
{% else %}
{{ title }}
{% endunless %}

{% if template != “product” %}

{% endif %}

{% if settings.review_badge == ‘review_badge_under’ %}
{% include ‘review-badge’, badge_template: ‘product’ %}
{% endif %}
{% endcapture %}

{{ product_header_layout }}

{% if section_onboarding %}
{{ ‘product-1’ | placeholder_svg_tag: ‘placeholder-svg’ }}
{% else %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ featured_image.id }}-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}

{% comment %}
Display current variant image
{% endcomment %}

{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% endif %}

{% comment %}
Display variant image
{% endcomment %}

{% for image in product.images %}
{% unless image contains featured_image %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}

{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}

{% endunless %} {% endfor %}

{% if product.images.size > 1 %}

{% for image in product.images %} {% unless image contains featured_image %}

{% endunless %} {% endfor %}

{% endif %}

{{ product_header_layout }}

{% if section_onboarding %} {{ price | money }} {% else %} {% if on_sale %} {{ 'products.general.regular_price' | t }} {{ current_variant.compare_at_price | money }} {{ 'products.general.sale_price' | t }} {% else %} {{ 'products.general.regular_price' | t }} {{ 'products.general.sale_price' | t }} {% endif %}

<span id=“ProductPrice”
class=“product-single__price{% if on_sale %} on-sale{% endif %}”
itemprop=“price”
content=“{{ current_variant.price | divided_by: 100.00 }}”
{% unless current_variant.available %}aria-hidden=“true”{% endunless %}>
{{ current_variant.price | money }}

{% endif %}
{% if settings.position_currency_converter == “product” %}{% include “currency-selector” %}{% endif %}

{% if section_onboarding %}

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

{% else %} {% capture "form_classes" %} product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %} {%- endcapture %}

{% capture “form_id” %}AddToCartForm–{{ section.id }}{%- endcapture %}

{% form ‘product’, product, class:form_classes, id:form_id %}
{% unless product.has_only_default_variant %}

{% for option in product.options_with_values %}

{{ option.name | escape }}

{% if section.settings.product_selector == ‘radio’ %}

{% assign option_index = forloop.index %} {% for value in option.values %}

{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}

<input type=“radio”
{% if option.selected_value == value %} checked=“checked”{% endif %}
{% unless variant_label_state %} disabled=“disabled”{% endunless %}
value=“{{ value | escape }}”
data-index=“option{{ option_index }}”
name=“{{ option.name | handleize }}”
class=“single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}”
id=“ProductSelect–{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}”>
<label for="ProductSelect–{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}"class=“btn btn–small {% unless variant_label_state %} disabled{% endunless %}”>{{ value | escape }}
{% endfor %}

{% else %} {% for value in option.values %} {{ value | escape }} {% endfor %} {% endif %}

{% 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.quantity_enabled %}

{{ 'products.product.quantity' | t }} {% include 'quantity-selector', type:'product' %}

{% endif %}

{% if section.settings.button_cart_icon %} {% endif %} {% if current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %} {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}

{% endform %} {% endif %}

{% unless product.description == blank or section.settings.show_description == false %}

{{ product.description }}

{% endunless %}

{% if section.settings.social_sharing_products %}
{% include ‘social-sharing’, share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}

{% if section.settings.show_product_tags %}
{% for tag in product.tags %}
{% if forloop.first %}

{{ 'blogs.article.tags' | t }}: {% endif %} {{ tag }} {% if forloop.last %}

{% endif %} {% endfor %} {% endif %}

{% if template != “product” %}

---

{{ 'products.product.full_details' | t }} {% endif %}

[dmwwebartisan]

Hey @fenex11 ,

Please check the screenshot and move your description code accordingly.

Move it here…


Let me know if this works!

Thanks!

[fenex11]

Hi @dmwwebartisan ,

It actually pushed the whole description up and not full width. You can check the url I sent you.

[fenex11]

Hey @dmwwebartisan , I think I pasted in the wrong place. Its working now but the pictures are now left aligned instead of full width. Any help with that please?

[dmwwebartisan]

Hey @fenex11 ,

Your images in the description are small and if you want it clear and nice images then you have to change this with proper high-resolution images with a big image but for now to make a full width. Please add the following code at the end of your assets/theme.scss.liquid file.

.product-single__description.rte img {
    width: 100%;
}

This should work!

[dmwwebartisan]

Hey @fenex11 ,

Also, add this at the bottom of your assets/theme.scss.liquid file

This will give proper separators and gaps to your description.

.product-single__description.rte {
    margin-top: 20px;
    border-top: 1px solid #dcdcdc;
    padding-top: 20px;
}

[fenex11]

@dmwwebartisan many thanks for your help.

[SPC107]

Hi could you help me with removing the sale tags on Products? They are on the pictures of my Products and it doesn’t look good. How can I change it ? Thanks forwards