You Need This Link in Bio Dupe

Do you love looking for dupes for high end or expensive products? A TikTok trend I love is finding lower priced dupes for high end products. This is great for makeup and skincare but we can extend this even further to another unlikely place, your website.

If you already have a website you want that traffic to go through your site and not another platform while paying a fee. Here’s how to create a link in bio mobile page through your website.

What is a link in bio?

This is not to bash anyone using a service like Linktree. I was even using milkshake for a bit so I’m not immune to the link in bio allure. I actually didn’t realize as a web designer that I could create one myself. Total face palm moment!

No shade to Linktree or any other companies that provide this service. If you don’t have a website and you’re using them to gather your links on one page, awesome. This post probably won’t be helpful for you.

For everyone else who has a website hosting your own mobile link page will help boost your traffic and conversions by keeping website visitors on your website and not going through a third party.

How do I do this?

Pretty easily, if you’re a web designer or you aren’t scared of looking through some code. I know this might be slightly overwhelming for people who aren’t tech savvy but I’m going to break down the steps along the way.

To make a similar mobile friendly page like linktree on your website you’ll need to hide the header and footer. Those take up valuable real estate for people finding your website on their mobile phones. It also looks cleaner as you’ll see in my mobile page down below as an example.

So even though I love talking about never using code we do have to use code for this one.

Code? Yikes!

Don’t panic. It’s not super complicated, I promise. I provide the CSS code which you can customize to work on your site.

I’ve only used this on Squarespace though so other platforms you might have to look up your own code or tweak it a bit.

Step 1: Create a mobile page

Have this look similar to link tree if you like or change it up. Totally up to you! You can customize and design this page any way you want.

I used a bunch of buttons, a small photo of myself, my business name and a short little CTA that says “Check out my resources below!”.

Here’s what it looks like or check out the live version. Name this page mobile, link-in-bio or something similar so it doesn’t get lost in your website pages.

Step 2: Find your code

Here are the steps to finding the code you need from your website. I found this helpful break down on a Squarespace help forum.

How to find your collection ID/ body tag

1. Right click and View Page Source- from the mobile page or the page you don't want a header or footer.

2. Do a find for <body (control - F in Windows or command - F in Mac)

3. You'll find a line something like this

4. Find the ID tag inside the body tag.

5. Add the hash symbol (#) to the collection ID like this: #collection-51c37050e4b0895fa6dc9175

Step 3: Write your code

Time to add the collection tag number into the custom CSS. We’re almost done!

Here’s the code you’ll be plugging your collection ID into:

#collection-634df97563456703b23afb {

#header, #footer-sections {
	display: none;
	}

}

Add your collection ID in the top section with the hash symbol (#) and save in your text editor of choice.

Don’t change the bottom section since that’s what will make your header and footer disappear.

Step 4: Add your code

Add your code to your website under the Design > Custom CSS view. Copy and paste in your custom code and save. Hit refresh and look at your mobile page.

If the header and footer disappeared it worked! If not you need to double check if you picked the right collection ID to put in your CSS code. Troubleshooting is part of the process so don’t worry if things go wrong. This is what web designers deal with every day!

Step 5: Share your link

Once your custom mobile page works and looks how you want it to make sure to add it to all the social media accounts or other places you share your website. This will keep the traffic on your website and doesn’t cost you any extra money! Win win.

I hope you enjoyed learning this link in bio dupe. This is one of the reasons I love working in the technology space. You learn new things every day!

If you want to learn more about how to create automations and systems that will save you time and energy in your business check out the Savvy Site Challenge.