Trying to add Fotomoto Shopping Cart

Question
1

Hi all,

Our little company launched our website with Sparkle. What an amazing tool for newbies to web development. But I need a bit of advise.

I’m trying to add a Fotomoto (https://www.fotomoto.com/) shopping cart onto our website. But I have a problem, the shopping cart does not show in preview.

These are the steps I’ve taken after going through Sparkle’s and Fotomoto’s help and documentation, as well as this community’s advise.

  1. Installed SSL certificate

  2. redirected http://neotropicbirdproject.com/ to https://neotropicbirdproject.com/ via my hosting company’s cPanel (thanks to all on the community for these first 2 tips)

  3. in Sparkle settings, changed the website address to https://www.neotropicbirdproject.com

  4. embedded the shopping cart script from Fotomoto. Their instruction is :

Please copy the following code to the bottom of your website or blog template, just before the tag:

and the script is:

<script type="text/javascript" src="//widget.fotomoto.com/stores/script/c3dfa6bb14221d78e8bdda9b3682487e47cd748b.js"></script>

<noscript>If Javascript is disabled in your browser, to place orders please visit the page where I <a href=' https://my.fotomoto.com/store/c3dfa6bb14221d78e8bdda9b3682487e47cd748b'>sell my photos</a>, powered by <a href='https://my.fotomoto.com'>Fotomoto</a>.</noscript>

Not knowing where the tag is, I did the EMBED CONTENT on an additional last page of the site, hoping to cover all images before this page. I even added a couple of images (.png and .jpg) as test images along with all the other images on our site.

But the shopping cart does not show in preview. What did I miss?

Any advice would be greatly appreciated.

2

I have a hunch that this isn’t going to work in a sparkle built site. The reason being that the Fotomoto script appears to automatically add buy buttons under images in your page. To accommodate that, the page would have to be able to expand so it can accommodate the buy buttons. Because Sparkle uses fixed positioning for page elements, it may not be able to accommodate this script. I could be wrong.

The other thing is that Fotomoto appears to want to index your site for the images. If this is the case, your site would have to be online before the app could grab your images. Have you put he site on a web server yet? that may be the first thing you will have to do. If you put the site on line, you should be able to visit your site to activate the script. this appears to be the process that adds images to your Fotomoto store. IF you can get that bit to happen (with the help of Fotomoto), you can then address the issue of the Buy buttons. If these cannot be added to your web page automatically, there may be an option to manually add these buttons in your project file - you will have to ask Fotomoto about this option.

So, my best advice is to prepare your galleries in your pages and add the code through the code widget. Publish your site and then visit it online to see if anything has been added to the page. If not, check in your Fotomoto dashboard to see if the images have been indexed. If they have, you will know the code is working. If they haven’t, you may have to contact Fotomoto with details of your published galleries and let them take a look. They should then be able to offer advice based on your actual published page.

3

@NeotropicCarey, Just to add to what @francbrowne has said…

When placing your shopping cart script into Sparkle via an embed element you will notice (right hand panel) below the script input container the tickbox saying “Content expands vertically”. Tick it and also below that untick “Activate after consent” and see how you go.

Overall is looks just as simple as Ecwid and Shopify to install which I have working nicely! :slight_smile:

4

Hello greenskin,

thanks for the followup. It was your posts that gave me great advise and hope I could get fotomoto’s widget working.

I’ve tried both of your suggestions but to no avail.

I’m not a web developer, but do have a background in coding (very old school) and logic is logic. Looking at fotomoto and sparkle’s documentation, it did not look like I could see the cart in Sparkle preview if it worked at all. I see that francbrowne has also mentioned something along those lines. Looks like my next steps.

thanks again.

5

Hello francbrowne,

Thank you very much for your advice.

I had a suspicion I could not see Fotmoto’s cart in preview (if at all) but too inexperienced to know for sure. I could not see how fotomoto would know about my site until it was published. Thanks for confirming that.

I will give your advice a try, I thought I would have to go that route.

I’m already in contact with fotomoto regarding this.

thanks again and I’ll report back.

6

@NeotropicCarey Please do let us know how it goes. Your experience and possible solution may be of help to others. Good luck!

7

@NeotropicCarey, Sorry to hear that.

For sure give @francbrowne input to your issue a go to see if it works - fingers-crossed!
Let us know how you go…

8

Hello all,

… especially to @francbrowne and @FlaminFig for their advice and suggestions.

Along with help from Fotomoto, it is working! Fotomoto had to tweak the CSS on my Fotomoto Store Settings. Derek from Fotomoto’s Help said “You shouldn’t have to learn CSS to use Fotomoto; note that these little incompatibilities are the things we’d discover in the process of vetting a new partner service, and obviously we haven’t gone through that on a Sparkle site yet, but it does look like all is working nicely now.” He was very helpful and addressed all my questions very quickly… on a weekend too… just like Duncan.:wink:

If you do know CSS, you can further customize Fotomoto’s cart to match your site. Me, I’ll stick with the default :blush:.

Here were the steps taken:

  1. sign up with Fotomoto and set up my store
  2. install SSL certificate via my hosting company, A2 Hosting and redirect the http: to https: domain name via the hosting company’s cPanel
  3. in Sparkle settings, changed the website address to https:domain name
  4. in Sparkle, added a page at the end with a couple of test jpg images sized bigger than the min size set in the Fotomoto store settings. Embedded Fotomoto’s shopping cart script below the test images. Check Content expands vertically and uncheck Activate after consent.
  5. Publish site.

I still have lots of work to do such as making sure this works on all devices, but what a great start with everyone’s help.

I can’t give you the link to the “published page” as prices, print sizes etc are not setup yet. But here is screen shot

Screenshot 2020-07-12 at 15.16.07
Screenshot 2020-07-12 at 15.16.072640×1502 479 KB

Fotomoto is partnered with BayPhoto who produces beautiful prints of our bird paintings for clients. They are very happy with the service and print quality, especially the metal prints. Now Fotomoto is set up to work on Sparkle sites.

1 Like
9

Great news !! I’m happy you got it sorted. Hopefully Fotomoto will include Sparkle on their list of supported platforms.

10

Hey @NeotropicCarey great to hear, and thank you for the in-depth solution to how you got it to work! :slight_smile:

11

Hello all,

An update on adding Fotomoto shopping cart to your site.

After posting the how-to steps above, I hit a snag, but with help from Derek at Fotomoto’s Customer Support, problem solved. The issue was on a page longer than the screen size with images for sale throughout, not all the images showed a BUY button. And every time I refreshed the page different images would have the BUY button and the ones that did before no long showed it.

The solution lays in Sparkle; de-select the LOAD WHEN VISIBLE option for each image you want the BUY button. This may not be an issue for shoppers with fast internet speed, but I’m in a rural/residential area where the internet evening rush hour is worsened by stay at home students and people not going out to socialize during the pandemic.

So I thought an update the step by step is needed:

  1. sign up with Fotomoto and set up store
  2. install SSL certificate via hosting company, A2 Hosting and redirect the http: to https: domain name via the hosting company’s cPanel
  3. in Sparkle settings, change the website address to https:domain name
  4. in Sparkle, add pages with images for sale. Make sure each image is larger than the min size set in the Fotomoto store settings and de-select LOAD WHEN VISIBLE. Embed Fotomoto’s shopping cart script at the bottom of each of these pages. Check CONTENT EXPANDS VERTICALLY and uncheck ACTIVATE AFTER CONSENT.
  5. Publish site. The Fotomoto shopping cart will not show in preview.

I want to add that the customer support from Fotomoto is excellent; quick, knowledgeable and encouraging.

12

hi all,

just a wee update for this thread.

Since my last post on it, I have upgraded to Sparkle 3.0.6 and MAC OS Big Sur and made a few cosmetic changes to my website. One consequence was my Fotomoto BUY buttons went ahoo. A quick note to Fotomoto support got a quick fix.

I just wanted to give a shoutout to Derek at fotomoto support, Thx!