kniro
0
Temporarily, I simply wrote the names of the buttons Grid and List:
<button value="product_card_frontpage" class="grid-view">Grid</button>
<button value="product_card_full_width" class="list-view">List</button>
But in the final result, the buttons should not have the labels Grid and List. And they should look like this:
You can just make the button an image like this:
<!doctype html>
<html>
<body>
<button value="product_card_frontpage" class="grid-view"><img style="height:25px;" src="https://cdn.pixabay.com/photo/2017/02/17/20/04/vector-frame-2075122_1280.png"></button>
<button value="product_card_full_width" class="list-view"><img style="height:25px;" src="https://cdn.pixabay.com/photo/2021/10/09/12/45/hamburger-icon-6694072_1280.png"></button>
</body>
</html>
I used generic photos, but you can pick the photo you want to show and edit the styles.