Warning: You Are Losing Money by Not using a Vendor Page For Shopify

Jan 24, 2019

Yes it's true. You are losing money by not using a Vendor Page For Shopify.

That's the bad news. The good news is I'm here to help make sure you don't make the same mistake other shopify shop owners are making right now.

This article will teach you how to make a custom shopify page using your admin panel and the Liquid programming language.

If you're lazy and just want the code. You can skip the step by steps and scroll down to get the entire source code to copy and paste.

For those of you who would prefer learning the step by step process. I won't bore you with the logic behind the coding since if you're like me, you just want enough information to point you in the right direction.

First things first, If you don't already have a Shopify account get one. Shopify is hands down the best eCommerce platform for startups and is highly recommended for many different reasons, but don't take my word for it, do your research first.

If you already are set up with an account. Congrats on being the one of the smart ones.

Assuming you're ready, lets dive in.

Once you are logged in to your Shopify admin account. Follow these steps.

Step 2: Click Online Store

Step 1.png

Step 3: in the "Actions" Drop down choose edit code

Step 3.png

Step 4: Create New Template

Step 4.png

Step 5: Name it Brands, Vendors, etc. (page.Brands)

Step 5.png

Step 6: Delete all the preset info and past the source code below into the page then click save.

Full Source Code Here

{% include 'breadcrumb' %}

<h1>{{ page.title }}</h1>

<div class="rte">
          {% assign page_content = page.content %}
          {{ page_content | replace: '[shop_email]', shop.email | replace: '[shop_domain]', shop.domain | replace: '[shop_address]', shop.address.summary | replace: '[shop_name]', shop.name }}
    </div>

</div>

</div>
{% assign counter = 0 %}
{% for vendor in shop.vendors %}
{% assign counter = counter | plus: 1 %}
{% endfor %}

{% assign counter_divided_by_3 = counter | divided_by: 3 | floor %}
<div class="page-width" style="column-count:4;">
  <div class="content-block">
    <div class="rte rte--indented-images">
      {{ page.content }}
      <div class="grid grid--no-gutters grid-uniform">
		<div class="gird__item small--one-half medium-up--one-fifth">

{% for product_vendor in shop.vendors %}
{% assign its_a_match = false %}
{% capture my_collection_handle %} {{ product_vendor | handleize | strip | escape  }} {% endcapture %}
{% assign my_collection_handle_stripped = my_collection_handle | strip | escape %}

{% for collection in collections %}
{% if my_collection_handle_stripped == collection.handle %}
{% assign its_a_match = true %}
{% endif %}
{% endfor %}

{% if its_a_match %}
<li class="vendor-list-item block-grid"><a href="/collections/{{ product_vendor | handleize }}">{{ product_vendor }}</a></li>
{% else %}
<li class="vendor-list-item block-grid">{{ product_vendor | link_to_vendor }}</li>
{% endif %}
{% endfor %}
</ul>

Notes* to change how many columns you want find this line and change the 4 to what ever looks best.

<div class="page-width" style="column-count:4;">

Step 7: Click Save

Step 8: Hop over to pages

Step 8.png

Step 9: Add new page

Step 9.png

Step 10: give the page a title.

Step 11: Select the brand.page template.

Step 10 11.png

Step 12: Click save.

Step 13. View Page.

For live view go to https://unclebobsgiftshop.com/pages/brands

To add different content above the vendor list on the page.

Use the page editor to write your text, add images, etc.

I'm here to help.

Tags: Custom Shopify Page Templates How To make a custom Shopify Page Shopify Tutorials

Leave a comment