Use Liquid

Register liquid script under raw code and preview content to use in template of element.

Register liquids via a computed

It required a core mixin "Liquid" and return as an array of list embed liquid codes. You can use or print out it via method liquid('name') in template.

Liquids only work with section Shopify, so to make sure the section type is Shopify let's call requestSectionas bellow.

Element.vue

<template>
    <div ref="wrapper">
        <h1>My shop is {{ liquid('name') }} ({{ liquid('email') }})</h1>
    </div>
</template>

<script>
    import { Liquid } from '@/components/RightSide/Builder/Helpers/Core.js';
    export default {
        
        name: 'ElementName',
        mixins: [ Liquid ],
        props: {
            'data': {
                type: Object,
                default () {
                    return {};
                }
            }
        },

        computed: {
             liquids() {
                 return {
                     name: {
                          code: ' {{ shop.name }}',
                          preview: 'Beae'      
                     },
                     email: {
                         code: ' {{ shop.email }}',
                         preview: '[email protected]'     
                     }
                 }
             },
             requestSection () {
                return {
                    section_type: 'product'
                };
            }
        }
        
    }
</script>