CODEWITHSUNDEEP
schemashopifyliquid
CarbonCoder
CarbonCoder

Reputation: 35

Shopify Schema - Get Collection URL

I have created a bit of schema in a section for a collection picker field and I'm trying to output the url of the collection if possible. The collection picker has appeared in the settings and I've picked a collection but I can't seem to output the url for it, here's the code:

<div class="col-md-6">
      <div class="category-box">
        **<a href="{{ section.settings.category_top_left.url | default: "#" }}">**
          <img src="{{ section.settings.category_top_left_image | img_url: '856x'}}" alt="">
          <div class="content">
            <h3>{{ section.settings.category_top_left_header }}</h3>
            <p>{{ section.settings.category_top_left_text }}</p>
      </div></a>
</div>

Schema:

{
  "type": "collection",
  "id": "category_top_left",
  "label": "Category Top Left"
}

At the moment it's the default that is being output, not sure where I've gone wrong.

This is the documentation I'm looking at for this - https://shopify.dev/docs/themes/liquid/reference/objects/section#section-settings

Thanks in advance.

Upvotes: 1

Views: 5504

Answers (2)

Robot Boy
Robot Boy

Reputation: 1979

{% assign page_url_full = request.path %}
{% if page_url_full contains "/collections/" %}
    <!-- Do something here -->
{% endif %}

request.path is the answer.

Upvotes: 0

Bilal Akbar
Bilal Akbar

Reputation: 4930

If you have a look at Shopify Schema docs for Collection Picker, it states that

Settings of type collection generate a drop-down that is automatically filled with the names of all the collections in the store. The output of the option the merchant selects from the drop-down is the handle of the collection.

Since the output is the collection handle, you have to get the collection by handle and then get image, title or whatever is needed. Doing so, your code will be like

{%- if section.settings.category_top_left -%}
      {% assign collectionTopLeft = collections[section.settings.category_top_left] %}
      <div class="col-md-6">
          <div class="category-box">
            <a href="{{ collectionTopLeft.url | default: "#" }}">
              <img src="{{collectionTopLeft.image | img_url: '856x'}}" alt="">
              <div class="content">
                <h3>{{collectionTopLeft.title }}</h3>
                <p>{{ collectionTopLeft.description }}</p>
              </div>
            </a>
          </div>
    </div>
{%- endif -%}

What it does is

  • Check if setting has some value
  • Get collection by handle
  • Use Collection object to get different properties

Upvotes: 2

Related Questions