I have been trying to have AI in Shopify create custom sections or blocks, and every time I request to create a section featuring a 4-column horizontal grid layout for a vip tiers. The four columns should sit side-by-side horizontally. Each individual column must feature a vertical stack alignment inside it, ordered from top to bottom: an individual tier image that I can edit, a bold tier title, a subtitle for point ranges, and a detailed reward description block. The entire 4-column section must feature a unified, full-width background image that spans behind all four tiers seamlessly, with each tier still having its own color background for each box. I keep getting only part of what I have asked for… I am just starting out, don’t have any customers, yet I don’t want to be paying extra for something I did not use or ask for and it was in the theme editor. After talking to Shopify help desk, they tell me it requires custom liquid code… I don’t know this code or how to add it… Looking for some help if anyone can. Thank you!
Hey @Rae7
Shopify’s AI can rough out simple sections, but what you’re describing is a compound layout, four editable columns, each with its own image, title, subtitle, reward text and colour, plus one full width background image spanning behind all four, and that combination is a proper custom section with editable settings, which the AI only ever gets partly right. So it genuinely does need a custom section built in the theme code, that part is true.
The good news for your budget worry though: a section like this is a small one-time build, not an app and not a monthly cost. Once it’s made it lives in your theme and you edit everything, images, titles, colours, all from the theme editor, for free, forever. And just to reassure you, the theme editor and the AI section building don’t charge you extra, you’re only hitting the limit of what the AI can do, there’s no hidden fee. This is exactly the kind of section I build, so I can make it for you properly, all editable by you afterward with no code and no app.
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.
Best,
Moeed
No thank you. I will just do something else.
Thank you
Shopify Sidekick by default will direct to the ai code generator. The ai code generator is a separate tool from Sidekick. Sidekick itself has its own knowledge base of coding.
You can tell Sidekick to give you code directly and instructions on what to do with it. Then, depending on the needs, you can ask Sidekick to change/modify parts as needed. I have built extensive sections and blocks with Sidekick.
Here is the section, built and tested. Copy it, paste it, done. Completely Free
VIP tiers section, on Dawn and on Horizon themes:
Step 1,
- create the file: Online Store > Themes > the
...next to your theme > Edit code. - Find the
sectionsfolder in the left sidebar, click Add a new section, name itvip-tiers, delete whatever it prefills, paste the code below, Save.
{%- liquid
assign s = section.settings
assign cols = section.blocks.size | at_least: 1
-%}
<style>
#shopify-section-{{ section.id }} .viptiers {
position: relative;
padding: {{ s.padding_top }}px 2rem {{ s.padding_bottom }}px;
background-color: {{ s.bg_color }};
{%- if s.bg_image != blank %}
background-image: url({{ s.bg_image | image_url: width: 3000 }});
background-size: cover;
background-position: center;
{%- endif %}
}
#shopify-section-{{ section.id }} .viptiers__overlay {
position: absolute;
inset: 0;
background: {{ s.overlay_color }};
opacity: {{ s.overlay_opacity | divided_by: 100.0 }};
pointer-events: none;
}
#shopify-section-{{ section.id }} .viptiers__inner {
position: relative;
max-width: {{ s.content_width }}px;
margin: 0 auto;
}
#shopify-section-{{ section.id }} .viptiers__heading {
margin: 0 0 2.4rem;
text-align: center;
color: {{ s.heading_color }};
}
#shopify-section-{{ section.id }} .viptiers__grid {
display: grid;
grid-template-columns: repeat({{ cols }}, minmax(0, 1fr));
gap: {{ s.gap }}px;
align-items: stretch;
}
#shopify-section-{{ section.id }} .viptiers__card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: {{ s.card_padding }}px;
border-radius: {{ s.corner_radius }}px;
}
#shopify-section-{{ section.id }} .viptiers__img {
display: block;
width: {{ s.image_height }}px;
height: {{ s.image_height }}px;
object-fit: contain;
margin-bottom: 1.6rem;
}
#shopify-section-{{ section.id }} .viptiers__title {
margin: 0 0 0.4rem;
font-weight: 700;
font-size: {{ s.title_size }}px;
line-height: 1.2;
}
#shopify-section-{{ section.id }} .viptiers__points {
margin: 0 0 1.2rem;
font-size: {{ s.points_size }}px;
opacity: 0.8;
}
#shopify-section-{{ section.id }} .viptiers__text {
font-size: {{ s.text_size }}px;
line-height: 1.5;
}
#shopify-section-{{ section.id }} .viptiers__text > *:first-child { margin-top: 0; }
#shopify-section-{{ section.id }} .viptiers__text > *:last-child { margin-bottom: 0; }
@media screen and (max-width: 989px) {
#shopify-section-{{ section.id }} .viptiers__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 599px) {
#shopify-section-{{ section.id }} .viptiers__grid {
grid-template-columns: minmax(0, 1fr);
}
}
</style>
<div class="viptiers">
<div class="viptiers__overlay"></div>
<div class="viptiers__inner">
{%- if s.heading != blank -%}
<h2 class="viptiers__heading">{{ s.heading }}</h2>
{%- endif -%}
<div class="viptiers__grid">
{%- for block in section.blocks -%}
{%- liquid
assign b = block.settings
assign card_alpha = b.card_opacity | divided_by: 100.0
-%}
<div
class="viptiers__card"
style="background-color: {{ b.card_bg | color_modify: 'alpha', card_alpha }}; color: {{ b.text_color }};"
{{ block.shopify_attributes }}
>
{%- if b.image != blank -%}
<img
class="viptiers__img"
src="{{ b.image | image_url: width: 600 }}"
alt="{{ b.image.alt | default: b.title | escape }}"
width="{{ s.image_height }}"
height="{{ s.image_height }}"
loading="lazy"
>
{%- endif -%}
{%- if b.title != blank -%}
<h3 class="viptiers__title">{{ b.title }}</h3>
{%- endif -%}
{%- if b.points != blank -%}
<p class="viptiers__points">{{ b.points }}</p>
{%- endif -%}
{%- if b.description != blank -%}
<div class="viptiers__text">{{ b.description }}</div>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "VIP tiers",
"tag": "section",
"settings": [
{ "type": "text", "id": "heading", "label": "Heading", "default": "VIP tiers" },
{ "type": "color", "id": "heading_color", "label": "Heading colour", "default": "#ffffff" },
{ "type": "header", "content": "Background behind all tiers" },
{ "type": "image_picker", "id": "bg_image", "label": "Background image" },
{ "type": "color", "id": "bg_color", "label": "Background colour", "default": "#12121a" },
{ "type": "color", "id": "overlay_color", "label": "Overlay colour", "default": "#000000" },
{ "type": "range", "id": "overlay_opacity", "min": 0, "max": 90, "step": 5, "unit": "%", "label": "Overlay darkness", "default": 35 },
{ "type": "header", "content": "Layout" },
{ "type": "range", "id": "content_width", "min": 800, "max": 1800, "step": 20, "unit": "px", "label": "Content width", "default": 1200 },
{ "type": "range", "id": "gap", "min": 0, "max": 60, "step": 2, "unit": "px", "label": "Space between columns", "default": 20 },
{ "type": "range", "id": "card_padding", "min": 8, "max": 60, "step": 2, "unit": "px", "label": "Padding inside each column", "default": 28 },
{ "type": "range", "id": "corner_radius", "min": 0, "max": 40, "step": 2, "unit": "px", "label": "Corner radius", "default": 12 },
{ "type": "range", "id": "image_height", "min": 40, "max": 260, "step": 10, "unit": "px", "label": "Tier image size", "default": 120 },
{ "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 64 },
{ "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 64 },
{ "type": "header", "content": "Text sizes" },
{ "type": "range", "id": "title_size", "min": 14, "max": 40, "step": 1, "unit": "px", "label": "Tier title", "default": 24 },
{ "type": "range", "id": "points_size", "min": 11, "max": 28, "step": 1, "unit": "px", "label": "Points range", "default": 15 },
{ "type": "range", "id": "text_size", "min": 11, "max": 24, "step": 1, "unit": "px", "label": "Reward description", "default": 15 }
],
"blocks": [
{
"type": "tier",
"name": "Tier",
"settings": [
{ "type": "image_picker", "id": "image", "label": "Tier image" },
{ "type": "text", "id": "title", "label": "Tier title", "default": "Bronze" },
{ "type": "text", "id": "points", "label": "Points range", "default": "0 - 499 points" },
{ "type": "richtext", "id": "description", "label": "Rewards", "default": "<p>Free shipping on every order.</p>" },
{ "type": "color", "id": "card_bg", "label": "Column background colour", "default": "#ffffff" },
{ "type": "range", "id": "card_opacity", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Column background opacity", "default": 100 },
{ "type": "color", "id": "text_color", "label": "Column text colour", "default": "#12121a" }
]
}
],
"max_blocks": 6,
"presets": [
{
"name": "VIP tiers",
"blocks": [
{ "type": "tier", "settings": { "title": "Bronze", "points": "0 - 499 points", "card_bg": "#f4e3d2", "description": "<p>Free shipping on every order.</p>" } },
{ "type": "tier", "settings": { "title": "Silver", "points": "500 - 1,499 points", "card_bg": "#e6e8ec", "description": "<p>Free shipping plus 5% off everything.</p>" } },
{ "type": "tier", "settings": { "title": "Gold", "points": "1,500 - 4,999 points", "card_bg": "#f6e5b4", "description": "<p>10% off, early access to new drops.</p>" } },
{ "type": "tier", "settings": { "title": "Platinum", "points": "5,000+ points", "card_bg": "#dfe6ef", "description": "<p>15% off, early access, free gift each quarter.</p>" } }
]
}
]
}
{% endschema %}
Step 2, add it to a page. Back in the theme editor, click Add section and search VIP.
Step 3, Now edit it from the sidebar.
Notes:
- Section settings hold the background image, background colour, overlay darkness, content width, column spacing, padding and corner radius.
- Each tier (bronze/silver/gold/platinum) is its own block with its own image, title, points range, rewards text, column colour and text colour.
- Click Add Tier for a fifth or sixth. Drag to reorder. Delete one and the grid re-fits by itself, because the column count follows the number of blocks.
- Column background opacity: adjust it to show the image through the boxes. Leave it at 100 for solid.
- the above code/settings is two columns on tablet and one on phones. Four columns on a phone would be unreadable.
You probably don’t need so much liquid, look at using grid in CSS:
You could learn HTML and CSS from a free app like Sololearn, then do the JavaScript courses too, then check this out from Shopify:
That’s pretty much all you need to be able to write better prompts and get better code back. If it sounds like a lot of work, that’s why people ask for money to do the work. They’ve spent years gaining knowledge and experience and putting the two together to help people with their service, same as a builder, plumber, or even a dentist and doctor.
The problem with “free” services is often that you get what you pay for and shouldn’t expect a ferrari when you’re taking a shopping trolley.
Sorry for the rant.
All the best!
Nathan