add short description to cart page

Solved
Caro_
Excursionist
14 0 1

Hi, 

how can i add something like a short product description next to the product on cart page ? 

need only 2 bullet points for each product. 

 

Thanks ! 

0 Likes
PeanutButter
Shopify Partner
330 65 136

hi @Caro_ , can you share the following:

- Your site url, either here or by PM
- Your password if the site is password protected
- What theme you are using

And also, one question, is the description you want to add different from the product description you want to show in your product page?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
PeanutButter
Shopify Partner
330 65 136

Hi @Caro_ so I implemented this in a test site and this is how is looking:

Screen Shot 2021-01-22 at 12.26.02.png

 

can you confirm this is what you want and I will send the steps to you?

thanks

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Caro_
Excursionist
14 0 1

Yes this is exactly what i need  ! 

would be great if you can share how to get there ! 

 

thanks a lot ! 

0 Likes
PeanutButter
Shopify Partner
330 65 136

Sure @Caro_ 

taking a lunch break now, will share in 1-2 hours

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
0 Likes
PeanutButter
Shopify Partner
330 65 136

This is an accepted solution.

@Caro_ here are the steps:

1- Add a metafields app to your store (free)

Metafields allow to add extra fields to products, orders, etc...  We will be adding 2 new fields to your products (Inhalt and Alkohol)
Add the Bonify Custom Fields app to your store and select the Free Plan. This plan is enough for your current needs

2- Access the Bonify app and add the fields

First in the left sidebar, inside products, click + Add Field and then select Text field

Screen Shot 2021-01-22 at 14.19.58.png

As a label add Inhalt and click Create Field

Screen Shot 2021-01-22 at 14.23.50.png

You will now see the following, just close by clicking the X on the top-right. Your field has already been created

Screen Shot 2021-01-22 at 14.20.46.png

Now repeat with the Alkohol field.

After creating the second field, if you go to products > configure fields you should see the 2 fields:

Screen Shot 2021-01-22 at 14.19.38.png

3- Add values to your products for this field

In the Shopify Admin, go to one of your products and click on More Action > Edit Custom Fields

Screen Shot 2021-01-22 at 14.28.38.png

It should take you to editing your new fields in the Bonify App:

Screen Shot 2021-01-22 at 14.30.35.png

Add a value to those fields for a product for testing the next step

4- Add the code to show the fields in the cart page

Open your Sections/cart-template.liquid file and find this

                    <div class="list-view-item__title">
                      <a href="{{ item.url }}" class="cart__product-title" data-cart-item-title data-role="product-title">
                        {{ item.product.title }}
                        
                      </a>
                    </div>

(Around lines 28-33)

Just after that, paste the following code:

                    <div class="list-view-item__metafields">
                        {% if item.product.metafields.custom_fields["inhalt"] != blank %}
                        <div class="custom-field custom-field__inhalt custom-field__type--text">
                            <p class="custom-field--title">
                                <span class="custom-field--title">
                                    Inhalt:
                                </span>
                                <span class="custom-field--value">
                                    {{ item.product.metafields.custom_fields["inhalt"] }}
                                </span>
                            </p>
                        </div>
                        {% endif %}
                        {% if item.product.metafields.custom_fields["inhalt"] != blank %}
                        <div class="custom-field custom-field__inhalt custom-field__type--text">
                            <p class="custom-field--title">
                                <span class="custom-field--title">
                                    Alkohol :
                                </span>
                                <span class="custom-field--value">
                                    {{ item.product.metafields.custom_fields["alkohol"] }}
                                </span>
                            </p>
                        </div>
                        {% endif %}
                    </div>

The resulto should be this:

Screen Shot 2021-01-22 at 14.37.37.png

 

5- Test the customization

Add the product you added values for your new fields to the cart and visit the cart page.
Your should see the following:

Screen Shot 2021-01-22 at 12.26.02.png

On a side note:
- the Bonify Custom fields app has a google chrome extension which allows editing custom fields directly from the admin
- It also allows to import fields in bulk

Let me know if you have any issues following the steps

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Caro_
Excursionist
14 0 1

@PeanutButter Wow ! thank you so much ! 

just tried it with one product and it works perfectly ! 

your description is really easy to follow and helped me a lot ! 

 

 

 

PeanutButter
Shopify Partner
330 65 136

Really happy to hear @Caro_ !

You can do a lot with metafields and now you know how to use them

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es