How to modify custom liquid code for variant matching?

Store Design
, ,
1

I am trying to change the font, font size, box size, etc to match my 3 variants for two different custom liquids. I need help figuring out what the code is for the variant picker so I can input that information to match everything and I need help with the code on what to enter in the custom liquid of each for it to match. Any suggestions? Screenshot attached.

Screen Shot 2023-12-27 at 10.00.53 AM.png
Screen Shot 2023-12-27 at 10.00.53 AM.png297Ă—512 5.53 KB

1 Like
2

Hello @boh2023
can you share store URL?

3

https://homesteadhappy.co/products/custom-pet-shirt-pet-photo-portrait-name-custom-farm-animal-shirt-personalized-dog-shirt-custom-cat-t-shirts-gift-for-animal-lover

4

Hey Password please?

5

powkah

6

Did you have a solution for how I might be able to do this or are there any resources you would recommend me taking a look at?

7

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

select#font-style { width: 254px; height: 39px; border-radius: 6px; font-size:15px; } textarea#names-of-pets { width: 257px; height: 37px; border-radius: 5px; font-size:15px; } .quantity { width: calc(26rem / var(--font-body-scale) + var(--inputs-border-width) * 2) !important; } .select__select { font-size: 15px !important; }
8

Thank you! That helped a bunch. It does look like there is a few things that are off with it though. Is there a way to get all of this to match exactly?

It looks like the words above the boxes don’t match the ones above the variant boxes size wise.

It looks like the font or boldness of the drop down menu words under “Font Style” don’t match the variant ones.

It looks like the boxes are slightly smaller than the variant boxes.

Thank you for your help!

9

In regards to my previous message…

I ended up playing with a few things and ended up copying the code from one of the variants and changing a few things for the “Font Style” drop down. I am not sure if that will end up working and reporting correctly, but it looks exactly how I want it to. What are your thoughts on that?