Show collection quick links on collection page

Store Design
, , ,

Topic summary

A user seeks help displaying quick links on a collection page using Shopify’s Impact theme, providing a screenshot and sample store URL as reference.

Solution Provided:

  • Access theme code via Shopify Admin → Online Store → Themes → Edit Code
  • Locate the collection template file (typically collection.liquid under Sections or Templates)
  • Insert HTML/Liquid code to create a quick links section with list items linking to different collections
  • Add CSS styling to the theme’s stylesheet (often theme.css or base.css) to format the quick links section
  • Customize colors, icons, layout, and branding as needed

The original poster confirmed the solution was helpful. The response includes code snippets for both the HTML structure and CSS styling, though the text appears reversed/encoded in the original post.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone.
Could someone help me with displaying similar quick links on the collection page? I’ve attached a screenshot for reference, and here is the sample store URL.: https://threadheads.com/collections/graphic-tees

This is Impact theme

screenshot.png
screenshot.png1275×640 244 KB

2

Hi @Digital_Imran ,

This is Amelia from PageFly - a Landing Page Builder App

To display similar quick links on your collection page using the Impact theme, you can follow these steps:

  1. Access Theme Code:

    • Go to your Shopify Admin.
    • Navigate to Online Store > Themes > Actions > Edit Code.

  2. Locate the Collection Template:

    • Find the collection template file, usually named collection.liquid or similar, under Sections or Templates.

  3. Add Quick Links Section:

    • Insert a new section for quick links. You can add HTML and Liquid code to create the links. For example:

      <div class="quick-links">
  <h3>Quick Links</h3>
  <ul>
    <li><a href="/collections/graphic-tees">Graphic Tees</a></li>
    <li><a href="/collections/new-arrivals">New Arrivals</a></li>
    <li><a href="/collections/sale">Sale</a></li>
    <!-- Add more links as needed -->
  </ul>
</div>

  4. Style the Quick Links:

    • Add CSS to your theme’s stylesheet (often theme.css or base.css) to style the quick links section. For example:

      .quick-links {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
}

.quick-links h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.quick-links ul {
  list-style-type: none;
  padding: 0;
}

.quick-links ul li {
  margin-bottom: 5px;
}

.quick-links ul li a {
  text-decoration: none;
  color: #333;
}

.quick-links ul li a:hover {
  text-decoration: underline;
}

  5. Customize as Needed:

    • Adjust the HTML and CSS to match your store’s design and branding. You can add icons, change colors, or modify the layout as needed.

I hope that my solution works for you.

Best regards,

Amelia | PageFly

1 Like
3

Thank you so much :slightly_smiling_face: