Change product names on Collection page to h2 - Venture

RachidB
New Member
1 0 0

Hello everyone, 

 

Here is the situation : 

I'm trying to make the product names in my collections pages as <h2> tags. 

I'm running in Venture theme. 

 

In collection.liquid there is this code : 

 

<div class="grid grid--no-gutters grid--uniform">

{% for product in collection.products %}
<div class="grid__item small--one-half medium-up--one-fifth">
{% include 'product-card', product: product %}
</div>

I cannot change this <div> into h2 because it will also put the product price in the h2 tag.

 

So i'm going in product-card.liquid to can change this : 

<div class="product-card__name" style="none">{{ product.title }}</div>

into this

<h2 class="product-card__name" style="none">{{ product.title }}</h2>

 

Which is good for collection pages, but...

This creates another problem : On the main page, whenever I display a product it will also get the h2 tag, which I don't want. The h2 on the main page should be only for collection names.

 

I feel like I should change something in the collection.liquid but I really don't see how.

 

Thank you very much in advance for the help, if anyone finds the solution.

0 Likes
dekakoa
New Member
2 0 0

Hi there RachidB!


I have the same problem as you and can't find a solution!
Please let me know if you did find an answer to this problem.


Thank you in advance,
Deka

0 Likes
g33kgirl
Shopify Partner
211 52 65

@RachidB may I know why you want to change product name div tags to h2 tags as it will be easier to help you out. If all you want to do is style product name tag in collection pages as h2 tags, then this is very easily doable via CSS.

All you need to do is copy the h2 style and paste the code to this selector in your CSS file (Themes -> Edit code -> Assets -> theme.scss.css

.template-collection .product-card__name {
          copy the h2 style to this selector
}

 

Make sure to add this code at the end of your CSS file.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
0 Likes