Shopify

Modern forums and commenting for the popular e-commerce platform.

Now you can integrate Muut forums and commenting directly with your Shopify store. With support for Shopify Customer accounts and easy liquid templates, Muut is the perfect addition to help your store's community thrive. You can find the Muut Shopify app in the Shopify App Store here.

Full blown forums

Realtime commenting on products and posts

Benefits

  • Unified system for both forums and commenting. Same users and design
  • Full featured forums makes your Shopify store conversational
  • Flat or threaded commenting on products, posts, or other pages for small or big topics
  • Skinnable style the discussion directly in your theme's templates
  • Realtime. No page reloads – posts, replies, likes and users appear in realtime
  • Focus on content. Text focused, uncluttered and linear user interface
  • Customer Accounts. Customers can use their accounts at your store to post with Muut—no second log-in.
  • Search engine optimized. Improve your ranking with user generated content
  • Spam filtering, email notifications and 20+ different language versions

Setup

Registration

Once you’ve added the Muut app, you’ll be prompted to select which subscription plan you’re interested in; you can either use the Small plan or Medium plan; the primary features of each are listed underneath as they pertain to Shopify stores. In either case, you’ll have a 14-day trial before being billed, so you’re free to try out all the great features without a full commitment. Once you’ve selected the plan, you can either log in with an existing Muut account or create a new one by clicking the Join tab. Once you’ve created your forum (or selected one that you already have registered on your account) you’ll be taken to your main settings page!

Settings

You can see, the settings page for the app is very simple.

The language dropdown will allow you to select a language for the frontend interface that your customers will see.

Below that, you have the option of enabling advanced Muut widgets. That will enable the backend settings required for the Latest Comments and Trending Topics widgets to function. Note that the widgets will only work for posts that are created AFTER that setting is enabled, so if you are planning to use the widgets, it is recommended you enable it sooner rather than later. You can always disable it down the road if you decide you will not be using those widgets.

The Customer Accounts feature allows you to use your store’s customer accounts for the Muut community as well. If they are logged into your website, they can post comments and in the forum; they don’t have to sign in with a separate Muut account. This will only work if you have Custom Accounts enabled in the Checkout settings for your store. If you enable this setting, you will have to create an administrator customer account for yourself that uses the same e-mail address as the one you used to create your forum with Muut. That will make it so that if you are logged in as that customer, you’ll be able to perform the necessary administrative functions on the frontend, such as using the Visual Editor or banning users.

With the Custom S3 Bucket Endpoint, you can enter the full URL for the URL for the bucket root that you are using for your forum's index generation. You'll have to set up the S3 bucket itself following the instructions in the Custom S3 Bucket section of the Muut documentation, and then the final bucket URL can be entered in this field on the Shopify app's settings.

The Muut-specific forum settings are accessible by clicking the Advanced Settings button or by visiting the forum page on your frontend as the forum administrator and clicking the Settings button there.

Embedding

There are three primary ways for embedding Muut in your Shopify website. You can embed the full forum UX; use threaded and flat commenting on pages, articles, and products; and embed a single channel endpoint on a given page.

Full Forum

It is incredibly easy to add Muut commenting and forums to your store. Right off the bat, we’ve generated a new page template for your forum. If you add a page to your store and scroll down to the template selector, just open the dropdown and select page.forum as the template and it will automatically add that. If you would like to add the forum somewhere else, or add it to a different template, the liquid tag you will want to use is:

{% include 'muut-forum' %}

You can see more details about editing the liquid files below regarding adding Muut commenting.

Commenting

To add commenting, we’ve created a simple liquid tag that you can drop into any of the page templates for products, blogs, or other articles. Simply visit the themes section of your site administration dashboard. Hover over the “...” button on the active theme and select Edit HTML/CSS from the dropdown. You’re now in the template editor. Click the product.liquid template in the left bar. Scroll all the way to the bottom and paste the line:

{% assign muut_type = "flat" %}
{% include 'muut-comments' %}

Press the save button at the top right and take a look at one of your product on your store’s frontend. You’ll see that the slick and minimalist Muut commenting has been added to the bottom. You can immediately see how seamless it fits into your theme. If you would prefer to have the commenting somewhere else on the page, you could paste that line somewhere else in the liquid template rather than all the way at the bottom.

If you want to use threaded commenting just change the first line to be: {% assign muut_type = "threaded" %}. It is actually an optional line otherwise as it defaults to flat commenting.

Standalone Channel

If you want to embed a standalone channel in a template, you can do so with another simple liquid tag. Follow the instructions about comment embedding to see how you can edit liquid templates, and the block you will want to use is:

{% assign muut_path='your-channel-path' %}
{% assign muut_title='My Channel!' %}
{% include 'muut-channel' %}

The first two lines are optional and can be left out, as they can be generated automatically, but if you are wanting to include a specific Channel path and title, you can use those settings to do so. From the main forum, you can see what a channel's path is in the URL after the #!.

If the liquid tags don’t seem to be working, or you don’t see the page.forum template, visit the Muut app’s settings page and click the Reset Templates button in the top right corner next to the Save button. That will re-add the templates and tags.

Widgets

The Shopify Muut app comes packaged with five widget tags that allow you to embed small pieces of functionality from your Muut community on any of your pages you'd like. Simply drop the specified liquid tag where you would like the widget content to appear on your page and it will work straightaway.

Online Users

The online users widget shows which users are currently logged into your community, and also how many anonymous users are using your store. Simply add the template tag outlined brloe.

<h3>Online Users (or your title name)</h3>
{% include 'muut-widget-whosonline' %}

My Feed

This widget allows your users to access their Feed (all threads they are subscribed to or participating in. It is recommended that you do not place this widget on pages with another full Muut embed, either the Forum or Commenting, as it can exhibit unexpected behavior.

<h3>My Feed</h3>
{% include 'muut-widget-myfeed' %}

Discussion Channel

The Discussion Channel widget allows you to embed as a widget a specific Muut path. Perhaps it is a general welcome-to-the-store channel or a channel with the latest deals in it. Either way, it is a great way to tie your community together.

<h3>Channel 1</h3>
{% assign muut_path = "/channel-1" %}
{% include 'muut-widget-channel' %}

Latest Comments

The Latest Comments widget shows a list of the five posts/products/articles that have been most recently commented on, along with the avatar of the last commenter and how long ago it happened. The widget of course updates in real time as new comments are made! This widget requires "Advanced Widgets" to be enabled in the app settings.

<h3>Latest Comments</h3>
{% include 'muut-widget-latestcomments' %}

Trending Topics

The Trending Topics widget shows the five most popular threads in the forum (in the public channels listed in the navigation) that have activity within the last week. It is based on number of comments and number of likes for each post. The trademark "user typing" circle will show in real time as new users are interacting on each of the threads, with the comment and like counts updating dynamically. This widget requires "Advanced Widgets" to be enabled in the app settings.

<h3>Trending Topics</h3>
{% include 'muut-widget-trendingtopics' %}

Styling

You can use Muut’s visual editor to add additional styles to your forum and embeds. Simply visit the forum page and underneath the channel navigation you can see the Designer button. Simply click that and you can style the forum and commenting sections however you wish, using one of the pre-packaged themes or finessing it more specifically.

If you would like to customize the CSS even more specifically on your own, you should visit the Template Editor (as you do when adding template tags to tempalates), and scroll down in the template navigator to the Assets section, and create a new asset called "muut-shopify-custom.css". All custom CSS rules added to that will be applied to Muut embeds on your website created using the app.