shopify - Is there a way to create cms-block like "sections" to access from various sites (product/collection/page)

Question

I am actually working on a shopify theme and i am looking for a way to create content like sections, or section-blocks in a single spot, that can be called in any template-liquid to reuse the created blocks in various situations within the entire theme.

something like an information block, a banner or an entire section, that can be displayed in a collection, and also in some products, depending on a product-value.

so the content can easily be changed in an wysiwyg- or section(-block) editor and be changed within the entire theme.

i managed something like that by creating a separate blog that i use to create globally accessable content that can be called in any theme file.

Unforenetly i am not satisfied, because the articels have to be published to be visible and therefor are accessable when you know the blog url.

Is there a "cms-block"-like Feature bulid into shopify or an app that has these features?

Is there a common or better way than:

   {% if condition==true %}
      <div class="blog-insert-class">
        {% assign article = articles['BlogName/ArticleName'] %}
              {{ article.content }}
      </div>
   {% endif %}

Maybe worth looking at this Shopify alternative to Wordpress shortcodes (not sure if you are familiar with them). It sounds like it might suit your needs - github.com/culturekings/shopify-shortcodes — McNab
this is in fact an very interesting git-repo, but not excactly what i am looking for, since i don't fully get where the data is coming from. I rather think of something like the CMS-Blocks i knew from Magento and i can call in any context. — Matthias Leimbach

drip drip · Accepted Answer · 2019-02-01T08:59:21

You will have to create custom hooks and use them as similar way as @McNab mentioned, but not entering the whole content.

For example if we take your example we can create a shortcode that is called [article]. We will add a handle attribute to it, so it will become [article handle="some-handle"].

You will need to enter the above shortcode in your content somewhere. Then you can use the provided shortcode that @McNab mentioned or you can write a custom one.

For the custom one you will need to create a snippet:

article-shortcode.liquid with the following code:

<div class="blog-insert-class">
  {% assign article = articles[article-shortcode] %}
        {{ article.content }}
</div>

After that you will need to get your content and modify it to check if there is a shortcode present there.

So something like this:

{%- assign content = page.content -%}
{%- assign content_arr = content | split: '[article handle="' -%}

{%- if page.content contains '[article handle="' -%}
  {% comment %}Get the handle{% endcomment %}
  {%- assign article_handle = content_arr | last | split: '"]' | first -%}

  {% comment %}get the content after the shortcode{% endcomment %}
  {%- assign right_content = content_arr | last | split: '"]' | last -%} 

  {% comment %}save the content without the shortcode{% endcomment %}
  {%- assign content = content_arr | first | append: right_content -%} 
{%- endif -%}

{{ content }}

{% comment %}Call this where ever you like on the page{% endcomment %}
{%- if article_handle.size > 0 -%}
  {%- include 'article-shortcode' with article_handle -%}
{%- endif -%}

This is a more basic and strip down version of the shortcode that @McNab mentioned.

But this is one of the only ways ( beside Metafields ) to show dynamic section and to have some kind of query.

shopify - Is there a way to create cms-block like "sections" to access from various sites (product/collection/page)

1 Answers