Adding Sale and Full Prices To Collection Carousel

New Member
1 0 0

Hi everyone!

 

I'm new to using Shopify and coding, but would love some help figuring out how to add the full price next to sale prices in the collection carousel on my website's home page. At the moment the prices that are displayed on the carousel are the sale prices, but unfortunately I can't figure out how to display the full prices next to the sale prices, so right now it doesn't look like there's a sale happening i.e.

What I'm seeing now: $20

What I would like to see: $20 $40

 

I've found other posts that detail how to add the sale prices to collection pages, or product grids, but not to the carousel. To clarify, the actual collection page (with the product grid) is displaying both the sale and full prices. So I would like this to translate to the carousel.

 

I believe this is the code for the collection carousel on the home page:

 

{% comment %}
  Collection Carousel
    Simple carousel for products in a collection.

  Dependencies:
    snippets/collection-carousel.liquid

  Version:
    1.1.0 - 2018/02/20

{% endcomment %}

{% comment %} Variable Assignment {% endcomment %}
{%-assign collection = collections[section.settings.s-collection]-%}
{%-assign columns = 4-%}

{%-assign dots = false %}
{%-assign arrows = section.settings.s-show-arrows-%}
{%-assign infinite = section.settings.s-is-infinite-%}
{%-assign autoplay = section.settings.s-autoplay-enabled-%}
{%-assign autoplay_speed = section.settings.s-autoplay--speed | times: 1000 -%}

{%- assign title = section.settings.title -%}
{%-if section.settings.s-enable-title == false-%}{%-assign title = nil-%}{%-endif-%}

{%-assign label = section.settings.s-view-button-text-%}
{%-if section.settings.s-enable-view-button == false-%}{%-assign label = nil-%}{%-endif-%}

{% if collection != blank %}

  <section class="c-section c-section--{{section.id}} c-collection-carousel">
    <div class="c-collection-carousel__title-row">
      <h2 class="o-title c-collection-carousel__title c-collection-carousel__index-title">
        {{ section.settings.heading-line1 }}
      </h2>
      {%- if section.settings.s-link-url != blank -%}
        <div class="c-collection-carousel__title c-collection-carousel__label-container">
          <a class="c-collection-carousel__label" href="{{ section.settings.s-link-url }}"> {{ section.settings.s-link-label }}</a>
        </div>
      {%- endif -%}
    </div>
    <div class="c-section-carousel__collection-wrap">
      {%- comment -%}Select the collection type box{%- endcomment -%}

      {% comment %} Build Carousel {% endcomment %}
      {%- include 'collection-carousel' with {
        id: section.id
        collection: collection,
        class: 'c-collection-carousel__loop-container--first is-visible',
        data: 'data-best-sell-collection-first',
        columns: columns,
        title: title,
        label: label
        dots: dots,
        arrows: arrows,
        infinite: infinite,
        autoplay: autoplay,
        speed: autoplay_speed
      } -%}
    </div>
  </section>
{% endif %}

{% schema %}
  {
    "name": "Collection Carousel",
    "class": "c-section__collection-carousel",
    "settings": [
      {
        "type": "text",
        "id": "heading-line1",
        "label": "Heading line 1"
      },
      {
        "type": "text",
        "id": "s-link-label",
        "label": "Link Label"
      },
      {
        "type": "url",
        "id": "s-link-url",
        "label": "Link"
      },
      {
        "type": "header",
        "content": "Collection Settings 1"
      },
      {
        "type": "collection",
        "id": "s-collection",
        "label": "Collection"
      },
      {
        "type": "text",
        "id": "s-select-collection-1-header",
        "label": "Collection 1 Header"
      },
      {
        "type": "text",
        "id": "s-select-collection-1-text",
        "label": "Collection 1 Text"
      },
      {
        "type": "header",
        "content": "Carousel Settings"
      },
      {
        "id": "s-show-arrows",
        "type": "checkbox",
        "label": "Show Carousel Arrows",
        "default": true
      },
      {
        "id": "s-is-infinite",
        "type": "checkbox",
        "label": "Infinite Carousel",
        "default": true
      },
      {
        "id": "s-autoplay-enabled",
        "type": "checkbox",
        "label": "Autoplay",
        "default": false
      },
      {
        "id": "s-autoplay--speed",
        "type": "range",
        "min": 1,
        "max": 20,
        "label": "Autoplay Speed",
        "default": 3
      },
      {
        "type": "text",
        "id": "s-text-buy-now",
        "label": "Buy Now Button Text",
        "default": "Shop now"
      }
    ],
    "presets": [
      {
        "name": "Collection Carousel",
        "category": "Collection"
      }
    ]
  }
{% endschema %}

 

 

 

And I believe this is the code for the product pricing:

 

{% comment %}
  Product Pricing
    Generates a simple set of pricing elements for displaying a price, including
    all the required data-attributes to listen to most events.

  Paramaters:
    product_price - Useful product_price from tool.product-variables

  Version:
    1.0.0 - 2019/01/30
{% endcomment %}
<div class="o-product-pricing {{ class }}">
  {% comment %}
    Please note that this pricing logic also exists in the variant-selector.js
    file, ensure that all logic changes here are mimiced there.
  {% endcomment %}

  {%- comment -%}Grad Link, used on product pages{%- endcomment -%}
  {%- assign has_grad_link = false -%}
  {%- assign gl = product.metafields["global"]["Grad-Student-Link"] -%}
  {%- if gl -%}
    {%- assign has_grad_link = true -%}
  {%- endif -%}

  {%- capture compareClasses -%}
    o-product-pricing__money o-product-pricing__compare {{ class }}-money {{ class }}-compare
  {%- endcapture -%}

  {%- if product_compare_at > product_money -%}
    <span
      class="{{ compareClasses }}"
      data-currency
      data-money="{{ product_compare_at }}"
      data-product-compare-money
      data-product-handle-price="{{product.handle}}"
    >
      {{- product_compare_at | money }}
    </span>
  {% endif %}

  {% comment %} Regular Price Display {% endcomment %}
  {%- if product_money == 0 -%}
    <span class="o-product-pricing__money o-product-pricing__price {{ class }}-money {{ class }}-price">
      FREE
    </span>
  {%- else -%}
    <span
      class="o-product-pricing__money o-product-pricing__price {{ class }}-money {{ class }}-price"
      data-currency
      data-money="{{ product_money }}"
      data-product-money
      data-product-handle-price="{{product.handle}}"
      data-product-price
    >
      {{- product_money | money -}}
    </span>
    {%- if has_grad_link == true and class == 'c-product-template__pricing' -%}
      <span class="c-product-template__grad-link">
        {{ gl }}
      </span>
    {%- endif -%}
  {%- endif -%}
</div>

 

 

Thanks for your help in advance!

 

0 Likes