How can I add two images using custom liquid code?

GeeKyuu24
Pathfinder
108 3 13

Hi Team,

 

Can someone assist me here to provide instruction how to add a custom liquid here on this section to add 2 images and what code to use? 

 

Capture1.PNG

 

I want to achieve this379629714_625754209741600_2655698240610541171_n.jpg

 

 

My store is: https://glowcare.se/

Replies 5 (5)

Asad24
Shopify Partner
180 35 32

upload the image in content > files then copy the source link of the image 
than write this in custom liquid code

<img src="image source" alt="write alternative text for image" height=" " width=" " />

banned
TritonJK
Shopify Partner
16 0 0

Would it be possible to use images that are in my "assets" folder and not uploaded as a file for this?

JohnE10
Shopify Partner
112 14 19

Hi,

 

Assuming the 2 images you're looking to add have been uploaded to your site's gallery, try this: add a "Custom liquid" section and place it in the desired location, and then in the "Custom liquid" box, enter the following code:

 

<div style="width: 100%; display: flex; justify-content: center;">
  <div>
    <img src="{{ 'woman-g74f4f72fe_1920-2.jpg' | file_img_url:'526x640'}}">
  </div>
  <div>
    <img src="{{ 'people-2576968_1280-2_0515f397-931a-4562-afee-e66a63f0d594.jpg' | 
    file_img_url:'526x640'}}">
</div>

adjust the image names (in this case 'woman-g74f4f72fe_1920-2.jpg' and 'people-2576968_1280-2_0515f397-931a-4562-afee-e66a63f0d594.jpg') and the image sizes (in this case both images are '526x640') to fit your case. CSS will also need to be added/adjusted to match what you're looking to get.

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
TritonJK
Shopify Partner
16 0 0

Would it be possible to use images that are in my "assets" folder and not uploaded as a file for this?

JohnE10
Shopify Partner
112 14 19

Yes,  you should be able to do it. Just change 'file_img_url' to 'asset_url' in the <img> tag. the code should look like this:

 

<div style="width: 100%; display: flex; justify-content: center;">
  <div>
    <img src="{{ 'woman-g74f4f72fe_1920-2.jpg' | asset_url }}">
  </div>
  <div>
    <img src="{{ 'people-2576968_1280-2_0515f397-931a-4562-afee-e66a63f0d594.jpg' | 
    asset_url }}">
  </div>
</div>

 

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com