How do I add a GIF to my password page?

Solved
nlight
Tourist
3 0 3

I made and saved a GIF to my assets and was wondering what the code "format" is so I can successfully add the GIF to show on my password page. Obviously I am not a "coder", but I could not find the answer to this anywhere. Thank you for reading and hopefully I can get an answer!

KetanKumar
Shopify Partner
14144 1649 5076

This is an accepted solution.

Hello, @nlight 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/upload your GIF File-> after below code your password page whenever do you have liked.

 

<img src="{{ 'yourgif.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">

 

can you please just change file name your gif to uploaded gif fine name

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
nlight
Tourist
3 0 3

@KetanKumar 

That worked perfectly! I do have one more question, what would the code be to center the gif on the page? Thank you again for your help!

KetanKumar
Shopify Partner
14144 1649 5076

Hello, @nlight 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
KetanKumar
Shopify Partner
14144 1649 5076

@nlight 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.password-main__inner {text-align: center;}

 also, please remove gif blank spacing

KetanKumar_0-1602562698568.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nostalgiaLTD
Tourist
5 0 4

@KetanKumar 

I am following this method but I cannot seem to center my GIF logo on the password page. Any help would be greatly appreciated.

https://nostalgia.ltd/password

Also, is there a way to make the GIF larger? Or would I just have to upload a bigger GIF image in the asset folder.

Thanks so much in advance!

KetanKumar
Shopify Partner
14144 1649 5076

@nostalgiaLTD 

Thanks for post 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file.

.password-page img {
    margin: 0px auto;
    display: inherit;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
nostalgiaLTD
Tourist
5 0 4

@KetanKumar 

Thanks so much!

KetanKumar
Shopify Partner
14144 1649 5076

@nostalgiaLTD 

Thanks for update and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes