Minimal Theme - Adding a "Shop All" button to Home Page Collections

Solved
Tourist
8 1 1

I would like to add a "Shop All" or "View All" button next to each featured collection on the homepage that when clicked will jump to the page showing all of the products in that specific collection. 

 

Here is a screenshot showing what I currently have:

Before.JPG

 

And what I am wanting to achieve:

After.JPG

0 Likes
Trailblazer
233 27 29

hi, are those collections added through code or customiser? if through customiser then try to add manual link , if through code then will need to edit coding of the theme which is bit time taking and difficult but may work if we get correct code

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Shopify Expert
183 0 15
You can easily do this by editing the code of your theme for that collection.
Web developer/Graphic Designer
christina@designsrus.us
1 Like
Tourist
8 1 1

I figured it out...some what. I got a "shop all" text hyper link to show beside the Collection Title that jumps to the specific collection page by following these directions:

(https://community.shopify.com/c/Shopify-Design/Simple-theme-add-quot-see-more-quot-button-or-collect...)

Working code 1.JPG

I eliminated the part this part of the code "{% if collections[featured].products_count > total_products %}" because it hides the link if there are fewer items in the collection then what it is set up to show on the home page.

 

 

HOWEVER, I would like to either make the hyperlink text smaller or align it all the way to the right side.

Working code 1 on website.JPG

0 Likes
Tourist
8 1 1

The collections are not added with a custom code. They're added using the Shopify functions.

0 Likes
Tourist
8 1 1

I somewhat figured it out. I followed the directions in this link:

Link to alternative solution


But instead of using the full code, I deleted the first line of code because it hides the "Shop All" hyperlink if there are fewer items in the collection then you have it set to show on the home page. I changed "see more" to "shop all"  I added it to the "featured-collection.liquid" section so now it looks like this:

Working code 1.JPG

 


HOWEVER, I would like to make the hyper link text smaller or move it all the way to the right side of the page like so.

Working code 1 on website.JPG

0 Likes
Trailblazer
233 27 29

this alignment and size can be done via CSS, I can let you know the code if you give me the website link and password, if any.

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
Tourist
8 1 1

ALL FIGURED OUT!

FINISHED WORKING CODE.JPGFINISHED WORKING CODE WEBSITE.JPG

0 Likes
Highlighted

Success.

Tourist
8 1 1
<!-- CUSTOM CODE ADDED to make a SHOP ALL hyperlink after each Featured Collection on the home page -->
      <div class="navigation-right" style="float:right">
      <a href="{{ collections[featured].url }}">SHOP ALL</a>
      </div>
<!-- END OF CUSTOM CODE ADDED -->

 Insert it here:

FINISHED WORKING CODE.JPG

1 Like
Trailblazer
233 27 29

awesome, if you need any styling then do let me know.

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes