My hack-mate Sean mentioned that he works on contract based video work for clients to convert products into fun videos for TikTok and Instagram but that it takes a hours to put a video together. The goal with Shop2Vid is to save people time, money, and amplify their marketing.

What it does

Takes a Shopify product page and animates the content and is instantly ready for screen capture and upload to Instagram or TikTok.

How we built it

Built in react, the chrome extension pulls meta tags from the page, breaks up the description into multiple words and animates them. Additionally images are pulled in and filtered out by minimum size before running it through a background removal API.

Challenges we ran into

A major challenge was dealing with permissions. At first I implemented it without using the canvas tag but ran into permissions issues when trying to trigger a screen record from within the chrome extension. I decided to re-implement the animations in canvas since it's possible to record it without requiring screen recording permissions but ran into permissions issues again.

Accomplishments that we're proud of

The cutout background is a nice touch I think and really blends in the product to fit into the theme of a TikTok or Instagram video

What we learned

Chrome extensions don't allow screen recording at any level (both screen recording and canvas level)

What's next for Shop2Vid

Use hashtags and keywords data to procedurally generate captions, reimplement the extension as a Shopify app instead as there I won't run into permissions issues.

Built With

Share this project: