Make Product Heading bigger - Featured Collection

[Modico]

Hello everyone

So I made this Featured Collection, where you can select a collection and it will show all products of that collection with the Name and Price of the selected product. I found out how to center the Name of the product but I didnt find out how to make it bigger. I took a Screenshoot of it so you can see what I mean. The Name is just so small and want it to be bigger so the people can see it. I would like it to be a little bit bigger as the Price.

Then my 2. problem is that the price isnt centered as well only the name of the product. I would like to center this as well.

Would make me very happy if someone could help me with these 2 problemes.

Thanks!

[soenmez]

Hello Modico,

First, I’d like to point out that this question has been posted in the German forum, but it would be better to post it in the English forum to get more responses.

Could you please share a Code-Snippet of the Product-Section you have modified before?

[Modico]

Hi @soenmez

Here is the code to the card-product.liquid. Im not sure if you meant this one but always when I inspect the code from this block there’s always the word card so I believe it’s this one

Sorry I don’t know how to make the code so clean like I saw in other Questions so I just copied it.

Show More

card-product.liquid

{% comment %}
Renders a product card

Accepts:

• card_product: {Object} Product Liquid object (optional)
• media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
• show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
• show_vendor: {Boolean} Show the product vendor. Default: false
• show_rating: {Boolean} Show the product rating. Default: false
• extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
• lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
• show_quick_add: {Boolean} Show the quick add button.
• section_id: {String} The ID of the section that contains this card.
• horizontal_class: {Boolean} Add a card–horizontal class if set to true. Default: false (optional)
• horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}

{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}

{%- endif -%}

{%- endif -%}

{{ card_product.title | escape }}

{%- if card_product.available == false -%}

{{- ‘products.product.sold_out’ | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- ‘products.product.on_sale’ | t -}}

{%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%}
{{ ‘accessibility.vendor’ | t }}

{{ card_product.vendor }}

{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}

({{ card_product.metafields.reviews.rating_count }})

{{- card_product.metafields.reviews.rating_count }}
{{ ‘accessibility.total_reviews’ | t -}}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}

{%- liquid
assign product_form_id = ‘quick-add-’ | append: section_id | append: card_product.id
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}

{%- else -%}

{%- endif -%}

{%- endif -%}

{%- if card_product.available == false -%}

{{- ‘products.product.sold_out’ | t -}}

{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}

{{- ‘products.product.on_sale’ | t -}}

{%- endif -%}

{%- else -%}

{{ ‘onboarding.product_title’ | t }}

{{ ‘onboarding.product_title’ | t }}

{%- if show_vendor -%}
{{ ‘accessibility.vendor’ | t }}

{{ ‘products.product.vendor’ | t }}

{%- endif -%}
{% render ‘price’ %}

{%- endif -%}

Thanks for your response.

I hope you can help me.

[soenmez]

Hey Modico, thank you for your code.

Here is an example to center the price and to adjust the product name font size:

1. Insert a Tag below “{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}”

2. Modify (insert product-title in class) your card_product.title line to include the above style changes:

## {{ card_product.title | escape }}

3. Also modify the rendering of the price to include the style price-container:

{% render 'price', product: card_product, price_class: 'price-container' %}

If you have any further questions, feel free to ask

[Modico]

Hey @soenmez

Thank you very much for your help. Everything worked just as I wanted it.

Could you also help me with the problems in the other post? If you need any codes just write me and I’m going to respond as soon as can. Now I also know how to send the code the right way because of your help.

Thanks again for everything!

Modico