Can someone give me instructions to set up a metafield for a row of small images? My URL is https://claribelskincare.com. Thank you. It should look something like this:
Hey @claribelskincar!
Can you confirm, are you using the Shopify Blocks or it just a set of images that you’ve uploaded within the section?
Yes, I would be more than happy to help with this.
For say, I need to setup the metafields custom namespace in the theme code. So I need your store collab access to setup this.
I would like the collaborator access instead of Staff access.
Still need help if someone can share some instructions or tips.
Okay dear, which page do you want to set this up for—the product page or the home page?
Best regards,
Devcoder 
Hi @claribelskincar,
Step 1. go to setting
Step 2. Go to MetaField
Step 3. Go to Product
Step 3. Create Five MetaField for this name Example in this image.
Step 4. Go to Online Store → Theme → Edit theme.
Step 5. Add section > Custom liquid
Step 6. Paste the code in custom liquid section
{%- assign img1 = product.metafields.custom.image_1.value -%}
{%- assign img2 = product.metafields.custom.image_2.value -%}
{%- assign img3 = product.metafields.custom.image_3.value -%}
{%- assign img4 = product.metafields.custom.image_4.value -%}
{%- assign img5 = product.metafields.custom.image_5.value -%}
{%- if img1 != blank or img2 != blank or img3 != blank or img4 != blank or img5 != blank -%}
<div class="sc-featured-notes-section">
<div class="sc-header-area">
<p class="sc-sub-title">STOP AND SMELL THESE</p>
<h2 class="sc-main-title">FEATURED NOTES</h2>
<p class="sc-description">Learn more about the top, middle, and bottom notes in this fragrance.</p>
</div>
<div class="sc-notes-grid">
{%- assign note_images = "image_1,image_2,image_3,image_4,image_5" | split: ',' -%}
{%- for field in note_images -%}
{%- assign image_data = product.metafields.custom[field].value -%}
{%- if image_data != blank -%}
<div class="sc-note-card">
<div class="sc-image-container">
<img src="{{ image_data | image_url: width: 300 }}" alt="{{ image_data.alt | escape }}" loading="lazy">
</div>
{%- if image_data.alt != blank -%}
<p class="sc-note-name">{{ image_data.alt }}</p>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
</div>
</div>
{%- endif -%}
<style>
.sc-featured-notes-section {
padding: 60px 20px;
text-align: center;
background-color: #ffffff;
}
.sc-sub-title {
color: #a67c52;
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 8px;
font-weight: 600;
text-transform: uppercase;
}
.sc-main-title {
font-size: 32px;
font-weight: 800;
margin: 0 0 15px 0;
letter-spacing: 1px;
color: #000;
}
.sc-description {
font-size: 15px;
color: #444;
margin-bottom: 50px;
}
.sc-notes-grid {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 30px;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.sc-note-card {
display: flex;
flex-direction: column;
align-items: center;
flex: 0 1 150px; /* 5 images ke liye width thodi kam ki hai */
}
.sc-image-container {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.sc-image-container img {
max-width: 100px;
max-height: 100px;
object-fit: contain;
transition: transform 0.4s ease;
}
.sc-image-container img:hover {
transform: translateY(-5px);
}
.sc-note-name {
font-size: 18px;
font-weight: 600;
margin: 0;
color: #000;
}
@media (max-width: 749px) {
.sc-notes-grid { gap: 15px; }
.sc-note-card { flex: 0 1 45%; } /* Mobile par 2 images ek row mein ayengi */
.sc-main-title { font-size: 24px; }
}
</style>
Step 7. Go to product section and open product
Open product and select images in metafield and save.
Step 8. Go to content > file and select image add alt text
Result:
Hi @claribelskincar ,
Yes, this can be done using product metafields + a Custom Liquid block.
Below are the exact steps to create a row of small images (like “Featured Notes”).
Step 1: Create metafields (Admin)
Go to Shopify Admin → Settings → Custom data → Products
Create these metafields:
a. Notes images (files)
- Name: Featured notes images
- Namespace & key:
custom.featured_notes_images - Type: File
- Accept: Images
- Enable “List of files”
b. Notes labels (text)
- Name: Featured notes labels
- Namespace & key:
custom.featured_notes_labels - Type: Single line text
- Enable “List of values”
Save.
Step 2: Add data to the product
- Open a product in Admin
- Scroll to Metafields
- Upload images in Featured notes images
- Add matching names in Featured notes labels
Keep image count and label count the same
(example: 5 images → 5 labels)
Step 3: Add Custom Liquid block (Theme editor)
- Go to Online Store → Themes → Customize
- Open a Product page
- Add block → Custom liquid
- Paste this code:
{% assign images = product.metafields.custom.featured_notes_images.value %}
{% assign labels = product.metafields.custom.featured_notes_labels.value %}
{% if images != blank %}
<div class="featured-notes">
{% for image in images %}
<div class="note-item">
<img
src="{{ image | image_url: width: 200 }}"
alt="{{ labels[forloop.index0] }}"
loading="lazy"
>
<p>{{ labels[forloop.index0] }}</p>
</div>
{% endfor %}
</div>
{% endif %}
Step 4: Styling (same Custom Liquid block)
Add this below the code:
<style>
.featured-notes {
display: flex;
gap: 28px;
justify-content: center;
text-align: center;
flex-wrap: wrap;
}
.note-item img {
width: 70px;
height: 70px;
object-fit: contain;
}
.note-item p {
margin-top: 8px;
font-size: 14px;
}
</style>