Skip to main content

Customize the dawn theme of Shopify to show a image in the product page template

By

Sometimes we need to show a image for each of the product of your Shopify store. This can be done by directly adding the image in the product template of Shopify theme.

Steps to add image in the product page of Shopify

Here are the steps to add a image in the product page template for Shopify dawn theme -

  1. Login to your Shopify store admin
  2. Upload image in the content section of Shopify
  3. Copy the URL of uploaded image
  4. Go to the theme and click on customize
  5. Select the product template
  6. Click on add block and select custom.liquid
  7. Add the HTML for image with added image URL
  8. Drag the custom.liquid block at desired location

Using above steps an image was added in the product page of Shopify having Dawn theme.

Here is a sample HTML code to add custom image in the product page template for Shopify dawn theme :




<div style="text-align: center;">
    <img height="100" src="https://cdn.shopify.com/s/files/1/0614/3112/0049/files/100_Assureed_1.png?v=1690098186" />
  </div>
Here is the sample video to implement above steps:

Labels:

Comments

Post a Comment

Popular posts from this blog

Show Image on canvas HTML5

By
Here is the sample code to select image from system and display it on html5 canvas and javascript: <input type= "file" id= "selectedImage" /> <canvas id= "myCanvas" width= "500" height= "500" > </canvas> Javascript code: $( "#selectedImage" ).change( function (e) { var URL = window .URL; var url = URL.createObjectURL(e.target.files[ 0 ]); img.src = url; img.onload = function () { var canvas = document .getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); var imgSize = calculateAspectRatioFit(img.width, img.height, canvas.clientWidth, canvas.clientHeight); ctx.clearRect( 0 , 0 , canvas.width, canvas.height); ctx.drawImage(img, 0 , 0 , imgSize.width, imgSize.height); } }); function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio = Math .min(maxWi
Post a Comment
Read more

Display Tooltip for Combo Box item C#.NET Winforms

By
In windows form combo box control sometimes while adidng items dynamically we have items whose width is greater than width of combox box control. In this case for making UI more user friendly we can show tooltip over such item. Here is the sample C# code to display such tooltip:  Add a Tooltip control on the form.  Add following code : this . combo_box1 . DropDownStyle = System . Windows . Forms . ComboBoxStyle . DropDownList; this . combo_box1 . DrawMode = DrawMode . OwnerDrawFixed; this . combo_box1 . DrawItem += new DrawItemEventHandler(combo_box1_DrawItem); this . combo_box1 . DropDownClosed += new EventHandler(combo_box1_DropDownClosed); this . combo_box1 . MouseLeave += new EventHandler(combo_box1_Leave); void combo_box1_DrawItem( object sender, DrawItemEventArgs e) { if (e . Index < 0 ) { return ; } string text = combo_box1 . GetItemText(combo_box1 . Items[e . Index
2 comments
Read more

Pass byte array from C# to C++ and vice-versa

By
Pass byte array from C# to C++                           If you want to pass a byte array to native DLL as parameter, you can use the Intptr to do this, please check the demo below. /C++ API code: TestDLL_API void TestArrayPara (BYTE * pArray, int nSize) { for ( int i= 0 ; i<nSize; i++) printf( "%d\n" , pArray[i]); } //C# code: class TestClass { [DllImport(@"TestDll.dll")] public static extern void TestArrayPara (IntPtr pArray, int nSize); public static void Test () { byte [] array = new byte [ 16 ]; for ( int i = 0 ; i < 16 ; i++) { array[i] = ( byte )(i + 97 ); } int size = Marshal.SizeOf(array[ 0 ]) * array.Length; IntPtr pnt = Marshal.AllocHGlobal(size); try { // Copy the array to unmanaged memory. Marshal.Copy(array, 0 , pnt, array
Post a Comment
Read more