Installing SiteVibes for Shopify (Without App Embeds)

Created by Mike Matker, Modified on Thu, 25 May, 2023 at 3:34 PM by Mike Matker

Implementing Trending Wall in your Shopify theme

Insert below script before the closing head tag </head> in your Shopify liquid theme, most likely in Layout/theme.liquid file.

Below you will find step-by-step instructions on how to do it on the example of the default "Debut" theme.

<!-- SiteVibes Start -->
<script>
    var SiteVibesLoggedInUserData = {
        isLoggedIn: {% if customer.id %}true{% else %}false{% endif %},
        userName: "{% if customer.id %}{{customer.name}}{% else %}Guest{% endif %}",
        cartTotal: {{ cart.total_price | json }}
    };
    {% if product %}
    {% assign sv_collection_titles = product.collections | map: "title" %}
    var SiteVibesProduct = {
        product_id: {{ product.id | json }},
        name: {{ product.title | json }},
        description: {{ product.description | strip_html | json }},
        url: {{ shop.url | append: product.url | json }},
        image_url: "{{ product.featured_image | img_url: '275x' }}",
        category_name: "{{ sv_collection_titles | join: "/" }}",
    {% if product.compare_at_price %}
        price: {{ product.compare_at_price | divided_by: 100.00 | json }},
        price_sale: {{ product.price | divided_by: 100.00 | json }},
    {% else %}
        price: {{ product.price | divided_by: 100.00 | json }},
    {% endif %}
    {% if product.selected_or_first_available_variant.inventory_management %}
        quantity: {{ product.selected_or_first_available_variant.inventory_quantity | json }},
    {% endif -%}
    };
    {% endif %}
</script>
<!-- SiteVibes End -->


1. In your store dashboard click "Online Store" -> "Themes".


help image


2. On the Themes page under the Current Theme click "Actions" -> "Edit code".


help image


3. Click on "theme.liquid" in the "Layout" category.

help image


4. Copy and paste script before the closing head tag </head>


help image


5. Click on the "Save" button in top right corner to apply changes.


help image

Implementing Product Notifications on the collections page

Insert data-id="{{product.id}}" in the element of the product on collections page in Shopify liquid theme, most likely in Snippets/product-card-grid.liquid

Below you will find step-by-step instructions on how to do it on the example of a default "Debut" theme.

1. In your store dashboard click "Online Store" -> "Themes".


help image


2. On the Themes page under the Current Theme click "Actions" -> "Edit code".


help image


3. Click on "product-card-grid.liquid" in "Snippets" category.


help imagehelp image


4. Insert data-id="{{product.id}}" in product element.


help image


5. Click on the "Save" button in the top right corner to apply changes.


help image


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article