🛠️Shopify Installation

This guide covers the installation of Pixfizz to your Shopify store.

To make changes you will need to go to the "Online Store" and on your current theme, Edit Code. If you need to update your theme you will need to re-add these code changes.

Setup Product and Variant Metafields

In Shopify, go to Settings - Custom Data and create the following Product Metafields ensuring content type matches.

Product Metafields

Pixfizz Integration Type

Name: Pixfizz Integration Type Namespace and Key: pixfizz.integration_type Description: Use one of "editor" (default), "options-to-editor", "options-to-cart". Type: Single Line Text Regular Expression: ^editor|options-to-editor|options-to-cart$

Pixfizz product SKU

Name: Pixfizz product SKU Namespace and Key: pixfizz.product_sku Description: A combination of “theme-code:product-code" from pixfizz store. Type: Single Line Text

Pixfizz extra page addon

Name: Pixfizz extra page addon Namespace and Key: pixfizz.page_addon_product Description: Select the product that will be added to the cart when the customer adds Type: Product Variant

Pixfizz option addons

Name: Pixfizz option addons Namespace and Key: pixfizz.option_addon_products Description: Select the product(s that will be added to the cart when customer selects linked Pixfizz option. Type: Product

Pixfizz option type code

Name: Pixfizz option type code Namespace and Key: pixfizz.option_type_code Description: Links an addon product to an option type in Pixfizz Type: Single Line Text

Adjust Cart QTY

Name: Pixfizz Adjust Cart QTY Namespace and Key: pixfizz.adjust_cart_qty Description: Set to "False" to stop customers from updating cart QTY Type: True or False

SEO Hidden

Name: SEO Hidden Namespace and Key: seo.hidden Description: Set to 1 to hide from search. Type: Integer

Now create the following Product Metafields ensuring content type matches.

Variant Metafields

Name: Pixfizz product SKU Namespace and Key: pixfizz.product_sku Description: A combination of “theme-code:product-code" from pixfizz store. Type: Single Line Text

Name: Pixfizz extra page addon Namespace and Key: pixfizz.page_addon_product Description: Select the product that will be added to the cart when the customer adds Type: Product Variant

Name: Pixfizz option value code Namespace and Key: pixfizz.option_value_code Description: Links this variant to an option value in Pixfizz. Type: Single Line Text

Name: Pixfizz option addons Namespace and Key: pixfizz.option_addon_products Description: Select the product(s) that will be added to the cart when customer selects linked Pixfizz option. Type: Product

Adding elements to you shopify code. Go to your theme and edit code:

The below is for medium to advanced technical users. If you are not confident to setup the below code in your Shopify admin, Pixfizz can support the implementation. Please contact [email protected] to request help.

Reference main integration snippet in Layout

Theme: Insert this line into your theme’s layout (typically called theme.liquid), just before the closing </head> tag:

{% render 'pixfizz-setup' %}

Create Snippets

Create a new snippet called pixfizz-setup.liquid. Copy the following contents into it:

pixfizz-setup

{%- assign pixfizz_host = "design.myshop.com" -%}
{%- assign shared_secret = "123456" -%}

<script type="text/javascript" src="https://{{ pixfizz_host }}/site/shopify/api.js"></script>
<script type="text/javascript">
  (() => {  
    {%- if customer %}
      {%- capture hash_str %}{{ customer.id }}|{{ customer.email }}{% endcapture -%}
      {%- capture hash %}{{ hash_str | md5 }}{{ shared_secret }}{% endcapture -%}
      const user = {
        uid: "{{ customer.id }}",
        email: "{{ customer.email }}"
      };
      const hash = "{{ hash | md5 }}";
    {%- else %}
      const user = null;
      const hash = null;
    {%- endif %}
    Pixfizz.Shopify.setup({{ pixfizz_host | json }}, user, hash, {locale: {{ request.locale.iso_code | json }}});
  })();
</script>

• Replace design.myshop.com at the top of the snippet with the hostname of your pixfizz site. You must use a custom hostname (not the default something.pixfizz.com) that is a subdomain of your Shopify shop’s domain. An example would be create.myprintshop.com

• Replace 123456 in line 2 of the snippet with the shared secret which you can find in your Pixfizz admin.

pixfizz-launch-product-handler

pixfizz-launch-product-handler

{%- assign integration_type = product.metafields.pixfizz.integration_type | default: 'editor' -%}
{%- capture handler -%}
  (() => {
    const pixfizz_sku_map = {};
    {%- for variant in product.variants -%}
      pixfizz_sku_map[{{ variant.id }}] = {{ variant.metafields.pixfizz.product_sku | default: product.metafields.pixfizz.product_sku | json }};
    {%- endfor -%}
    const product_option_addons = {};
    {%- for addon in product.metafields.pixfizz.option_addon_products.value -%}
      product_option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}] = {};
      {%- for addon_variant in addon.variants -%}
        product_option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}][{{ addon_variant.metafields.pixfizz.option_value_code | json }}] = {{ addon_variant.id | json }};
      {%- endfor -%}
    {%- endfor -%}
    const pixfizz_addons_map = {};
    {%- for variant in product.variants -%}
      pixfizz_addons_map[{{ variant.id }}] = {
        page_addon: {{ variant.metafields.pixfizz.page_addon_product.value.id | default: product.metafields.pixfizz.page_addon_product.value.id | json }},
        option_addons: Object.assign({}, product_option_addons)
      };
      {%- for addon in variant.metafields.pixfizz.option_addon_products.value -%}
        if (!pixfizz_addons_map[{{ variant.id }}].option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}]) {
          pixfizz_addons_map[{{ variant.id }}].option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}] = {};
        }
        {%- for addon_variant in addon.variants -%}
          pixfizz_addons_map[{{ variant.id }}].option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}][{{ addon_variant.metafields.pixfizz.option_value_code | json }}] = {{ addon_variant.id | json }};
        {%- endfor -%}
      {%- endfor -%}
    {%- endfor -%}
    const form = document.querySelector('form[action*="/cart/add"]');
    const selected_variant_id = form && (new FormData(form)).get('id') || {{ product.selected_or_first_available_variant.id | json }};
    const parameters = {
      page_addon: pixfizz_addons_map[selected_variant_id].page_addon || '',
      option_addons: JSON.stringify(pixfizz_addons_map[selected_variant_id].option_addons)
    };
    Pixfizz.Shopify.launchProduct(
      pixfizz_sku_map[selected_variant_id],
      {{ integration_type | json }},
      {{ product.id | json }},
      selected_variant_id,
      parameters
    );
  })();
  return false;
{%- endcapture -%}
{{ handler | escape }}

pixfizz-orderline-preview-handler

pixfizz-orderline-preview-handler

{%- capture handler -%}
  {%- if item.properties._pixfizz_project_id %}
    Pixfizz.Shopify.replaceImageWithProjectPreview(
      this.previousElementSibling,
      {{ item.properties._pixfizz_project_id | json }},
      {
        width: {{ width | json }},
        height: {{ height | json }}
      }
    );
  {%- endif -%}
{%- endcapture -%}
<style onload="{{ handler | escape }}"></style>

pixfizz-edit-orderline-handler

pixfizz-edit-orderline-handler

{%- capture handler -%}
  (() => {
    const page_addon = {{ item.variant.metafields.pixfizz.page_addon_product.value.id | default: item.product.metafields.pixfizz.page_addon_product.value.id | json }};
    const option_addons = {};
    {%- for addon in item.product.metafields.pixfizz.option_addon_products.value -%}
      option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}] = {};
      {%- for addon_variant in addon.variants -%}
        option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}][{{ addon_variant.metafields.pixfizz.option_value_code | json }}] = {{ addon_variant.id | json }};
      {%- endfor -%}
    {%- endfor -%}
    {%- for addon in item.variant.metafields.pixfizz.option_addon_products.value -%}
      if (!option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}]) {
        option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}] = {};
      }
      {%- for addon_variant in addon.variants -%}
        option_addons[{{ addon.metafields.pixfizz.option_type_code | json }}][{{ addon_variant.metafields.pixfizz.option_value_code | json }}] = {{ addon_variant.id | json }};
      {%- endfor -%}
    {%- endfor -%}
    const parameters = {
      cart: 't',
      line_item_key: {{ item.key | json }},
      quantity: {{ item.quantity | json }},
      page_addon: page_addon || '',
      option_addons: JSON.stringify(option_addons)
    };
    {%- if item.product.metafields.pixfizz.integration_type == 'options-to-cart' %}
      const options = {
        push_state: false,
        design_tool: false
      };
    {%- else -%}
      const options = {
        push_state: true,
        design_tool: true
      };
    {%- endif -%}
    Pixfizz.Shopify.launchProject(
      {{ item.properties._pixfizz_project_id | json }},
      parameters,
      options
    );
  })();
  return false;
{%- endcapture -%}
{{ handler | escape }}

pixfizz-orderline-quantity-handler

The code in this snippet may have to be adjusted if you are using a theme other than Dawn.

pixfizz-orderline-quantity-handler

{%- capture handler -%}
  (async (event) => {
    const quantity = {% if delete_item %}0{% else %}parseInt(event.target.value, 10){% endif %};
    const item_updates = {
      '{{ item.key }}': quantity
    };
    {%- if item.properties._pixfizz_project_id -%}
      {%- for iteritem in cart.items -%}
        {%- if iteritem.properties._pixfizz_addon == item.properties._pixfizz_project_id -%}
          item_updates['{{ iteritem.key }}'] = {{ iteritem.properties._pixfizz_unit_quantity }} * quantity;
        {%- endif -%}
      {%- endfor -%}
    {%- endif -%}
    if (event.__pixfizz_addons_handled) {
      return;
    } else if (Object.keys(item_updates).length) {
      event.stopImmediatePropagation();
      event.target.closest('cart-items').enableLoading({{ item.index | plus: 1 }});
      if (quantity > 0) {
        item_updates['{{ item.key }}'] = quantity;
      }
      await fetch(`${Shopify.routes.root}cart/update.js`, {
        method: 'POST',
        body: JSON.stringify({updates: item_updates}),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      if (quantity > 0) {
        const new_event = new Event(event.type, {bubbles: true});
        new_event.__pixfizz_addons_handled = true;
        event.target.dispatchEvent(new_event);
      } else {
        {%- comment %} When deleting, we cannot rely on native handler, so just refresh the cart page. {% endcomment -%}
        window.location.reload();
      }
    }
  })(event);
  return false;
{%- endcapture -%}
{{ handler | escape }}

Create New Product Page Template

There are 2 options to add enable a "Customize" button to appear. The first one is the simplest and easiest. An alternative method may be more relevant when not using Dawn Theme or where the site needs to have additional functionality -> Disabling the customize button when there is zero stock.

On the product page for Pixfizz products, we’ll have to replace the buy buttons with a “Personalize” button. The cleanest way to do that is to create a dedicated product template for Pixfizz products.

This is for Shopify 2.0 compatible themes only. Older themes must go into the theme code and create a new Template from there.

Go to the theme editor in Shopify, and on the template selector dropdown, select “Products → Create template”.

The template should be based on your default product template. Name it “Pixfizz Product”.

Now select the block with the buy button(s) and remove it. We will add a “Custom liquid” block in its place.

• Paste the following code into the liquid input field (Note you can change the word "Personalize" to any text you wish):

<button onclick="{% render 'pixfizz-launch-product-handler' %}">
  Personalize
</button>

Another example:

<button onclick="{% render 'pixfizz-launch-product-handler' %}" class="button button--full-width">Personalize</button>

Update Cart Page

Dawn Theme: main-cart-items section

After backing up your code please overwrite the main-cart-items.liquid with the following:

Dawn Version 14.0.0

{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- unless settings.cart_type == 'drawer' -%}
  <script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>

<cart-items class="gradient color-{{ section.settings.color_scheme }} isolate{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
  <div class="page-width">
    <div class="title-wrapper-with-link">
      <h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
      <a href="{{ routes.all_products_collection_url }}" class="underlined-link">
        {{- 'general.continue_shopping' | t -}}
      </a>
    </div>

    <div class="cart__warnings">
      <h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
      <a href="{{ routes.all_products_collection_url }}" class="button">
        {{ 'general.continue_shopping' | t }}
      </a>

      {%- if shop.customer_accounts_enabled and customer == null -%}
        <h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
        <p class="cart__login-paragraph">
          {{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
        </p>
      {%- endif -%}
    </div>

    <form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
      <div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
        <div class="js-contents">
          {%- if cart != empty -%}
            <table class="cart-items">
              <caption class="visually-hidden">
                {{ 'sections.cart.title' | t }}
              </caption>
              <thead>
                <tr>
                  <th class="caption-with-letter-spacing" colspan="2" scope="col">
                    {{ 'sections.cart.headings.product' | t }}
                  </th>
                  <th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">
                    {{ 'sections.cart.headings.total' | t }}
                  </th>
                  <th
                    class="cart-items__heading--wide cart-items__heading--quantity small-hide caption-with-letter-spacing"
                    colspan="1"
                    scope="col"
                  >
                    {{ 'sections.cart.headings.quantity' | t }}
                  </th>
                  <th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">
                    {{ 'sections.cart.headings.total' | t }}
                  </th>
                </tr>
              </thead>

              <tbody>
                {%- for item in cart.items -%}

                  {%  comment %} Pixfizz Code Start {% endcomment %}
                  {%- if item.properties._pixfizz_addon -%}
                    {% continue %}
                  {%- endif %}
                  {%  comment %} Pixfizz Code End {% endcomment %}  
                  
                  <tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
                    <td class="cart-item__media">
                      {% if item.image %}
                        {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
                        <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"
                          
                          {% comment %} Pixfizz Code Start {% endcomment %}
                          style="z-index:1;"
                          {%- if item.properties._pixfizz_project_id -%}
                            onclick="{% render 'pixfizz-edit-orderline-handler', item: item %}"
                          {%- endif -%}
                          {% comment %} Pixfizz Code End {% endcomment %}
                          
                          > </a>
                        <div class="cart-item__image-container gradient global-media-settings">
                          <img
                            src="{{ item.image | image_url: width: 300 }}"
                            class="cart-item__image"
                            alt="{{ item.image.alt | escape }}"
                            loading="lazy"
                            width="150"
                            height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                          >

                          {% comment %} Pixfizz Code Start {% endcomment %}
                          {% render 'pixfizz-orderline-preview-handler', item: item, width: 300 %}
                          {% comment %} Pixfizz Code End {% endcomment %}
                          
                        </div>
                      {% endif %}
                    </td>

                    <td class="cart-item__details">
                      {%- if settings.show_vendor -%}
                        <p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
                      {%- endif -%}

                      <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>

                      {%- if item.original_price != item.final_price -%}
                        <div class="cart-item__discounted-prices">
                          <span class="visually-hidden">
                            {{ 'products.product.price.regular_price' | t }}
                          </span>
                          <s class="cart-item__old-price product-option">
                            {{- item.original_price | money -}}
                          </s>
                          <span class="visually-hidden">
                            {{ 'products.product.price.sale_price' | t }}
                          </span>
                          <strong class="cart-item__final-price product-option">
                            {{ item.final_price | money }}
                          </strong>
                        </div>
                      {%- else -%}
                        <div class="product-option">
                          {{ item.original_price | money }}
                        </div>
                      {%- endif -%}

                      {%- if item.product.has_only_default_variant == false
                        or item.properties.size != 0
                        or item.selling_plan_allocation != null
                      -%}
                        <dl>
                          {%- if item.product.has_only_default_variant == false -%}
                            {%- for option in item.options_with_values -%}
                              <div class="product-option">
                                <dt>{{ option.name }}:</dt>
                                <dd>{{ option.value }}</dd>
                              </div>
                            {%- endfor -%}
                          {%- endif -%}

                          {%- for property in item.properties -%}
                            {%- assign property_first_char = property.first | slice: 0 -%}
                            {%- if property.last != blank and property_first_char != '_' -%}
                              <div class="product-option">
                                <dt>{{ property.first }}:</dt>
                                <dd>
                                  {%- if property.last contains '/uploads/' -%}
                                    <a href="{{ property.last }}" class="link" target="_blank">
                                      {{ property.last | split: '/' | last }}
                                    </a>
                                  {%- else -%}
                                    {{ property.last }}
                                  {%- endif -%}
                                </dd>
                              </div>
                            {%- endif -%}
                          {%- endfor -%}
                        </dl>

                        <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                      {%- endif -%}

                      <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                        {%- for discount in item.line_level_discount_allocations -%}
                          <li class="discounts__discount">
                            {%- render 'icon-discount' -%}
                            {{ discount.discount_application.title }}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </td>

                    <td class="cart-item__totals right medium-hide large-up-hide">
                      {%- render 'loading-spinner' -%}
                      <div class="cart-item__price-wrapper">
                        {%- if item.original_line_price != item.final_line_price -%}
                          <dl class="cart-item__discounted-prices">
                            <dt class="visually-hidden">
                              {{ 'products.product.price.regular_price' | t }}
                            </dt>
                            <dd>
                              <s class="cart-item__old-price price price--end">
                                {{ item.original_line_price | money }}
                              </s>
                            </dd>
                            <dt class="visually-hidden">
                              {{ 'products.product.price.sale_price' | t }}
                            </dt>
                            <dd class="price price--end">
                              {{ item.final_line_price | money }}
                            </dd>
                          </dl>
                        {%- else -%}
                          <span class="price price--end">
                            {{ item.original_line_price | money }}
                          </span>
                        {%- endif -%}

                        {%- if item.variant.available and item.unit_price_measurement -%}
                          <div class="unit-price caption">
                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                            {{ item.unit_price | money }}
                            <span aria-hidden="true">/</span>
                            <span class="visually-hidden"
                              >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                            >
                            {%- if item.unit_price_measurement.reference_value != 1 -%}
                              {{- item.unit_price_measurement.reference_value -}}
                            {%- endif -%}
                            {{ item.unit_price_measurement.reference_unit }}
                          </div>
                        {%- endif -%}
                      </div>
                    </td>
                    {%- liquid
                      assign has_qty_rules = false
                      if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
                        assign has_qty_rules = true
                      endif

                      assign has_vol_pricing = false
                      if item.variant.quantity_price_breaks.size > 0
                        assign has_vol_pricing = true
                      endif
                    -%}
                    <td class="cart-item__quantity{% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}">
                      <quantity-popover>
                        <div class="cart-item__quantity-wrapper quantity-popover-wrapper">
                          <label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
                            {{ 'products.product.quantity.label' | t }}
                          </label>
                          <div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">
                            {%- if has_qty_rules or has_vol_pricing -%}
                              <button
                                type="button"
                                aria-expanded="false"
                                class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide medium-hide"
                              >
                                {% render 'icon-info' %}
                              </button>
                            {%- endif -%}

                            {%  comment %} Pixfizz Code Start {% endcomment %}
                            {%- if item.product.metafields.pixfizz.adjust_cart_qty.value == false -%}
                              <span>{{ item.quantity }}</span>
                            {%- else -%}
                            
                            <quantity-input class="quantity cart-quantity">
                              <button class="quantity__button" name="minus" type="button">
                                <span class="visually-hidden">
                                  {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
                                </span>
                                {% render 'icon-minus' %}
                              </button>
                              <input
                                class="quantity__input"
                                data-quantity-variant-id="{{ item.variant.id }}"
                                type="number"
                                name="updates[]"
                                value="{{ item.quantity }}"
                                {% # theme-check-disable %}
                                data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
                                min="0"
                                data-min="{{ item.variant.quantity_rule.min }}"
                                {% if item.variant.quantity_rule.max != null %}
                                  max="{{ item.variant.quantity_rule.max }}"
                                {% endif %}
                                step="{{ item.variant.quantity_rule.increment }}"
                                {% # theme-check-enable %}
                                aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                                id="Quantity-{{ item.index | plus: 1 }}"
                                data-index="{{ item.index | plus: 1 }}"

                                {%  comment %} Pixfizz Code Start {% endcomment %}
                                  onchange="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart %}"
                                  onkeydown="if(event.keyCode===13)event.preventDefault()"
                                {%  comment %} Pixfizz Code End {% endcomment %}
                                
                              >
                              <button class="quantity__button" name="plus" type="button">
                                <span class="visually-hidden">
                                  {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
                                </span>
                                {% render 'icon-plus' %}
                              </button>
                            </quantity-input>

                            {%- endif -%}
                            {%  comment %} Pixfizz Code End {% endcomment %}
                            
                          </div>
                          <cart-remove-button
                            id="Remove-{{ item.index | plus: 1 }}"
                            data-index="{{ item.index | plus: 1 }}"
                          >
                            <a
                              href="{{ item.url_to_remove }}"
                              class="button button--tertiary"
                              aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"

                              {%  comment %} Pixfizz Code Start {% endcomment %}
                              onclick="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart, delete_item: true %}"
                              {%  comment %} Pixfizz Code End {% endcomment %}
                              
                            >
                              {% render 'icon-remove' %}
                            </a>
                          </cart-remove-button>
                        </div>
                        {%- if has_qty_rules or has_vol_pricing -%}
                          <button
                            type="button"
                            class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide"
                            aria-expanded="false"
                          >
                            {% render 'icon-info' %}
                            <span>
                              {%- if has_vol_pricing -%}
                                {{ 'products.product.volume_pricing.note' | t }}
                              {%- elsif has_qty_rules -%}
                                {{ 'products.product.quantity.note' | t }}
                              {%- endif -%}
                            </span>
                          </button>
                        {%- endif -%}
                        {%- if has_vol_pricing or has_qty_rules -%}
                          <div
                            class="cart-items__info global-settings-popup quantity-popover__info"
                            tabindex="-1"
                            hidden
                          >
                            {%- if has_qty_rules == false -%}
                              <span class="volume-pricing-label caption">
                                {{- 'products.product.volume_pricing.title' | t -}}
                              </span>
                            {%- endif -%}
                            <div class="quantity__rules caption">
                              {%- if item.variant.quantity_rule.increment > 1 -%}
                                <span class="divider">
                                  {{-
                                    'products.product.quantity.multiples_of'
                                    | t: quantity: item.variant.quantity_rule.increment
                                  -}}
                                </span>
                              {%- endif -%}
                              {%- if item.variant.quantity_rule.min > 1 -%}
                                <span class="divider">
                                  {{-
                                    'products.product.quantity.min_of'
                                    | t: quantity: item.variant.quantity_rule.min
                                  -}}
                                </span>
                              {%- endif -%}
                              {%- if item.variant.quantity_rule.max != null -%}
                                <span class="divider">
                                  {{-
                                    'products.product.quantity.max_of'
                                    | t: quantity: item.variant.quantity_rule.max
                                  -}}
                                </span>
                              {%- endif -%}
                            </div>
                            <button
                              class="button-close button button--tertiary large-up-hide"
                              type="button"
                              aria-label="{{ 'accessibility.close' | t }}"
                            >
                              {%- render 'icon-close' -%}
                            </button>
                            {%- if item.variant.quantity_price_breaks.size > 0 -%}
                              <volume-pricing class="parent-display">
                                <ul class="list-unstyled">
                                  <li>
                                    <span>{{ item.variant.quantity_rule.min }}+</span>
                                    {%- assign price = item.variant.price | money_with_currency -%}
                                    <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                                  </li>
                                  {%- for price_break in item.variant.quantity_price_breaks -%}
                                    <li>
                                      <span>
                                        {{- price_break.minimum_quantity -}}
                                        <span aria-hidden="true">+</span></span
                                      >
                                      {%- assign price = price_break.price | money_with_currency -%}
                                      <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </volume-pricing>
                            {%- endif -%}
                          </div>
                        {%- endif -%}
                        <div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
                          <small class="cart-item__error-text"></small>
                          <svg
                            aria-hidden="true"
                            focusable="false"
                            class="icon icon-error"
                            viewBox="0 0 13 13"
                          >
                            <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                            <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                            <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                            <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                          </svg>
                        </div>
                      </quantity-popover>
                    </td>

                    <td class="cart-item__totals right small-hide">
                      {%- render 'loading-spinner' -%}
                      <div class="cart-item__price-wrapper">
                        {%- if item.original_line_price != item.final_line_price -%}
                          <dl class="cart-item__discounted-prices">
                            <dt class="visually-hidden">
                              {{ 'products.product.price.regular_price' | t }}
                            </dt>
                            <dd>
                              <s class="cart-item__old-price price price--end">
                                {{ item.original_line_price | money }}
                              </s>
                            </dd>
                            <dt class="visually-hidden">
                              {{ 'products.product.price.sale_price' | t }}
                            </dt>
                            <dd class="price price--end">
                              {{ item.final_line_price | money }}
                            </dd>
                          </dl>
                        {%- else -%}
                          <span class="price price--end">
                            {{ item.original_line_price | money }}
                          </span>
                        {%- endif -%}

                        {%- if item.variant.available and item.unit_price_measurement -%}
                          <div class="unit-price caption">
                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                            {{ item.unit_price | money }}
                            <span aria-hidden="true">/</span>
                            <span class="visually-hidden"
                              >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                            >
                            {%- if item.unit_price_measurement.reference_value != 1 -%}
                              {{- item.unit_price_measurement.reference_value -}}
                            {%- endif -%}
                            {{ item.unit_price_measurement.reference_unit }}
                          </div>
                        {%- endif -%}
                      </div>
                    </td>
                  </tr>

                  {%  comment %} Pixfizz Code Start {% endcomment %}
                  {%- if item.properties._pixfizz_project_id -%}
                    {%- comment %} Check for any addon items belonging to this Pixfizz orderline {% endcomment -%}
                    {%- for addon_item in cart.items -%}
                      {%- if addon_item.properties._pixfizz_addon == item.properties._pixfizz_project_id -%}
                        <tr class="cart-item">
                          <td class="cart-item__media"></td>
                          <td class="cart-item__details">
                            <a class="cart-item__name h4 break">
                              {{ addon_item.product.title | escape }}
                            </a>
                            <div class="product-option">
                              {{ addon_item.final_price | money }}
                            </div>
                            {%- if addon_item.product.has_only_default_variant == false -%}
                              <dl>
                                {%- for option in addon_item.options_with_values -%}
                                  <div class="product-option">
                                    <dt>{{ option.name }}: </dt>
                                    <dd>{{ option.value }}</dd>
                                  </div>
                                {%- endfor -%}
                              </dl>
                            {%- endif -%}
                          </td>
                          <td class="cart-item__totals right medium-hide large-up-hide">
                            {{ addon_item.final_line_price | money }}
                          </td>
                          <td class="cart-item__quantity">
                            {{ addon_item.quantity }}
                          </td>
                          <td class="cart-item__totals right small-hide">
                            <div class="cart-item__price-wrapper">
                              {{ addon_item.final_line_price | money }}
                            </div>
                          </td>
                        </tr>
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                  {%  comment %} Pixfizz Code End {% endcomment %}
                  
                {%- endfor -%}
              </tbody>
            </table>
          {%- endif -%}
        </div>
      </div>

      <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
      <p
        class="visually-hidden"
        id="shopping-cart-line-item-status"
        aria-live="polite"
        aria-hidden="true"
        role="status"
      >
        {{ 'accessibility.loading' | t }}
      </p>
    </form>
  </div>
</cart-items>

{% schema %}
{
  "name": "t:sections.main-cart-items.name",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

Dawn Version 13.0.1

/{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- unless settings.cart_type == 'drawer' -%}
  <script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>

<cart-items class="gradient color-{{ section.settings.color_scheme }} isolate{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
  <div class="page-width">
    <div class="title-wrapper-with-link">
      <h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
      <a href="{{ routes.all_products_collection_url }}" class="underlined-link">
        {{- 'general.continue_shopping' | t -}}
      </a>
    </div>

    <div class="cart__warnings">
      <h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
      <a href="{{ routes.all_products_collection_url }}" class="button">
        {{ 'general.continue_shopping' | t }}
      </a>

      {%- if shop.customer_accounts_enabled and customer == null -%}
        <h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
        <p class="cart__login-paragraph">
          {{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
        </p>
      {%- endif -%}
    </div>

    <form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
      <div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
        <div class="js-contents">
          {%- if cart != empty -%}
            <table class="cart-items">
              <caption class="visually-hidden">
                {{ 'sections.cart.title' | t }}
              </caption>
              <thead>
                <tr>
                  <th class="caption-with-letter-spacing" colspan="2" scope="col">
                    {{ 'sections.cart.headings.product' | t }}
                  </th>
                  <th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">
                    {{ 'sections.cart.headings.total' | t }}
                  </th>
                  <th
                    class="cart-items__heading--wide cart-items__heading--quantity small-hide caption-with-letter-spacing"
                    colspan="1"
                    scope="col"
                  >
                    {{ 'sections.cart.headings.quantity' | t }}
                  </th>
                  <th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">
                    {{ 'sections.cart.headings.total' | t }}
                  </th>
                </tr>
              </thead>

              <tbody>
                {%- for item in cart.items -%}

                  {%  comment %} Pixfizz Code Start {% endcomment %}
                  {%- if item.properties._pixfizz_addon -%}
                    {% continue %}
                  {%- endif %}
                  {%  comment %} Pixfizz Code End {% endcomment %}  

                  <tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">
                    <td class="cart-item__media">
                      {% if item.image %}
                        {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
                        <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"
                          {% comment %} Pixfizz Code Start {% endcomment %}
                          style="z-index:1;"
                          {%- if item.properties._pixfizz_project_id -%}
                            onclick="{% render 'pixfizz-edit-orderline-handler', item: item %}"
                          {%- endif -%}
                          {% comment %} Pixfizz Code End {% endcomment %}
                        > 
                        </a>
                        <div class="cart-item__image-container gradient global-media-settings">
                          <img
                            src="{{ item.image | image_url: width: 300 }}"
                            class="cart-item__image"
                            alt="{{ item.image.alt | escape }}"
                            loading="lazy"
                            width="150"
                            height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                          >
                          {% comment %} Pixfizz Code Start {% endcomment %}
                          {% render 'pixfizz-orderline-preview-handler', item: item, width: 300 %}
                          {% comment %} Pixfizz Code End {% endcomment %}
                        </div>
                      {% endif %}
                    </td>

                    <td class="cart-item__details">
                      {%- if settings.show_vendor -%}
                        <p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
                      {%- endif -%}

                      <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>

                      {%- if item.original_price != item.final_price -%}
                        <div class="cart-item__discounted-prices">
                          <span class="visually-hidden">
                            {{ 'products.product.price.regular_price' | t }}
                          </span>
                          <s class="cart-item__old-price product-option">
                            {{- item.original_price | money -}}
                          </s>
                          <span class="visually-hidden">
                            {{ 'products.product.price.sale_price' | t }}
                          </span>
                          <strong class="cart-item__final-price product-option">
                            {{ item.final_price | money }}
                          </strong>
                        </div>
                      {%- else -%}
                        <div class="product-option">
                          {{ item.original_price | money }}
                        </div>
                      {%- endif -%}

                      {%- if item.product.has_only_default_variant == false
                        or item.properties.size != 0
                        or item.selling_plan_allocation != null
                      -%}
                        <dl>
                          {%- if item.product.has_only_default_variant == false -%}
                            {%- for option in item.options_with_values -%}
                              <div class="product-option">
                                <dt>{{ option.name }}:</dt>
                                <dd>{{ option.value }}</dd>
                              </div>
                            {%- endfor -%}
                          {%- endif -%}

                          {%- for property in item.properties -%}
                            {%- assign property_first_char = property.first | slice: 0 -%}
                            {%- if property.last != blank and property_first_char != '_' -%}
                              <div class="product-option">
                                <dt>{{ property.first }}:</dt>
                                <dd>
                                  {%- if property.last contains '/uploads/' -%}
                                    <a href="{{ property.last }}" class="link" target="_blank">
                                      {{ property.last | split: '/' | last }}
                                    </a>
                                  {%- else -%}
                                    {{ property.last }}
                                  {%- endif -%}
                                </dd>
                              </div>
                            {%- endif -%}
                          {%- endfor -%}
                        </dl>

                        <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                      {%- endif -%}

                      <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                        {%- for discount in item.line_level_discount_allocations -%}
                          <li class="discounts__discount">
                            {%- render 'icon-discount' -%}
                            {{ discount.discount_application.title }}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </td>

                    <td class="cart-item__totals right medium-hide large-up-hide">
                      {%- render 'loading-spinner' -%}
                      <div class="cart-item__price-wrapper">
                        {%- if item.original_line_price != item.final_line_price -%}
                          <dl class="cart-item__discounted-prices">
                            <dt class="visually-hidden">
                              {{ 'products.product.price.regular_price' | t }}
                            </dt>
                            <dd>
                              <s class="cart-item__old-price price price--end">
                                {{ item.original_line_price | money }}
                              </s>
                            </dd>
                            <dt class="visually-hidden">
                              {{ 'products.product.price.sale_price' | t }}
                            </dt>
                            <dd class="price price--end">
                              {{ item.final_line_price | money }}
                            </dd>
                          </dl>
                        {%- else -%}
                          <span class="price price--end">
                            {{ item.original_line_price | money }}
                          </span>
                        {%- endif -%}

                        {%- if item.variant.available and item.unit_price_measurement -%}
                          <div class="unit-price caption">
                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                            {{ item.unit_price | money }}
                            <span aria-hidden="true">/</span>
                            <span class="visually-hidden"
                              >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                            >
                            {%- if item.unit_price_measurement.reference_value != 1 -%}
                              {{- item.unit_price_measurement.reference_value -}}
                            {%- endif -%}
                            {{ item.unit_price_measurement.reference_unit }}
                          </div>
                        {%- endif -%}
                      </div>
                    </td>
                    {%- liquid
                      assign has_qty_rules = false
                      if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
                        assign has_qty_rules = true
                      endif

                      assign has_vol_pricing = false
                      if item.variant.quantity_price_breaks.size > 0
                        assign has_vol_pricing = true
                      endif
                    -%}
                    <td class="cart-item__quantity{% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}">
                      <quantity-popover>
                        <div class="cart-item__quantity-wrapper quantity-popover-wrapper">
                          <label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
                            {{ 'products.product.quantity.label' | t }}
                          </label>
                          <div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">
                            {%- if has_qty_rules or has_vol_pricing -%}
                              <button
                                type="button"
                                aria-expanded="false"
                                class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide no-js-hidden"
                              >
                                {% render 'icon-info' %}
                              </button>
                            {%- endif -%}
                            {%  comment %} Pixfizz Code Start {% endcomment %}
                            {%- if item.product.type == 'Photo Prints' -%}
                              <span>{{ item.quantity }} prints</span>
                            {%- else -%}
                              <quantity-input class="quantity cart-quantity">
                                <button class="quantity__button no-js-hidden" name="minus" type="button">
                                  <span class="visually-hidden">
                                    {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
                                  </span>
                                  {% render 'icon-minus' %}
                                </button>
                                <input
                                  class="quantity__input"
                                  data-quantity-variant-id="{{ item.variant.id }}"
                                  type="number"
                                  name="updates[]"
                                  value="{{ item.quantity }}"
                                  {% # theme-check-disable %}
                                  data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
                                  min="{{ item.variant.quantity_rule.min }}"
                                  {% if item.variant.quantity_rule.max != null %}
                                    max="{{ item.variant.quantity_rule.max }}"
                                  {% endif %}
                                  step="{{ item.variant.quantity_rule.increment }}"
                                  {% # theme-check-enable %}
                                  aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                                  id="Quantity-{{ item.index | plus: 1 }}"
                                  data-index="{{ item.index | plus: 1 }}"
                                  {%  comment %} Pixfizz Code Start {% endcomment %}
                                  onchange="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart %}"
                                  onkeydown="if(event.keyCode===13)event.preventDefault()"
                                  {%  comment %} Pixfizz Code End {% endcomment %}
                                >
                                <button class="quantity__button no-js-hidden" name="plus" type="button">
                                  <span class="visually-hidden">
                                    {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
                                  </span>
                                  {% render 'icon-plus' %}
                                </button>
                              </quantity-input>
                            {%- endif -%}
                            {%  comment %} Pixfizz Code End {% endcomment %}
                          </div>
                          <cart-remove-button
                            id="Remove-{{ item.index | plus: 1 }}"
                            data-index="{{ item.index | plus: 1 }}"
                          >
                            <a
                              href="{{ item.url_to_remove }}"
                              class="button button--tertiary"
                              aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
                              {%  comment %} Pixfizz Code Start {% endcomment %}
                              onclick="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart, delete_item: true %}"
                              {%  comment %} Pixfizz Code End {% endcomment %}
                            >
                              {% render 'icon-remove' %}
                            </a>
                          </cart-remove-button>
                        </div>
                        {%- if has_qty_rules or has_vol_pricing -%}
                          <button
                            type="button"
                            class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary medium-hide large-up-hide"
                            aria-expanded="false"
                          >
                            {% render 'icon-info' %}
                            <span>
                              {%- if has_vol_pricing -%}
                                {{ 'products.product.volume_pricing.note' | t }}
                              {%- elsif has_qty_rules -%}
                                {{ 'products.product.quantity.note' | t }}
                              {%- endif -%}
                            </span>
                          </button>
                        {%- endif -%}
                        {%- if has_vol_pricing or has_qty_rules -%}
                          <div
                            class="cart-items__info global-settings-popup quantity-popover__info"
                            tabindex="-1"
                            hidden
                          >
                            {%- if has_qty_rules == false -%}
                              <span class="volume-pricing-label caption">
                                {{- 'products.product.volume_pricing.title' | t -}}
                              </span>
                            {%- endif -%}
                            <div class="quantity__rules caption no-js-hidden">
                              {%- if item.variant.quantity_rule.increment > 1 -%}
                                <span class="divider">
                                  {{-
                                    'products.product.quantity.multiples_of'
                                    | t: quantity: item.variant.quantity_rule.increment
                                  -}}
                                </span>
                              {%- endif -%}
                              {%- if item.variant.quantity_rule.min > 1 -%}
                                <span class="divider">
                                  {{-
                                    'products.product.quantity.minimum_of'
                                    | t: quantity: item.variant.quantity_rule.min
                                  -}}
                                </span>
                              {%- endif -%}
                              {%- if item.variant.quantity_rule.max != null -%}
                                <span class="divider">
                                  {{-
                                    'products.product.quantity.maximum_of'
                                    | t: quantity: item.variant.quantity_rule.max
                                  -}}
                                </span>
                              {%- endif -%}
                            </div>
                            <button
                              class="button-close button button--tertiary medium-hide large-up-hide"
                              type="button"
                              aria-label="{{ 'accessibility.close' | t }}"
                            >
                              {%- render 'icon-close' -%}
                            </button>
                            {%- if item.variant.quantity_price_breaks.size > 0 -%}
                              <volume-pricing class="parent-display">
                                <ul class="list-unstyled">
                                  <li>
                                    <span>{{ item.variant.quantity_rule.min }}+</span>
                                    {%- assign price = item.variant.price | money_with_currency -%}
                                    <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                                  </li>
                                  {%- for price_break in item.variant.quantity_price_breaks -%}
                                    <li>
                                      <span>
                                        {{- price_break.minimum_quantity -}}
                                        <span aria-hidden="true">+</span></span
                                      >
                                      {%- assign price = price_break.price | money_with_currency -%}
                                      <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </volume-pricing>
                            {%- endif -%}
                          </div>
                        {%- endif -%}
                        <div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
                          <small class="cart-item__error-text"></small>
                          <svg
                            aria-hidden="true"
                            focusable="false"
                            class="icon icon-error"
                            viewBox="0 0 13 13"
                          >
                            <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                            <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                            <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                            <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                          </svg>
                        </div>
                      </quantity-popover>
                    </td>

                    <td class="cart-item__totals right small-hide">
                      {%- render 'loading-spinner' -%}
                      <div class="cart-item__price-wrapper">
                        {%- if item.original_line_price != item.final_line_price -%}
                          <dl class="cart-item__discounted-prices">
                            <dt class="visually-hidden">
                              {{ 'products.product.price.regular_price' | t }}
                            </dt>
                            <dd>
                              <s class="cart-item__old-price price price--end">
                                {{ item.original_line_price | money }}
                              </s>
                            </dd>
                            <dt class="visually-hidden">
                              {{ 'products.product.price.sale_price' | t }}
                            </dt>
                            <dd class="price price--end">
                              {{ item.final_line_price | money }}
                            </dd>
                          </dl>
                        {%- else -%}
                          <span class="price price--end">
                            {{ item.original_line_price | money }}
                          </span>
                        {%- endif -%}

                        {%- if item.variant.available and item.unit_price_measurement -%}
                          <div class="unit-price caption">
                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                            {{ item.unit_price | money }}
                            <span aria-hidden="true">/</span>
                            <span class="visually-hidden"
                              >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                            >
                            {%- if item.unit_price_measurement.reference_value != 1 -%}
                              {{- item.unit_price_measurement.reference_value -}}
                            {%- endif -%}
                            {{ item.unit_price_measurement.reference_unit }}
                          </div>
                        {%- endif -%}
                      </div>
                    </td>
                  </tr>

                  {%  comment %} Pixfizz Code Start {% endcomment %}
                  {%- if item.properties._pixfizz_project_id -%}
                    {%- comment %} Check for any addon items belonging to this Pixfizz orderline {% endcomment -%}
                    {%- for addon_item in cart.items -%}
                      {%- if addon_item.properties._pixfizz_addon == item.properties._pixfizz_project_id -%}
                        <tr class="cart-item">
                          <td class="cart-item__media"></td>
                          <td class="cart-item__details">
                            <a class="cart-item__name h4 break">
                              {{ addon_item.product.title | escape }}
                            </a>
                            <div class="product-option">
                              {{ addon_item.final_price | money }}
                            </div>
                            {%- if addon_item.product.has_only_default_variant == false -%}
                              <dl>
                                {%- for option in addon_item.options_with_values -%}
                                  <div class="product-option">
                                    <dt>{{ option.name }}: </dt>
                                    <dd>{{ option.value }}</dd>
                                  </div>
                                {%- endfor -%}
                              </dl>
                            {%- endif -%}
                          </td>
                          <td class="cart-item__totals right medium-hide large-up-hide">
                            {{ addon_item.final_line_price | money }}
                          </td>
                          <td class="cart-item__quantity">
                            {{ addon_item.quantity }}
                          </td>
                          <td class="cart-item__totals right small-hide">
                            <div class="cart-item__price-wrapper">
                              {{ addon_item.final_line_price | money }}
                            </div>
                          </td>
                        </tr>
                      {%- endif -%}
                    {%- endfor -%}
                  {%- endif -%}
                  {%  comment %} Pixfizz Code End {% endcomment %}
                  
                {%- endfor -%}
              </tbody>
            </table>
          {%- endif -%}
        </div>
      </div>

      <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
      <p
        class="visually-hidden"
        id="shopping-cart-line-item-status"
        aria-live="polite"
        aria-hidden="true"
        role="status"
      >
        {{ 'accessibility.loading' | t }}
      </p>
    </form>
  </div>
</cart-items>

{% schema %}
{
  "name": "t:sections.main-cart-items.name",
  "settings": [
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "scheme-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

Dawn Version 11.0.0

{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- unless settings.cart_type == 'drawer' -%}
  <script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}

<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>

<cart-items class="page-width{% if cart == empty %} is-empty{% else %} section-{{ section.id }}-padding{% endif %}">
  <div class="title-wrapper-with-link">
    <h1 class="title title--primary">{{ 'sections.cart.title' | t }}</h1>
    <a href="{{ routes.all_products_collection_url }}" class="underlined-link">{{ 'general.continue_shopping' | t }}</a>
  </div>

  <div class="cart__warnings">
    <h1 class="cart__empty-text">{{ 'sections.cart.empty' | t }}</h1>
    <a href="{{ routes.all_products_collection_url }}" class="button">
      {{ 'general.continue_shopping' | t }}
    </a>

    {%- if shop.customer_accounts_enabled and customer == null -%}
      <h2 class="cart__login-title">{{ 'sections.cart.login.title' | t }}</h2>
      <p class="cart__login-paragraph">
        {{ 'sections.cart.login.paragraph_html' | t: link: routes.account_login_url }}
      </p>
    {%- endif -%}
  </div>

  <form action="{{ routes.cart_url }}" class="cart__contents critical-hidden" method="post" id="cart">
    <div class="cart__items" id="main-cart-items" data-id="{{ section.id }}">
      <div class="js-contents">
        {%- if cart != empty -%}
          <table class="cart-items">
            <caption class="visually-hidden">
              {{ 'sections.cart.title' | t }}
            </caption>
            <thead>
              <tr>
                <th class="caption-with-letter-spacing" colspan="2" scope="col">
                  {{ 'sections.cart.headings.product' | t }}
                </th>
                <th class="medium-hide large-up-hide right caption-with-letter-spacing" colspan="1" scope="col">
                  {{ 'sections.cart.headings.total' | t }}
                </th>
                <th
                  class="cart-items__heading--wide cart-items__heading--quantity small-hide caption-with-letter-spacing"
                  colspan="1"
                  scope="col"
                >
                  {{ 'sections.cart.headings.quantity' | t }}
                </th>
                <th class="small-hide right caption-with-letter-spacing" colspan="1" scope="col">
                  {{ 'sections.cart.headings.total' | t }}
                </th>
              </tr>
            </thead>

            <tbody>
              {%- for item in cart.items -%}
                
              {%  comment %} Pixfizz Code Start {% endcomment %}
              {%- if item.properties._pixfizz_addon -%}
                {% continue %}
              {%- endif %}
              {%  comment %} Pixfizz Code End {% endcomment %}  
              
                <tr class="cart-item" id="CartItem-{{ item.index | plus: 1 }}">                  
                  <td class="cart-item__media">
                    {% if item.image %}
                      {% comment %} Leave empty space due to a:empty CSS display: none rule {% endcomment %}
                      <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1" 
                      
                      {%  comment %} Pixfizz Code Start {% endcomment %}
                       style="z-index:1;"
                      {%- if item.properties._pixfizz_project_id and item.product.metafields.pixfizz.integration_type != 'options-to-cart' -%}
                        onclick="{% render 'pixfizz-edit-orderline-handler', item: item %}"
                      {%- endif -%}
                     {%  comment %} Pixfizz Code End {% endcomment %}
                      
                     > </a>
                      <div class="cart-item__image-container gradient global-media-settings">
                        <img
                          src="{{ item.image | image_url: width: 300 }}"
                          class="cart-item__image"
                          alt="{{ item.image.alt | escape }}"
                          loading="lazy"
                          width="150"
                          height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
                        >
                      
                        {%  comment %} Pixfizz Code Start {% endcomment %}
                        {% render 'pixfizz-orderline-preview-handler', item: item, width: 300 %}
                        {%  comment %} Pixfizz Code End {% endcomment %}
                      
                      </div>
                    {% endif %}
                  </td>

                  <td class="cart-item__details">
                    {%- if settings.show_vendor -%}
                      <p class="caption-with-letter-spacing">{{ item.product.vendor }}</p>
                    {%- endif -%}

                    <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>

                    {%- if item.original_price != item.final_price -%}
                      <div class="cart-item__discounted-prices">
                        <span class="visually-hidden">
                          {{ 'products.product.price.regular_price' | t }}
                        </span>
                        <s class="cart-item__old-price product-option">
                          {{- item.original_price | money -}}
                        </s>
                        <span class="visually-hidden">
                          {{ 'products.product.price.sale_price' | t }}
                        </span>
                        <strong class="cart-item__final-price product-option">
                          {{ item.final_price | money }}
                        </strong>
                      </div>
                    {%- else -%}
                      <div class="product-option">
                        {{ item.original_price | money }}
                      </div>
                    {%- endif -%}

                    {%- if item.product.has_only_default_variant == false
                      or item.properties.size != 0
                      or item.selling_plan_allocation != null
                    -%}
                      <dl>
                        {%- if item.product.has_only_default_variant == false -%}
                          {%- for option in item.options_with_values -%}
                            <div class="product-option">
                              <dt>{{ option.name }}:</dt>
                              <dd>{{ option.value }}</dd>
                            </div>
                          {%- endfor -%}
                        {%- endif -%}

                        {%- for property in item.properties -%}
                          {%- assign property_first_char = property.first | slice: 0 -%}
                          {%- if property.last != blank and property_first_char != '_' -%}
                            <div class="product-option">
                              <dt>{{ property.first }}:</dt>
                              <dd>
                                {%- if property.last contains '/uploads/' -%}
                                  <a href="{{ property.last }}" class="link" target="_blank">
                                    {{ property.last | split: '/' | last }}
                                  </a>
                                {%- else -%}
                                  {{ property.last }}
                                {%- endif -%}
                              </dd>
                            </div>
                          {%- endif -%}
                        {%- endfor -%}
                      </dl>

                      <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                    {%- endif -%}

                    <ul class="discounts list-unstyled" role="list" aria-label="{{ 'customer.order.discount' | t }}">
                      {%- for discount in item.line_level_discount_allocations -%}
                        <li class="discounts__discount">
                          {%- render 'icon-discount' -%}
                          {{ discount.discount_application.title }}
                        </li>
                      {%- endfor -%}
                    </ul>
                  </td>

                  <td class="cart-item__totals right medium-hide large-up-hide">
                    <div class="loading-overlay hidden">
                      <div class="loading-overlay__spinner">
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          class="spinner"
                          viewBox="0 0 66 66"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </div>
                    <div class="cart-item__price-wrapper">
                      {%- if item.original_line_price != item.final_line_price -%}
                        <dl class="cart-item__discounted-prices">
                          <dt class="visually-hidden">
                            {{ 'products.product.price.regular_price' | t }}
                          </dt>
                          <dd>
                            <s class="cart-item__old-price price price--end">
                              {{ item.original_line_price | money }}
                            </s>
                          </dd>
                          <dt class="visually-hidden">
                            {{ 'products.product.price.sale_price' | t }}
                          </dt>
                          <dd class="price price--end">
                            {{ item.final_line_price | money }}
                          </dd>
                        </dl>
                      {%- else -%}
                        <span class="price price--end">
                          {{ item.original_line_price | money }}
                        </span>
                      {%- endif -%}

                      {%- if item.variant.available and item.unit_price_measurement -%}
                        <div class="unit-price caption">
                          <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                          {{ item.unit_price | money }}
                          <span aria-hidden="true">/</span>
                          <span class="visually-hidden"
                            >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                          >
                          {%- if item.unit_price_measurement.reference_value != 1 -%}
                            {{- item.unit_price_measurement.reference_value -}}
                          {%- endif -%}
                          {{ item.unit_price_measurement.reference_unit }}
                        </div>
                      {%- endif -%}
                    </div>
                  </td>
                  {%- liquid
                    assign has_qty_rules = false
                    if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
                      assign has_qty_rules = true
                    endif

                    assign has_vol_pricing = false
                    if item.variant.quantity_price_breaks.size > 0
                      assign has_vol_pricing = true
                    endif
                  -%}
                  <td class="cart-item__quantity{% if has_qty_rules or has_vol_pricing %} cart-item__quantity--info{% endif %}">
                    <quantity-popover>
                      <div class="cart-item__quantity-wrapper quantity-popover-wrapper">
                        <label class="visually-hidden" for="Quantity-{{ item.index | plus: 1 }}">
                          {{ 'products.product.quantity.label' | t }}
                        </label>
                        <div class="quantity-popover-container{% if has_qty_rules or has_vol_pricing %} quantity-popover-container--hover{% endif %}">
                          {%- if has_qty_rules or has_vol_pricing -%}
                            <button
                              type="button"
                              aria-expanded="false"
                              class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide no-js-hidden"
                            >
                              {% render 'icon-info' %}
                            </button>
                          {%- endif -%}
                          {%- if item.product.type == 'Photo Prints' -%}
                            <span>{{ item.quantity }} prints</span>
                          {%- else -%}
                            <quantity-input class="quantity cart-quantity">
                              <button class="quantity__button no-js-hidden" name="minus" type="button">
                                <span class="visually-hidden">
                                  {{- 'products.product.quantity.decrease' | t: product: item.product.title | escape -}}
                                </span>
                                {% render 'icon-minus' %}
                              </button>
                              <input
                                class="quantity__input"
                                data-quantity-variant-id="{{ item.variant.id }}"
                                type="number"
                                name="updates[]"
                                value="{{ item.quantity }}"
                                {% # theme-check-disable %}
                                data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
                                min="{{ item.variant.quantity_rule.min }}"
                                {% if item.variant.quantity_rule.max != null %}
                                  max="{{ item.variant.quantity_rule.max }}"
                                {% endif %}
                                step="{{ item.variant.quantity_rule.increment }}"
                                {% # theme-check-enable %}
                                aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                                id="Quantity-{{ item.index | plus: 1 }}"
                                data-index="{{ item.index | plus: 1 }}"
                                {%  comment %} Pixfizz Code Start {% endcomment %}
                                onchange="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart %}"
                                onkeydown="if(event.keyCode===13)event.preventDefault()"
                                {%  comment %} Pixfizz Code End {% endcomment %}
                              >
                              <button class="quantity__button no-js-hidden" name="plus" type="button">
                                <span class="visually-hidden">
                                  {{- 'products.product.quantity.increase' | t: product: item.product.title | escape -}}
                                </span>
                                {% render 'icon-plus' %}
                              </button>
                            </quantity-input>
                          {%- endif -%}
                        </div>
                        <cart-remove-button
                          id="Remove-{{ item.index | plus: 1 }}"
                          data-index="{{ item.index | plus: 1 }}"
                        >
                          <a
                            href="{{ item.url_to_remove }}"
                            class="button button--tertiary"
                            aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
                            {%  comment %} Pixfizz Code Start {% endcomment %}
                            onclick="{% render 'pixfizz-orderline-quantity-handler', item: item, cart: cart, delete_item: true %}"
                            {%  comment %} Pixfizz Code End {% endcomment %}
                          >
                            {% render 'icon-remove' %}
                          </a>
                        </cart-remove-button>
                      </div>
                      {%- if has_qty_rules or has_vol_pricing -%}
                        <button
                          type="button"
                          class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary medium-hide large-up-hide"
                          aria-expanded="false"
                        >
                          {% render 'icon-info' %}
                          <span>
                            {%- if has_vol_pricing -%}
                              {{ 'products.product.volume_pricing.note' | t }}
                            {%- elsif has_qty_rules -%}
                              {{ 'products.product.quantity.note' | t }}
                            {%- endif -%}
                          </span>
                        </button>
                      {%- endif -%}
                      {%- if has_vol_pricing or has_qty_rules -%}
                        <div
                          class="cart-items__info global-settings-popup quantity-popover__info"
                          tabindex="-1"
                          hidden
                        >
                          {%- if has_qty_rules == false -%}
                            <span class="volume-pricing-label caption">
                              {{- 'products.product.volume_pricing.title' | t -}}
                            </span>
                          {%- endif -%}
                          <div class="quantity__rules caption no-js-hidden">
                            {%- if item.variant.quantity_rule.increment > 1 -%}
                              <span class="divider">
                                {{-
                                  'products.product.quantity.multiples_of'
                                  | t: quantity: item.variant.quantity_rule.increment
                                -}}
                              </span>
                            {%- endif -%}
                            {%- if item.variant.quantity_rule.min > 1 -%}
                              <span class="divider">
                                {{-
                                  'products.product.quantity.minimum_of'
                                  | t: quantity: item.variant.quantity_rule.min
                                -}}
                              </span>
                            {%- endif -%}
                            {%- if item.variant.quantity_rule.max != null -%}
                              <span class="divider">
                                {{-
                                  'products.product.quantity.maximum_of'
                                  | t: quantity: item.variant.quantity_rule.max
                                -}}
                              </span>
                            {%- endif -%}
                          </div>
                          <button
                            class="button-close button button--tertiary medium-hide large-up-hide"
                            type="button"
                            aria-label="{{ 'accessibility.close' | t }}"
                          >
                            {%- render 'icon-close' -%}
                          </button>
                          {%- if item.variant.quantity_price_breaks.size > 0 -%}
                            <volume-pricing class="parent-display">
                              <ul class="list-unstyled">
                                <li>
                                  <span>{{ item.variant.quantity_rule.min }}+</span>
                                  {%- assign price = item.variant.price | money_with_currency -%}
                                  <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                                </li>
                                {%- for price_break in item.variant.quantity_price_breaks -%}
                                  <li>
                                    <span>
                                      {{- price_break.minimum_quantity -}}
                                      <span aria-hidden="true">+</span></span
                                    >
                                    {%- assign price = price_break.price | money_with_currency -%}
                                    <span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
                                  </li>
                                {%- endfor -%}
                              </ul>
                            </volume-pricing>
                          {%- endif -%}
                        </div>
                      {%- endif -%}
                      <div class="cart-item__error" id="Line-item-error-{{ item.index | plus: 1 }}" role="alert">
                        <small class="cart-item__error-text"></small>
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          class="icon icon-error"
                          viewBox="0 0 13 13"
                        >
                          <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                          <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                          <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                          <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
                        </svg>
                      </div>
                    </quantity-popover>
                  </td>

                  <td class="cart-item__totals right small-hide">
                    <div class="loading-overlay hidden">
                      <div class="loading-overlay__spinner">
                        <svg
                          aria-hidden="true"
                          focusable="false"
                          class="spinner"
                          viewBox="0 0 66 66"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                        </svg>
                      </div>
                    </div>

                    <div class="cart-item__price-wrapper">
                      {%- if item.original_line_price != item.final_line_price -%}
                        <dl class="cart-item__discounted-prices">
                          <dt class="visually-hidden">
                            {{ 'products.product.price.regular_price' | t }}
                          </dt>
                          <dd>
                            <s class="cart-item__old-price price price--end">
                              {{ item.original_line_price | money }}
                            </s>
                          </dd>
                          <dt class="visually-hidden">
                            {{ 'products.product.price.sale_price' | t }}
                          </dt>
                          <dd class="price price--end">
                            {{ item.final_line_price | money }}
                          </dd>
                        </dl>
                      {%- else -%}
                        <span class="price price--end">
                          {{ item.original_line_price | money }}
                        </span>
                      {%- endif -%}

                      {%- if item.variant.available and item.unit_price_measurement -%}
                        <div class="unit-price caption">
                          <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                          {{ item.unit_price | money }}
                          <span aria-hidden="true">/</span>
                          <span class="visually-hidden"
                            >&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span
                          >
                          {%- if item.unit_price_measurement.reference_value != 1 -%}
                            {{- item.unit_price_measurement.reference_value -}}
                          {%- endif -%}
                          {{ item.unit_price_measurement.reference_unit }}
                        </div>
                      {%- endif -%}
                    </div>
                  </td>
                </tr>

                {%  comment %} Pixfizz Code Start {% endcomment %}
                {%- if item.properties._pixfizz_project_id -%}
                  {%- comment %} Check for any addon items belonging to this Pixfizz orderline {% endcomment -%}
                  {%- for addon_item in cart.items -%}
                    {%- if addon_item.properties._pixfizz_addon == item.properties._pixfizz_project_id -%}
                      <tr class="cart-item">
                        <td class="cart-item__media"></td>
                        <td class="cart-item__details">
                          <a class="cart-item__name h4 break">
                            {{ addon_item.product.title | escape }}
                          </a>
                          <div class="product-option">
                            {{ addon_item.final_price | money }}
                          </div>
                          {%- if addon_item.product.has_only_default_variant == false -%}
                            <dl>
                              {%- for option in addon_item.options_with_values -%}
                                <div class="product-option">
                                  <dt>{{ option.name }}: </dt>
                                  <dd>{{ option.value }}</dd>
                                </div>
                              {%- endfor -%}
                            </dl>
                          {%- endif -%}
                        </td>
                        <td class="cart-item__totals right medium-hide large-up-hide">
                          {{ addon_item.final_line_price | money }}
                        </td>
                        <td class="cart-item__quantity">
                          {{ addon_item.quantity }}
                        </td>
                        <td class="cart-item__totals right small-hide">
                          <div class="cart-item__price-wrapper">
                            {{ addon_item.final_line_price | money }}
                          </div>
                        </td>
                      </tr>
                    {%- endif -%}
                  {%- endfor -%}
                {%- endif -%}
                {%  comment %} Pixfizz Code End {% endcomment %}
                            
              {%- endfor -%}
            </tbody>
          </table>
        {%- endif -%}
      </div>
    </div>

    <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
    <p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">
      {{ 'accessibility.loading' | t }}
    </p>
  </form>
</cart-items>

{% schema %}
{
  "name": "t:sections.main-cart-items.name",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

Other Themes:

If you want to allow users to edit projects from the cart and/or show dynamic project previews instead of static product images, you will need to make some modifications to your cart page.

Order Edit

Locate the template that’s responsible for rendering the items in your cart page. If using the Dawn theme, you can find the code in the the main-cart-items.liquid section.

Locate the part of the template that loops through the items in the cart and renders line items. Decide where you want to put the edit link and add an edit link or button with an onclick handler that renders the snippet above, taking the line item object as a parameter. Example:

{%- if item.properties._pixfizz_project_id and item.product.metafields.pixfizz.integration_type != 'options-to-cart' -%}
  <a onclick="{% render 'pixfizz-edit-orderline-handler', item: item %}">
    edit project
  </a>
{%- endif -%}

Note that we wrap the link in an if item.properties._pixfizz_project_id so that the link doesn’t get rendered for any non-pixfizz products in the cart. Instead of an <a> element you could use a <button> or whatever else looks good in your theme. The only important part is the onclick handler.

Orderline Image

Locate the part of the template that displays the image for each item in the cart. Place the following code right after the <img> element that renders the preview. It is safe to include this even for non-pixfizz products, since the code will not do anything if the line item doesn’t have an associated pixfizz project id:

{% render 'pixfizz-orderline-preview-handler', item: item, width: 300 %}

You can replace 300 with your desired value for width . You can also use height instead (or in addition to) width.

Cut Prints

Pixfizz cut print mode is supported in Shopify, but quantities with cut prints work differently from other products.

The cut print product in Shopify should be set up with a price for a single print. The pixfizz integration will automatically set the orderline quantity to the total number of prints in the project when the user adds the prints to the cart.

That means that you will have to modify your Shopify template code to disable any quantity controls controls in Shopify (the quantity selection on the product page, orderline quantity selector on the cart page, …) in Shopify for cut print products.

There are several ways to do that and the location of the templates that need to be modified depends on the Shopify theme that you’re using. In our demo Shopify store, we set the “Product Type” field on cut print products to “Photo Prints” and we toggle the quantity selector in liquid templates based on that value. In the main-product.liquid template we wrapped the section under <div data-gb-custom-block data-tag="-" data-0='``quantity-selector'></div> into <div data-gb-custom-block data-tag="-" data-0='``Photo Prints``' data-1='``Photo Prints``'></div> ... <div data-gb-custom-block data-tag="-"></div> and on the main-cart-items.liquid template we located the <quantity-input> element and added it into and if/else block like this:

{%- if item.product.type == 'Photo Prints' -%}
  <span>{{ item.quantity }} prints</span>
{%- else -%}
  <quantity-input> ... </quantity-input>
{%- endif -%}

Setup Fulfillment Webhook

Whenever an order is placed on shopify (payment success) then that order need to be updated on Pixfizz.

First you need to create a Shopify webhook.

Go to ‘Settings > Notifications’ and scroll down to ‘create webhook’ button and click on it to create new webhook.

After clicking on create webhook, you will get a popup similar to the above image. Add the webhook detail and save. ‘Event’ select ‘Order payment’ ‘Format’ select ‘JSON’ ‘URL’ add an order endpoint as shown above screenshot, except use your Pixfizz store url.

https://yourstore.pixfizz.com/custom/shopify/create_order

Select ‘Webhook API version’ use ‘2022-04 (Latest)’ or use the (Latest webook)

Copy the webhook signed id (shown under the callback URL once you have created in the website superadmin shopify signing secret (see websites).

Storefront's Superadmin panel to copy & paste from Shopify.

Once above configuration is done then you can place a successful order and mark that as paid in shopify. In the Pixfizz admin order section the order status will be changed to “Confirmed” status.

To enable Fulfilled orders to be marked automatically in pixfizz (with a status of "Shipped") then add a webhook as per order webhook above but using the event in Shopify "Fulfiliment Creation"

https://yourstore.pixfizz.com/custom/shopify/update_order?order[status]=S

Orders marked as Fullfilled in Shopify will be marked as shipped in Pixfizz