Shopify themes, liquid, logos, and UX
I would like to align and divide a custom list into a 4 columns, here's the code that I've used in a custom liquid
https://macaronikids.com/pages/designersv2
<div class="container-indent">
<div class="container">
{{ page.content }}
<br>
{% assign alphabet_list = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z" | split: ',' %}
{% for letter in alphabet_list %}
{% assign check_letter = false %}
<a href="#" class="indent-letter__{{ letter }}">{{ letter }}</a><br>
{%- for collection in collections -%}
{% assign first_letter = collection.title | truncate: 1, '' | upcase %}
{%- for product_vendor in shop.vendors -%}
{% if product_vendor == collection.title %}
{% if first_letter == letter %}
{% assign check_letter = true %}
<a href="{{ collection.url }}">{{ collection.title }}</a><br>
{% endif %}
{% endif %}
{%- endfor -%}
{%- endfor -%}
<br>
{%- unless check_letter -%}
<style>
.indent-letter__{{ letter }} {
display: none;
}
</style>
{%- endunless -%}
{% endfor %}
</div>
</div>
Hi,
I checked it in my device in that list already divide in 4 columns.
Thank you.
Hi @Lichael06
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file styles.css
Step 3: Paste the below code at bottom of the file -> Save
.all_column>div{text-align:center !important}
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025