Shopify Question posted in
The Shopify help center can be found here.

"Buy Now" Button Covers Whole Product Thumbnail – Shopify

For the collection page (https://bloomthis.co/collections/on-demand-blooms), when each product is hovered on, the alternate image is displayed. The alternate image is the last image added in the product page.

I’m working on to have a “Buy Now” button on top of the alternate image. Currently when I hover on a thumbnail, I can see the alternate image for a split second and the button is “exploded” to full size following the grid size.

enter image description here

What I want instead is for the button to be on top of the alternate image without covering the whole thumbnail area. Like this:

enter image description here

Liquid Code (button is in <div class="reveal">)

  {% if product.title contains "Subscription" %}
    <a href="{{ product.url | within: collection }}" class="grid__image">
      <div class="reveal">
        <button class="btn--secondary btn--small">Send Now</button>
      <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
      <img class="hidden" src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
      </div>
        </a>
    {% else %}
      <a href="{{ product.url | within: collection }}" class="grid__image overlay-box" onclick="">
      <div class="overlay" onclick="" rel="{{ product.title | handleize }}">

          <div class="reveal">
      <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
        <img class="hidden" src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
      <button class="hidden btn--secondary btn--small">Buy Now</button>
      </div>

      </div>
      <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  {% endif %}

CSS

    //Reveal module
    .hidden { display: block !important; visibility: visible !important;}

    .btn {
      font-family: 'Playfair Display';
      letter-spacing: 2px;
      text-transform: uppercase;
      display: inline-block;
      padding: 8px 10px;
      width: auto;
      margin: 0;
      line-height: 1.42;
      font-weight: bold;
      text-align: center;
      vertical-align: bottom;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid transparent;
      @include user-select(none);
      -webkit-appearance: none;
      -moz-appearance: none;
      border-radius: $radius;

      /*======== Set primary button colors - can override later ========*/
      background-color: $colorBtnPrimary;
      color: $colorBtnPrimaryText;

      &:hover {
        background-color: $colorBtnPrimaryHover;
        color: $colorBtnPrimaryText;
      }

      &:active,
      &:focus {
       background-color: $colorBtnPrimaryActive;
       color: $colorBtnPrimaryText;
      }

      &[disabled],
      &.disabled {
        cursor: default;
        color: $disabledBorder;
        background-color: $disabledGrey;
      }
    }

    .btn--small {
      padding: 4px 5px;
      font-size: em(12px);
    }

    .btn--secondary {
  @extend .btn;
  background-color: $colorBtnSecondary;

  &:hover {
    background-color: $colorBtnSecondaryHover;
    color: $colorBtnSecondaryText;
  }

  &:active,
  &:focus {
   background-color: $colorBtnSecondaryActive;
   color: $colorBtnSecondaryText;
  }
}

Is it possible to have three “overlays” (original image, alternate image, button)?

Tags:

2

Answers


  1. 0

    I don’t know for certain but try changing the width from auto to 200px and add a height: 100px right below the width to the .btn class. That’s should get you closer to your desired outcome and there are a few other steps but I am curious what this does before I lead you down any further. Let me know!

    Login or Signup to reply.
  2. 0

    You need to absolute position your button and with the size on the bottom. Apply this CSS styles to make it looks like the picture below:
    enter image description here

    .reveal .hidden.btn--secondary {
    position: absolute;
    bottom: 10px;
    width: auto;
    height: auto;
    left: 50%;
    transform: translate(-50%,-50%);
    top: auto;
    padding: 10px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search