All Collections
Visual Shopping
How to Embed Loop Clips into Your Homepage
How to Embed Loop Clips into Your Homepage

Learn how to seamlessly embed Loop Clips into your homepage header to enhance customer engagement and product discovery.

Guy Schragger - Sauce Social Commerce avatar
Written by Guy Schragger - Sauce Social Commerce
Updated over a week ago

Integrating social shopping into your website offers a dynamic way to bridge the gap between social media engagement and e-commerce. By utilising features like Loop Clips, you not only provide an interactive shopping experience but also enrich your brand's digital presence. This fosters a more cohesive user journey, encourages greater customer interaction, and ultimately, drives sales. Follow this guide to effortlessly embed Loop Clips into your homepage header and unlock a new level of customer engagement and product discovery.

Step 1: Access Your Loop Clips Dashboard

Log in to your account and navigate to the 'Loop Clips' dashboard in your Visual Shopping Menu. Here you will find the Loop Clips customisation options where you can tailor them to your brand's needs.

Step 2: Customise your Loop Clips

Select the Loop Clips you wish to showcase on your homepage and fine-tune their appearance to match your brand ethos. Our platform offers a myriad of design customisation options, enabling you to alter aspects such as size, layout, colours, borders, icons and shoppable elements. To ensure that your chosen Loop Clips seamlessly align with your branding and goals, utilise the real-time preview feature located on the right-hand side of your screen. This allows you to make adjustments on the fly and see exactly how the Loop Clips will look once embedded.

Example of some of the settings you can apply to your Loop Clips:

Try clicking on a Loop Clip to reveal the interactive video Lightbox and its shoppable elements. These can also be customised using the Lightbox and button settings.

Step 3: Refine Clip Selection: Display Clips by Source and Hashtag

Choose the type of videos you want to show—such as User-Generated Content (UGC) only. Then, refine your selection using a hashtag filter to display only clips with specific hashtags in their captions.

To add a hashtag to existing videos, go to your media library, edit the caption, insert the desired hashtag, and click 'Save'.

Step 4: Copy Embed Code

After customising your Loop Clip, click on the 'Copy Embed Code' button. This will copy a unique piece of HTML code for you to insert into your website.

Step 5: Embed into Your Website Header

Copy the generated HTML code. Open your website's content management system and locate the section where you can edit your homepage header. Paste the HTML code into the desired position.

Using a Content Management System or Website Design platform like Shopify?

Add your Loop Clips into a Custom HTML section:

Insert Custom HTML Section:

Add a new section on your website and select the 'Custom HTML' option. Then, paste the previously copied Embed Code into the designated HTML box.

Your pasted code should closely resemble the following:

Note: The exact steps for this may vary depending on the platform your website is built on. Refer to your CMS's help documentation for specific guidance.

Step 6: Preview and Publish

Before making the changes live, preview your homepage to ensure the Loop Clip appears as intended. Once you're satisfied, publish the changes.

Congratulations, you've successfully embedded a Loop Clip into your homepage header! This dynamic feature will help to increase customer engagement and facilitate product discovery.

For any further assistance or queries, please don't hesitate to reach out to our support team.

Did this answer your question?