Skip to main content

How to add custom HTML in your Shopify product page?

By


Here we are going to discuss two ways on how to add custom html section on your Shopify product page.

Having a well designed Shopify product page is critical for your product sell. Having well defined information will help your customer to make an informed decision. 

Here custom html can play a crucial role using which you add some important information across all or your or select Shopify products from single change.

Option 1: Adding custom.liquid block on product page 

If your Shopify theme supports custom.liquid block then you can follow these steps to add custom html using custom.liquid block -
  1. Go to Shopify admin
  2. Click on Online Store
  3. Click on Customize button
  4. Select the product page template
  5. Click on "Add block" and select the custom.liquid block
Here is a sample video using custom.liquid block to add an image in product page :





Option 2: Adding custom HTML using Advanced Product Customizer Shopify app

Advanced Product Customizer is a Shopify that allows you to add Product Custom options in your Shopify store.

Advanced Product Customizer offers a custom HTML option which allows to add custom html section on your Shopify product page for selected products and all the Shopify products. 

Here are the steps to custom html using Advanced Product Customizer in your Shopify store -
  1. Go to Shopify app store and install Advanced Product Customizer Shopify app
  2. Click on the Product Custom options menu item
  3. Go to "Options" tab and add new custom option of type html (Learn More)
  4. Now, go to "Products" tab and for the required product click on "Add Options"
  5. Here select the html option for the product

Here is a demo video to implement above steps :

 



Labels:

Comments

Post a Comment

Popular posts from this blog

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

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