Product Categories: Change font size, add hover effect, and...

Site URL: https://www.joeystephensmusic.com/merch

Looking for assistance with Product Categories.

1. I’d like to make the title's of the categories listed at the top of the page larger.   https://www.joeystephensmusic.com/merch

2. I'd like there to be a hover effect on each category, similar to the effect on the buttons on the bottom of the page.  https://www.joeystephensmusic.com/merch

3. Instead of seeing ALL of the products on the main Merch page, I want 4 photos listed under the 4 categories, and have the photos function the same way the category titles function.  Meaning you click the category title and it takes you to a new page that shows all of the products in that category.  I'd like the same with the 4 photos of each category.  Click each and it takes you to a new page that shows all of the products in that category. https://www.joeystephensmusic.com/merch

@tuanphan or @creedon

4 hours ago, joeystephensmusic said:

Site URL: https://www.joeystephensmusic.com/merch

 

Looking for assistance with Product Categories.

1. I’d like to make the title's of the categories listed at the top of the page larger.   https://www.joeystephensmusic.com/merch

2. I'd like there to be a hover effect on each category, similar to the effect on the buttons on the bottom of the page.  https://www.joeystephensmusic.com/merch

3. Instead of seeing ALL of the products on the main Merch page, I want 4 photos listed under the 4 categories, and have the photos function the same way the category titles function.  Meaning you click the category title and it takes you to a new page that shows all of the products in that category.  I'd like the same with the 4 photos of each category.  Click each and it takes you to a new page that shows all of the products in that category. https://www.joeystephensmusic.com/merch

 

@tuanphan or @creedon

 

Help?

 

Joey

Change font-size of category's titles

.products-list   .nested-category-title  {
  font-size: 50px;
}

.products-list  .nested-category-breadcrumb-link,.products-list  .breadcrumb-separator  {
  font-size: 30px;
}

.products-list  .nested-category-breadcrumb-link {
 padding: 0 10px;
  background: rgb(110,216,172);
  color: #fff !important;;
}
.products-list  .nested-category-breadcrumb-link:hover {
  opacity: 0.7;
}

Let me know how it works on your site

@bangank36 not exactly what i had in mind but i actually like it.  thank you.

any thoughts about how to simplify the main merch page to 4 category photos that you can click to open all products in that category, instead of seeing every product listed on the main merch page?

https://www.joeystephensmusic.com/merch

On 4/17/2022 at 8:10 PM, joeystephensmusic said:

not exactly what i had in mind but i actually like it.  thank you.

any thoughts about how to simplify the main merch page to 4 category photos that you can click to open all products in that category, instead of seeing every product listed on the main merch page?

https://www.joeystephensmusic.com/merch

You can add a standard page >> Use Image Blocks to add link to 4 categories