Dawn - Looking for code to display All Collections page as a text list of hyperlinks (example below)

[afrey25]

I have a website that sells individual comic books. I'm using Dawn 9.0 theme. 

https://comicbooksandcoffee.net/ 

I'm currently using Collections to group comics by things like Publishers or Characters. Most comic book sites display a list of titles to help customers find what they're looking for. Right now my customers can't really see what comics I have from a specific title/series. They can only browse collections or search for specific issues/keywords.

I'm wondering if there is a way to display the All Collections page as a list of text hyperlinks rather than a grid with an image. Here's an example of kinda what I'm thinking from another comic seller site (without the extra data). https://www.mycomicshop.com/groups/spiderman-comic-books

I basically just want to display a list of clickable series titles (collections) that would go to a regular collection page showing the individual issues (products) from the series (collection). Hope that makes sense. I know some older themes had an option to switch to a list view but that's not a current feature of Dawn.

Thanks for any insights or help! 

[Zqdo]

If I understand what you're saying correctly, you basically want to turn this page: https://comicbooksandcoffee.net/collections, into clickable links instead? But the link they would go to, the individual collection, would stay the same?

[afrey25]

Yes!

[Zqdo]

The person below left a code snippet that looks helpful. Try that out and let me know if it works.

[Zqdo]

Hey @afrey25, were you able to solve this issue?

[Moeed]

Hey @afrey25 

To display the All Collections page as a list of text hyperlinks instead of a grid with images in the Dawn 9.0 theme, you will need to modify the theme's code. Please note that making changes to the theme's code requires some technical knowledge, and it's always recommended to create a backup of your theme before making any changes.

Here's a general guide to help you achieve this:

• From your Shopify admin, go to "Online Store" and select "Themes."
• Locate the Dawn 9.0 theme and click on "Actions" > "Edit Code."
• In the code editor, find the file called collection-listing.liquid or collection-grid.liquid. This file controls the layout of the All Collections page.
• Look for the code that generates the grid layout with images for the collections. It may look something like this:

{% for collection in collections %}
  <div class="collection-item">
    <a href="{{ collection.url }}">
      <img src="{{ collection.featured_image | img_url: '300x' }}" alt="{{ collection.title }}">
      <h2>{{ collection.title }}</h2>
    </a>
  </div>
{% endfor %}

• Replace the above code with code that generates a list of text hyperlinks for the collections. Here's an example:

{% for collection in collections %}
  <div class="collection-item">
    <a href="{{ collection.url }}">
      <h2>{{ collection.title }}</h2>
    </a>
  </div>
{% endfor %}

• Save the changes and preview your store to see if the All Collections page now displays a list of clickable series titles.

Please note that this is a basic example, and you may need to adjust the code based on your specific needs and the structure of your theme. It's recommended to consult the theme's documentation or reach out to the theme developer for further assistance.

Additionally, if you want to customize the layout or design further, you may need to modify the CSS styles in the appropriate stylesheet file(s) of the theme.

Remember to test the changes thoroughly on different devices and browsers to ensure the desired outcome is achieved.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[afrey25]

Thanks for the suggestion. Unfortunately those files names do not exist in the Dawn 9.0 template. I have collection-list.liquid and main-collection-product-grid.liquid. And neither of those files contain the code example you've given. I've searched them both for similar code and it appears the code is more complicated than your example.