How to: Preview Avatars, Frames, Animated Backgrounds & More from the Steam Points Shop on Your Profile

Not sure if you really like an item in the Steam Points Shop? Fear not! With this guide you can preview all kinds of items on your real Steam Profile Page!

This guide will teach you how to preview animated avatars, avatar frames, animated or still profile backgrounds, and mini-profile backgrounds, from the Steam Points Shop.

Introduction

This guide will teach you how to preview the Steam Points Shop items on your real profile page, instead of the small preview you get in the shop.

A couple of notes:

• This guide will use the magic of Inspect Element to apply the items from the Steam Points Shop, so you have to use a browser to view your profile.
  
• None of these previews are visible to others and will be deleted once the page is refreshed.
  
• If you mess up during a step, just refresh the page to start fresh.
  
• For each category of items, unique instructions are available in each section of this guide, because they all need to be applied in a different way.
  
• Combining an animated avatar, an avatar frame, an animated or still profile background, and a mini-profile background is all possible!

If you like this guide, please consider giving it a , , or <3

Animated Avatars

Visit the Steam Points Shop to see all Animated Avatars.

Instructions

1. Go to the Animated Avatars page
   
2. Right-click on an avatar of your choosing
   
3. Choose: Copy image address
   
4. Go to your profile page
   
5. Right-click on your avatar image
   
6. Choose: Inspect
   
7. Double-click the highlighted url to replace it
   
8. Paste in the copied url from before
   
9. Press Enter
   
10. The animated avatar is now previewed on your profile!

Avatar Frames

Visit the Steam Points Shop to see all Avatar Frames.

Instructions

1. Go to your profile page
   
2. Right-click on your avatar image
   
3. Choose: Inspect
   
4. If you already have an avatar frame applied, skip to step 8
   
5. Right-click the element:
   

   <div class="playerAvatarAutoSizeInner">

6. Choose: Edit as HTML
   
7. Paste this text after the first line on a new line:
   

   <div class="profile_avatar_frame">
   	<img src="INSERT_LINK_HERE">
   </div>

8. Go to the Avatar Frames page
   
9. Right-click on an avatar frame of your choosing
   
10. Choose: Copy image address
    
11. Go back to your profile page
    
12. Replace INSERT_LINK_HERE with the copied url from before and click outside of the textbox
    (if you skipped to step 8 before, replace the existing image url by double-clicking it)
    
13. The avatar frame is now previewed on your profile!

Animated Profile Backgrounds

Visit the Steam Points Shop to see all Animated Profile Backgrounds.

Instructions

1. Go to your profile page
   
2. Right-click on your background
   
3. Choose: Inspect
   
4. If you already have an animated profile background applied, skip to step 8
   
5. Right-click the highlighted element
   
6. Select: Edit as HTML
   
7. Paste this text after the first block of text in the 3 empty lines:
   

   <div class="profile_animated_background">
   	<video playsinline="" autoplay="" muted="" loop="">
   		<source src="INSERT_LINK_HERE" type="video/webm">
   	</video>
   </div>

8. Go to the Animated Profile Backgrounds page
   
9. Click on an animated profile background of your choosing
   
10. Right-click on the animated profile background in the pop-up window
    
11. Choose: Inspect
    
12. Open this element underneath the highlighted element:
    

    <video class="redeempointsmodal_VideoPreview_3_O3d" playsinline loop autoplay>...</video>

13. Copy the link from this element:
    

    <source src="COPY_THIS_LINK" type="video/webm">

14. Go back to your profile page
    
15. Replace INSERT_LINK_HERE with the copied url from before and click outside of the textbox
    (if you skipped to step 8 before, replace the existing video url by double-clicking it)
    
16. The animated profile background is now previewed on your profile!

Still Profile Backgrounds

Visit the Steam Points Shop to see all Still Profile Backgrounds.

Instructions

1. Go to your profile page
   
2. Right-click your background
   
3. Choose: Inspect
   
4. If you already have a still profile background applied, skip to step 7
   
5. Replace style by double-clicking it with:
   

   style="background-image: url('INSERT_LINK_HERE');"

6. Double-click the highlighted url to replace it
   
7. Go to the Still Profile Backgrounds page
   
8. Right-click on a still profile background of your choosing
   
9. Choose: Copy image address
   
10. Go back to your profile page
    
11. Replace INSERT_LINK_HERE with the copied url from before
    (if you skipped to step 7 before, replace the existing image url)
    
12. Press Enter
    
13. The still profile background is now previewed on your profile!

Animated Mini-Profile Backgrounds

Visit the Steam Points Shop to see all Animated Mini-Profile Backgrounds.

Instructions

1. Go to your profile page
   
2. Hover once over your avatar image so it shows the mini-profile background
   
3. Right-click on your avatar image
   
4. Choose: Inspect
   
5. Scroll all the way to the bottom
   
6. Open this element:
   

   <div class="miniprofile_hover" style="left: 378.5px; top: 121px; display: none;">...</div>

7. Open this element:
   

   <div class="miniprofile_hover_inner shadow_content">...</div>

8. If you already have an animated mini-profile background applied, right-click this element:
   

   <div class="miniprofile_nameplatecontainer">...</div>

   If you don't have an animated mini-profile background applied, right-click this element:
   

   <div class="miniprofile_background">...</div>

9. Choose: Edit as HTML
   
10. Remove all existing text from the textbox and paste in this text:
    

    <div class="miniprofile_nameplatecontainer">
    	<video class="miniprofile_nameplate" playsinline="" autoplay="" muted="" loop="">
    		<source src="INSERT_LINK_HERE" type="video/webm">
    	</video>
    </div>

11. Go to the Animated Mini-Profile Backgrounds page
    
12. Right-click on an animated mini-profile background of your choosing
    
13. Choose: Copy video address
    
14. Go back to your profile page
    
15. Replace INSERT_LINK_HERE with the copied url from before and click outside of the textbox
    
16. The animated mini-profile background is now previewed on your profile!

Seasonal Profile

Visit the Steam Points Shop to see the Seasonal Profile.
Note: a Seasonal Profile can only be viewed when a new one is released during a sale.

Instructions

1. Go to your profile page using this link
   
2. The Seasonal Profile is now previewed on your profile!

Manual Instructions

1. Go to your profile page
   
2. Append the following text to the url:
   

   ?previewprofile=1

3. Press Enter
   
4. The Seasonal Profile is now previewed on your profile!

[INFERNO]

Thanks

[󠀡󠀡󠀡󠀡󠀡󠀡󠀡󠀡]

Good tutorial

[󠀡󠀡᠌ ⁧⁧󠀡󠀡]

Must say, good workaround Even tho Steam Profile Modifier [chromewebstore.google.com] is everything you need, in a just few clicks

Also anyone who use Steam regularly, on browser, definitely should have Augmented Steam [chromewebstore.google.com] too

[ShadowPhantom]

No need to log in anymore!
You can now preview the items by just entering a link to your profile!
You could even prank your friends, if you enter their profile url and send them a screenshot ;)

The extension is available for Firefox:
https://addons.mozilla.org/en-US/firefox/addon/steamprofilepreviewer/

[haven]

Guys, just install the extension "Steam Profile Modifier" on Web Store, you can search and try every background, avatar, etc, from Steam Point Shop

[Rana]

@ShadowPhantom. Thank you for making that extension.

[SNOWBLUE27]

I was able to edit and it shows on profile but after refreshing, it went back to default. How to save the edited html?

[ded_pivo]

if Animated Background didn't work

1) Go here - {BAĞLANTI SİLİNDİ}https://www.steamcardexchange.net
2) Sign in with your steam account
3) Accept everything
4) Click: Tools > Background Viewer
5) Find your background game in search bar
6) Click desired background

DONE!

[fart smella]

shi is way too confusing lmfao

[HeyImMax]

profile background one doesnt work :(