Is it possible to have a custom page appear before the landing page?

Technical Q&A
1

Hello again,

I want to have a custom page appear before landing on the landing page if that is possible.

For example, I would like to play a gif and if you click anywhere on the page, it will lead to the landing page.

I hope to hear any suggestions.

Cheers

2

Hello @schoe3

Yes it is possible to show a preloader untill the page loads or display a preloder until customers doesn’t click anywhere but it will HTML JS setup. Please hire a developer to add as per your requirement.

Regards

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on here | Shopify Design Changes | Custom Modifications In to Shopify Theme

1 Like
3

Thank you Savior. I didn’t know what it was called. A preloader it is. At the moment, I don’t have a budget to hire a Shopify Expert. This is the reason why I ask for help on the community forum. Maybe in the near future, I might have the luxury to hire.

4

@schoe3

Its okay if you don’t have the budget to hire a developer. You can contact me so I can help you solve your problem.

5

How do I contact you Savior? It feels too good to be true.

6

@schoe3

Please Feel free to contact me on here.

Share your store URL so I can send you a collaboration request. Also share your all requirements and gif which you want to use.

Regards

1 Like
7

I see. Why can’t we work on the feature through discussion thread?

8

@schoe3

Because on emails we can have faster communication.

1 Like
9

That might be true. I would feel more comfortable discussing the thought process on this thread. Also, I feel like other potential Shopify store owners/builders would be interested in this conversation. Am I wrong?

10

@schoe3

Okay then I will provide you the steps and the code and you can just add them in your theme files. Will that be okay??

1 Like
11

That is the only way I know Savior. I appreciate your patience.

12

@schoe3

Take a backup of your theme file and paste the code in that theme so if you face any issue your live theme won’t get affected.

  1. Go to your store code editor. ‘Layout > theme.liquid’ file.

paste ’

’ below tag

Savior_0-1648318494571.png

  1. Add the script above tag in the same file
  1. Upload your GIF in ‘Assets’ copy the file name. For eg: loader.gif

Savior_1-1648318859828.png
Savior_1-1648318859828.png299×459 5.33 KB

  1. search for the CSS file being used in your theme with ‘.css’ or ‘.css.liquid’ or ‘.scss.css’ or ‘.scss.css.liquid’ extension and paste the style at the bottom of the file.
#loader {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 1000;
      overflow: visible;
      background: #FFFFFF url('{{ 'FILENAME' | asset_url }}') no-repeat center center;
   }

Replace FILENAME with your filename which you copied and paste it ‘loader.gif’.

Save all files and check the output.

Hope this helps you if you find any issues let me know.

1 Like
13

Hey Savior. I appreciate all the steps. It is almost dumb proof. However, there were no changes on my site.

  1. I added the div tags on the theme.liquid file below the body tag.

  2. added the script tags above the body tag (I have more than one script tag)

  3. added a new placeholder gif asset called “loader.gif”

  4. then added the code for the CSS file in my theme.css file of Debut theme

Where could I have gone wrong possibly?

14

@schoe3

This is the reason why we developers ask for store access and adds all the code with solving the issue if faced any.

Just share the preview URL of theme in which you have added the code along with the store password if your store is not a live store currently.

15

Thank you for following up, Savior.

I thought this feature would be a lost ship. The URL is live. Before I uncomment your steps, what will the code do exactly.

Will it play the gif? And then if you press somewhere it will lead to the landing page?

16

@schoe3

Yes it will play the GIF and when you will click anywhere on it. It will fade and you will be on your Homepage.

1 Like