Custom Liquid: custom coded buttons different size

Store Design

Topic summary

A user custom-coded blue navigation buttons but encountered alignment issues—specifically, the \

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

I custom coded the blue buttons (code and screenshot attached below), but they are all not aligned and the shorts and skirts button is bigger and also ends at a lower position.

What is a way to make all the buttons the same size with editing the text?

ahana1605_0-1662252437670.png
ahana1605_0-1662252437670.png1920×1080 233 KB

2 Likes
2

Hi @ahana1605 ,

Do you mean without editing the text? If so, please follow the instructions below

  1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
  2. Open the Asset folder, and find the base.css file.
  3. Add the code below.
button.button.button1 {
    white-space: nowrap;
    width: 12%;
}
3

@ahana1605

can you please send store url?

4

genhaat.com

5

@KetanKumar ^

6

Wondered if you can give me a hint to make design of this button in liquid bigger and wider, maybe some color too

Liquid code in a field : {% if product.vendor == ‘EBC Bremser’ %}GĂ„ tilbage
{% endif %}

https://bagpotten.dk/products/111349

Thx in advance Henrik

Link to page :

7

Hi Please give coding with option to redirect the button to a diff page , thanks

1 Like
8

@moharsh
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

9

Moharsh.in

what I want to do is, I want to give my customer options to click on a direct button on the top, wich takes them to a refreshed page with filtered options. Like M L XL XXL - Four buttons and upon selecting the button the page should show only the selected available size.