Shopify themes, liquid, logos, and UX
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!
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?
Yes!
The person below left a code snippet that looks helpful. Try that out and let me know if it works.
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:
{% 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 %}
{% for collection in collections %}
<div class="collection-item">
<a href="{{ collection.url }}">
<h2>{{ collection.title }}</h2>
</a>
</div>
{% endfor %}
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
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.
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024