Hello,
I’ve managed to install the shopping list.
Great job!
1 Like
Hey guys,
Thanks to Home Assistant’s recent updates to the shopping list feature, which now supports multiple to-do lists, I’ve added a couple of to-do lists to my dashboard. I’ll update my original post above in a couple of days.
Hi All.
I really like the above solution. Though I am stuck and need more guidance as i am totally new to this.
I have addded the 2 button templates in a file called templates.yaml. And referred to this in the configuration.yaml file.
Then i take the dashboard code and paste into a blank dashboard. Nothing happen. I have tried to paste it into the shopping list and still nothing.
Can someone guide with a step by step for dummies on how to achieve the above.
Would really appreciate it.
Thanks
@pLeX bro can you give me a step by step walkthrough on how to achieve this ? thanks
Hey men,
what do you exacly asking for?
@pLeX I really like the above solution. Though I am stuck and need more guidance as i am totally new to this.
I have addded the 2 button templates from above in a file called templates.yaml. And referred to this in the configuration.yaml file.
Then i take the dashboard code and paste into a blank dashboard. Nothing happen. I have tried to paste it into the shopping list and still nothing.
Need a a step by step for dummies on how to achieve activating the solution
As i am pretty sure i am missing a few or lot of steps in between 
Would really appreciate it.
image below is for the template button .yaml file. I believe line number 1 in this is also incrorrect 
@pLeX was it something you could help with bro. I gave the information above. Would appreciate it a lot and make me very happy
you dont have to specify the platform in template.yaml. just remove line 1.
in your configuration.yaml you have specifed:
template: !include template.yaml
this will home assistant indicate that it is for template platform.
I was trying to reverse engineer what I did in the past and cannot give you a step-by-step guide right now, sorry. Its too long ago.
Im wondering in my config about the template. I had specified the shopping card templates to the following file in the config folder: shopping_list-template.yaml
But I dont load them in the configuration.yaml why Im currently struggling how my config is working
@pLeX thanks bro. I get your point. It may be hard to get the proper guide then. If not much of a hassle and you are comfortable with that. Can you share your yaml files for :.
1: the template file
2: the full dashboard which has the shopping list implemented
3: any other related yaml files
Then i can use these for getting inspired and understand the implementation and modify them as per my need.
As mentioned i am not even sure where and how to implement the dashboard code for this solution .
I have made some simple one myself for testing but this solution is much more dynamic and better so really would like to have it up and running.let me know if the above is ok with you to share with me 
Define those two Templates in relative YAML will get this error:
Invalid config for 'template' at configuration_templates/configuration_template_lovelace.yaml, line 1: 'shopping_list_card' is an invalid option for 'template', check: shopping_list_card
Invalid config for 'template' at configuration_templates/configuration_template_lovelace.yaml, line 22: 'shopping_list_category_card' is an invalid option for 'template', check: shopping_list_category_card
As written in Official DOCs (HERE):
Note: the shopping list card is no longer available as a card to add from the user interface. Use the to-do list card instead.
@pLeX was it something you could share bro ?
@plex or anyone can assist me with this. I am stuck with a not working shopping list would be appreciated if code for the yaml files be shared with me
edit: @manunited10 Thanks alot !
@mquhob i did see you strugle with this code, it is easy always watch and look that you have the code on the right place I cant add more than 1 screenshot as a new user so if you want screenshots message me.
For other users, create a new dashboard, enter raw edit and let only views: in it
above views paste button_card_templates + shopping_list_category_card code
below views add the dashboard code.
Does this still work in 2025 ? I really like this layout and setup !
And another edit: (I hope i dont spaw this post with all this information)
the ?v5 extension only works when i image is correct/transparant, still dont know what it does lol
What does ?v5 do after .png ?
with the ?v5 extension after png the image doesnt load but if i remove it then it works.
Ps for others: Double check that a image is transparancy, just pick on from the internet isnt 100% succesfull i found out lol.
@ricardo026 Thanks a lot bro. I will try once again and let you know. I did create a seperate dashboard and copied the code as is into it. but it did not work. But let me try once more and get back to you with the result
@ricardo026 I tried your suggestion it did not work. I will be sharing my code below and the error message i am getting
shopping_list_card:
entity: null
variables:
category: Dairy
name: Milk
quantity: ''
unit: ''
show_icon: false
show_name: true
name: '[[[return variables.name]]]'
icon: mdi:cart
aspect_ratio: 4/3
entity_picture: >-
[[[return "/local/images/shopping-list/" +
variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
show_entity_picture: true
tap_action:
action: call-service
service: shopping_list.add_item
data:
name: >-
[[[return variables.category + " - " + variables.name +
variables.quantity + variables.unit ]]]
shopping_list_category_card:
entity: null
variables:
name: Fruits & Vegetables
show_icon: false
show_name: true
aspect_ratio: 4/3
name: '[[[return variables.name]]]'
icon: mdi:cart
entity_picture: >-
[[[return "/local/images/shopping-list/" +
variables.name.toLowerCase().replaceAll(" ", "-") + ".png?v5"]]]
show_entity_picture: true
style:
- padding: 0%
styles:
entity_picture:
- width: 60%
views:
- title: Shopping
path: shopping
icon: mdi:cart-outline
panel: true
badges: []
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 50% 50%
grid-template-rows: auto
cards:
- type: shopping-list
title: Shopping List
- type: custom:auto-entities
filter:
template: >
{% set ns = namespace(result = [], categories = {}, items = [])
%}
{% set ns.categories =
{
"Dairy": ["Milk","Eggs", "Yoghurt", "Butter", "Ice-cream", "Cheese"],
"Fruits & Vegetables": ["Apples", "Bananas", "Strawberries", "avocados", "Tomatoes", "Cucumbers", "Carrots", "Onions", "Broccoli", "Lettuce"],
"Drink": ["Milk", "Coke", "Beer"],
"Bread & Bakery": ["Toast", "Gluten-free", "Flatbread", "Burger Rolls", "Muffins", "Cookies"],
"Meat & Fish": ["Mince Beef", "Mince Lamb", "Salmon", "Chicken"],
"Deli": ["Cheese", "Salami", "Ham", "Turkey"],
"Snacks": ["Chips", "Pretzels", "Popcorn", "Crackers", "Nuts"],
"Canned Goods": ["Tuna", "Beans", "Diced Tomatoes"],
"Condiments & Spices": ["Sugar", "Olive oil", "Tomato Sauce", "Mayonnaise"],
"Baking": ["Flour", "Sugar"],
"Household & Cleaning": ["Detergent", "Paper Towels", "Tissues", "Bin Bags", "Aluminum Foil", "Zip Bags"],
"Health Care": ["Panadol", "Toothpaste"],
}
%}
{% for cat in ns.categories %}
{% set ns.items = [] %}
{% for item in ns.categories[cat] %}
{% set ns.items = ns.items + [
{
"type": "custom:button-card",
"template": "shopping_list_card",
"variables":
{
"category": cat,
"name": item,
},
}
]%}
{%endfor%}
{% set ns.result = ns.result + [
{
"type": "custom:button-card",
"template": "shopping_list_category_card",
"variables":{
"name": cat,
},
"tap_action":
{
"action": "fire-dom-event",
"browser_mod":
{
"service": "browser_mod.popup",
"data":
{
"title": cat,
"content":
{
"type": "custom:layout-card",
"layout_type": "grid",
"layout":
{
"grid-template-columns": "25% 25% 25% 25%",
"grid-template-rows": "auto",
},
"cards": ns.items
},
},
},
},
}
]%}
{% endfor %}
{{ns.result}}
card_param: cards
card:
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 33% 33% 33%
grid-template-rows: auto
I think I see two issues here. One is you need to install layout-card from HACS. The other is you need to add button_card_templates on top and put button-card templates under them. Something like:
button_card_templates:
shopping_list_card:
entity: null
....
shopping_list_category_card:
entity: null
...
views:
# the rest
Thanks @manunited10 wiæl try that out. The layout cards from hacks is already installed. So that should not have been the case. Will get back to you if it works after testing