Product Block variant and button styling

Hi Squarespace experts:

I've been building a site in the Brine template, but have never been totally happy with the product detail page, so have built a test page to try a different layout.  In this test page I have stacked images in the left column and product block in the right, along with text fields, spacers, etc, to achieve the desired layout.  It's working well, for the most part.  My hope is to hide the product pages and use this custom pages as my detail page once a shopper clicks on a product from my shop page. 

However, an issue is: when I add a product block to this page, the variant dropdown (in this case, "Size"), and its associated title looks bad - the font and dropdown design are not styled, nor is the "add to cart" button.  They are missing the nice styling I had set with my actual product pages.  It's as if the style settings are not translating to the product blocks.  Does this make sense?

Is there some CSS I could use to dress the product block variants and add to cart button?   

To help us to see the issues - both with the Product Detail Page and the Product Block on your custom layout, please provide working links to examples of these pages. If the site isn't live, we need you to set a password in the visibility settings and tell us what it is.

19 hours ago, paul2009 said:

To help us to see the issues - both with the Product Detail Page and the Product Block on your custom layout, please provide working links to examples of these pages. If the site isn't live, we need you to set a password in the visibility settings and tell us what it is.

Thank you, Paul.  The newly designed product detail page with product blocks, etc, is here: ******

Pwd: *****

The "stock" Brine shop page with properly styled buttons, etc, is here: ********

Pwd: ******

I can answer the question you've asked (how to style the Product Block) but this doesn't sounds like the best option? Adding bespoke pages sounds like a lot of work. You'll also lose other Product Page Special Features like product zoom and waitlists. 

If you simply want to add the additional information and size guide to the product pages, that should be straightforward too with a little code. Or did I miss something?

9 minutes ago, paul2009 said:

I can answer the question you've asked (how to style the Product Block) but this doesn't sounds like the best option? Adding bespoke pages sounds like a lot of work. You'll also lose other Product Page Special Features like product zoom and waitlists. 

If you simply want to add the additional information and size guide to the product pages, that should be straightforward too with a little code. Or did I miss something?

Hi Paul,

No... it appears I missed something! 

This is exactly what I was hoping (but didn't think possible)!  I had assumed that the "out of the box" Brine product detail pages were not editable.  I know a bit about coding, but confess, I only know enough to get me in trouble. 

Yes, I do want all the functionality of the standard detail page (and landing page), but want a few more design options as well, such as moving "additional details", dressed up markdown boxes, etc. 

If this is possible through code, I have a renewed enthusiasm and all ears! 

Any advice you can give I'll consume. 

-KC

Hi there, 

How can I insert some CSS to change the style of the "Price"  of a Product block? I would like it to be smaller and in grey.

I made a screenshot with a red circle so show better.

Thanks!

1 hour ago, Mariobenedetti said:

Hi there, 

How can I insert some CSS to change the style of the "Price"  of a Product block? I would like it to be smaller and in grey.

I made a screenshot with a red circle so show better.

Thanks!

 

Can you share link to product in screenshot?

22 hours ago, tuanphan said:

Can you share link to product in screenshot?

thanks for your answer. here the link to the page:

https://saintscraft.ch/edelsteinschmuck

i would like it to look like on the full shop page here:

https://saintscraft.ch

1 hour ago, Mariobenedetti said:

thanks for your answer. here the link to the page:

https://saintscraft.ch/edelsteinschmuck

i would like it to look like on the full shop page here:

https://saintscraft.ch

Add to Home > Design > Custom CSS

.sqs-block-product span.sqs-money-native {
    color: grey;
    font-size: 50px;
}

wow thats amazing! thank you so much.. it works

what about the product title? do you know a code to change that size and color too?

19 hours ago, Mariobenedetti said:

wow thats amazing! thank you so much.. it works

what about the product title? do you know a code to change that size and color too?

a.product-title {
    color: red;
    font-size: 100px !important;
}

great, thank you so much!

now one last question. is there a code to make the product show a optional preview pic when hovering over the image? 

it does that in a normal product page, but not in this page:

https://saintscraft.ch/edelsteinschmuck

thank you so much for your help!

16 hours ago, Mariobenedetti said:

great, thank you so much!

now one last question. is there a code to make the product show a optional preview pic when hovering over the image? 

it does that in a normal product page, but not in this page:

https://saintscraft.ch/edelsteinschmuck

thank you so much for your help!

Change product image on hover?

yes exactly!