Add icon ( Small logo ) item product description block

Hey guys!

Wondering if there's a way to add small icon in the item description block ? or the
only way is in " additional info " under the thumbnail and description ?

Cheers!

**** Doesn’t need to be clickable or any interaction. just an icon

Same icons for all products, or each product use different icons?

Hey Tuanphan!

Different to every product. In fact it will be small allergies legend icon
Just the icon not the text. Just under the name of the item or close to. 
Not under in " additional information "

I want to add the good one for every dishes scenario. 

Hello, 

I want to know how to achieve that too. That will be great if I can add some icons to the product information section.

On 6/4/2020 at 11:21 PM, LesMarchands said:

Hey Tuanphan!

Different to every product. In fact it will be small allergies legend icon
Just the icon not the text. Just under the name of the item or close to. 
Not under in " additional information "

I want to add the good one for every dishes scenario. 

3 hours ago, Claireacomdata said:

Hello, 

I want to know how to achieve that too. That will be great if I can add some icons to the product information section.

 

Add Code Block or Markdown Block with icons to Additional Info > Then I can give JavaScript to move it under Add to Cart button or Price

@tuanphan

Thank you!  I've added a external widget (social share buttons) in the additional info section. How can I move it?

URL: https://humbeeshop.squarespace.com/shop/hand-sanitizer-disinfectant-gel-169oz50ml-packs-of-61224
PW: 2020

19 hours ago, Claireacomdata said:

@tuanphan

Thank you!  I've added a external widget (social share buttons) in the additional info section. How can I move it?

URL: https://humbeeshop.squarespace.com/shop/hand-sanitizer-disinfectant-gel-169oz50ml-packs-of-61224
PW: 2020

 

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  /** 
  * You can also use this code to move Shopify Button
  * Checked by @tuanphan, SS forum
  */
  var a=['\x61\x64\x64\x69\x74\x69\x6f\x6e\x61\x6c','\x65\x6d\x2d\x64\x65\x74\x61\x69\x6c\x73','\x2d\x63\x68\x65\x63\x6b\x6f\x75\x74','\x2e\x50\x72\x6f\x64\x75\x63\x74\x49\x74','\x73\x65\x63\x74\x69\x6f\x6e\x2e\x50\x72'];(function(b,e){var f=function(g){while(--g){b['push'](b['shift']());}};f(++e);}(a,0x114));var b=function(c,d){c=c-0x0;var e=a[c];return e;};$(document)['\x72\x65\x61\x64\x79'](function(){$(b('\x30\x78\x32')+b('\x30\x78\x30')+b('\x30\x78\x31'))['\x61\x70\x70\x65\x6e\x64']($(b('\x30\x78\x33')+'\x6f\x64\x75\x63\x74\x49\x74\x65\x6d\x2d'+b('\x30\x78\x34')+'\x20\x2e\x63\x6f\x64\x65\x2d\x62\x6c\x6f'+'\x63\x6b'));});
</script>

1 hour ago, tuanphan said:

ript>

@tuanphan Hi! I added it the the footer. The social share buttons move to under the cart button right but also the other external widget has been moved. Can I leave the comment widget in its original position?

22 hours ago, Claireacomdata said:

@tuanphan Hi! I added it the the footer. The social share buttons move to under the cart button right but also the other external widget has been moved. Can I leave the comment widget in its original position?

 

I don't see comment. https://humbeeshop.squarespace.com/shop/hand-sanitizer-disinfectant-gel-169oz50ml-packs-of-61224?_ga=2.141743986.1333366646.1591589659-65295305.1590669611

Can you share link to page in screenshot?

@tuanphan

Here's the screenshot, is that what you need? (you can see the comments section is right below the social share buttons)

Can you share link to product in screenshot?

@tuanphan Sorry, not very sure what do you mean link to product in screenshot 😞 

Can you share link to Hand Sanitizier product?

@tuanphan
It's the same link like above: https://humbeeshop.squarespace.com/shop/hand-sanitizer-disinfectant-gel-169oz50ml-packs-of-61224
PW: 2020

Right under the social share buttons, there is a comments section from the external widget of POWr, which I want to leave them in its original position (bottom of the page).

10 hours ago, Claireacomdata said:

@tuanphan
It's the same link like above: https://humbeeshop.squarespace.com/shop/hand-sanitizer-disinfectant-gel-169oz50ml-packs-of-61224
PW: 2020

Right under the social share buttons, there is a comments section from the external widget of POWr, which I want to leave them in its original position (bottom of the page).

Remove above code & try this

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('.ProductItem-details .ProductItem-details-checkout').append($('section.ProductItem-additional .code-block:first-child'));
	});
</script>

I have a similar thing I need done.  I have followed the steps outlined above with no success.  Can you please help me achieve a similar task?

On 10/7/2020 at 8:18 AM, beeschahh said:

I have a similar thing I need done.  I have followed the steps outlined above with no success.  Can you please help me achieve a similar task?

Can you share link to product in screenshot? We can check easier.

Hello, yes! 

https://www.facialglo.co/our-collection/golden-glo

Is this what you need?

On 10/10/2020 at 5:15 AM, beeschahh said:

Hello, yes! 

https://www.facialglo.co/our-collection/golden-glo

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
 jQuery(document).ready(function($) { 
	$('section.ProductItem-additional .code-block').insertAfter(".sqs-add-to-cart-button-wrapper"); 
 }); 
 </script>

Thank you, It moved it to the right, However it is above the title of the product instead of below the add to cart button...

Keep above code & add this to Code Injection Header

<style>
  section.ProductItem-details .code-block {
    order: 8;
}
</style>

That worked perfect! thank you!  How can I donate some money to you?

I'm trying to also add an icon to just above the add to cart button. What bit do replace in the above code with the image url? website is gonerogueldn.com

20 hours ago, AliceWritesCopy said:

I'm trying to also add an icon to just above the add to cart button. What bit do replace in the above code with the image url? website is gonerogueldn.com

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
 jQuery(document).ready(function($) { 
	$('<img src="https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg" width="50px"/>').insertAfter(".sqs-add-to-cart-button-wrapper"); 
 }); 
 </script>