Sezzle widget installation for site..

Highlighted
New Member
7 0 0

@Visely-Team these are the two product page URL's we'll need it to display on.

 

Product 1 - https://shopfli.com/collections/frontpage/products/black-levitator

 

Product 2 - https://shopfli.com/collections/frontpage/products/white-fli-levitator-pro

 

Currently I have this code at the bottom of page.liquid and cart.liquid per sezzle instructions

 

<script>
  document.sezzleConfig =
  {
    targetXPath: '.product-single__meta/.product__price',
    forcedShow: true,
    alignment: 'left',
    merchantID: '9af057a5-b893-4dda-a2fe-8c493a83cce8',
    theme: 'light',
    widthType: 'thin',
    widgetType: 'cart',
    minPrice: 0,
    maxPrice: 100000,
  }
</script>
<script src=https://widget.sezzle.com/v1/javascript/price-widget?uuid=9af057a5-b893-4dda-a2fe-8c493a83cce8></script>
0 Likes
Highlighted
Shopify Partner
1342 155 236

For product pages you have to add the snippet to either product.liquid or template-product.liquid/product-template.liquid, depends on theme.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
7 0 0

@Visely-Team I see - I tried adding it to the product template liquid files and it displayed like the this.

 

Screen Shot 2020-01-28 at 5.18.20 PM.png

0 Likes
Highlighted
Shopify Partner
1342 155 236

@jaybing try changing widgetType from cart to product-page. You might also want to consider providing renderToPath  as part of the configuration, with the xPath to the element under which you want the Sezzle widget to display.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
7 0 0

@Visely-Team I tried both of those solutions and unfortunately saw no change. Maybe I have the widget code in the wrong spot in my template liquid file?

 

Here is the code it does not display at all unless it is in my products-sections-template.liquid file:

<script>
  document.sezzleConfig =
  {
    targetXPath: '.product-single__meta/.product__price',
    forcedShow: true,
    alignment: 'left',
    merchantID: '9af057a5-b893-4dda-a2fe-8c493a83cce8',
    theme: 'light',
    widthType: 'thin',
    widgetType: 'product-page',
    minPrice: 0,
    maxPrice: 100000,
  }
</script>
<script src=https://widget.sezzle.com/v1/javascript/price-widget?uuid=9af057a5-b893-4dda-a2fe-8c493a83cce8></script>
{% include 'product-template',
  description_style: section.settings.description_style,
  image_container_width: section.settings.image_size,
  section_id: product.id,
  social: section.settings.social_enable,
  thumbnail_position: section.settings.thumbnail_position
%}

{% if settings.enable_product_reviews and settings.reviews_layout == 'full' %}
  <hr id="Reviews-{{ product.id }}" class="hr--large">
  <div class="index-section index-section--small product-reviews product-reviews--full">
    <div class="page-width">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
    </div>
  </div>
{% endif %}

{% if section.settings.related_enable and section.settings.related_position == 'above' %}
  {% unless isModal %}
    {% include 'related-products' %}
  {% endunless %}
{% endif %}

{% include 'page-template-blocks' %}

{% if section.settings.related_enable and section.settings.related_position == 'below' %}
  {% unless isModal %}
    {% include 'related-products' %}
  {% endunless %}
{% endif %}

{% if section.settings.collection_links_enable and collection %}
  {% unless isModal %}
    {% include 'collection-navigation-links' %}
  {% endunless %}
{% endif %}

{% schema %}
  {
    "name": "Product.sections page",
    "settings": [
      {
        "type": "select",
        "id": "image_size",

GOES INTO SCHEMA HERE
0 Likes
Highlighted
Shopify Partner
1342 155 236

what if you add renderToPath: '.product-single__meta/.product__price' to the config, so it reads:

<script>
  document.sezzleConfig =
  {
    targetXPath: '.product-single__meta/.product__price',
    renderToPath: '.product-single__meta/.product__price',
    forcedShow: true,
    alignment: 'left',
    merchantID: '9af057a5-b893-4dda-a2fe-8c493a83cce8',
    theme: 'light',
    widthType: 'thin',
    widgetType: 'product-page',
    minPrice: 0,
    maxPrice: 100000,
  }
</script>
<script src=https://widget.sezzle.com/v1/javascript/price-widget?uuid=9af057a5-b893-4dda-a2fe-8c493a83cce8></script>

It should render the widget under the price. On a side note, where do you want it to display?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
7 0 0

@Visely-Team so I gave the renderToPath a try and it displayed in the same spot unfortunately. I would like it to display right underneath the $247 shown below. The screenshot below is with the renderToPath configured per your recommendation.

 

Screen Shot 2020-01-28 at 6.55.48 PM.png

0 Likes
New Member
1 0 0

I am confused with this as well...and tried to search and see if I could figure this out by looking at what some of the others paths look like and I'm just stuck. 

 

Could you possibly help me as well...

 

www.ilovesublimation.com

 

Thank you

Jamie

0 Likes
Highlighted
Shopify Partner
1342 155 236

@jjc081499 this would be yours:

.product-single__prices/.product-single__price
Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
Shopify Partner
1342 155 236

@jaybing , after some debugging, got it working. Just change renderToPath to have the value of "." which means "this element", referring to the element specified under targetXPath, i.e. the price element.

 

Should read:

<script>
  document.sezzleConfig =
  {
    targetXPath: '.product-single__meta/.product__price',
    renderToPath: '.',
    forcedShow: true,
    alignment: 'left',
    merchantID: '9af057a5-b893-4dda-a2fe-8c493a83cce8',
    theme: 'light',
    widthType: 'thin',
    widgetType: 'product-page',
    minPrice: 0,
    maxPrice: 100000,
  }
</script>
<script src=https://widget.sezzle.com/v1/javascript/price-widget?uuid=9af057a5-b893-4dda-a2fe-8c493a83cce8></script>

Make sure you change this in the snippet for product page, I currently don't see renderToPath populated.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes