Debut Theme - Centering Price on Hover

Solved
New Member
3 0 0

Hi all,

 

I edited my Debut theme to display product title and price upon hover, but can't seem to center the price - everything else is centered, but the price is aligned left. 

 

Also, how can I edit the code so that the vendor/designer (ie Prada) shows first at the top, rather than the product name?

 

Here is what displays when hovering:

3ba86dc325339f3d0cc084a5913c2c76

 

Code below from product.card.liquid:

 

{% unless grid_image_width %}
  {%- assign grid_image_width = '300x300' -%}
{% endunless %}
{%- assign grid_image_scale = '2' -%}
 
 
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    
    <div class="reveal">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
      <div class="hidden">
      <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt | escape }}" />
<div class="caption">
      <div class="centered">
        <div class="h4 grid-view-item__title">{{ product.title }}</div>
        <div class="grid-view-item__meta">{% include 'product-price', variant: product %}</div>
      </div><!-- end of .centered -->
    </div><!-- end of .caption -->
  </div><!-- end of .hidden -->
    </div><!-- end of .reveal -->
  </a>
</div>

 

 

 

0 Likes
Shopify Expert
96 17 12

@metalburger - Send across a url for the page in question and i'll take a peek.  If the site is password protected, include that as well.

0 Likes
New Member
3 0 0

Success.

Shopify Expert
96 17 12

@metalburger - Thanks!  Looks like you are missing a block display for the price wrapper.  Quick fix... add this to the bottom of your theme.scss asset file:

.price {
    display: block;
}

If this works, keep me posted and make sure to mark this as solved!  Will help the next person who has a similar question :)

0 Likes
New Member
3 0 0

@__cascadia thank you! That did the trick!

 

Is switching the order of the text in the hover also relatively easy to fix? I tinkered around with product-card-grid.liquid and it seems to be a matter of switching the order of the string below around, but the price moves around with the vendor.

 

Ideally I would like the order to be displayed as:

Vendor

Title

Price

 

<div class="h4 grid-view-item__title">{{ product.title }}</div>
<div class="grid-view-item__meta">{% include 'product-price', variant: product %}</div>

 

{% unless grid_image_width %}
  {%- assign grid_image_width = '300x300' -%}
{% endunless %}
{%- assign grid_image_scale = '2' -%}
 
 
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    
    <div class="reveal">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
      <div class="hidden">
      <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt | escape }}" />
<div class="caption">
      <div class="centered">
        <div class="h4 grid-view-item__title">{{ product.title }}</div>
        <div class="grid-view-item__meta">{% include 'product-price', variant: product %}</div>
      </div><!-- end of .centered -->
    </div><!-- end of .caption -->
  </div><!-- end of .hidden -->
    </div><!-- end of .reveal -->
  </a>
 
0 Likes
Shopify Expert
96 17 12

@metalburger - This would require a bit more coding than I provide on the forum.  To get you in the right direction, you would need to located the div that contains the vendor.title variable and remove from the 'product-price' snippet.  You would then need to add that variable above the product.title variable.

 

That said, if you could like my comments and mark this as solved, it will help the next person having the same issue :)

0 Likes