How can I modify my liquid table's color scheme and formatting?

[Prizzless]

Hi!

I have worked so many hours with this now and i am starting to go blind on my own work. i am kinda happy with the table but i want my table to have som changes. This gray and wite color scheeme as shown in the photo is so nice to look at. I want mine to look like this. Without my metafields getting messed up.

Here is how mine is looking:

In addition. I need to get some space between the commas → ( , ).

Lastly i want to remove the orange section so that “Spesifikasjoner” gets closer to the table.

To summarise:

1. I need white and gray color scheme
2. I need space between the commas when many categories
3. I want to remove the orang section show in the third photo.

Any additions/Feedbacks that i am not thinking about that could make it more beautiful is much appreciated!

Here is my backend on the metafields:

Here is my liquid code:

{% if product.metafields.custom.tilstand %}

{% endif %}

{% if product.metafields.custom.sjanger %}

{% endif %}

{% if product.metafields.custom.anbefalt_alder %}

{% endif %}

{% if product.metafields.custom.utgivelses_r %}

{% endif %}

{% if product.metafields.custom.plattform %}

{% endif %}

{% if product.metafields.custom.spillere %}

{% endif %}

{% if product.metafields.custom.utgiver%}

{% endif %}

{% if product.metafields.custom.region %}

{% endif %}

{% if product.type %}

Tilstand:	{{product.metafields.custom.tilstand | remove: "]" | remove: "[" | remove: '"'}}
Sjanger:	{{product.metafields.custom.sjanger | remove: "]" | remove: "[" | remove: '"'}}
Anbefalt alder:	{{product.metafields.custom.anbefalt_alder | remove: "]" | remove: "[" | remove: '"'}}
Utgivelsesår:	{{product.metafields.custom.utgivelses_r | remove: "]" | remove: "[" | remove: '"'}}
Platform:	{{product.metafields.custom.plattform | remove: "]" | remove: "[" | remove: '"'}}
Spillere:	{{product.metafields.custom.spillere | remove: "]" | remove: "[" | remove: '"'}}
Utgiver:	{{product.metafields.custom.utgiver | remove: "]" | remove: "[" | remove: '"'}}
Region:	{{product.metafields.custom.region | remove: "]" | remove: "[" | remove: '"'}}
Produkt:	{{product.type | remove: "]" | remove: "[" | remove: '"'}}

{% endif %}

[GemPages]

Hello @Prizzless

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

[Prizzless]

Hi,

Retrospillkongen.no

i figured out how to remove the orange section. I had to go into the code and adjust marging to 0.

i still need help with the other two questions.

[GemPages]

Issue 1:

You can follow these steps:

1. Go to Online Store → Theme → Edit code
2. Open your theme.liquid theme file
3. Paste below code before :

Issue 2:

To create a space between commas, you can use a line of code like this:

**Sjanger:**  {{product.metafields.custom.sjanger | remove: "]" | remove: "[" | remove: '"' | replace: ",", ", "}}

Other lines with the same structure should be edited in the same way as above.

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

[LLGC]

So I am not a coder but have developed a similar table. Just thought I would let you know that you can remove the section;

| remove: “]” | remove: “[” | remove: ‘"’

and replace with;

| metafield_text

This should fix all these other problems and also uses updated grammar if there is only 2 options.

[Prizzless]

Thanks! I replaced it now.

[Prizzless]

But now i have a new problem:

My website is in norwegian and i need this to say “og” and not “and”

[Prizzless]

Thanks! But i have a little problem. Some of them are showing greate. But others are only displaying one of them. Here are some examples:

[LLGC]

So all you would need to do for this is edit the language. If you just want to edit this one word across the store you can do this by going to your theme, clicking the elipses and selecting Edit default theme content.

Filter by “and”. The first two options that come up should be the connector which you can amend as below. NOTE: this will change across the whole store

[LLGC]

I am not sure exactly but this sounds like something to do with the set-up. Are you able to show me what it should look like and a quick screen shot of the metafields?

[Prizzless]

I tried that but it is not showing. Do i have to change this is code? I am using the Warehouse theme.

[Prizzless]

Yes, this is an example of my metafields:

[LLGC]

I see you tried to search for “last word connector”, have you tried just searching “and”? This should bring up all dynamic text with the word “and” and will not matter if the descriptive text is in norwegian which is possible.

I am not familiar with this theme but it is possible that the word is embedded into the code rather than as a dynamic format. If this is the case you may need to get in contact with the developer of the theme and request assistance.

So I am not sure what the metafield type is but it may not be displaying if it is not text. There is more here about images and videos that may help Shopify Metafields Guide: Overview, Types, Manage 2.0 Metafields (identixweb.com)

[Prizzless]

Yeah i cant find it with “and” either. So i think it is a code thing. In the meantime i am using this code as shown in previous discussion: replace: “,”, ",