Customize Featured Collection Section on homepage

[PhMA]

Hello Community 🙂

we are using the refresh theme and on the homepage we have added the section: featured collection

how can we add per default additional product info (12 pack) between product name and price? something like this:

this is the preview link: https://fo68e6svg3jpprqu-61049766108.shopifypreview.com

many thanks

[Vinsinfo]

@PhMA Please follow below steps to add additional info like 12 pack in product cards. Let me know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Edit code" button from the current theme.

3. Go to "card-product.liquid" file.

4. Then search "card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}" in search bar.

5. Then paste the below code at the next line of "</h3>" like below attached image and then save changes.

6. If you want to display the additional information in all pages, use code the provided in Solution 1. If you want to display only on the home page, use code the provided in Solution 2.

Solution 1: To display "12 pack" additional information in product cards in all the pages.

<p>12 pack</p>

Solution 2: To display "12 pack" additional information in product cards only on the home page.

{% if template == 'index' %}
  <p>12 pack</p>
{% endif %}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[PhMA]

@Vinsinfo  many thanks for your help, but how can I apply it everywhere on the product cards but only the products that are part of the bebidas collection, other product cards from other products should not have this info

so on all the product cards that are part of this collection only: https://matumate.com/collections/bebidas

[PhMA]

@Vinsinfo  also how can we make the spacing between the name - 12 pack - price -> a bit less? have a bit more narrow

[Vinsinfo]

@PhMA To display the info only for "bebidas" collection products. Remove the previously shared code and use below code instead of it in the 'card_product.liquid file'.

{% if card_product.collections %}
    {% assign is_bebidas_collection_product = false %}
    {% for collection in card_product.collections %}
        {% if collection.handle == 'bebidas' %}
            {% assign is_bebidas_collection_product = true %}
            {% break %}
        {% endif %}
    {% endfor %}
    {% if is_bebidas_collection_product %}
        <p id='additional_info'>12 pack cans</p>
    {% endif %}
{% endif %}

To adjust the spacing, go to 'base.css' file and paste the below code in bottom of the file and save changes.

Note: You can adjust the spacing as per your need. You can also add font size if you want to adjust the font size.

.card__information #additional_info {
    margin: 8px 0px 0px;
    font-size: 16px;
    line-height: 20px;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[PhMA]

@Vinsinfo  where after which section, code line in card product liquid do I need to add this?

[Vinsinfo]

@PhMA In the same line as we mentioned in the very first comment. We will share the steps again her below, you can also follow it. Let me know whether it is helpful for you. If still it didn't works, please share the card-product.liquid file.

1. From admin go to "Online Store" -> "Themes".

2. Click "Edit code" button from the current theme.

3. Go to "card-product.liquid" file.

4. Then search "card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}" in search bar.

5. Then paste the below code at the next line of "</h3>" like below attached image and then save changes.

{% if card_product.collections %}
    {% assign is_bebidas_collection_product = false %}
    {% for collection in card_product.collections %}
        {% if collection.handle == 'bebidas' %}
            {% assign is_bebidas_collection_product = true %}
            {% break %}
        {% endif %}
    {% endfor %}
    {% if is_bebidas_collection_product %}
        <p id='additional_info'>12 pack cans</p>
    {% endif %}
{% endif %}

6. Then go to "base.css" and paste the below code in bottom of the file.

.card__information #additional_info {
    margin: 8px 0px 0px;
    font-size: 16px;
    line-height: 20px;
}

Result will be like,

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[PhMA]

@Vinsinfo  many thanks, I was able to apply it but on this page

copy-of-sobre-matu-mate  nuestras bebidas -> there the font size is not adjusting, although it is again linking to the same collections

https://k5dxgyj7e7p6x5ov-61049766108.shopifypreview.com

on all other pages it has the smaller font size like this (it should be like this):

 

[PhMA]

@Vinsinfo  many thanks for your reply.

https://ebjz4pbqmllhtt2g-61049766108.shopifypreview.com