Jump to content

add labels and button to products

Closed 1.2.4-hotfix 1.2.4-hotfix

VirusZa
VirusZa

Posted

Can you please assist me to add label and a button perhaps to the template as the default template does , i just think it looks better 

image.png.010b283049590f88d6322e3f541e4009.pngimage.png.73d7709e37352432ef36d4aa64d379cc.png

Prism Design

Posted

I assume you mean the product name in the catagory page?

 

Prism Design

Posted (edited)

Search for:
 

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5 mt-4">
        {% for product in products %}
        <div class="flex flex-col justify-between gap-4 bg-zinc-700 rounded-sm shadow p-2 hover:bg-zinc-800 cursor-pointer text-white" onclick="loadProduct('{{ product.slug }}')">
            <div class="flex flex-col items-center gap-4 h-full">
                <div class="flex items-center justify-center flex-grow">
                    {% if product.image_url %}
                    <img class="h-[10rem]" alt="{{ product.name }}" src="{{ product.image_url }}" />
                    {% else %}
                    <i class="fa-solid fa-box-open text-gray-900 text-9xl"></i>
                    {% endif %}
                </div>

 in the category.html file

replace it with 

 

    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-5 mt-4">
        {% for product in products %}
        <div class="flex flex-col justify-between gap-4 bg-zinc-700 rounded-sm shadow p-2 hover:bg-zinc-800 cursor-pointer text-white" onclick="loadProduct('{{ product.slug }}')">
            <div class="flex flex-col items-center gap-4 h-full">
                <div class="flex items-center justify-center flex-grow">
                    {% if product.image_url %}
                    <img class="h-[10rem]" alt="{{ product.name }}" src="{{ product.image_url }}" />
                    {% else %}
                    <i class="fa-solid fa-box-open text-gray-900 text-9xl"></i>
                    {% endif %}
                </div>
                <span class="text-title font-bold text-xl ">{{ product.name }}</span>

this would be tthe end  result should end up looking like the image  

image.png

Edited by Prism Design
more info
1.6m

Downloads

Total number of downloads.

7.7k

Customers

Total customers served.

115.3k

Files Sold

Total number of files sold.

2.3m

Payments Processed

Total payments processed.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.