ellisb1 Posted June 25, 2022 Share Posted June 25, 2022 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. How can I target one variant title specifically and move it to be in line with the below dropdown? Thanks Link to comment
ellisb1 Posted June 25, 2022 Author Share Posted June 25, 2022 I should add that I tried adding #yui_3_17_2_1_1656125416681_569.variant-option-title { right: 90px !important; } but this did not work. Thanks Link to comment
ellisb1 Posted June 25, 2022 Author Share Posted June 25, 2022 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
creedon Posted June 25, 2022 Share Posted June 25, 2022 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. ellisb1 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ellisb1 Posted June 26, 2022 Author Share Posted June 26, 2022 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? 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
creedon Posted June 26, 2022 Share Posted June 26, 2022 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. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ellisb1 Posted June 26, 2022 Author Share Posted June 26, 2022 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. This worked perfectly, thank you for your help! creedon 1 Link to comment
ellisb1 Posted June 27, 2022 Author Share Posted June 27, 2022 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. 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? Link to comment
ellisb1 Posted June 27, 2022 Author Share Posted June 27, 2022 I figured it out - just need to add the media query - thank you! creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment