Jump to content

Add icon ( Small logo ) item product description block

Recommended Posts

  • Replies 40
  • Views 3.9k
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.