Shopify themes, liquid, logos, and UX
Hello,
I am currently using the free Venture theme for my website, and was wondering how I could edit the code so that instead of displaying Sold Out, the button would display Coming Soon instead. I only want this change to happen if either the Product Type is "Coming Soon" or if it is in the "Coming Soon" collection.
I am aware of the option to change edit the language so that you can change Sold Out to Coming Soon. However this will just change all cases of Sold Out to Coming Soon. I would still like to keep the button displaying Sold Out if the inventory (of an product that does not have Product Type = Coming Soon or Collection = Coming Soon) is 0.
I am also aware of apps that might provide this functionality, but I am only interested in implementing a change via the editing the code.
My understanding of html is still fairly basic. I am assuming that in order to implement this function, one would need to edit the product-template.liquid file
<div class="product-form__item product-form__item--submit">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full product-form__cart-submit{% unless current_variant.available %} btn--sold-out{% endunless %}{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
I think this part would be changed right? I am just not sure how I should change it so that it would display Coming Soon when the inventory is 0 and when either Product Type is "Coming Soon" or Collection is "Coming Soon"
Thanks,
-Me
@atranho - one option is to create completely separate product template for coming soon collection products, and add the required functionality to it, that way different templates will have different functionalities and can be set separately, you can contact me.
Could you explain how to go about this solution on here? @suyash1
I know I'd obviously go to Edit code > add new template and then would also have to make the corresponding section (I'm using Debut so a sectioned theme). I'm pretty sure this snippet is where the sold out button would be edited:
{% endif %}
<div class="product-form__item product-form__item--submit{% if section.settings.enable_payment_button %} product-form__item--payment-button{% endif %}{% if product.has_only_default_variant %} product-form__item--no-variants{% endif %}">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{{ form | payment_terms }}
{% endif %}
</div>
{% endform %}
{% include 'da-restock' %}
</div>
{ { 'products.product.sold_out' | t } }
{ { 'products.product.coming_soon' | t } }
@stephanierobo - the actual text is in language settings, please check them, you will get the text you want, it should be in products section of language settings
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024