How do I move the save label ($ or %) badge on the product image from top to bottom?

How do I move the save label ($ or %) badge on the product image from top to bottom?

You can change the style.scss.liquid file.

.prod_label{ position:absolute;top:10px;right:10px; max-width: 100px; text-align: right;

here change top:10px to bottom:10px
eg:
.prod_label{ position:absolute;bottom:10px;right:10px; max-width: 100px; text-align: right;


To hide this add display: none;

eg:
.prod_label{ position:absolute;display: none;top:10px;right:10px; max-width: 100px; text-align: right;

    • Related Articles

    • Variant Save Price and Percentage not changing on Product Page

      This issue can be fixed by changing code from in product-template.liquid change this: <span class="save-price">SAVE {{ saved_amount }}</span> to : <span id="save_price" class="save-price">SAVE {{ saved_amount }}</span> and adding the following code ...

    • Product Variant thumbnail has empty space

      If your product thumbnail has empty space, like the one above and you don't want to change the image dimensions, you can choose to apply a fix for this  In swatch.liquid file  change background-size:contain; in the following code to background-size: ...

    • How to change the 'Save Tag' on the product page from USD to %?

      If you are on the 1.3 version you will need to do this manually. {% assign wc_sale_type = 'money' %}  - for amounts {% assign wc_sale_type = 'percentage' %}  - for % sign We need to make change to product-card-grid.liquid and product-template.liquid ...

    • How to insert video in product description?

      Use the following code to embed the video in description. Just change the video url. This should work just fine. <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"><iframe ...

    • How can I add the "Track Order" option on the top nav menu or page?

      Log into Shopify admin>Online Store>Themes>Customize (on right). Code to be used inside a page to enable tracking of orders: <div style="text-align: center;"></div> <div style="text-align: center;"></div> <div style="text-align: center;">Can't wait ...