You can add GIFs, videos, and TikTok content to your Atlas theme using two main methods: Additionally, you can replace static images with videos or use video-supported sections for diverse design possibilities.
1. Use the Reel Carousel Section
This is the best option if you want to display TikToks, Reels, Shorts, or GIFs as a scrollable carousel. Such sections are part of Shopify’s video-supporting section options, allowing for seamless integration with other features.
How to use it:
Open your Shopify theme editor
Scroll down and click “Add Section”
Search for “Reel Carousel”
Paste links from TikTok, YouTube Shorts, Instagram Reels, or even GIF URLs
Customize layout, spacing, autoplay, and looping features
Tip: Make sure to save your theme after pasting links — the content won’t load until you save.
2. Embed Videos or GIFs into a Rich Text or Image with text sections
For adding standalone media like a single GIF or video:
Option A – Rich Text Block (Simplest)
Add a “Rich Text” block inside any section
Use the toolbar to click the image or video icon
Upload or link your GIF or video
Option B – Image with text
Add a “Image with text” block
Use the toolbar to click the image or video icon
Upload or link your GIF or video
Save and preview your store
Replacing an Image with a Video
To transition from static images to videos while maintaining design integrity:
Identify the image block to replace in the Shopify theme editor.
Add a video-supporting section (e.g., video with text section) instead of modifying the existing block.
Specify the video source and any accompanying text in the new section.
Save your changes and preview the final design to ensure it matches your vision.
Best Practices
Use MP4s or GIFs under 5MB for best performance
Stick to 3–4 videos per page to avoid slowing down your store
TikToks should be embedded directly using TikTok’s official embed option for smoother playback- Use short, engaging video content for carousel presentations and include headers or descriptive text to provide context or branding.- Test video playback on multiple devices to ensure responsiveness and optimal performance for all users.
If you need help adding a specific media type or something isn’t displaying correctly, email us at support@helloatlas.io