Read More button for collection page - custom theme

Store Design
1

Hi all,

Please see the attached image, I am wanting to condense the size of the collection blurb by adding a ‘read more’ button. Can anyone please advise?

Below is a link of what I am trying to achieve.

https://www.matalan.co.uk/womens/party-wear-outfits

Thanks in advance.

2

Hi @tilletts ,

This might require more complex theme customization. However, I would recommend doing the following first:

  1. Add a “show more” button for each facet
  2. Use CSS to hide item after “show more” button is clicked. For example:
li:nth-of-type(1n+3) { display: none; }

  1. Use javascript to add ‘active’ class to items that have been hidden by CSS in step 2.

  2. Add CSS to show the items that have “active” class.

I hope you were able to make adjustments accordingly. If you want an easier solution, you can try using a page-builder. Most have an accordion option that lets you toggle/ hide information and expand when clicked. If you want more assistance, you can request a free page-build here, and we can go from there.

Best regards,

Layoutbase - Easy drag & drop page-builder

3

Hi,

Where would I put this code? In the collection description?

Thanks

4

Hi @tilletts ,

Would you be able to provide your Store URL so we can better advice you? Unfortunately, each theme on Shopify works a little differently. For example the Dawn theme would require allocating the code under these files:

  • Snippets/facets.liquid
  • Assets/component-facets.css
  • Assets/facets.js

Best,

Layoutbase

5

@layoutbase

here is the page URL

https://www.tillettsclothing.co.uk/collections/made-in-italy

if you could let me know that would me much appreciated. Thanks