Shopify Development

Creating a unique and informative section for each collection page on your Shopify store can significantly enhance the user experience. In this guide, we’ll walk through the process of building a custom section called ‘custom-collection-info’ that will dynamically showcase essential information at the bottom of every collection page.

Before you begin, make sure you have the required code from my GitHub repository. For this demonstration, I’ll be working with a duplicate of the Dawn theme.

Prefer video? Check out my Youtube video on this tutorial here.

Step 1: Setting Up the Custom Section

1. In your theme editor, create a new section named ‘custom-collection-info.’
2. Copy and paste the entire ‘custom-collection-info.liquid’ file from GitHub.

Step 2: Creating Metafields

1. Navigate to your Shopify dashboard and go to Settings > Custom Data.
2. Under Metafields, select ‘Collections.’
3. Add definitions for the fields you want to display. Use the naming conventions and data types below unless you want to adjust your code. (Make sure you choose ‘List of Values’ for FAQ Questions and Answers).

Step 3: Adding Data to Collections

1. Visit Products > Collections in your Shopify dashboard.
2. Click into a collection and scroll to the bottom to find the Metafields we just created.
3. Add data to a couple of collections so you can see the result on different collection pages. (Make sure to order your questions and answers in the same order, this will make more sense in a moment.)

Step 4: Understanding the Code

If we look back at the code, we can see this for loop in liquid (line 112 on github) that is looping over the list of questions and answers, and adding them to the screen. It is imperative that the questions and answers are the same length, and are in the same order respectively.

          {% for i in (0..len) %}
            <label class="accordion__item">
              <input
                type="radio"
                name="{{section.id}}"
                {% if forloop.first %}checked{% endif %}>
              <span class="accordion__item--title faq_question">
                {{ questions[i] }}<label class="collapse" for="{{section.id}}--close"></label>
                <h1>+</h1>
              </span>
              <div style="padding-left: 15px;" class="accordion__item--content">{{ answers[i] }}</div>
            </label>
          {% endfor %}

Also notice the JavaScript below that is using a data attribute in the html to store the full Metafield summary. This code swaps the liquid truncated summary with the full summary, giving us the dynamic functionality of ‘View More’ and ‘View Less’.

    let readMoreSummary = document.querySelector('#read-more-summary')

    if (readMoreSummary) {
      readMoreSummary.addEventListener('click', (e) => {
        let selected = document.querySelector('#collection-summary-p')
        let temp = selected.innerHTML
        selected.innerHTML = e
          .target
          .dataset
          .summary
          e
          .target
          .dataset
          .summary = temp
        if (temp.includes('...')) {
          document.querySelector('#read-more-summary').textContent = 'See Less'
        } else {
          document.querySelector('#read-more-summary').textContent = 'See More'
        }
      })
    }

Step 5: Conditional Display

Also, notice the whole code block is wrapped in this liquid conditional, where it is checking for the section settings if it is enabled, and if there is a collection image. If either of those are not true, this section will not show up. This enable logic exists in the Customizer, giving the merchant the ability to show or hide this section at will.

{% if collection.metafields.custom.collection_image and section.settings.enableCollectionInfo %}

Step 6: Add to Template

Don’t forget to add your section to the ‘collection.json’ template file so it will actually appear in your preview. It needs to be added to the ‘sections’ object as well as the ‘order’ like so:

"sections": {
...
"custom-collection-info": {
      "type": "custom-collection-info",
      "settings": {
      }
    }
...
  "order": [
    "banner",
    "product-grid",
    "3dc30421-16fc-49c2-91b7-405bbbbcd9e6",
    "custom-collection-info"
  ]

Conclusion

I hope you enjoyed this tutorial on custom sections and Metafields in Shopify. Share your thoughts in the comments, and explore the limitless possibilities of Shopify Metafields!