Shopify themes, liquid, logos, and UX
I have created a custom section in the Online Store 2.0, Dawn theme version 8.0.0 and I am trying to get the block to show on the home page, after selecting the image and adding the url. But for some reason it is not showing. Please can some help be provided. Thank you.
Section:
<div>
<h2>{{ section.settings.title | escape }}</h2>
{% for block in section.blocks %}
{% case block.type %}
{% when 'trustBadgesImage' %}
{% if section.blocks.size > 0 %}
<ul>
{% for block in section.blocks %}
<li class="trust-badge-section" {{ block.shopify_attributes }}>
{% if block.settings.trustBadgeslink != blank %}
<a href="{{ block.settings.trustBadgeslink }}">
{% endif %}
{% if block.settings.trustBadgesImage != blank %}
{{ block.settings.trustBadgesImage | img_url: '150x150', scale: 2 | img_tag: block.settings.trustBadgesImage.alt, 'trust-badge__image' }}
{% else %}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.trustBadgeslink != blank %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% endcase %}
{% endfor %}
</div>
{% schema %}
{
"name": "Trust Badge",
"tag": "section",
"class": "trust-badges",
"max_blocks": 8,
"settings": [
{
"type": "text",
"id": "trustBadgesTitle",
"label": "Heading"
}, {
"type": "select",
"id": "trustBadgeslogo_width",
"label": "Logo width",
"default": "150px",
"options": [
{
"label": "Extra Small",
"value": "100px"
},
{
"label": "Small",
"value": "125px"
},
{
"label": "Medium",
"value": "150px"
},
{
"label": "Large",
"value": "175px"
}, {
"label": "Extra Large",
"value": "200px"
}
]
}
],
"blocks": [
{
"name": "Trust Badge Image",
"type": "trustBadges",
"settings": [
{
"type": "image_picker",
"id": "trustBadgesImage",
"label": "Image"
}, {
"type": "url",
"id": "trustBadgeslink",
"label": "Link",
"info": "Optional"
}
]
}
]
}
{% endschema %}
index.json:
"trust-badges": {
"type": "trust-badges",
"settings": {
"trustBadgesTitle": "Trust Badge Heading"
},
"blocks":{
"trustBadges": {
"type": "trustBadges",
"settings": {
}
}
},
"block_order": [
"trustBadgesTitle",
"trustBadges"
]
}
},
"order": [
"image_banner",
"trust-badges",
"rich_text",
"featured_collection",
"collage",
"video",
"multicolumn"
]
oh sorry for that issue but you have missing main part
Presets are default configurations of sections and are added within a section's {% schema %} tags. In our simple example, the presets could look like:
"presets": [
{
"name": "Trust Badge",
"category": "Custom"
}
]
more clear this Shopify First section
How to Create Your First Shopify Theme Section
I have added the presets into the schema, but the block is still not showing.
@KetanKumar I have added the presets into the schema, but the block is still not showing.
User | RANK |
---|---|
227 | |
181 | |
63 | |
58 | |
47 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023