How can I add an enter screen and background music to my website?

Shopify Discussion

Topic summary

A user seeks to add an entrance screen with a background GIF and music to their Shopify website, similar to a reference site they provided.

Solutions Offered:

  • PageFly representative suggested using their app to add a full-screen video banner on the homepage with custom buttons and logo placement.

  • Vinsinfo provided detailed step-by-step instructions:

    • Hide all homepage sections except header/footer
    • Add an image banner section with a GIF background
    • Configure buttons to redirect to desired pages
    • Edit theme code files (theme.liquid and base.css) to implement the full-screen GIF background with specific CSS styling
    • Includes code snippets for positioning, transparency, and conditional rendering

Current Issues:

The original poster reports implementation problems:

  • Layering appears incorrect
  • Requests styling changes for the button (outline removal, hover effects)
  • Notices an unwanted fade-in effect when the site first loads

The discussion remains ongoing with troubleshooting needed to resolve these visual and functional issues.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Need to add enter screen and background music to website

like this website
https://fkxv1.com/

2

Hi @rylodi

This is Richard from PageFly - Shopify Page Builder App

You can follow my steps below to get this solved

Step 1: On your homepage add an video banner full screen

Step 2: Add one image for the logo as gif and one button set the link direct to all collection pages.

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

@rylodi Please follow below steps to display add enter screen and background gif like the provided website and let me know whether it is useful for you.

  1. From admin, go to ā€œOnline Storeā€ ā†’ ā€œThemesā€, click ā€œCustomizeā€ button from the current theme.
  2. In the home page, hide all the existing sections except Header and footer group like in the below attached image.

priyavinsinfo_0-1709721288876.png
priyavinsinfo_0-1709721288876.png420Ɨ955 38.7 KB

  1. Add image banner section, delete the blocks except the button.

priyavinsinfo_1-1709721356377.png
priyavinsinfo_1-1709721356377.png546Ɨ447 30.9 KB

priyavinsinfo_2-1709721420315.png
priyavinsinfo_2-1709721420315.png285Ɨ170 6.15 KB

priyavinsinfo_3-1709721428678.png

  1. Then click ā€œImage bannerā€ and select the gif you want to display in background. Click the button block and give text in the first button and remove the text from second button as shown in the below image, then link the page that you want to redirect to that button.

priyavinsinfo_4-1709721518470.png
priyavinsinfo_4-1709721518470.png301Ɨ229 7.05 KB

priyavinsinfo_5-1709721622898.png
priyavinsinfo_5-1709721622898.png1276Ɨ501 93.9 KB

  1. Again from admin, go to ā€œOnline Storeā€ ā†’ ā€œThemesā€.

  2. Click action button from the current theme and select ā€œEdit codeā€.

  3. Search ā€œtheme.liquidā€ file and paste the class ā€œgif-file-whole-backgroundā€ in the body tag like below.
  1. Paste below code after the body tag.
  1. Then, find {% sections ā€˜header-groupā€™ %} and add if condition as like below,
{% if template.name != "index" %}
  {% sections 'header-group' %}
{% endif %}
  1. Then find the {% sections ā€˜footer-groupā€™ %} and add if condition as like below,
{% if template.name != "index" %}
    {% sections 'footer-group' %}
{% endif %}
  1. Then, find ā€œbase.cssā€ file and paste the below code at the bottom of the file,
.background_gif_file { width: 100%; height: 100vh; z-index:-1; position: fixed; object-fit: cover; }
.gif-file-whole-background { background: transparent; background-size: cover; background-attachment: fixed; background-position: center center; opacity: 1 !important; }
.color-scheme-1, .gradient {background-color: transparent !important; }

In the above code, we have given only the first color scheme .color-scheme-1, if you are using multiple color schemes, need to include all color schemes.

Please provide your support by click ā€œLikeā€ and ā€œAcceptedā€ if our solution works for you. Thanks for your support.

1 Like
4

This is sort of working but it seems to be layered incorrectly somehow? Also is there a way to make the button now have an outline and just be the text with like a hover over color? Could you help? Thanks!!

https://8b8e35lrpq7ry5am-65022394564.shopifypreview.comhttps://z6t8ympjjlmdzrkr-65022394564.shopifypreview.com

5

It also looks like when first opening site that it faded in, is there a way to not have that behavior? Or possibly something missed during setting it up?