Shopify themes, liquid, logos, and UX
I would like to add an image "Theme Block" that can be used within a section. Can I achieve this by adding a new "Section" to my code? I want to add a small image below the text in this "Text with Image" section. Thanks!
Solved! Go to the solution
This is an accepted solution.
Hello @byClaireWebb
Please check the below step:
1: go to the file image-with-text
2. go the the bottom scheme and look for "type": "button", and add the below code above it. (Check the screenshot below)
{
"type": "image",
"name": "image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Select Image"
}
]
},
Step 2: look for {%- when 'button' -%} and add the below code above it (Find the attached screenshot)
{%- when 'image' -%}
<div class="image-with-text__text-video rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<img src="{{ block.settings.image | img_url: 'master' }}">
</div>
Now go to customise hopefully you should see the image block.
Thanks
Will share a video for this... @byClaireWebb
Yes it is possible thing by custom coding in your section.
if you want to further information about it then You can contact us.
This is an accepted solution.
Hello @byClaireWebb
Please check the below step:
1: go to the file image-with-text
2. go the the bottom scheme and look for "type": "button", and add the below code above it. (Check the screenshot below)
{
"type": "image",
"name": "image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Select Image"
}
]
},
Step 2: look for {%- when 'button' -%} and add the below code above it (Find the attached screenshot)
{%- when 'image' -%}
<div class="image-with-text__text-video rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<img src="{{ block.settings.image | img_url: 'master' }}">
</div>
Now go to customise hopefully you should see the image block.
Thanks
Thank you!
hi, the image is little blurry, and can we make this image size smaller , it's width and height means?
and one this also, this image border is a little grey, can we remove that also?
Thank you, works like a charm!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025