Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
emily.klein

Adding an image to product description

Recommended Posts

44 minutes ago, emily.klein said:

I'm using the Brine template and wondering if it's possible to add an image to the Product Description?

Yes, it’s possible 🙂

Can you share more information about the what and why? For example, do you want to add a different image to every product? Is it a photo or icons, such as washing care symbols? Can you provide an example or mockup?

 


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
6 minutes ago, paul2009 said:

Yes, it’s possible 🙂

Can you share more information about the what and why? For example, do you want to add a different image to every product? Is it a photo or icons, such as washing care symbols? Can you provide an example or mockup?

 

Hi @paul2009

Yes, I want to add icons - I've attached a mock-up to give you an idea.

Thanks,

Emily

ss-image-in-product-description.jpg

Share this post


Link to post

From what you've said, I imagine you want to add one of three images, depending on whether the product is "Our Design", "Their Design" or "Designed Together"? If that's the case you can use some Custom CSS to insert the image when the product has been tagged accordingly.

As an example, add the following to Custom CSS:

.tag-our-design .ProductItem-details-excerpt:after {
  display: block;
  content: "";
  height: 70px;
  margin-top: 34px;
  background: url('https://images.squarespace-cdn.com/content/v1/5ccddebe01232c130192285b/1579074857871-U5MIZU7NR3Z59UDYL28X/ke17ZwdGBToddI8pDm48kJ6-92ZYMJyrVVmd-zdJkg8UqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2dqkcHALc6hkUyAp1LlIHCDsU9ryXIIWQqlJZ-pEUzNdZCjLISwBs8eEdxAxTptZAUg/transparency-our-design.png?format=1000w');
  background-size: contain;
  background-repeat: no-repeat;
}

Then add a tag called "our-design" to one of the products. The image should then appear just below the product description, like this:

1005990346_Screenshot2020-02-16at15_34_55.thumb.png.b4e9d09f8cbd18ba7c373a706e260aeb.png

You can repeat this for the other two 'icons', changing the url of the image and the name of the tag.

I hope this helps.

-Paul


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Hello Paul

Your reply is very useful as I'm looking for doing the same thing as Emily on my client's site.

I have a copied and pasted the code, added the URL of the image and the tag but it doesn't work sadly.

Here is the link to the page: https://www.kerra.fr/boutique/tinzaline

I'm trying to get the image and text block "La collaboration" under "Les coulisses" in the product description instead of at the bottom of the page as it currently is.

Many thanks in advance for your help,

Best
Alice

Screenshot 2020-02-23 at 16.17.46.png

Screenshot 2020-02-23 at 16.17.37.png

Share this post


Link to post

Hello Alice @aliceb012

I haven't looked at your post in detail yet, but if your tag is 'collab' then the CSS should be ".tag-collab" not ".collab" because tag classes are automatically prefixed with "tag-".

Please try changing the CSS and post back 🙂

Edited by paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Hi Paul, 

I am also looking to add an icon -inside a text block- but it has been made from Illustrator and I don't have an url. 

Do you know how I could insert it? 

Thanks in advance, 

Clara

Share this post


Link to post
8 hours ago, Claraclara said:

I don't have an url

Save the icon in a supported image format (.jpg, .png, .gif - but preferably .png) and then use the file upload option within Custom CSS. For more information, see: Using the CSS Editor. Once you have uploaded the image, you can follow the steps above.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Hi Paul, 

Thank you very much for your answer! I actually didnt know that once you upload an image in the Custom CSS it gives you an url, I am a genuine beginner! 

I am still struggling though to add my icon. My goal is slightly different than Alice and Emily as I would like to place the icon in the grey text block (right under the product image) and on the same line and before the header "EXTRA CARE". https://bronze-helix-da9r.squarespace.com/config/design/custom-css

Many thanks again, 

Clara

 

 

Share this post


Link to post

Hi Paul,

Along the same lines, I would like to add a third badge that would look like the "Sale" and "Sold out" badges, saying "Pre-order". I don't believe this feature exists yet, so I think a workaround would be to add the badge as an image to display over the top of the product image both when in the groups of products and the individual product page.  Could this be done with CSS and uploading an image of the badge? This is the website: https://theartisanstudio.uk/

Thank you in advance!

Juliette

Share this post


Link to post

Hi Juliette

You may want to start a new question/thread for this, as it's slightly different to the thread above.

There's not a built in feature to do what you need, but it can be built with some JavaScript code. Assuming that you want customers to be able to pay for preorders rather than just put their name on a waiting list, the way that I'd usually do this is to add a 'preorder' tag to the product(s). The JavaScript will add a badge to products tagged 'preorder' that is styled to match SALE and SOLD OUT badges. You shouldn't need an image.

-Paul


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Hi Paul,

I'm so sorry - no idea why but I didn't receive an alert about your reply. Thank you so much.

What you say sounds fantastic and is exactly what I want to do. I just want the badge to appear on certain products I choose, not site-wide like the limited availability (which I can't control selectively).

If I understand correctly, you would like me to create a new thread for this?

Best wishes

Juliette

Share this post


Link to post
Posted (edited)
On 2/16/2020 at 9:38 AM, paul2009 said:

From what you've said, I imagine you want to add one of three images, depending on whether the product is "Our Design", "Their Design" or "Designed Together"? If that's the case you can use some Custom CSS to insert the image when the product has been tagged accordingly.

As an example, add the following to Custom CSS:


.tag-our-design .ProductItem-details-excerpt:after {
  display: block;
  content: "";
  height: 70px;
  margin-top: 34px;
  background: url('https://images.squarespace-cdn.com/content/v1/5ccddebe01232c130192285b/1579074857871-U5MIZU7NR3Z59UDYL28X/ke17ZwdGBToddI8pDm48kJ6-92ZYMJyrVVmd-zdJkg8UqsxRUqqbr1mOJYKfIPR7LoDQ9mXPOjoJoqy81S2I8N_N4V1vUb5AoIIIbLZhVYy7Mythp_T-mtop-vrsUOmeInPi9iDjx9w8K4ZfjXt2dqkcHALc6hkUyAp1LlIHCDsU9ryXIIWQqlJZ-pEUzNdZCjLISwBs8eEdxAxTptZAUg/transparency-our-design.png?format=1000w');
  background-size: contain;
  background-repeat: no-repeat;
}

Then add a tag called "our-design" to one of the products. The image should then appear just below the product description, like this:

1005990346_Screenshot2020-02-16at15_34_55.thumb.png.b4e9d09f8cbd18ba7c373a706e260aeb.png

You can repeat this for the other two 'icons', changing the url of the image and the name of the tag.

I hope this helps.

-Paul

Hi Paul,

Thank you for your code. I tried it and it worked for the first image. When I add the code a second time and use another image it replaces the first one. It does not show it on the side. The first one does not show at all. Below is what I added in custom CSS. How can I get to display the images side by side. Thank you very much for your help. Vivian

/* add image to product item */
.tag-low-carb .ProductItem-details-excerpt:after {
  display: block;
  content: "";
  height: 40px;
  margin-top: 1px;
  margin-left: 1px;
  background: url(https://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c376a364a75fff306ba2/1592968054159/Low+Carb.JPGhttps://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c376a364a75fff306ba2/1592968054159/Low+Carb.JPG);
  background-size: contain;
  background-repeat: no-repeat;
}
.tag-gluten-free .ProductItem-details-excerpt:after {
  display: block;
  content: "";
  height: 40px;
  margin-top: 1px;
  margin-left: 100px;
  background: url(https://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c41a2b1e9a74dc9155d8/1592968218994/Gluten+Free.JPGhttps://static1.squarespace.com/static/5edfe6229a31511d0d685cad/t/5ef2c41a2b1e9a74dc9155d8/1592968218994/Gluten+Free.JPG);
  background-size: contain;
  background-repeat: no-repeat;
}

 

Edited by Vivian

Share this post


Link to post
3 hours ago, Vivian said:

I tried it and it worked for the first image. When I add the code a second time and use another image it replaces the first one.

This is how this solution was designed to work. The author of the question wanted just one image (out of a possible three) to be shown.

If your requirements differ, you will require another solution. It’s difficult to say what this solution might be without knowing more information, including (as we always say) a working link to the site 🙂


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDatepicker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post

Thank you Paul for your response. 

I have attached the picture of an item in the store which shows the price, description and, under description has 3 images that describes dietary information about the food item (this is only an example). The food item could have one, two, three or more of these dietary logos depending on the food. This is what I am trying to do, to be able to show more than one image (dietary logo) under product description on a product Detail. Is it possible?

site URL: https://www.theflavorcorner.com/

password: trialsite

Thank you for your help. Vivian.

example2.JPG

Share this post


Link to post
On 6/25/2020 at 12:28 AM, Vivian said:

Thank you Paul for your response. 

I have attached the picture of an item in the store which shows the price, description and, under description has 3 images that describes dietary information about the food item (this is only an example). The food item could have one, two, three or more of these dietary logos depending on the food. This is what I am trying to do, to be able to show more than one image (dietary logo) under product description on a product Detail. Is it possible?

site URL: https://www.theflavorcorner.com/

password: trialsite

Thank you for your help. Vivian.

Hi. This is possible. I did for a member on forum.

Can you check the password?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...