I’m trying to add a section with logos where I can add text underneath each image. My theme is Debutify. I would prefer to be able to add a moving video background, so if this is possible please also include this in the instructions. But the text is the main concern. I’d like the format and so on to resemble the picture on the bottom. I’d also like to have a linked button to “read more” that leads to another page. My plan is to have 8 icons with text boxes underneath each one, and one larger header at the top of the section, with “read more” button at the bottom. I either need detailed instructions on how to add code to the logo section or add someone as staff.
Topic summary
A Debutify theme user wants to customize their logo section by adding text descriptions under each logo image, with an optional moving video background. They also want to include a “read more” button linking to another page, formatted similarly to a reference image they provided.
Key Requirements:
- Text boxes underneath 8 logo icons
- Larger header at the top of the section
- “Read more” button at the bottom
- Optional: moving video background
Solution Provided:
Debutify support shared custom code for the logo-list.liquid file (for theme version 4.10.1+) that adds text field functionality beneath logos. The code includes settings for:
- Image picker and text fields for each logo block
- Slider options (autoplay, arrows, dots)
- Adjustable image height
- Up to 10 logo blocks
Issue Reported:
One user reported the code caused their theme to crash, noting their Debutify version might differ. Support clarified the code only works with the official Debutify theme specifically.
Status: Partially resolved - solution works for compatible Debutify versions, but compatibility issues exist for some users. Video background feature not addressed in the provided solution.
If you are familiar with HTML & CSS you can copy the code from the website you have screenshot from by using dev tools.
Hey @nikkoscott ,
Assuming you are using version 4.10.1 and up. On Shopify’s admin > themes > desired theme > three dots > edit code.
Search for the file named “logo-list.liquid” and replace it with the following code.
{%- if section.blocks.size > 0 -%}
{%- unless section.settings.title == blank -%}
## {{ section.settings.title | escape }}
{%- endunless -%}
{%- capture column_width -%}
{%- render 'block-width' -%}
{%- endcapture -%}
{%- for block in section.blocks -%}
{%- if block.settings.link != blank -%}
{%- endif -%}
{%- if block.settings.image != blank -%}
{%- else -%}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.link != blank -%}
{%- endif -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}
{%- endfor -%}
{%- else -%}
{%- render 'no-blocks' -%}
{%- endif -%}
{% schema %}
{
"name": "t:sections.logo_list.name",
"class": "logo-list-section",
"max_blocks": 10,
"settings": [
{
"type": "checkbox",
"id": "show_on_desktop",
"label": "t:sections.logo_list.settings.show_on_desktop.label",
"default": true
},
{
"type": "checkbox",
"id": "show_on_mobile",
"label": "t:sections.logo_list.settings.show_on_mobile.label",
"default": true
},
{
"type": "text",
"id": "title",
"label": "t:sections.logo_list.settings.title.label",
"default": "Featured on"
},
{
"type": "select",
"id": "section_style",
"label": "t:sections.logo_list.settings.section_style.label",
"default": "section-blank",
"options": [
{
"value": "section-blank",
"label": "t:sections.logo_list.settings.section_style.options__1.label"
},
{
"value": "section-default",
"label": "t:sections.logo_list.settings.section_style.options__2.label"
},
{
"value": "section-border",
"label": "t:sections.logo_list.settings.section_style.options__3.label"
}
]
},
{
"type": "checkbox",
"id": "image_gray",
"label": "t:sections.logo_list.settings.image_gray.label",
"default": true
},
{
"type": "range",
"id": "image_height",
"label": "t:sections.logo_list.settings.image_height.label",
"min": 20,
"max": 100,
"step": 2,
"unit": "px",
"default": 30
},
{
"type": "header",
"content": "t:sections.logo_list.settings.header__1.content"
},
{
"type": "checkbox",
"id": "slider_logo_list",
"label": "t:sections.logo_list.settings.slider_logo_list.label",
"default": true
},
{
"type": "checkbox",
"id": "arrows",
"label": "t:sections.logo_list.settings.arrows.label",
"default": true
},
{
"type": "checkbox",
"id": "dots",
"label": "t:sections.logo_list.settings.dots.label",
"default": true
},
{
"type": "checkbox",
"id": "autoplay",
"label": "t:sections.logo_list.settings.autoplay.label",
"default": true
},
{
"type": "range",
"id": "autoplayspeed",
"label": "t:sections.logo_list.settings.autoplayspeed.label",
"min": 3,
"max": 10,
"step": 1,
"unit": "s",
"default": 5
}
],
"blocks" : [
{
"type": "logo",
"name": "t:sections.logo_list.blocks.logo.name",
"settings": [
{
"type": "text",
"id": "title",
"label": "t:sections.logo_list.blocks.logo.settings.title.label",
"info": "t:sections.logo_list.blocks.logo.settings.title.info"
},
{
"type": "image_picker",
"id": "image",
"label": "t:sections.logo_list.blocks.logo.settings.image.label"
},
{
"type": "text",
"id": "text",
"label": "Text",
"default":"Add text here"
},
{
"type": "url",
"id": "link",
"label": "t:sections.logo_list.blocks.logo.settings.link.label"
},
{
"type": "checkbox",
"id": "targe_blank",
"label": "t:sections.logo_list.blocks.logo.settings.targe_blank.label",
"default": false
}
]
}
],
"presets": [
{
"name": "t:sections.logo_list.presets.name",
"category": "t:sections.logo_list.presets.category",
"blocks": [
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
},
{
"type": "logo"
}
]
}
]
}
{% endschema %}
This will add a text input to the “Logo list” section, where you will be able to edit the logo and text dynamically.
1 Like
Well, it doesn’t work for me, the whole theme crashes…
My theme is debut, which may not be the same as debutify
Does anyone have any solutions?
Hi @D_Juhasz
Sorry, the code provided will only work for the Debutify theme.