App Landing Template

Certainly! Here's a step-by-step guide for Installing the sales ticker:

Step 1: Navigate to Store Themes and Edit Code

Log in to your Shopify admin panel.
From the left-hand menu, go to "Online Store" and then click on "Themes."

Step 2: Search for or Create the sales-ticker-widget.liquid Snippet

In the Themes section, click on "Actions" for the theme you want to edit and select "Edit code."
In the left sidebar, under the "Sections" or "Snippets" folder (whichever is applicable), search for a file named sales-ticker-widget.liquid.

If the file exists, proceed to Step 3.
If the file does not exist, proceed to create a new snippet with the name sales-ticker-widget.liquid.

Step 3: Add Snippet Code

Open the sales-ticker-widget.liquid file for editing.
Paste the following code into the snippet file:

{%- capture collectionIdArr -%}
    {%- for collection in product.collections -%}
      {{- collection.id -}}{%- unless forloop.last -%},{%- endunless -%}
    {%- endfor -%}
  {%- endcapture -%}

  <div
    {% if pageType == 'product' %}
      class="product-sale-widgets-product-wrapper"
    {% else %}
      class="product-sale-widgets-collection"
    {% endif %}
    data-product="{{ product.id }}"
    data-tags="{{ product.tags | join: ',' }}"
    data-collections="{{ collectionIdArr }}"
    data-variant="{{ product.selected_or_first_available_variant.id }}"
  ></div>

Step 4: Call the Snippet on Product and Collection Pages

On your product page and collection page templates, locate the section where you want to display the sales ticker widget.
Use the following code to render the sales-ticker-widget.liquid snippet, passing the necessary data and the page type:

{% render 'sales-ticker-widget', product: card_product, pageType: 'product' %}

Adjust the pageType parameter accordingly, using either 'product' or 'collection' based on the page type.

Step 5: Save Changes and Test

Save the changes made to the sales-ticker-widget.liquid file.
Test the sales ticker widget on both product and collection pages to ensure it displays correctly.