Breeze Theme Adjustments

chrishafner

Hi I'm currently using the breeze theme for my store and wanted to make a couple of changes that i believe require custom ccs.

In the "featured products sections I'd like to move the header text to the left side as opposed to in the center where it currently is.
I want to adjust the size of the product cards so they are about half the size of they are now. My site is a bookstore so I like the smaller size for this product. And this includes the "featured products" sections as well. I'd like to play around with it a bit to see what is best.
Lastly I wanted to play around with some placement and sizing on the Header Bar as well. How can I adjust the size of the main menu text, and also the case so doesn't have to be all caps. An also would like to try different placements for the logo on and main menu text here as well.

Thanks! Chris

alvinkonda

Hi Chris,

1 - Add this CSS code to the section's settings like the screenshot below

.section-header {
  text-align: left;
}

2- I'm a bit unsure about this question, but if you want to change the number of cards per view you can adjust the "Breakpoint" settings as seen also on the above screenshot.

3 - For those changes we can adjust them a bit with some CSS code just let us know what you want it to be because that's the style we thought for this theme.

Let me know

chrishafner

Hey thanks for that. and yeah, i love these layouts so wanna do as little adjusting as possible But the only thing that would be great to do is if i were able to just just bring up the break point up another notch to get 7 books on in the featured products section would be amazing. Is it possilble to do that with a code adjustment? I don't believe there's somewhere to adjust the size of the product cards on their own right? Just with the break point slider?

alvinkonda

Hi Chris,

That would be simple in fact for the Featured Products slider.

Open sections/featured-products.liquid and find:

    {
      "type": "range",
      "id": "breakpoint_desktop",
      "label": "Desktop (≥1200px)",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 4
    },

Replace it with:

    {
      "type": "range",
      "id": "breakpoint_desktop",
      "label": "Desktop (≥1200px)",
      "min": 1,
      "max": 7,
      "step": 1,
      "default": 4
    },

chrishafner

Aweosme! Thanks you!

chrishafner

Got another question actually. How about changing the font and font size of the each line line in the product card. For Instance I want the title as Inter and the price a coulple of points smaller.

chrishafner

And i want to keep my header the same as is, but want the to make those two changes

alvinkonda

Hi Chris,

Got another question actually. How about changing the font and font size of the each line line in the product card. For Instance I want the title as Inter and the price a coulple of points smaller.

The product card titles are showing the heading font and the price in the body font, so normally they should be different. To make the font sizes small for the price you can add this code into the assets/custom.css file:

. product-card-price {
  font-size: 0.9em;
}

And i want to keep my header the same as is, but want the to make those two changes

I'm not sure about this, if you need anything with it please specify a bit more.

chrishafner

alvinkonda
Gotcha, meant to say if I want for the Title font to be different from the header font. What would the code for that be?

alvinkonda

Hi Chris,

Then open the same custom.css file i mentioned above and add the following code:

.product-card-title {
  font-family: var(--bs-body-font-family);
}

chrishafner

Another question regarding the layout of the main product page. Is it possible to arrange the layout with the image along side the text as it is does on your other themes?

alvinkonda

Hi Chris,

Yes, we can help you to change the product page layout but that would require code changes. We can do this directly to your store but we need to know your store URL and the 4-digit collaborator code so that we can send you a partner account request. Normally we will be able to access only the theme files and nothing else.

You may use our contact form details to submit this information.
https://www.kondasoft.com/pages/contact

Let me know

chrishafner

Okay great and thanks. I'll do that right now.