How can I display product category between title and price in Venture Theme?

Store Design
1

I am using the Venture Theme and I was wondering if it is possible to add a line of text in between the product titles and the product price when you are looking through the collection cards. Also I don’t want to just add one line of text to every product. What I am trying to do is to have the product cards display the product category / collection.
Here is a picture for reference:

fred_yogoa_1-1629452766043.png
fred_yogoa_1-1629452766043.png1002×1270 230 KB

Where I put the red arrow & dots is where I want the text. Below the title and above the price I want it to display the product category / collection title for example “Hoodies” or “Tanktops”. I know there is the option to just add the product category to the title, however that messes up the formatting a bit and I want the category / collection title to be in the same font as the price (so a bit smaller and thinner than the actual title).

So essentially I want it to look a little like:
Flying Owl Spirit - Orange
Hoodies
€54.99

I have been looking through the “Collection Card” code but have not been able to find what I want. So If anyone could help me out I would greatly appreciate that!

2

@yogoa_art

.product-card__brand, .product-card__price {
    font-size: .875em;
    border-top: 1px solid black !important;
}

Add this code to theme.scss

3

Hey! Thanks for the fast reply! :slightly_smiling_face:
I added the code and this is the result:

fred_yogoa_0-1629454125745.png
fred_yogoa_0-1629454125745.png926×1208 177 KB

So it added these lines in between price and name. The location is right, in between the title & the price. However it still doesn’t show the collection title just the lines.

4

Add collection name in product vendor it will show

But you exactly can’t show the collection

5

Sadly even if I put the title in the “vendor” section it still only shows the line and nothing else:

fred_yogoa_0-1629455256384.png
fred_yogoa_0-1629455256384.png630×432 11.7 KB

Here I added “Leggings” as vendor and this is the result:

fred_yogoa_1-1629455405342.png
fred_yogoa_1-1629455405342.png379×741 94.3 KB

I guess it’s not possible then.
However I greatly appreciate you trying to help me out! Thank you very much!! :slightly_smiling_face:

6

In case anyone else is having this problem I have figured it out.
Go to edit your code → Snippets → Product-card.liquid
Around line 44 just below this line of code:

{% if product.available %}

Paste this:

{{ product.type }}

If you want the Font to be bigger then you can paste:

{{ product.type }}

It should look something like this: -exactly what I wanted.

fred_yogoa_0-1629458140898.png
fred_yogoa_0-1629458140898.png963×884 284 KB

I hope this helps people facing the same issue!