How can I make my Brooklyn theme members-only with HTML?

How can I make my Brooklyn theme members-only with HTML?

Genevieveee
Visitor
3 0 0

Hello everyone!

 

I work with the Brooklyn theme and want to make it members-only. Where do I need to put which HTML to make it look like:

 

9A01C7A8-4C55-49B6-930C-13AF18A22446.png

For translation: Log In
Email
PW

 

Stay logged in
Forgot PW

 

I also need a clear T&C's button below, so they can read that 🙂 It's mandatory here. A picture would be great too (as seen above), for consumer-trust. 

 

Kind regards and thanks in advance!

Gen

Replies 4 (4)

biznazz101
Shopify Partner
494 50 97

There are apps which will allow you to create a members only website with various benefits and access controls. This is what it sounds like you want. Locksmith is one way. I'm sure it could be implemented with code as well.

If you just need a basic version where the storefront is locked unless you have an account you can set a storefront password in your store preferences then your store will require an account or the password to access.

Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
Genevieveee
Visitor
3 0 0

I got the member only part done, but now I'd like to add a subtle background, since the next is pretty boring: 

Scherm­afbeelding 2023-04-03 om 10.11.30.png

 

Do you know how that might work? Got the rest running in HTML 🙂 

 

Have a great day!

biznazz101
Shopify Partner
494 50 97

As in you want to replace white background with image? or gradient? If so yes you will add HTML/CSS to template files.

Please go to Online Store -> Pages -> the page in which you want to add background image -> Click on Edit website SEO -> Go to URL and handle and copy the last word of the handle.

biznazz101_0-1680558072077.png

 



Then go to Online Store -> Themes -> Edit code -> Assets -> Upload your Image here. Copy the image name with extension.

Then go to Online Store -> Themes -> Edit code -> Layout -> theme.liquid and paste below code between <head></head>

{% if request.path contains 'page-handle' %}
<style>
body {
background-image: url({{ 'image-name-with-extension' | asset_img_url: 'original' }});
background-repeat: no-repeat;
background-size: cover;
}
</style>
{% endif %}

Don't hesitate to reach out if you need help customizing your store! Good luck!
Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT

Jahid-KlinKode
Excursionist
145 1 5

Hey @Genevieveee, looking to add a Members-Only section to your Shopify store? Check out this tutorial for a quick solution: