-
Add the compare at price to the product-grid-item.liquid snippet. See gist file product-grid-item.liquid below.
-
Add the compare at price to the product-list-item.liquid snippet. See gist file product-list-item.liquid below.
-
Add the compare at price to the search-result-grid.liquid snippet. See gist file search-result-grid.liquid below.
-
Add the compare at price to the product.liquid template. See gist file product.liquid below.
-
For a more attractive strike-through, you can add some CSS to your stylesheet. See gist below.
Last active
October 9, 2022 10:00
-
-
Save carolineschnapp/72563af0879d66111504 to your computer and use it in GitHub Desktop.
Add compare at price to Supply theme.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
Right below this: | |
{% endcomment %} | |
{% include 'price' with product.price %} | |
{% comment %} | |
Add that: | |
{% endcomment %} | |
{% if product.compare_at_price > product.price %} | |
<small><s>{% include 'price' with product.compare_at_price %}</s></small> | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
Right below this: | |
{% endcomment %} | |
{% include 'price' with product.price %} | |
{% comment %} | |
Add that: | |
{% endcomment %} | |
{% if product.compare_at_price > product.price %} | |
<small><s>{% include 'price' with product.compare_at_price %}</s></small> | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
Right below this: | |
{% endcomment %} | |
var customPriceFormat = timber.formatMoney( Shopify.formatMoney(variant.price, "{{ shop.money_format }}") ); | |
{% comment %} | |
Add that: | |
{% endcomment %} | |
if ( variant.compare_at_price > variant.price ) { | |
customPriceFormat += ' <small><s>' + timber.formatMoney( Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") ) + '</s></small>'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% comment %} | |
Right below this: | |
{% endcomment %} | |
{% include 'price' with item.price %} | |
{% comment %} | |
Add that: | |
{% endcomment %} | |
{% if item.compare_at_price > item.price %} | |
<small><s>{% include 'price' with item.compare_at_price %}</s></small> | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
s { | |
position: relative; | |
text-decoration: none; | |
color: lighten($colorTextBody, 15%); | |
&:before { | |
position: absolute; | |
content: ""; | |
left: 50%; | |
top: 0; | |
bottom: -2px; | |
border-left: 1px solid; | |
-webkit-transform: rotate(45deg); | |
-moz-transform: rotate(45deg); | |
-ms-transform: rotate(45deg); | |
-o-transform: rotate(45deg); | |
transform: rotate(45deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment