Horizon Theme Replace add to cart button with view product button for only certain products on the collections pages only

Store Design
,
1

Hi, I’m using the Horizon theme and I’m trying to either change the Add to cart button on the product cards for select products to a Product Details link or remove the add button entirely for select tagged products. However, I still wish to retain the Add to cart button on the product details page.

I also need this product to appear alongside other products in standard collections so I can’t just universally remove the buttons from the product cards within a new collection template.

So far I’ve managed to disable the add to cart button and change the button text for the specific product but it has impacted it on both the collections pages and the product page.

I can’t seem to find a way to only target the buttons when they appear on the collections pages but not on the product details page. Is this even possible on the horizon theme now? Both locations appear to be controlled by the blocks/buy-button.liquid file which is where I made my change to override the can_add_to_cart variable.

image
image1200×1200 199 KB

I’ve spent the past 2 hours searching similar issues but none of them have been able to help and those that seemed to be the most promising appear to have had the functional code blocks removed from the posts (what is that about?)

Thank you

2

This would be an excellent use of the Sidekick tool. That’s what it’s there for.

You can add a custom liquid section, and use conditional logic to display either a custom “view product” button or the theme’s buy buttons block.

4

My experience of the sidekick tool has been an awful lot of it making something that is almost what I want and every subsequent follow up moves it slightly further away from doing what I need.

I just bit the bullet and did the hard work.

The solution involved needing to expand the buy buttons schema with a new option which could then be enabled in all of the places that I wanted the alternate behaviour to occur combined with changes to the way that the buy buttons render so that a generic See Product button within an anchor to the product page would be returned instead of the regular buy buttons.

For anyone else wishing to replicate this behaviour the following changes are required in the blocks/buy-buttons.liquid file.

This needs to be added somewhere within the schema towards the bottom of the file

    {
      "type": "checkbox",
      "id": "override_quick_add",
      "label": "Override Add To Cart Button",
      "info": "When enabled any products tagged with 'override-cart-add' will display a 'See Product' button linking to the product page instead of the add to cart buttons",
      "default": false
    },

Further up the file you will find the following line of code which is followed by the standard add to cart button rendering code

{%- if product != blank -%}

It needs to be replaced with this

  {%- if block_settings.override_quick_add == true and closest.product.tags contains 'override-cart-add' -%}
    <div
      class="product-form-buttons spacing-style{% if block_settings.stacking %} product-form-buttons--stacked{% endif %}"
      style="{% render 'spacing-style', settings: block_settings %}"
      ref="productFormButtons"
    >
      <a href="{{ product.url }}">
        <button
          type="submit"
          name="details"
          class="button add-to-cart-button button"
        >
          See Product
        </button>
      </a>
    </div>
  {%- else if product != blank -%}

Then to actually use this behaviour you’ll need to add an override-cart-add tag to any products you wish to override and enable the Override Add To Cart Button setting which can be found under Buy Buttons within the Product Card setting in the theme editor for all of your collections/featured collections/search results/etc. where you want to replace the add to cart buttons.