Shopify themes, liquid, logos, and UX
Hello, I am trying to add a text above the Add to Cart button on my products which says something along the lines of "Product out of stock, Pre-Order now" or something similar (would be great if it is editable). Also along it should have a Question mark where i can add a small pop up message explaining what pre-order means.
This message should only pop-up, when the selected Size / Variant of a product's stock is 0. When the product stock is above 0, I would also like to have a message above the Add to Cart Button saying "Delivery 2-6 days" (for example). Would that be possible through a easy code? I tried searching everywhere for answers but nothing worked for me..
I am using the Dawn theme.
here is an example of how it could look like:
And the Question mark pop up text example:
Thank you in advance!
Website URL: trinitysneakers.com
Solved! Go to the solution
This is an accepted solution.
- Here is the solution for you @ChrisM187
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open the main-product.liquid file, which is located under the Sections folder
- Locate the Add to Cart button: Look for the code that generates the Add to Cart button in the file. It will look something like this:
<button type="submit" class="button product-form__cart-submit">Add to Cart</button>
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
-Add the dynamic message above the Add to Cart button: Insert this Liquid code above the button to dynamically display the "Pre-Order" or "Delivery" message based on the variant's stock quantity.
<!-- Dynamic Message Section -->
<div class="product-availability-message">
{% if current_variant.inventory_quantity <= 0 %}
<!-- Pre-Order Message for Out of Stock Products -->
<div class="pre-order-message">
<span>Product out of stock, Pre-Order now</span>
<!-- Tooltip for explanation -->
<a href="#" class="preorder-info" data-toggle="tooltip" title="This product is currently out of stock but can be pre-ordered. We'll ship it as soon as it's back in stock.">
<span class="tooltip-icon">?</span>
</a>
</div>
{% else %}
<!-- Delivery Message for In Stock Products -->
<div class="delivery-message">
<span>Delivery 2-6 days</span>
</div>
{% endif %}
</div>
<!-- Add to Cart Button -->
<button type="submit" class="button product-form__cart-submit">Add to Cart</button>
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
<!-- Optional: Add the tooltip CSS and JavaScript -->
<style>
.tooltip-icon {
border-radius: 50%;
border: 1px solid #000;
padding: 2px 5px;
font-size: 0.8rem;
cursor: pointer;
}
.pre-order-message, .delivery-message {
margin-bottom: 10px; /* Space between message and button */
font-weight: bold;
}
</style>
<script>
// Tooltip functionality
document.addEventListener('DOMContentLoaded', function () {
const tooltipElements = document.querySelectorAll('.preorder-info');
tooltipElements.forEach(function (el) {
el.addEventListener('mouseenter', function () {
const title = this.getAttribute('title');
const tooltip = document.createElement('div');
tooltip.className = 'custom-tooltip';
tooltip.innerText = title;
document.body.appendChild(tooltip);
tooltip.style.position = 'absolute';
tooltip.style.left = `${this.getBoundingClientRect().left}px`;
tooltip.style.top = `${this.getBoundingClientRect().top - tooltip.offsetHeight}px`;
el.addEventListener('mouseleave', function () {
tooltip.remove();
});
});
});
});
</script>
And add this code to top file
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
@ChrisM187 Hi! Yes, this is possible with a bit of custom Liquid code and JavaScript. You can conditionally display messages based on stock levels for your variants. I can help you implement this in the Dawn theme, including the editable 'Pre-Order' message with the question mark pop-up.
This is an accepted solution.
- Here is the solution for you @ChrisM187
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open the main-product.liquid file, which is located under the Sections folder
- Locate the Add to Cart button: Look for the code that generates the Add to Cart button in the file. It will look something like this:
<button type="submit" class="button product-form__cart-submit">Add to Cart</button>
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
-Add the dynamic message above the Add to Cart button: Insert this Liquid code above the button to dynamically display the "Pre-Order" or "Delivery" message based on the variant's stock quantity.
<!-- Dynamic Message Section -->
<div class="product-availability-message">
{% if current_variant.inventory_quantity <= 0 %}
<!-- Pre-Order Message for Out of Stock Products -->
<div class="pre-order-message">
<span>Product out of stock, Pre-Order now</span>
<!-- Tooltip for explanation -->
<a href="#" class="preorder-info" data-toggle="tooltip" title="This product is currently out of stock but can be pre-ordered. We'll ship it as soon as it's back in stock.">
<span class="tooltip-icon">?</span>
</a>
</div>
{% else %}
<!-- Delivery Message for In Stock Products -->
<div class="delivery-message">
<span>Delivery 2-6 days</span>
</div>
{% endif %}
</div>
<!-- Add to Cart Button -->
<button type="submit" class="button product-form__cart-submit">Add to Cart</button>
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
<!-- Optional: Add the tooltip CSS and JavaScript -->
<style>
.tooltip-icon {
border-radius: 50%;
border: 1px solid #000;
padding: 2px 5px;
font-size: 0.8rem;
cursor: pointer;
}
.pre-order-message, .delivery-message {
margin-bottom: 10px; /* Space between message and button */
font-weight: bold;
}
</style>
<script>
// Tooltip functionality
document.addEventListener('DOMContentLoaded', function () {
const tooltipElements = document.querySelectorAll('.preorder-info');
tooltipElements.forEach(function (el) {
el.addEventListener('mouseenter', function () {
const title = this.getAttribute('title');
const tooltip = document.createElement('div');
tooltip.className = 'custom-tooltip';
tooltip.innerText = title;
document.body.appendChild(tooltip);
tooltip.style.position = 'absolute';
tooltip.style.left = `${this.getBoundingClientRect().left}px`;
tooltip.style.top = `${this.getBoundingClientRect().top - tooltip.offsetHeight}px`;
el.addEventListener('mouseleave', function () {
tooltip.remove();
});
});
});
});
</script>
And add this code to top file
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
For a weird reason i can not find the add to cart button..
@ChrisM187 👋🏼 You can also do this more easily with a preorder app from App Store. Most - including ours - have a generous free plan and with them, you can -
1. Make it very clear that customers are preordering the product by changing the 'Add to cart' button.
2. Add a disclaimer underneath so customers know what to expect with their preorder.
3. Add a badge on the products to distinguish them from regular in-stock items.
And you can do all of this across products and variants of products. Here's what ours looks like, and most apps will let you add some version of this to the product page with no coding. 🙂 -
Founder & CEO, Artos Software
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024