Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
EV-NYC

Product Block variant and button styling

Question

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?   

Edited by EV-NYC

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 1
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

Share this post


Link to post
  • 0

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.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0
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: ******

Edited by EV-NYC

Share this post


Link to post
  • 0

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?


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 0

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!

Bildschirmfoto 2020-02-09 um 17.36.34.png

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
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?

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...