Solved

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

Jenyam
Tourist
6 0 1

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!

Accepted Solution (1)
BSS-Commerce
Shopify Expert
3477 462 523

This is an accepted solution.

Hi @Jenyam 

 

Please follow these steps:

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

view (72).png

2. Insert the code

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

view (73).png

This is the result:

view (74).png

I hope that it works for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 11 (11)

BSS-Commerce
Shopify Expert
3477 462 523

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Jenyam
Tourist
6 0 1

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

 

Jenyam
Tourist
6 0 1

Dawn 5.0 theme

Jenyam
Tourist
6 0 1

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

BSS-Commerce
Shopify Expert
3477 462 523

Hi @Jenyam 

 

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-Commerce
Shopify Expert
3477 462 523

Hi @Jenyam 

 

I understand that you want to show this:

image_2022_12_02T04_24_41_700Z.png

If yes, please follow these steps:

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

view (62).png

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 -%}

view (63).png

view (64).png

 

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>

view (65).png

 

The result is:

view (66).png

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

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Jenyam
Tourist
6 0 1

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

Screenshot 2022-12-04 at 13.39.12.png

BSS-Commerce
Shopify Expert
3477 462 523

This is an accepted solution.

Hi @Jenyam 

 

Please follow these steps:

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

view (72).png

2. Insert the code

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

view (73).png

This is the result:

view (74).png

I hope that it works for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Jenyam
Tourist
6 0 1

Thanks so much, that did the job!

BSS-Commerce
Shopify Expert
3477 462 523

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?

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

SH1021
Tourist
10 0 2

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!