Add "explore more" or "shop now" button to each product in a featured collection

[Jenyam]

Hello, I'm using Dawn theme 5.0 and I'd like to add a button underneath each product in a collection, linking to the relevant product page. I.e. where the quick add to cart button would be, but instead of adding to your cart it would lead through the the product page.

The reason being is that I'd like for potential customers to read about the collection and its benefits before seeing the price. 

Is anyone able to help with this?

Thanks in advance!

[BSS-Commerce]

Hi @Jenyam 

Can you kindly share your link store (with the password, if any) with us? We will help you check and suggest you a solution.

[Jenyam]

Hello, yes my store is: https://shinjukulanes.com/

[Jenyam]

Dawn 5.0 theme

[Jenyam]

@BSS-Commerce now tagging you as I'm not sure if you get alerted otherwise!

[BSS-Commerce]

Hi @Jenyam 

I received your information. Please give us a little time to check the issue and suggest you a solution.

[BSS-Commerce]

Hi @Jenyam 

I understand that you want to show this:

If yes, please follow these steps:

1. Go to the theme and search for the file card-product.liquid

2. In the file card-product.liquid, search for {%- if show_quick_add -%}

Use the comment to not show the Add to bag button (If you want to show it again, remove the comment)

{%- comment -%}
{%- endcomment -%}

3. Insert more code after the comment

<div class="quick-add">
    <a href="{{ card_product.url }}" style="text-decoration: none;">
        <button class="button button--full-width button--secondary">
            Explore More
        </button>
    </a>
</div>

The result is:

I hope it works for you. If not, please provide us with more information. We will help you check it and suggest a solution.

[Jenyam]

Thanks very much @BSS-Commerce, I think the issue is almost solved but for some reason the button appears after before the title, as pictured below. How do I have the product title show first as you have? I have double checked the code and from what I can see, I have the same as you, so I'm not sure why this has happened

[BSS-Commerce · Accepted solution]

Hi @Jenyam 

Please follow these steps:

1. Go to the theme, search for the file base.css

2. Insert the code

ul li.grid__item .card-wrapper .card__content {
  display: flex;
  flex-direction: column;
}

This is the result:

I hope that it works for you.

[Jenyam]

Thanks so much, that did the job!

[BSS-Commerce]

Hi @Jenyam 

I'm happy to see our suggestion helped you solve the issue. Can you kindly give us a like and mark it as a solution so that other people can refer to it if they get an issue like you?

[SH1021]

Hi there, I am hoping you can help us too! We use debut theme, on our collection pages, we would like to:

- have an 'add to cart' button
- we don't want to show the volume to the left of the button. By default we would like the button to add one item to cart, this is because most of our products are one offs
- we would like the button to be small. Currently we have a sale on and it shows the sale button -- this is the size we are looking for to use on collection pages
- when the product is out of stock, we would like it that the 'add to cart' button doesn't show
- on the collection pages, we would also like the button to be white with our blue brand colour as outline. The code we have tried automatically uses a block colour on the button (as you see on the actual product page - we want to retain this style for product page, but different style for collection page).
We have tried code suggestions on other community posts: it adds the volume + a button .. but these only go to the product page and do not add to cart

Our website is:
ashandstone.online

Thanks so much for all your help!