Articles on: Shopify

Adding our code to your Shopify theme (after changing themes)

When you install our Shopify App, DropInBlog ‑ SEO Friendly Blog, some code & files are added to your Shopify theme in order for the app to function.

If you change your theme, you will need to re-add our code and files into your new theme. Below is a list of the items you'll need to copy and paste.

Code Snippets



In your main theme file (generally: layout/theme.liquid), there are a few snippets of code to add. Copy & paste the following code as instructed below. If you're unsure of where to find this file, check out this guide from Shopify.

Near the top of <head> put:

{%- if dropinblog == 1 -%}{{ dropinblog_head_top }}{%- endif -%}

Near the bottom of <head> put:

{%- if dropinblog == 1 -%}{{ dropinblog_head_bottom }}{%- endif -%}

Inside <head> you should see a snippet of code like: {% render 'social-meta-tags' %}. Code can vary depending on your theme. It may also be: {% include 'social-meta-tags' %} or: {% render 'social-meta-info' %} . Replace that line with this code snippet:

{%- if dropinblog == 1 -%}
	{{ dropinblog_head_social }}
{%- else -%}
 	{% render 'social-meta-tags' %} {% comment %}This line must match your old code{% endcomment %}
{%- endif -%}



Note: You may need to change: {% render 'social-meta-tags' %} to: {% include 'social-meta-tags' %} or: {% render 'social-meta-info' %} or whatever this line was in your old theme code.

Files



Create a new Liquid file:
sections/dropinblog-recent-posts.liquid

Paste this code snippet in the file:

<div class="dib-recent-widget page-width">
    <h3 class="text-center">{{section.settings.title}}</h3>
    <div id="dropinblogRecent"
         data-num-posts="{{section.settings.num_posts}}"
         data-display="{{section.settings.display}}"
         data-categories="{{section.settings.categories}}"
         data-shop="{{shop.domain}}">
    </div>
</div>
{% schema %}
    {
        "name": "DropInBlog Recent Post",
        "settings": [
            {
            "id": "title",
            "type": "text",
            "label": "Heading Title",
            "default": "Recent Posts"
            },
            {
            "id": "num_posts",
            "type": "text",
            "label": "Number of posts to display",
            "default": "2"
            },
            {
            "id": "display",
            "type": "select",
            "label": "Display",
            "options": [
            {
            "value": "1",
            "label": "List"
            },
            {
            "value": "2",
            "label": "Posts"
            }
            ],
            "default": "2"
            },
            {
            "id": "categories",
            "type": "text",
            "label": "Filter by category (ex: seo-tips)"
            }
        ],
        "presets": [{
            "name": "DropInBlog Recent Posts",
            "category": "DropInBlog"
        }]
    }
{% endschema %}


Your blog should now be back up and running again in all its wonderful glory! You may notice your blog looks a little different on your new theme. That's because DropInBlog is built to automatically take on the CSS of your theme. Pretty cool right?

If anything isn't looking quite right, just hit us up on Messenger. In fact, if you'd like us to handle it for you, we're happy to do that too! We can request access to your store, and get your blog back up in running in no time. We just want to make sure you feel that DropInBlog looks as awesome on your new theme as it did on your last one!

Updated on: 04/01/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!