Openfoodnetwork: Move 'Powered by OFN' from Header to Footer of Embedded Shopfront

[kirstenalarsen]

[update by Myriam]

The need / problem

• as a hub manager embedding my shopfront / group into my own website I want my users to be able to navigate the shop / group and not be confused about the fact that they are on my website. My brand need to be clearly visible.
• as an OFN instance manager I want users who embed shops in their website to give recognition for the work done by the OFN community and give attribution.

On shopfronts here is how it displays:

When I browse I still see the "powered by OFN" logo on the top left corner, which is pretty predominent on the page. OFN is visible all the time, instead of being some discrete footer "powered by" thing. The image balance is not quite right, it should be more about "the food enterprise" and less about OFN.

On mobile it doesn't display really good but embedded shopfront can't really be analyzed on mobile as the feature is not yet adapted on mobile. But we need to keep that in mind in the solution we choose.

So the need is to make "Powered by Open Food Network" more discreet in embedded shopfronts so that it doesn't compete with the food hub brand.

Expected behavior / solution to implement

The "Powered by Open Food Network" mention is located at the bottom left of the shop (not the page!)
When shop is open:

When the shop is closed:

Technical consideration

We don't need that "Powered by Open Food Network" footer on the main OFN websites, only if the shop is embedded. So it should be built as a separate "line/footer" that is only added if the shop is embedded. If that is possible of course...

Reminder of the possible solution discussed

In that sense let's consider the options:
1- The cog. The problem is that most shoppers on embedded shopfronts might never use the cog, especially if they buy as guest and never log in, so I wouldn't consider that option.
2- Bellow the "buy now" button.
2.0 Below "add to cart"

2.1 Bottom left of the shop (not the page)

When the shop is closed:

2.2 Bottom left of the page

When the shop is closed:

3- Below the ready for selector

4- Below the search bar

Explanation of our decision

2 seems the more adapted option. 2.1 is more like it's part of the shop, 2.2 is more like it's part of the website. So we finally decided to go for option 2.1.

[LonghornRach]

I can do this if still available?

[myriamboure]

Hi @LonghornRach ! Yes it is available, welcome to the OFN community ! @kirstenalarsen what do you mean by "place under shop listing" ? In your example where exactly do you want it to be? I don't understand so I thought it might not be clear for Rachel either... ;-)

[LonghornRach]

My interpretation would be that the line would be under the (cropped off) red box? Also, is this just for a demo shop? Because I'm not seeing the line at all in any of the shops when casually browsing the site.

[kirstenalarsen]

demo embedded shopfront to play with - aus instance embedded in global wordpress

https://openfoodnetwork.org/user-guide/advanced-features/demo-embedded-shop/

[myriamboure]

Again, I'm sorry but we need to understand the problem, you are jumping to solution too quickly so we don't know what solution fits the need !
In the original #1783 issue the bug is formulated as " The 'powered by OFN logo' isn't always shown clearly, sometimes falling off the bottom of the page." so @sigmundpetersen it was on group and apparently has been fixed, I'm gonna comment there, but not related.

I try to share what I understand:

• as a hub manager embedding my shopfront / group into my own website I want my users to be able to navigate the shop / group and not be confused about the fact that they are on my website. My brand need to be clearly visible.
• as an OFN instance manager I want users who embed shops in their website to give recognition for the work done by the OFN community and give attribution.

On shopfronts here is how it displays:

When I browse I still see the "powered by OFN" logo on the top left corner, which is pretty predominent on the page. OFN is visible all the time, instead of being some discrete footer "powered by" thing. The image balance is not quite right, it should be more about "the food enterprise" and less about OFN.

On mobile it doesn't display really good but embedded shopfront can't really be analyzed on mobile as the feature is not yet adapted on mobile. But we need to keep that in mind in the solution we choose.

So the need is to make "Powered by Open Food Network" more discreet in embedded shopfronts so that it doesn't compete with the food hub brand.

In that sense let's consider the options:
1- The cog. The problem is that most shoppers on embedded shopfronts might never use the cog, especially if they buy as guest and never log in, so I wouldn't consider that option.
2- Bellow the "buy now" button. It could look like:

which seems indeed much more discreed and kind of force any buyer to see this is powered by OFN, so it might be a good option
3- Below the ready for selector

4- Below the search bar

My preference goes for option 2.

One question I have: this should only display in embedded shopfront. Can we integrate that within the shopfront but only when the shopfront is embedded? Else I think we need to do is some other way, like if a shopfront is embedded, in the embed a footer of the shopfront should be added, like a blank line with the "Powered by OFN" logo and text on the bottom right. Like the option 2 image, but it shouldn't be done within the shopfront. Is that clear and do you agree?

Thanks for confirmation @kirstenalarsen @sauloperez. If we all agree on that then @LonghornRach you will be able to start, sorry if that issue was not clearly specified ;-) If you want another one meanwhile I'm happy to recommend you some :-)

[kirstenalarsen]

Thanks @myriamboure - beautiful work as always

I think option 2, possibly on the left of page rather than under the actual button, but not too concerned. Agree that perhaps doing it in a footer is good, but that’s more technical than I understand i.e. whether that is required to have it in embedded only

On 17 Oct 2018, at 4:18 AM, Myriam [e-mail] wrote:

Again, I'm sorry but we need to understand the problem, you are jumping to solution too quickly so we don't know what solution fits the need !
In the original #1783 https://github.com/openfoodfoundation/openfoodnetwork/issues/1783 issue the bug is formulated as " The 'powered by OFN logo' isn't always shown clearly, sometimes falling off the bottom of the page." so @sigmundpetersen https://github.com/sigmundpetersen it was on group and apparently has been fixed, I'm gonna comment there, but not related.

I try to share what I understand:

as a hub manager embedding my shopfront / group into my own website I want my users to be able to navigate the shop / group and not be confused about the fact that they are on my website. My brand need to be clearly visible.
as an OFN instance manager I want users who embed shops in their website to give recognition for the work done by the OFN community and give attribution.
On shopfronts here is how it displays:
https://user-images.githubusercontent.com/8135376/47033820-0e3c9e80-d176-11e8-8328-6e709dd052b1.png
When I browse I still see the "powered by OFN" logo on the top left corner, which is pretty predominent on the page. OFN is visible all the time, instead of being some discrete footer "powered by" thing. The image balance is not quite right, it should be more about "the food enterprise" and less about OFN.

On mobile it doesn't display really good but embedded shopfront can't really be analyzed on mobile as the feature is not yet adapted on mobile. But we need to keep that in mind in the solution we choose.

So the need is to make "Powered by Open Food Network" more discreet in embedded shopfronts so that it doesn't compete with the food hub brand.

In that sense let's consider the options:
1- The cog. The problem is that most shoppers on embedded shopfronts might never use the cog, especially if they buy as guest and never log in, so I wouldn't consider that option.
2- Bellow the "buy now" button. It could look like:
https://user-images.githubusercontent.com/8135376/47034162-db46da80-d176-11e8-9264-44f1e8f3dcbe.png
which seems indeed much more discreed and kind of force any buyer to see this is powered by OFN, so it might be a good option
3- Below the ready for selector
https://user-images.githubusercontent.com/8135376/47034391-88215780-d177-11e8-8e5a-901d6cf56af2.png
4- Below the search bar
https://user-images.githubusercontent.com/8135376/47034400-8c4d7500-d177-11e8-80a9-9626bd6966c2.png
My preference goes for option 2.

One question I have: this should only display in embedded shopfront. Can we integrate that within the shopfront but only when the shopfront is embedded? Else I think we need to do is some other way, like if a shopfront is embedded, in the embed a footer of the shopfront should be added, like a blank line with the "Powered by OFN" logo and text on the bottom right. Like the option 2 image, but it shouldn't be done within the shopfront. Is that clear and do you agree?

Thanks for confirmation @kirstenalarsen https://github.com/kirstenalarsen @sauloperez https://github.com/sauloperez. If we all agree on that then @LonghornRach https://github.com/LonghornRach you will be able to start, sorry if that issue was not clearly specified ;-) If you want another one meanwhile I'm happy to recommend you some :-)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/openfoodfoundation/openfoodnetwork/issues/2745#issuecomment-430322246, or mute the thread https://github.com/notifications/unsubscribe-auth/ACxryFMYv12rb_RIhr2BZmhxP6DrgjgMks5ulhTdgaJpZM4WvM6S.

[sigmundpetersen]

I vote for option 2 bottom left as Kirsten says

[myriamboure]

Ok so let's be more precise:

2.1 Bottom left of the shop (not the page)

When the shop is closed:

2.2 Bottom left of the page

When the shop is closed:

I think 2.2 looks better, and will be responsive anyway for when consulted on mobile so let's put it bottom left.

About footer or not, if not embedded the shop is within the OFN website and logo is the OFN one on the top left corner, so I would vote not to add it again at the bottom of the page, so would vote to put it in a footer only for embedded shops. But if it's hard technically open to discuss again.

I think we are good ! If any objection please raise your voice NOW ! Else @LonghornRach I propose you to move forward with the decision we just took :-) Thanks for your patience !

[myriamboure]

Do you agree @kirstenalarsen @sigmundpetersen ? Maybe I was too quick and maybe you want to raise your voice about 2.1 or 2.2 ;-) I do have some hesitation still so maybe you can tell ;-) 2.1 is more like it's part of the shop, 2.2 is more like it's part of the website... what do you think?

[kirstenalarsen]

not fussed - 2.1 or 2.2 are great. thanks @myriamboure :)

[sigmundpetersen]

2.1 is more like it's part of the shop, 2.2 is more like it's part of the website...

As it is the embedded shop that is 'Powered by OFN' and not the external website, I would say 2.1 🙂

[RachL]

@myriamboure I agree with @sigmundpetersen :) And I don't understand even how 2.2 is technically possible. But let's not dig into that ;)

[myriamboure]

Ok, then let's go for 2.1. @LonghornRach I will review now the main thread and clean a bit that page, so that you see clearly what we want to do. Thanks in advance if you can help on that one !!!

[LonghornRach]

2.1 it is!

[LonghornRach]

ok i feel a little silly but i'm completely overwhelmed by this site! I was able to find the style sheet but not where the 'powered by' element is actually rendered. probably better for someone else to take this on 😕

[Matt-Yorkley]

@LonghornRach it's overwhelming for everyone at first, don't feel silly :)

[myriamboure]

@LonghornRach if you want to give it a real try and dive into it please join our Slack and ask some support to the devs in #dev channel there ! We know it can definitely be overwhelming at first sight, but afterward it is so much joy to be part of this beautiful community :-) https://openfoodnetwork.slack.com/join/shared_invite/enQtMzU2Mjk5MDc2MjA5LTM4ZTAzZjIwNzIxMmU5ODFiNWY1MTU2ZWUyNzQwNjdjNTY0N2VhY2UwOGU4ZmVjNzYyZDU2NjY3NzZkZmQwYjk hope to see you there soon !

[LonghornRach]

I will definitely keep at this!

[daniellemoorhead]

Hey @LonghornRach we are very happy to have you here! No such thing as a stupid question 😄

Our codebase is going through a bit of a transformation, lots of removing legacy code and upgrading dependencies, and just making it a whole lot better to work with. So it's not you, it's us 😆

Stick around, get a feel, join slack, ask questions whenever you need to. You're very welcome!

[mkllnk]

@kirstenalarsen Can this be closed since we are retiring embedded shopfronts?