Shopify themes, liquid, logos, and UX
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.
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.
<div id="section-{{ section.id }}" class="{% unless section.settings.show_on_desktop %} medium--hide large--hide{% endunless %} {% unless section.settings.show_on_mobile %} small--hide{% endunless %} {{ section.settings.section_style }}" data-section-id="{{ section.id }}" data-section-type="logo-list-section">
<div class="box box-small">
<div class="wrapper">
{%- if section.blocks.size > 0 -%}
{%- unless section.settings.title == blank -%}
<div class="text-center spacer-bottom-sm">
<h2 class="h1">{{ section.settings.title | escape }}</h2>
</div>
{%- endunless -%}
<div class="grid grid-xsmall justify-center align-center">
{%- capture column_width -%}
{%- render 'block-width' -%}
{%- endcapture -%}
<div class="grid__item flex-auto">
<div id="LogoList-{{ section.id }}" class="grid grid-xsmall justify-center dbtfy_logo_list {% if section.settings.slider_logo_list and section.blocks.size > 1 %}slick slick-logo-list{% endif %}"
data-count="{{ section.blocks.size }}"
data-arrows="{{ section.settings.arrows }}"
data-dots="{{ section.settings.dots }}"
data-autoplay="{{ section.settings.autoplay }}"
data-autoplayspeed="{{ section.settings.autoplayspeed | times: 1000 }}" >
<!-- Blocks -->
{%- for block in section.blocks -%}
<div class="grid__item flex-auto logo-bar__item spacer-bottom-sm small--one-whole"
{{ block.shopify_attributes }}>
<div style="background-color: transparent;" class="card">
<div class="card-body" style="max-width:172px;">
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="image-link" {% if block.settings.targe_blank %}target="_blank"{% endif %}>
{%- endif -%}
{%- if block.settings.image != blank -%}
<img class="logo-bar__image imgset lazyload radius-none{% if section.settings.image_gray %} image-gray{% endif %}"
{% render 'lazysizes', img: block.settings.image, img_type: 'retina', img_height: section.settings.image_height %}
alt="{{ block.settings.image.alt }}">
{%- else -%}
<div style="height: {{ section.settings.image_height }}px; width: {{ section.settings.image_height }}px; margin: 0 auto">
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
{%- if block.settings.text != blank -%}
<div class="card-footer-xs">
<p>{{ block.settings.text }}</p>
</div>
{%- endif -%}
</div>
</div>
</div>
{%- endfor -%}
</div>
</div>
</div>
{%- else -%}
{%- render 'no-blocks' -%}
{%- endif -%}
</div>
</div>
</div>
{% 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.
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.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025