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

2 0 0

Need to add enter screen and background music to website 

like this website

Replies 4 (4)

Shopify Partner
4242 960 1609

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

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.

Shopify Partner
191 63 60
@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.


3. Add image banner section, delete the blocks except the button. 
priyavinsinfo_1-1709721356377.png priyavinsinfo_2-1709721420315.png priyavinsinfo_3-1709721428678.png


4. 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_5-1709721622898.png



5. Again from admin, go to "Online Store" -> "Themes".

6. Click action button from the current theme and select "Edit code".
7. Search "theme.liquid" file and paste the class "gif-file-whole-background" in the body tag like below.


<body class="gif-file-whole-background gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %} {{ current_page }}" template={{ }}>


8. Paste below code after the body tag.


<img class="background_gif_file" src="Your_GIF_URL">


9. Then, find {% sections 'header-group' %} and add if condition as like below,


{% if != "index" %}
  {% sections 'header-group' %}
{% endif %}


10. Then find the {% sections 'footer-group' %} and add if condition as like below,


{% if != "index" %}
    {% sections 'footer-group' %}
{% endif %}


11. 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.
2 0 0

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!!



2 0 0

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?