Display image in Product Template using Custom.liquid block Shopify

No video

Display image in Product Template using Custom.liquid block Shopify | Edit Dawn theme

Рет қаралды 2,599

Жыл бұрын

In this video we will show you how to can customize the dawn theme of Shopify to show a image in the product page template. Following steps are followed in this video -
1. Upload image in the content section of Shopify
2. Copy the URL of uploaded image
3. Go to the theme and click on customize
4. Select the product template
5. Click on add block and select custom.liquid
6. Add the HTML for image with added image URL
7. Drag the custom.liquid block at desired location
Using above steps an image was added in the product page of Shopify having Dawn theme.
Link to code used in the video : www.scaleuppri...
Install Now our FREE Shopify app Product Designer & Variants to create custom fields in your Shopify product - apps.shopify.c...
Please like, share and subscribe the channel for such informational videos on Shopify.
Please do let you know your feedback or any questions in the comments.
You can also suggest any topic on which you wants us to create video.

Пікірлер: 21

@shubhamjain1935 9 ай бұрын

finally I got for which i waas searching for 5 days. You with small Subscribers had done great. Best of Luck for more.Thanks

@scaleupprint 9 ай бұрын

Thank you! We are glad that our video was helpful for you.

@sanidhyadurgapal5214 6 ай бұрын

thank you so much brother .Wish u all the very best for your future .

@scaleupprint 6 ай бұрын

welcome! thank you for your wishes & best wishes for your future as well!

@Goldminks 2 ай бұрын

Thank you brother very helpful

@scaleupprint 2 ай бұрын

Thank you! I am glad that you found video helpful.

@matthewcarver785 3 ай бұрын

Thank you so much!! Can this be done on only 1 product without displaying on every product in the store?

@scaleupprint 3 ай бұрын

Hi, thank you for reaching out. Since custom liquid block is at theme level editing, so it will be applied on all the product pages. To display image on selected product you can use custom HTML option in our Shopify App "Product Designer & Options" - apps.shopify.com/scale-up-print-designer Here is the doc on how to use the HTML custom option in Product Designer & Options app - www.scaleupprint.com/Documentation/how-to-add-html-custom-option-in-product-custom-options Please let me know if more details are needed.

@DhwaniMankad 3 ай бұрын

hey, thanks for the help! i wanted to know how do i align the image to centre?

@scaleupprint 3 ай бұрын

Welcome! Thank you for reaching out. You can find the sample html code to align image to center in our this post : newapputil.blogspot.com/2024/04/customize-dawn-theme-of-shopify-to-show.html Feel free to ask if you need further clarification or assistance.

@djxete1987 3 ай бұрын

Thanks a lot. And then how can you make it responsive? Because you put a height. Thank you!

@scaleupprint 3 ай бұрын

Hi, thank you for reaching out. To make image responsive you can add additional CSS within the style tag of element. Please let me know if more details are needed.

@djxete1987 3 ай бұрын

@@scaleupprint thanks a lot for your quick response. Yes, when it comes to make the image responsive, it is so difficult. If you could write us the code to make the image responsive that would be very kind of you

@scaleupprint 3 ай бұрын

@@djxete1987 sure, kindly connect with us at our email id info@scaleupprint.com

@mehakbansal9506 Ай бұрын

can you give this liquid code

@scaleupprint Ай бұрын

Hi, here is the link where you can find the code : www.scaleupprint.com/Blog/customize-the-dawn-theme-to-show-image-in-product-page

@mehakbansal9506 Ай бұрын

@@scaleupprint Thank you can we center align too

@scaleupprint Ай бұрын

@@mehakbansal9506 Yes, using the style text-align as center for the parent div the image will be aligned to center. The code sample given in the link aligns the image to center.

@mehakbansal9506 Ай бұрын

@@scaleupprint Image size is coming way too large even when i enter height as 1, how do i edit that

@scaleupprint Ай бұрын

@@mehakbansal9506 The height & width of the image is managed by the height and width property of image element in the html. So, giving the height property value should resize the image accordingly. Let me know if you want me to look into the issue, you can send the issue details at info@scaleupprint.com