Adding video to multicolumn on Symmetry theme

Store Design
, ,
1

Hello, I was looking to add a video to a multicolumn theme. I wasn’t able to find any solutions on the discussion boards or on youtube.

My website is

www.clairamor.com

The link to the multicolumn is here

https://clairamor.com/pages/custom-design

Any help is greatly appreciated!

Best,

Cameron

2

Hi @diamors

This is BSS Commerce - Full-service eCommerce Agency. We’d love to suggest you this solution:

  1. Add a multicolumn to the storefront interface from customize

view - 2023-04-13T145157.723.png
view - 2023-04-13T145157.723.png1920×933 137 KB

  1. Create video data

  • At the admin interface, go to Content → File, and Select Upload files

  • Upload your video and video thumbnail on Shopify

Note: With the column link, we will need the links of this video and thumbnail later on. You can get the corresponding link by clicking on the icon
view - 2023-04-13T145341.003.png

  1. Go to Themes → Edit Code

view - 2023-04-13T145426.364.png
view - 2023-04-13T145426.364.png2000×976 227 KB

Find the theme.js (or global.js) file. Add this js at the end of the file:

if(location.href == 'https://dev-cuong-nm-store.myshopify.com/'){
    const dataVideo = [
    {
        srcVid : `https://cdn.shopify.com/videos/c/o/v/9b6f7f724e224c29a889375b0c8800cd.mp4`,
        srcImg : `//cdn.shopify.com/s/files/1/0672/2558/3913/files/preview_images/3e5183ed6e6043a086c791e8837868c7.thumbnail.0000000000_480x480.jpg?v=1675526172`,
        hVid: "360px", // Video frame height
    },
    {
        srcVid : `https://cdn.shopify.com/videos/c/o/v/9b6f7f724e224c29a889375b0c8800cd.mp4`,
        srcImg : `//cdn.shopify.com/s/files/1/0672/2558/3913/files/preview_images/3e5183ed6e6043a086c791e8837868c7.thumbnail.0000000000_480x480.jpg?v=1675526172`,
        hVid: "360px",
    },
    {
        srcVid : `https://cdn.shopify.com/videos/c/o/v/9b6f7f724e224c29a889375b0c8800cd.mp4`,
        srcImg : `//cdn.shopify.com/s/files/1/0672/2558/3913/files/preview_images/3e5183ed6e6043a086c791e8837868c7.thumbnail.0000000000_480x480.jpg?v=1675526172`,
        hVid: "360px",
    }
];

(function insertVideoToMultiColumn(index, dataVideo) {
    let columns = document.querySelectorAll(".slider-mobile-gutter .multicolumn-list .multicolumn-list__item .multicolumn-card");

        [...columns].splice(index * 3, 3).forEach((column,i) => {
            const {srcVid, srcImg, hVid} = dataVideo[i];
            column.parentNode.style.maxHeight = hVid;
            column.innerHTML = `<video style="object-fit: cover; width: 100%; height: 100%;" playsinline="true" preload="metadata" autoplay="autoplay" 
            loop="loop" muted="muted" poster="${srcImg}"><source src="${srcVid}" type="video/mp4">
                <img src="${srcImg}">
            </video>`;
        });
})(1, dataVideo);
}

With the above code, replace https://dev-cuong-nm-store.myshopify.com/ with your current website path.

Replace srcVid and srcImg values with the thumbnail and video values you uploaded above.
This is what we got
https://www.loom.com/share/b05f615f81bc432398abd57ebbe1ef96

Hope this helps you.

1 Like