Shopify themes, liquid, logos, and UX
I simply need to add the guarantee bar shown below, right above the footer on my home page, I'm using Venture theme. Need guidance ASAP
my store link: essentyls.com, pass: arham123
Thanks, I'm waiting for your response
Check out PM.
I have message you.
Where do we get PM's here? I cant find any
@Hasansaleem1997
Where you want to add, in which section.
share me your store I will help you to add it.
thank you.
I want to add some space here and then add that guarantee bar
Essentyls.com
Password: arham123
provide me the approval I have sent an invitation.
Thank you.
<style>
.logo-bar__item {
display: inline-block;
max-width: {{ section.settings.logo_width }};
}
</style>
<h2>{{ section.settings.title | escape }}</h2>
{%- if section.blocks.size > 0 -%}
<ul>
{%- for block in section.blocks -%}
<li class="logo-bar__item" {{ block.shopify_attributes }}>
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
{%- if block.settings.image != blank -%}
{{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt }}
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{% schema %}
{
"name": "Logo list",
"class": "index-section",
"max_blocks": 10,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
},
{
"type": "select",
"id": "logo_width",
"label": "Logo width",
"default": "160px",
"options": [
{
"label": "Extra Small",
"value": "100px"
},
{
"label": "Small",
"value": "125px"
},
{
"label": "Medium",
"value": "160px"
},
{
"label": "Large",
"value": "175px"
},
{
"label": "Extra Large",
"value": "200px"
}
]
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Logo list",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}
Use this code .
Thank you.
@Zworthkey , thanks alot for your support, however, I just want to add this bar as an image in full width. The coding you shared just allowed logos, I want an option to add an image in full width
Maximize the images at setting or increase the size.
thank you.
check out and use it.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024