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

How to style text product-template.liquid and put an oval around depending on text length Shopify

I am using the prestige theme and I want style my ‘Restocked’ like how you see it with ‘Best Seller’ that has the oval around it and a drop shadow if possible. Below is what I have in the product-template.liquid and I am trying to get the oval to autosize with the text and have a bit of padding to the sides and the top and bottom of the text, just like the picture of the ‘best seller’. Any idea on how to do this?

<div class="Product__InfoWrapper">
<div class="Product__Info {% if image_count == 0 %}Product__Info--noGallery{% endif %}">
<div class="Container">

{% if product.tags contains "new-badge" %}
NEW PRODUCT
{% elsif product.tags contains 'restocked' %}
RESTOCKED 
{% elsif product.tags contains 'best-seller' %}
BEST SELLER 
{% elsif product.tags contains 'selling-fast' %}
SELLING FAST 
{% endif %}

{%- render 'product-meta', product: product, show_description: true -%}

{%- if product.template_suffix != 'coming-soon' -%}
{%- render 'product-form', product: product -%}
{%- endif -%}

What I have currently Current view

What I want What I am trying to get

Tags:

2

Answers


  1. 0

    enter image description here

    Try this code.
    Use your font style and border color.

    <body>
    <div style="text-align: center">
      <p
        style="
          border: 2px solid rgba(68, 66, 66, 0.473);
          border-radius: 300px;
          padding: 10px;
          width: 190px;
          font-size: 22px;
          font-weight: 900;
        "
      >
        RESTOCKED
      </p>
    </div>
</body>
    Login or Signup to reply.
  2. 0

    This will solve your auto-resizing problem based on font size.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Button style</title>
  </head>
  <body>
    <div style="text-align: center">
      <button
        style="
          border: 2px solid rgba(68, 66, 66, 0.473);
          border-radius: 300px;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-size: 22px;
          font-weight: 900;
        "
      >
        RESTOCKED
      </button>
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search