Bugs

Images are not correct and sometimes cannot be found when sharing a page or product to a social network.

I'm not sure if this is an underlying problem with NopCommerce or not but I believe it can be easily solved with Meta tags disclosing which image(s) can be shared. As it stands, Facebook insists on using my site logo which should not be an option and never happened before you introduced the ability to change logos from the admin panel. Pinterest doesn't even grab an image from mobile & tablet browsers, which makes up nearly 75% of my customers. I fear that I'm losing a lot of word of mouth business because people cannot properly share my product images.

Is this something I am doing wrong, that NopCommerce needs to address or that you can resolve with meta tags in your themes? Any assistance is much appreciated! :-)

To be specific, I used the addthis sharing service on my NC3.1 site www.iowish.com from a Samsung Galaxy 3 and a Nexus 10 tablet, both using chrome and Firefox browsers.

Thanks for the suggestion. When I tried this, it appears to force the product image away in order to display the ribbon. Am I missing something or can you suggest a class definition that let's me add a ribbon in a corner without removing the product I image? Thanks

Hi Matt,

I didn't quite understand what your problem is.
Let me summarize: You are using Addthis service for sharing products from the product page (which I can't see at the moment on your web site) and it doesn't share images when you are sharing from specific tablets. Is that the problem or I am missing something?
What happens if you switch to the default theme and you try to use Addthis from the same tablets?
What I am trying to understand is if there is something wrong with the theme itself (which I doubt) or it is some Addthis/Facebook specific behavior.

Thanks

Please disregard that I mentioned addthis or mobile browsers, it really has nothing to do with them yet they pointed me to how bad the issue is. You'll see exactly what I mean if you try the following...

1) go to Facebook and insert this NC-based product link in a new post: http://iowish.com/kiss-me-im-iowish-t-shirt-bella-canvas (it takes a while to load page data, then it gives me 2 image choices of completely different products)
2) as a cross reference I'm testing a second site on woocommerce (WordPress) and it works flawlessly when I insert this link in a Facebook post: http://dublindees.com/shop/lets-get-ready-to-stumble-t-shirt/ (facebook loads the correct image immediately)

Doesn't matter what theme, device, computer or browser. Images from my nopcommerce site are not very social network friendly and I've noticed this to varying degrees since the admin panel changed the way site logos are applied to our theme. Not blaming the panel, but did anything else change as far as what images can be copied from the page when that was implemented?

Hi Matt,

That is interesting. But I don't see anything special in the other web site images. Both are simple img html tags. I really don't know how facebook decides which images to use when sharing a link. Probably they have some sort of algorithm for choosing the images.
Here is an interesting discussion on this matter.

Thanks

Color square alignment seems to drop underneath the attribute title on full width .CSS styling. Displays properly on all other screen widths. Here's an example link so you can see first hand: https://iowish.com/any-st-pattys-design-completely-customized

Thanks

Hi MattyLB!

Thank you for reporting this! We will fix it but I see you have made some modifications to the styles i.e the color square boxes are bigger. So I will tell what to chnage as it is very simple:
Find the theme css file Alicante/Content/css/styles.css

.attributes dd {
float: left;
max-width: 280px;
margin-bottom: 12px;
}

and

.color-squares li {
float: left;
margin: 0 10px 0 0;
}

change like this(lines in bold):

.attributes dd {
float: left;
max-width: 260px;
margin-bottom: 12px;
}

.color-squares li {
float: left;
margin: 0 7px 0 0;
}

That is all you need to do!

Thanks

Yes, deleting everything is not quite right. You need to leave this chunk of code:

.ribbon-wrapper {
    height: 100%;
}

Thanks!