Add a View button on your collection pages and grid view
In Pipeline, any of the product grid listings have a link directly to the product simply by clicking on the product image, title of the product or the price. If you want to emphasize the call to action by adding a button like in the example below, here's a code modification you can make.
How to:
Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.
Make a duplicate before any code changes:
Next, open the Code Editor:
From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:
Example if you're working from your main live/published theme:
Quick link if the theme is live/published:
Open Code Editor
Open your snippets/product-grid-item.liquid file in the Code Editor.
Quick link if your theme is live/published:
https://shopify.com/admin/themes/current?key=snippets/product-grid-item.liquid
In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:
<a href="{{ product.url | within: collection | capitalize }}">
Example:
(1) Paste the code from above in the Find box and press enter.
(2) Locate the right line highlighted in yellow.
Next,
We will add some blank lines after the highlighted line:
Paste the one of the following code options:
Option 1 - Accent color button:
Accent color button, use this code:
<p style="margin-bottom: 1rem;" class="btn btn--splash">View</p>
Or
Option 2 - Clear button with link color text:
Clear button, use this code:
<p style="margin-bottom: 1rem;" class="btn btn--clear">View</p>
Example where to paste:
Note, older themes will look like this:
Save the file.
That will add the button for you below the product image. This is the most ideal location. If you add the button below the product name and price, the buttons will likely not line-up evenly as some products have longer names.
Undo
Use the Older versions link at the top of the file if you need to rollback or undo this code change.
