[Share] Add Icons under Product Description

To add Icons under Product Description, you can follow these steps.

#1. First, edit Product > Additional Info

#2. Add a Gallery Block

#3. Upload your desired icons

#4. You can click Gear icon if you want to add text under icon

Then enter text in Title box

#5. Next, choose Grid/Show Title to make text appear under icon

#6. Use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .gallery-block').appendTo('div.ProductItem-details-excerpt');
});
</script>

#7. Result

Hi @tuanphan , after applying the code, it disappeared. Also, how do I make them show here instead of at the bottom? 

21 minutes ago, Pruthak said:

Hi @tuanphan , after applying the code, it disappeared. Also, how do I make them show here instead of at the bottom? 

Can you share link to a product?

https://veganic.squarespace.com/women/p/milk-dip-cup-92wf6-kysgm

same password

2 hours ago, Pruthak said:

https://veganic.squarespace.com/women/p/milk-dip-cup-92wf6-kysgm

same password

password incorrect

@tuanphan password: thankyou

Change #6 to this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .gallery-block').appendTo('div.ProductItem-details-excerpt-below-add-to-cart');
});
</script>

If it still doesn't work, you can remove both code, I can test code easier

hi @tuanphan this is how it appears on the desktop view and unable to see on mobile view. Is it possible to have text wrapped under the icon both for desktop and mobile. Thank you so much for your help. 

23 hours ago, Pruthak said:

hi @tuanphan this is how it appears on the desktop view and unable to see on mobile view. Is it possible to have text wrapped under the icon both for desktop and mobile. Thank you so much for your help. 

I think you are setting 9 items/row.

You can edit Gallery Block > Set show 3 or 4 items/row

thanks @tuanphan

With icons under Product Block

On 9/19/2024 at 4:54 AM, tuanphan said:

To add Icons under Product Description, you can follow these steps.

#1. First, edit Product > Additional Info

#2. Add a Gallery Block

#3. Upload your desired icons

#4. You can click Gear icon if you want to add text under icon

Then enter text in Title box

#5. Next, choose Grid/Show Title to make text appear under icon

#6. Use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .gallery-block').appendTo('div.ProductItem-details-excerpt');
});
</script>

#7. Result

Is there anyway to change the text color? 

Thank you!

7 minutes ago, AnnaRadzicki said:

Is there anyway to change the text color? 

Thank you!

 

Use this code under #6 code

<style>
  div.ProductItem-details-excerpt .gallery-block * {
  	color: #f1f !important;
  }
</style>

13 minutes ago, tuanphan said:

Use this code under #6 code

<style>
  div.ProductItem-details-excerpt .gallery-block * {
  	color: #f1f !important;
  }
</style>

 

I know this is a little bit different but I have tried almost everything to no avail. 

I am looking to have 4 icons in total with text below like the attached snippet. Each icon has an underlining hover effect, and when clicked on a light box pops up. Is anything like this possible ? 

URL: https://www.kalglo.com/

9 hours ago, AnnaRadzicki said:

I know this is a little bit different but I have tried almost everything to no avail. 

I am looking to have 4 icons in total with text below like the attached snippet. Each icon has an underlining hover effect, and when clicked on a light box pops up. Is anything like this possible ? 

 

URL: https://www.kalglo.com/

 

This will require additional plugin to create lightbox, if you have a budget, I will write new guide

With underline hover, you can share link to exact product in your screenshot, I will give you code

To add icon under Add to Cart button, follow #1 to #5

then with #6, use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .gallery-block').appendTo('.ProductItem .ProductItem-quantity-add-to-cart');
});
</script>

to add icon above Add to Cart button, change #6 to this code

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

To add icons under Product Title, you can use this code for #6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('section.ProductItem-additional .gallery-block').insertAfter('h1.ProductItem-details-title');
});
</script>
<style>
  h1.ProductItem-details-title+.gallery-block {
    order: 2;
}
</style>