Shop showing additional Products after log-in

Hey community!

I have a question regarding a clients project that wishes to have additional shop items after someone logged in. So the idea is to have ‘members only’ products in the shop. I hope this makes sense.

Happy about your ideas and knowledge!
Best,
Lisa

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Lisa,

This is not natively supported in Webflow ECommerce, and therefore this wouldn’t be fully “secure”. Someone with knowledge could see the “hidden” products if they really wanted to.

However if you’re ok with that, you can accomplish this using custom script, custom CSS, and the element visibility feature. Unfortunately, you can not use the new CMS-bound custom attributes feature on Collection lists that are bound to Products, but here’s an example CSS-only hack ( wouldn’t work on Firefox ).

  • add a switch field to your Products collection. Let’s call it Private?
  • set some of your members-only products to private, doesn’t matter which ones
  • create a collection list somewhere, listing your products
  • inside the collection item, drop an HTML Embed with the CSS below.
  • select the HTML embed element, go to settings, Visibility & user access, and set it so that it is Visible when the user is Logged Out. This sounds backwards, but it’s right for this setup. Visible on the code block means the code block renders, means it suppresses that item.

image

The CSS looks like this. The Private? field is on an attribute, and the CSS selects and suppresses the Collection List item.

<style private="{{wf {&quot;path&quot;:&quot;private&quot;,&quot;type&quot;:&quot;Bool&quot;\} }}">
div.w-dyn-item:has(style[private=true]) {
  display: none;
}
</style>

If you want to support Firefox, you’ll need to use javascript as well, and that will take a little bit of coding depending on your page setup. Message me if you need someone to help to hire a dev to help with that part, it’s a small job.

Amazing! Thank you so much - this is really helpful and in my case absolutely enough.
What I was also able to figure out meanwhile is, that you can doublicate your shopping page and restict one to logged-in-users only - in the logged in menu bar is the link to that page. In the collection-list you can then hide or show certain groups of products.

I’ll try out both paths and report back on my experience :slight_smile:

1 Like

I like that! You should be able to do a similar thing for pages like the homepage, where you just have to versions of the collection list. One is visible only to logged in users, one is visible only to logged out users.

It’s a bit of double-work on the design side but does not require any coding.