Jump to content

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

Recommended Posts

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
Link to comment
  • Replies 3
  • Views 365
  • Created
  • Last Reply

Top Posters In This Topic

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.