Jump to content

Target ONE Variant Option title on product page

Recommended Posts

Site URL: https://cello-gerbil-ekze.squarespace.com/shop-D52uj-ksrCn/p/grounded-in-black-9g29f-546dy-377lg

Site page: https://cello-gerbil-ekze.squarespace.com/shop-D52uj-ksrCn/p/grounded-in-black-9g29f-546dy-377lg

Password 1234

 

Hey - I hope you can help. 

I am wanting the variants on my product page to be closer together. I was able to move the 'Frame Finish' variant dropdown but can't for the life of me find the correct CSS to move the title. See attached image. 

image.thumb.png.c88b5bc9a8b1861173b815d890cd12c2.png

How can I target one variant title specifically and move it to be in line with the below dropdown?

Thanks

Link to comment

I also just realised that moving the variant using the code 

#yui_3_17_2_1_1656125416681_539.variant-select-wrapper {
  right: 90px !important;
}

targets only the variant on that one page. Is there a simpler way to move that 'Frame Finish' variant on ALL product pages without needing to target each one specifically?

Thanks

Link to comment

Remove, make a copy somewhere, previous attempts at this effect.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem-details .product-variants {
  
    display : flex;
    gap : 1rem;
    width : unset;
    
    }
	
  </style>

This is for v7.1.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
6 hours ago, creedon said:

Remove, make a copy somewhere, previous attempts at this effect.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .ProductItem-details .product-variants {
  
    display : flex;
    gap : 1rem;
    width : unset;
    
    }
	
  </style>

This is for v7.1.

Let us know how it goes.

Thank you for this! This did have the desired effect of moving the variants side by side but how can I now move the 'Frame finish' variant to be closer to the first variant? 

image.thumb.png.59847f952a3c87a503af6e3a7a236982.png

Ideally, I would like something that applies this to all of the product pages so I wouldn't have to add new code for each page if that makes sense. Is there a way to move this variant and inject into header?

 

Thanks!

Link to comment
Quote

how can I now move the 'Frame finish' variant to be closer to the first variant?

As I mentioned you need to remove all previous attempts at this effect.

For example this rule-set is part of the issue.

.variant-select-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 70%
}

 

Quote

Ideally, I would like something that applies this to all of the product pages so I wouldn't have to add new code for each page if that makes sense. Is there a way to move this variant and inject into header?

If you install where I suggested it will effect all variants for the whole store page. If you have more than one store page you can remove the style tags and put the code in Design > Custom CSS.

193805171_ScreenShot2022-06-25at6_30_43PM.png.57f9fdb64b00a1da3e5006af4b7963ae.png

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
22 hours ago, creedon said:

As I mentioned you need to remove all previous attempts at this effect.

For example this rule-set is part of the issue.

.variant-select-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 70%
}

 

If you install where I suggested it will effect all variants for the whole store page. If you have more than one store page you can remove the style tags and put the code in Design > Custom CSS.

193805171_ScreenShot2022-06-25at6_30_43PM.png.57f9fdb64b00a1da3e5006af4b7963ae.png

This worked perfectly, thank you for your help!

Link to comment
On 6/26/2022 at 10:32 AM, creedon said:

As I mentioned you need to remove all previous attempts at this effect.

For example this rule-set is part of the issue.

.variant-select-wrapper {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 70%
}

 

If you install where I suggested it will effect all variants for the whole store page. If you have more than one store page you can remove the style tags and put the code in Design > Custom CSS.

193805171_ScreenShot2022-06-25at6_30_43PM.png.57f9fdb64b00a1da3e5006af4b7963ae.png

Me again!

So this worked perfectly on desktop but it looks a bit wonky on mobile - how can I either adjust the width so both fit on the same line on mobile or (which is more ideal) would be to have the frame finish variant below the size variant on mobile only?

image.thumb.png.55449d2694cb3537a20c5de1c5de352a.png

 

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.