Adding button to product highlight

Shopify Discussion

Topic summary

Goal: Replace the featured product’s “Take a look inside ->” text with a button-style link that goes to the product page (not a Buy Button), matching the store’s default button style.

Proposed approaches:

  • Template/snippet route: Create a custom button by cloning existing Buy Button snippets for more control and styling. A minimal example and screenshots show where to insert code (including an icon-arrow render). Images and code snippets are central to this suggestion.
  • CSS-only styling: Keep the existing link and style it to look like a button. Steps: Online Store > Theme > Edit code > open base.css and add a rule for .link.product__view-details.animate-arrow. The CSS applies the theme’s button background color (using --color-button and --alpha-button-background), padding, white text, border radius via --buttons-radius, centered text, and removes underline.

Outcome/status: No confirmation from the original poster; resolution not yet verified. Next actions: Try the CSS method to match button styling; if more customization is needed, use the cloned snippet approach for finer control.

Summarized with AI on December 12. AI used: gpt-5.
1

I’m looking to add a button to the featured product block on my homepage – keptcollection.com.

I’ve already added a custom element where it says “Take a look inside ->” but instead of this being text I’d like it to be a button instead. I do not want standard buy buttons here, I simply want the button to link to the product page.

This is the customization I made previously to this area.
https://community.shopify.com/topic/2857914

Is there a way to change or replace this text with a button that matches my store default button sytle

Thank you for your help!

2

Hi Cody123,
You can try the minimum level below. If you want more control or customization you can clone the Buy-Buttons snippets and make changes as you need.

CodeCrafting_0-1734232387406.png
CodeCrafting_0-1734232387406.png1057×324 12.9 KB

Code:


            
            {% render 'icon-arrow' %}

CodeCrafting_1-1734232567720.png
CodeCrafting_1-1734232567720.png420×734 21 KB

Regards,
Development Team
Code Crafting AI

Our Apps: Stock Meter

2 Likes
3

Hello @cody123 ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

.link.product__view-details.animate-arrow {
    background-color: rgba(var(--color-button),var(--alpha-button-background));
    padding: 0.9rem;
    width: auto;
    text-align: center;
    color: #fff;
    border-radius: var(--buttons-radius);
    text-decoration: none;
}

Regards
Guleria

1 Like