Hello,
I would like to add a “click to enter” page and be able to add a photo or gif as a background.
This page would be the first thing my users see before they are able to enter my site. I would also like to be able to put an image or moving image as the background too.
Let me know how I can do this.
My theme is the Baseline theme version 4.0.0.
Shop link: velvet-labs.us
It’s either use:
return_to parameter, for stores with customizable password-pages.Reach out if you need services to set this up.
Click profile pic on forums for options to connect 
Clear homepage method:
Clear everything off the homepage , moving it into a collection, or a page.
Then on the homepage use either a hero section, or custom-liquid section to add the code for the linked-image that points to the target.
On the homepage you may need to use CSS to hide the header/footer.
Though this may not account for other doodades and widgets like cookie-consents, or popup/nags that insist on themselves on every page with no way to control them.
Yes please. If you can assist with setting this up properly that would be great
Hi @dxxrek
You can use any of below build In Apps to design an intro gate visually, just add a button linking to your main store.:
1 - PageFly | The Best Shopify Solution For Page Building And Customizing
GemPages | Conversion-focused Page Builder for Shopify
The Best Shopify Page Builder | Shogun
Hi,
Hope this will help
Fast way (homepage only): Create a Splash hero section, add it to the home page, pick your photo/GIF, set “Enter” button - done.
Proper gate (site-wide): Create a snippet + one line in theme.liquid. It shows a full-screen overlay with your background until a user clicks Enter, then hides for 24h.
Create a new Section code example
{% comment %}
Simple homepage-only splash hero for Baseline.
Add this section to your "Home page" in the Theme Editor.
{% endcomment %}
<section
class="splash-hero"
style="
position:relative;
min-height:100svh;
width:100%;
overflow:hidden;
"
>
<div
class="splash-hero__bg"
style="
position:absolute; inset:0;
background-image:url({{ section.settings.bg | image_url: width:3840 }});
background-size:cover;
background-position:center;
background-repeat:no-repeat;
"
></div>
<div
class="splash-hero__overlay"
style="
position:absolute; inset:0;
background:rgba(0,0,0,0.35);
"
></div>
<div
class="splash-hero__content"
style="
position:relative;
z-index:1;
min-height:100svh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:2rem;
color:white;
"
>
<div style="max-width:720px;">
<h1 style="font-size:clamp(28px,5vw,64px); margin:0 0 16px;">{{ section.settings.heading }}</h1>
<p style="font-size:clamp(16px,2.5vw,22px); margin:0 0 28px; opacity:.9;">
{{ section.settings.subheading }}
</p>
<a
href="{{ section.settings.button_link | default: routes.all_products_collection_url }}"
class="button"
style="
display:inline-block;
padding:14px 28px;
background:#111;
color:#fff;
border-radius:999px;
text-decoration:none;
font-weight:600;
"
>{{ section.settings.button_label | default: 'Enter' }}</a>
</div>
</div>
</section>
{% schema %}
{
"name": "Splash hero (homepage)",
"settings": [
{ "type": "image_picker", "id": "bg", "label": "Background image / GIF" },
{ "type": "text", "id": "heading", "label": "Heading", "default": "Welcome to Velvet Labs" },
{ "type": "text", "id": "subheading", "label": "Subheading", "default": "Click to enter" },
{ "type": "text", "id": "button_label", "label": "Button label", "default": "Enter" },
{ "type": "url", "id": "button_link", "label": "Button link (where 'Enter' goes)" }
],
"presets": [{ "name": "Splash hero (homepage)" }]
}
{% endschema %}
Create a snippet code example
{%- comment -%}
Global splash gate overlay. Shows until user clicks "Enter".
Edit the "BACKGROUND_URL" below to your Files URL.
{%- endcomment -%}
{%- assign enable_gate = true -%}
{%- if request.design_mode -%}{% assign enable_gate = false %}{% endif %}
{%- if enable_gate -%}
<style>
.vgate__wrap {
position: fixed; inset: 0; z-index: 99999;
display: none; /* JS will toggle */
}
.vgate__bg {
position: absolute; inset: 0;
background: #000;
background-image: url("BACKGROUND_URL");
background-size: cover; background-position: center; background-repeat: no-repeat;
filter: none;
}
.vgate__shade { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.vgate__content {
position: relative; z-index: 2;
min-height: 100svh; display:flex; align-items:center; justify-content:center;
text-align:center; color:#fff; padding: 2rem;
}
.vgate__content h1 { font-size: clamp(28px,5vw,64px); margin:0 0 12px; }
.vgate__content p { font-size: clamp(16px,2.5vw,22px); margin:0 0 24px; opacity:.9; }
.vgate__btn {
display:inline-block; padding:14px 28px; border-radius:999px;
text-decoration:none; font-weight:600; background:#111; color:#fff;
}
.vgate__sr-only { position:absolute; left:-9999px; }
</style>
<div class="vgate__wrap" role="dialog" aria-modal="true" aria-label="Welcome">
<div class="vgate__bg" aria-hidden="true"></div>
<div class="vgate__shade" aria-hidden="true"></div>
<div class="vgate__content">
<div>
<h1>Welcome to Velvet Labs</h1>
<p>Click to enter.</p>
<a href="#" class="vgate__btn" id="vgateEnter">Enter</a>
<span class="vgate__sr-only">This screen will close when you press Enter.</span>
</div>
</div>
</div>
<script>
(function() {
// CONFIG — change these two lines
var SHOW_HOURS = 24; // remember for 24 hours
var bgUrl = "BACKGROUND_URL"; // <- paste your Files URL here (image or GIF)
// Helpers
var KEY = "vlabsSplashSeenAt";
function shouldShow() {
try {
var v = localStorage.getItem(KEY);
if (!v) return true;
var then = parseInt(v, 10);
var hours = (Date.now() - then) / 36e5;
return hours >= SHOW_HOURS;
} catch(e) { return true; }
}
function markSeen() {
try { localStorage.setItem(KEY, String(Date.now())); } catch(e) {}
}
// Don’t show in editor or bots
var isEditor = {{ request.design_mode | json }};
if (isEditor) return;
// Mount
var wrap = document.querySelector('.vgate__wrap');
var bg = document.querySelector('.vgate__bg');
if (!wrap) return;
if (bgUrl) bg && (bg.style.backgroundImage = 'url(' + bgUrl + ')');
if (shouldShow()) {
wrap.style.display = 'block';
document.documentElement.style.overflow = 'hidden'; // lock scroll
}
// Click handler
var btn = document.getElementById('vgateEnter');
if (btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
markSeen();
wrap.style.display = 'none';
document.documentElement.style.overflow = '';
});
}
})();
</script>
{%- endif -%}