Adding an image to product description

4 hours ago, Shanty said:

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.

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

Hi! I made this work, I was wondering if it's possible to locate the image below the add to cart button?

https://pomegranate-cyan-dyz8.squarespace.com/souvenir-shop/p/beck-jewels-x-htel-weekend-a-bigger-splash-choker password: hotelweekend

Thank you!

On 11/26/2020 at 1:08 AM, nataliaswarz said:

Hi! I made this work, I was wondering if it's possible to locate the image below the add to cart button?

https://pomegranate-cyan-dyz8.squarespace.com/souvenir-shop/p/beck-jewels-x-htel-weekend-a-bigger-splash-choker password: hotelweekend

 

Thank you!

The url doesn't exist. Can you check again?

Hi, I would like to add multiple icons below the product description. When I add the second icon it replaces the first, I'd like them to show side by side. For some products I may need to add up to 4 icons.

Link: https://www.cultivatemarkets.com/shop/swedish-dish-towel-set-of-two

Password: test

I appreciate any help!!

2 hours ago, Samantha674 said:

Hi, I would like to add multiple icons below the product description. When I add the second icon it replaces the first, I'd like them to show side by side. For some products I may need to add up to 4 icons.

Link: https://www.cultivatemarkets.com/shop/swedish-dish-towel-set-of-two

Password: test

I appreciate any help!!

Add 3 icons in Additional Info (you can use Image Blocks, Markdown Block or Code Block), then share url again. We will give the JavaScript code to move them under materials/specs/care

11 hours ago, tuanphan said:

Add 3 icons in Additional Info (you can use Image Blocks, Markdown Block or Code Block), then share url again. We will give the JavaScript code to move them under materials/specs/care

Here is the url with the icons added to the additional info section.

Link: https://www.cultivatemarkets.com/shop/swedish-dish-towel-set-of-two

Password: test

On 12/16/2020 at 3:59 AM, Samantha674 said:

Here is the url with the icons added to the additional info section.

Link: https://www.cultivatemarkets.com/shop/swedish-dish-towel-set-of-two

Password: test

Hi.

You want to use 3 icons on a product or all products? I can give simpler solution

16 hours ago, tuanphan said:

Hi.

You want to use 3 icons on a product or all products? I can give simpler solution

I would like to use up to 3 icons for each product. Each product will display a different combination of icons. For example: Product A displays icons for 'organic' and 'toxic-free', Product B displays icons for 'organic' and 'recyclable', and Product C displays icons for 'sustainable', 'locally made', and 'plastic-free'.

The solution needs to be simple for my client to implement, which is why I like the option to tag a product and have the corresponding icon appear.

I look forward to hearing your solution! 

Link: https://www.cultivatemarkets.com/shop/swedish-dish-towel-set-of-two

On 12/18/2020 at 9:40 AM, Samantha674 said:

I would like to use up to 3 icons for each product. Each product will display a different combination of icons. For example: Product A displays icons for 'organic' and 'toxic-free', Product B displays icons for 'organic' and 'recyclable', and Product C displays icons for 'sustainable', 'locally made', and 'plastic-free'.

The solution needs to be simple for my client to implement, which is why I like the option to tag a product and have the corresponding icon appear.

I look forward to hearing your solution! 

Link: https://www.cultivatemarkets.com/shop/swedish-dish-towel-set-of-two

Hi.

Add 3 icons in Additional Info (you can use Image Blocks, Markdown Block or Code Block), then share url again. We will give the JavaScript code to move them under materials/specs/care

Just 1 code, it will work with all products that additional contain images block / markdown or Code Block.

test is incorrect password. 

On 12/19/2020 at 3:53 AM, tuanphan said:

Hi.

Add 3 icons in Additional Info (you can use Image Blocks, Markdown Block or Code Block), then share url again. We will give the JavaScript code to move them under materials/specs/care

Just 1 code, it will work with all products that additional contain images block / markdown or Code Block.

test is incorrect password. 

I've decided to move forward with a different solution. I would like to have the option to include more under the additional info without it moving up into the product description area. Thanks for your help!

Hello! I'm wondering if it's possible to embed a video (from youtube) in the actual product description?

@brookeleawood

You can add a video in additional info.

If you need to move it somewhere else on the page then some Javascript would need to be written to that.

Hi there, this might be a bit old but I'm using squarespace 7.1 template. What would be the CSS code to have an image appearing under the add to cart button. on the product page? This image will be the same on all product pages on the site.

Thanks in advance

Julien

6 hours ago, JulienChroma said:

What would be the CSS code to have an image appearing under the add to cart button. on the product page? This image will be the same on all product pages on the site.

Please post the URL for a store page on your site where we can see your issue. In addition can you provide us with the URL for the image you want to use or a page where the image located?

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

On 2/17/2020 at 2:08 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

I know the question above might be old. But on base of the code above, is it possible/how to add clickthrough link to the image added in the product description? Thank you very much in advance.

On 9/4/2022 at 12:05 PM, podcamper said:

I know the question above might be old. But on base of the code above, is it possible/how to add clickthrough link to the image added in the product description? Thank you very much in advance.

Yes. Possible. Same image for all products or some specific product or different for each product?

Is it possible to center image under the description? On wider screens the image tends to align along the left hand side. 

My website is www.pinnaclephoto.com. 

Here is a more specific link. https://www.pinnaclephoto.com/store/p/hire-videographer

What would be a solution for this in the CSS code? 

Thank you!

On 2/16/2020 at 10: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, are you familiar with how to center the images under the description? I'm seeing that on larger (wider) screens the image floats to the left side of the block. I'd like to center mine directly under the product description. 

On 7/8/2023 at 1:36 AM, jonhambacker said:

Hi Paul, are you familiar with how to center the images under the description? I'm seeing that on larger (wider) screens the image floats to the left side of the block. I'd like to center mine directly under the product description. 

It looks fine to me