Adding an image to product description

Site URL: https://piece-collectors.squarespace.com/

Hello,

I'm using the Brine template and wondering if it's possible to add an image to the Product Description? I know that it's possible to do so in Additional Info but I'm wanting it to be in the actual item description.

Site Password: CACTUS

Thanks,

Emily

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?

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

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

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 🙂

Hello Paul

It's working! Thank you so much. Any way I can have the image above some text?

Thank you very much
Alice

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

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.

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

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

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

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

By the way, this is where I have created the new thread:

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:

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;
}

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 🙂

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.

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?

Hi there,

I was able to successfully insert one of the my icons. I want to insert up to 4 in total. However, I am noticing that when I go to view the icon I did insert on mobile, it disappears. Does anyone know why this is and how to fix??

3 hours ago, marg_222 said:

I am noticing that when I go to view the icon I did insert on mobile, it disappears.

It's difficult to comment on your situation because we haven't seen your site and don't know know what you want to achieve.

I recommend that to ask a new question because long threads become difficult to follow. Don't forget to include a working link to the page on your site. If your site isn't live yet, we will only be able to view it if you set a site password and tell us what it is. 🙂
 

Hi Paul,

Here is the link for the site I am referring to. I want to be able to match how the icons look on the desktop with how they look on mobile or at least get them to appear. Does it have something to do with the mobile breakpoint?

https://may11hairoil.com/

Here is a specific product page for example: https://www.may11hairoil.com/shop-all-products/60ml

Any help would be much appreciated! And thanks for the rec, I am new to these forums.

Best,

Margot

15 hours ago, marg_222 said:

I want to be able to match how the icons look on the desktop with how they look on mobile or at least get them to appear.

If you'd used the CSS that I provided in this thread, it should have worked, but I see that you (or someone) has added a media query to your CSS. This deliberately restricts the icons so that they only appear when the width is larger than 640px. 

@media screen and (min-width: 640px) {
  .tag-rho-icons....

On 9/4/2020 at 9:00 AM, paul2009 said:

If you'd used the CSS that I provided in this thread, it should have worked, but I see that you (or someone) has added a media query to your CSS. This deliberately restricts the icons so that they only appear when the width is larger than 640px. 

@media screen and (min-width: 640px) {
  .tag-rho-icons....

 

I put the code on the website so I could show two different versions of the same image on the homepage. One cropped for the phone and the other for the computer. Is it possible to use the above code to specifically make the icons appear on mobile too?

Hi Paul,

I am newer to custom css and media queries. How do you use the above code to show the icons on mobile while also being able to have two different images used for the desktop and mobile on the website's homepage?

Would really appreciate your help!

Is there a way to centre this. I have added the code and the image shows great in my product description however my text alignment is centre and the coded image is to the left.