Issue
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 
What I want 
Solution
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>
Answered By - gaurav Answer Checked By - Clifford M. (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.