Shopify Question posted in
The Shopify help center can be found here.

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.

Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0 
    {% assign page_url_full = request.path %}
{% if page_url_full contains "/collections/" %}
    <!-- Do something here -->
{% endif %}

    request.path is the answer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search