Jumpseller Liquid Theme Customization

https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design
Admin
This documentation details how to customize Jumpseller online stores using the Liquid markup...
Tokens:81,326
Snippets:466
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Shiptimize App Installation Permissions

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/shiptimize

This snippet details the specific permissions requested by the Shiptimize & Pakketmail application during its installation on Jumpseller, explaining the purpose and scope of each permission to ensure proper integration and functionality.

```APIDOC
read_orders, write_orders - Get order information: shipping address, product list, order weight. Send back the Tracking Id and status updates.
read_settings, write_settings - Jumpseller supports two weight units: kg and lb. We need to know which weight units match the number indicated in the order.
read_shipping_methods - Used to get a list of declared shipping methods in Jumpseller so that you can assign a carrier to each one in the “shop settings.”
read_checkout_custom_fields, write_checkout_custom_fields - used to set necessary fields to save pickup points
read_jsapps, write_jsapps - used to set the script that appends the map when service points are available
```

--------------------------------

### Verify New Blog Setup Functionality

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

Essential steps to test your newly migrated blog section before launch, ensuring posts display correctly, individual posts load, and all navigation links are functional.

```APIDOC
Before launching your shiny new blog section(s):
* Visit `your-store.jumpseller.com/blog` and make sure your posts show up and display properly.
* Click into individual posts to check that content and templates load correctly.
* Double-check your navigation and menu links.
```

--------------------------------

### Liquid Language Switcher Example

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

A Liquid code example demonstrating how to display a list of available languages with links to switch to them, only if more than one language is available.

```Liquid
{% if languages.size > 1 %}
  <ul>
    {% for language in languages %}
      <li>
      <a href="{{language.url}}">{{language.name}}</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}
```

--------------------------------

### Current DNS Records Lookup Example for icann.com

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/change-website-not-email

This table presents an example of DNS lookup results for icann.com, showing its current A record and MX record. This information is crucial for determining the appropriate scenario for domain configuration when integrating with Jumpseller.

```DNS Configuration
| Name | Type | Address |
| --- | --- | --- |
| icann.com | A | 192.0.43.221 |
| icann.com | MX | 0:pechora.icann.org |
```

--------------------------------

### HTML Search Form Example

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

An HTML form example demonstrating how to use the `search.url_send` and `search.query` Liquid variables to create a search input and submit button.

```HTML
<form method="post" action="{{search.url_send}}" id="search-form">
 <input type="text" name="q" value="{{search.query}}" />
 <input type="submit" value='{{"Search" | t}}' />
</form>
```

--------------------------------

### Jumpseller Domain DNS Configuration Example

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/change-website-not-email

This table shows the typical DNS records required to point a custom domain (example.com) to a Jumpseller store (my-store.jumpseller.com). It includes an A record for the root domain and a CNAME record for the www subdomain.

```DNS Configuration
| Name | Type | Address |
| --- | --- | --- |
| example.com | A | 79.125.14.235 |
| www.example.com | CNAME | my-store.jumpseller.com |
```

--------------------------------

### Example Jumpseller OAuth Authorization Request URL

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/oauth-2

A complete example URL demonstrating how to construct the GET request to the Jumpseller authorization endpoint, including sample parameters.

```HTTP
GET https://accounts.jumpseller.com/oauth/authorize?client_id=e27af9be9e7343dc29095d292d7a1103383a5d010c8912783e0fa54f993ca751&redirect_uri=http%3A%2F%2Flocalhost%3A8000%2Fcallback&response_type=code&scope=read_orders%20write_products%20read_customers%20write_promotions
```

--------------------------------

### Product Block Image Transition: Grayscale on Start

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/simple-theme

Applies a transition where the product image starts in black and white and changes to its original colors upon mouse hover.

```APIDOC
Setting: Image Transition
  Option: Grayscale on start
  Behavior: Grayscale on start -> Original color on hover.
```

--------------------------------

### Example Liquid Partial Content: numbers.liquid

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This code block shows the content of an example Liquid partial named `numbers.liquid`. It is designed to read and display three variables: `name`, `stock`, and `description`, each on a new line.

```Liquid
name: {{name}}
stock: {{stock}}
description: '{{description}}'

```

--------------------------------

### Jumpseller Theme Component Liquid Partial Example

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Provides an example of a Liquid partial file for a Jumpseller component. It demonstrates how to access the component's unique ID, options (like title), and iterate through subcomponent groups (e.g., banners) or access single subcomponents (e.g., logo) to render their content.

```Liquid
<div id="{{component.id}}">
  <h1>{{component.options.title}}</h1>
  {% for banner in component.subcomponnets.banners %}
    {% include 'components/banner', banner: banner %}
  {% endfor %}

  <p>
    Powered by:
    <img
      src="{{component.subcomponnets.logo.options.image}}"
      alt="{{component.subcomponnets.logo.optionsdescription}}"
    />
  </p>
</div>
```

--------------------------------

### Configure Product Page SEO Settings

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/manual

Details on optimizing product pages for search engines, including guidelines for Page Title, Meta Description, and URL structure to improve search visibility.

```APIDOC
SEOFields:
  PageTitle:
    description: "Keep it short (under 60 characters) while including relevant keywords."
    type: "string"
    constraints: "Max 60 characters"
    example: "Men’s Basic Relaxed T-shirt | 100% Cotton"
  MetaDescription:
    description: "Add extra information that complements the page title."
    type: "string"
    constraints: "Between 75 and 120 characters"
    example: "Nike Basic T-shirt - Sustainably sourced cotton. Sizes: S, M, L. Colors: Black, Navy Blue, Dark Green, and White."
  URL:
    description: "Ensure the URL is simple, descriptive, and uses hyphens to separate words for better Google interpretation."
    type: "string"
    example: "nike-man-t-shirt-100-cotton-relaxed-fit"
```

--------------------------------

### Configure Automated Order Import Options

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/shiptimize

This snippet outlines the available configuration options for automating the import of orders into the Shiptimize application from Jumpseller, allowing users to define when new orders should be automatically pulled.

```APIDOC
1.1. When the order is paid. - Imports new orders only when they are paid.

1.2. When the order status changes - Imports new orders regardless of status.
```

--------------------------------

### Run a simple Python web server

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/apps

Command to start a basic HTTP server using Python's built-in SimpleHTTPServer module on port 8000. This allows you to serve the 'index.html' file locally for testing.

```bash
python -m SimpleHTTPServer 8000
```

--------------------------------

### Configure DNS Records for Jumpseller on cPanel

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/dns-records

Guide to configuring CNAME and A records in cPanel's DNS Zone Editor to link your domain or subdomain to your Jumpseller store. Special attention is given to potential service interruptions when changing the root A record.

```DNS Configuration
# CNAME Record for www.yourdomain.com
Type: CNAME
Name: www
Value: xxx.jumpseller.com

# CNAME Record for store.yourdomain.com (example subdomain)
Type: CNAME
Name: store
Value: xxx.jumpseller.com

# A Record for yourdomain.com (root domain)
Type: A
Name: @
Value: 79.125.14.235
Note: If your email, FTP, or other records are pointing to your root domain, contact your hosting provider to prevent service interruptions.
```

--------------------------------

### Example Jumpseller Liquid Pagination Template

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This code snippet demonstrates how to implement pagination for a product gallery using Jumpseller's Liquid templating language. It iterates through paginated products and includes the default pager and items per page display.

```Liquid
<div class="product-gallery">
  {% paginate category.products by 20 %}
    {% for product in paged.products %}
      <div class="product">
      <a href="{{product.url}}">{{product.name}}</a>
      </div>
    {% endfor %}
    <div class="pagination">
    {{pager}}
    <p>{{paged.per_page}} products</p>
    </div>
  {% endpaginate %}
</div>
```

--------------------------------

### Configure DNS Records for Jumpseller on Amen.pt

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/dns-records

Instructions for setting up CNAME and A records on Amen.pt's DNS administration panel to direct your domain or subdomain traffic to your Jumpseller online store.

```DNS Configuration
# CNAME Record for www.yourdomain.com
Type: CNAME
Name: www
Value: xxx.jumpseller.com

# CNAME Record for store.yourdomain.com (example subdomain)
Type: CNAME
Name: store
Value: xxx.jumpseller.com

# A Record for yourdomain.com (root domain)
Type: A
Name: @
Value: 79.125.14.235
```

--------------------------------

### Example options.json Structure for Theme Options

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This JSON snippet illustrates the typical structure of the `options.json` file used to define theme options in Jumpseller. It shows how to group options (e.g., 'Social Networks'), specify their types (checkbox, input, select), default values, and display names for the Admin Panel. It also demonstrates how to define options for a 'select' field.

```JSON
{
 "Social Networks": {
  "icon": "archive",
  "options": {
   "enable_facebook": {
    "name": "Enable Facebook Share Button",
    "type": "checkbox",
    "default": "1"
   },
   "facebook_url": {
    "name": "Facebook URL",
    "type": "input",
    "default": "https://www.facebook.com/jumpseller"
   },
   "twitter_url": {
    "name": "Twitter URL",
    "type": "input",
    "default": "https://twitter.com/jumpseller"
   },
   "number_tweets": {
    "name": "Number of Latest Tweets to Display",
    "type": "select",
    "default": "10",
    "options": [{
      "5": "5"
     },
     {
      "10": "10"
     },
     {
      "15": "15"
     }
    ]
   }
  }
 }
}
```

--------------------------------

### Update Individual Blog Post Templates

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

Instructions to ensure each blog post page is correctly using the 'Post' template for proper display on your storefront. This step is crucial if your theme does not automatically apply the template.

```APIDOC
Make sure each post page is using the post template.
Some themes may already apply it automatically when you assign a category — just double-check to be safe.
1. Go to the page (or post).
2. Scroll down to the **Properties → Template** section.
3. Select `Post`.
```

--------------------------------

### Creating a Liquid Partial File

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

To create a partial in the Jumpseller code editor, save a new file with the .liquid extension. This example shows the typical naming convention for a partial file.

```Liquid
partial-name.liquid
```

--------------------------------

### Product Block Image Transition: Grayscale on Hover

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/simple-theme

Applies a transition where the product image starts in its original color and changes to black and white upon mouse hover.

```APIDOC
Setting: Image Transition
  Option: Grayscale on hover
  Behavior: Original color -> Grayscale on hover.
```

--------------------------------

### Install ngrok for tunneling

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/apps

Command to install the ngrok tunneling tool using Homebrew on macOS. Ngrok is used to create a public URL for your local web server, making it accessible from the internet.

```bash
brew install ngrok
```

--------------------------------

### Update Navigation Links to New Blog Structure

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

Instructions for updating all existing links within your store (e.g., menus, buttons, footer) to point to the new `/blog` permalink or specific category URLs like `/news` or `/tips`.

```APIDOC
Anywhere you had links to the old Blog page (menus, buttons, footer), make sure they now point to `/blog`.
If you’ve created other categories like “News” or “Tips”, link to those instead:
* /news
* /tips
```

--------------------------------

### Display Recommended Products from Collection (Liquid)

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/theme-products

This snippet displays a random selection of up to 40 related products from the categories of the currently visited product. The example code limits the display to 10 products. It checks if there are any recommended products before rendering the section.

```Liquid
{% unless recommended.products_count == 0 %}
<div id="related-products">
  {% for recommend_product in recommended.products limit: 10 %}
  <div>
    <h3>{{recommend_product.name }}</h3>
    {% if recommend_product.images.size == 0 %}
    <span>There is no product's image available.</span>
    {% else %}
    <img src="{{ recommend_product.images.first }}" title="{{recommend_product.name}}" alt="{{recommend_product.name}}" />
    {% endif %}
    <strong>{{recommend_product.price | price}}</strong>
  </div>
  {% endfor %}
</div>
{% endunless %}
```

--------------------------------

### Create and Organize New Blog Categories

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

Steps to create new custom categories (e.g., 'News', 'Tips') within the Jumpseller Admin Panel to better organize your blog content, each with its own unique URL.

```APIDOC
This is the fun part! You can now split your blog content however you like, like for example:
* Blog: General updates
* Tips: Helpful guides
* News: Store announcements

Each category gets its own URL. All you have to do is:
* Go to `Admin Panel → Pages → Categories`.
* Click on the `Add Category` button in the left-side panel.
* Add the title, a description (optional), define the order in which “posts” will be displayed and make sure to change the status to **Public** if you wish for it to be already visible.
* Assign pages to the new category.
Done.
```

--------------------------------

### Basic Liquid Variable and Translation Tag Usage

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This Liquid snippet demonstrates how to output various dynamic values using Liquid variables, such as `store.name`, `product.name`, and `page.url`. It also includes an example of the `t` (translate) tag for internationalization.

```Liquid
<h2>{% t 'Are you new at' %} {{ store.name }}?</h2>

<h3>{{product.name}}</h3>

<a href="{{ page.url }}">My Page</a>
```

--------------------------------

### Troubleshoot Individual Blog Post Display

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

A troubleshooting step to check the settings of individual blog posts, including ensuring the correct 'Post' template is assigned and the 'Status' is set to 'Public', if posts are not appearing on your storefront.

```APIDOC
**Step 3: Check Your Posts**
* Still in `Admin Panel → Pages`, click on the **Blog** category (or your custom one).
* This will filter and show all the “posts” assigned to that category.
* Click on one of the posts (pages) to edit it.
* Scroll down to the **Properties** section.
* Check the **Template** — it should be set to `Post`.
* Also confirm that the **Status** is set to `Public`. If it’s set to `Hidden` or `Draft`, it won’t show up on your storefront.
```

--------------------------------

### Create a simple index.html file

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/apps

Command to create a basic 'index.html' file containing 'Hello, World!' text. This file will serve as the entry point for the simple web application.

```bash
echo 'Hello, World!' > index.html
```

--------------------------------

### Remove Old Blog Page and Adjust Permalinks

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

Guidance on deleting the redundant old 'Blog' page, as the new 'Blog category' generates its own permalink. Includes an important note for older stores regarding the `/blog-1` permalink and how to correct it.

```APIDOC
In the new structure, the **Blog** page isn’t needed anymore because the `Blog category` already creates its own permalink.
So unless you’ve customized your old Blog page with something unique, feel free to delete it.
You can now access your blog posts directly at: your-store.jumpseller.com/blog

**Important:** for stores that were created before the release of this feature, the **Blog category** permalink will be `/blog-1`. Therefore, you will need to delete Blog page first (the one using `/blog` permalink), and then you can edit the category to remove the `-1` part at the end of its permalink.
```

--------------------------------

### Configure Datepicker to Start from Tomorrow

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-calendar-to-checkout-form

This JavaScript snippet initializes the Bootstrap Datepicker, ensuring that users can only select dates starting from the day after the current date. It dynamically calculates tomorrow's date and applies it using the `startDate` option, while maintaining the `dd/mm/yyyy` format and Monday as the week start.

```JavaScript
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)

$(document).ready(function(){
$("#order_other_date").datepicker({
    format: 'dd/mm/yyyy',
    weekStart: 1,
    startDate: tomorrow
});
});
</script>
```

--------------------------------

### Configure Datepicker in Spanish Starting Tomorrow

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-calendar-to-checkout-form

This JavaScript snippet extends the datepicker configuration to display the calendar interface in Spanish. It sets the `language` option to 'es' while retaining the functionality to only allow date selection from tomorrow onwards, with `dd/mm/yyyy` format and Monday as week start.

```JavaScript
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
$(document).ready(function(){
$("#order_other_date").datepicker({
    format: 'dd/mm/yyyy',
    weekStart: 1,
    startDate: tomorrow,
    language: "es"
});
});
</script>
```

--------------------------------

### Calculate E-commerce Promotion Discounts Order of Operations

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/promotions

This example illustrates the precise sequence for applying product, subtotal, and shipping discounts to a cart. It demonstrates how each discount type is calculated based on the updated subtotal from previous steps, ensuring conditions like minimum order values for shipping discounts are correctly assessed.

```Text
Consider a scenario with two products in the cart, each priced at $125. The applied promotions are:
* Selected Products Discount: A cumulative 20% off on these specific products.
* Subtotal Discount: A cumulative 20% off the cart’s subtotal.
* Shipping Discount: A cumulative 50% off on the standard $10 shipping cost, applicable for orders over $160.

Calculation Steps
* Product Promotions:
* Original cost of each product: $125.
* Total cost for two products: $125 x 2 = $250.
* Apply 20% product discount: 20% of $250 = $50.
* New subtotal after product discount: $250 - $50 = $200.
* Subtotal Promotions:
* Apply 20% subtotal discount: 20% of $200 = $40.
* New subtotal after subtotal discount: $200 - $40 = $160.
* Shipping Promotions:
* Since the final subtotal ($160) is over or equal than $160, the shipping discount applies.
* Original Shipping cost: $10.
* Apply 50% shipping discount: 50% of $10 = $5.
* New shipping cost after discount: $10 - $5 = $5.
* Final Calculation: Total cost after all discounts (Product + Subtotal + Shipping): $160 (products) + $5 (shipping) = $165.
```

--------------------------------

### Product Block Overview

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/simple-theme

Explains what a Product block is, its purpose as a product preview 'card', and its role in displaying product information in various theme layouts.

```APIDOC
Product Block:
  Description: A preview 'block' or 'card' of a product.
  Purpose: Displays product information for clients to preview details.
  Usage: Can be displayed in multiple theme layouts.
```

--------------------------------

### Configure Automated Shipment Status Updates

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/shiptimize

This snippet describes the configurable options for enabling automatic status updates from Shiptimize/PakketMail back to Jumpseller, including the transmission of tracking IDs and changes in shipment status.

```APIDOC
2.1. Order imported

2.2. Shipment delivered

2.3. Shipment failed
```

--------------------------------

### Execute Basic Liquid Code in Sandbox

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid-sandbox

This snippet demonstrates a simple Liquid assignment and filter operation. It assigns the string 'tomato' to a variable `myvariable` and then outputs its uppercase version using the `upcase` filter. This example showcases basic Liquid syntax and functionality within the Jumpseller sandbox environment.

```Liquid
{% assign myvariable = "tomato" %}
{{ myvariable | upcase }}
```

--------------------------------

### Initialize Simple Bootstrap Datepicker

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-calendar-to-checkout-form

This JavaScript snippet demonstrates a basic initialization of the Bootstrap Datepicker. It targets an input field with the ID `order_other_date`, setting the date format to `dd/mm/yyyy` and configuring the calendar week to start on Mondays.

```JavaScript
<script>
$(document).ready(function(){
$("#order_other_date").datepicker({
  format: 'dd/mm/yyyy',
  weekStart: 1
});
});
</script>
```

--------------------------------

### Configure Datepicker with Disabled Sundays and Mondays

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-calendar-to-checkout-form

This JavaScript snippet configures the Bootstrap Datepicker to prevent selection of Sundays (0) and Mondays (1). It utilizes the `daysOfWeekDisabled` option, while also ensuring the calendar starts from tomorrow and is displayed in Spanish.

```JavaScript
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
$(document).ready(function(){
$("#order_other_date").datepicker({
    format: 'dd/mm/yyyy',
    weekStart: 1,
    startDate: tomorrow,
    language: "es",
    daysOfWeekDisabled: [0,1]
});
});
</script>
```

--------------------------------

### List Javascript Tags for a Jumpseller App via API

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/javascript-apps

This snippet shows how to retrieve a list of all JavaScript tags installed on a Jumpseller store by a specific Jumpseller App using a GET request. The request requires the app's unique code for identification.

```APIDOC
GET /v1/jsapps/:code
Description: Lists all JavaScript tags installed on the store by a specific Jumpseller App.
Authentication: Bearer Token required.
Parameters:
  code (string, required, path): The unique code field available at the App edition page after the App was created in the Jumpseller Admin.
```

```Shell
curl -H "Authorization: Bearer YOUR_ACCESS_TOKEN" -H "Content-Type: application/json" -X GET "https://api.jumpseller.com/v1/jsapps/:code"
```

--------------------------------

### Jumpseller Liquid: Recommended Products API

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Describes Liquid variables for accessing a collection of up to 40 recommended products, which are related to the currently viewed product through categories. It also provides a count of these recommended products.

```APIDOC
recommended.products: All recommended products collection. (Max. 40)
recommended.products_count: Count of total of products in collection.
```

--------------------------------

### Configure DNS A and CNAME Records for External Hosting

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/set-up-domain

Instructions for adding A and CNAME records in your external server's cPanel to point your domain to your Jumpseller store. This is applicable when your domain is hosted on an external server and you need to manually update DNS records. It includes two common formats for these records.

```Configuration
| Name | Type | Address |
| --- | --- | --- |
| example.com | A | 79.125.14.235 |
| www.example.com | CNAME | xxx.jumpseller.com |
```

```Configuration
| Name | Type | Address |
| --- | --- | --- |
| @ | A | 79.125.14.235 |
| www | CNAME | xxx.jumpseller.com |
```

--------------------------------

### Configure Datepicker with Disabled Days and Specific Holidays

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-calendar-to-checkout-form

This JavaScript snippet further customizes the Bootstrap Datepicker by disabling specific holiday dates in addition to Sundays and Mondays. It uses the `datesDisabled` option with an array of dates, while maintaining the Spanish language, tomorrow's start date, and `dd/mm/yyyy` format.

```JavaScript
<script>
const today = new Date()
const tomorrow = new Date(today)
tomorrow.setDate(tomorrow.getDate() + 1)
let holidays = ["29/05/2020","03/06/2020"]
$(document).ready(function(){
$("#order_other_date").datepicker({
    format: 'dd/mm/yyyy',
    weekStart: 1,
    startDate: tomorrow,
    language: "es",
    daysOfWeekDisabled: [0,1],
    datesDisabled: holidays
});
});
</script>
```

--------------------------------

### Configure Retail Header Version

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/simple-theme

Steps to activate the Retail header version and enable specific options like the Categories menu, Top bar header actions, social networks links, and left-aligned Desktop menu.

```APIDOC
1. Go to the Header component settings and choose `Retail`.
2. Next, enable the option `Show Categories menu`, in which case you can edit the options that will become visible.
3. Open the Other options group and within the `Header actions display` option choose `Top bar`. You can also enable the `Show social networks links` option.
4. Then, go back and access the Desktop menu settings, and within the `Menu alignment` option choose `Left`.
```

--------------------------------

### Render Product Filters Form

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Example Liquid and HTML code to render a product filter form. It iterates through available filters and their values, displaying selected filters with an option to deselect, and then listing all filter options with checkboxes and product counts. The form submits via GET to the current URL.

```HTML
<form id="filters" method="get" action="{{current_url}}">
  {% for filter in filters %}
    <div class="selected-filters">
    {% for filter_value in filter.values %}
      {% if filter_value.selected %}
        <div>
        {{filter_value.name}}
        <span onclick="$('#{{filter_value.id}}').removeAttr('checked'); $('#filters').submit();">X</span>
        </div>
      {% endif %}
    {% endfor %}
    </div>
  {% endfor %}
  <ul>
    {% for filter in filters %}
      <li>{{filter.name}}
      <ul>
        {% for filter_value in filter.values %}
          <li>{{filter_value.name}}
          <input type="checkbox" id="{{filter_value.id}}" name="{{filter.id}}" value="{{filter_value.name}}" {% if filter_value.selected %}checked{% endif %}>
          <label for="{{filter_value.id}}">{{filter_value.name}}</label>
          <span>{{filter_value.products_count}}</span>
          </li>
        {% endfor %}
      </ul>
      </li>
    {% endfor %}
  </ul>
  <button type="submit">Filter</button>
</form>
```

--------------------------------

### Include Bootstrap Datepicker Libraries

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-calendar-to-checkout-form

This snippet provides the necessary HTML `link` and `script` tags to include the Bootstrap Datepicker CSS and JavaScript files from CDN, along with optional locale files for Spanish and Portuguese. This setup is required for the datepicker functionality and assumes `popper.js` is already included in the Simple Theme.

```HTML
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  // Optional Locales
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.es.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.pt.min.js"></script>
```

--------------------------------

### Output of Liquid Partial with Passed Variables

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This snippet shows the resulting output when the `numbers.liquid` partial is rendered with the variables 'Shoes', '15' (from `product.stock`), and 'A great product' passed as arguments.

```Text
name: Shoes
stock: 15
description: 'A great product'

```

--------------------------------

### Unclaim Website from Google Merchant Center for Jumpseller Integration

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/google-commerce

Detailed steps to unclaim your website from an existing Google Merchant Center account. This action is required if your website is already linked to a Merchant Center account and you intend to use the Jumpseller Google Sales Channel, which creates a new Merchant Center account during its installation process.

```User Guide
1. Visit the Google Merchant account with which you made the “ownership claim” of your current website.
2. Click the wrench icon in the top right.
3. Select Business Information.
4. Click the Website tab on the next page.
5. Delete your website URL, and then click Save.
   * If you received an error message when trying to remove the claim, try entering a fake domain name instead. For example, instead of www.YourDomain.com, try www.YourDomainBreak.com or www.YourDomain123.com. This fake domain being saved should void the claim in your personal Merchant Center account.
6. Now you can install the Google Sales Channel in your store with your Google Account that is connected to your Ads Account. You will be able to claim ownership of the website with your new Merchant Center account (you’ll be creating it at that point).
7. When asked to select the Ads account you want to work with, select your current Ads account.
8. Finish the setup.
```

--------------------------------

### Jumpseller Theme Options JSON Schema Reference

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This section provides a detailed reference for the `options.json` file schema, outlining the properties available for defining theme options, their types, and descriptions. It also lists all accepted values for the 'type' property and their corresponding functionalities.

```APIDOC
Theme Options (options.json) Structure:
  Root Object:
    "[Group Name]":
      icon: string (Font Awesome class, e.g., "fa-solid fa-check")
      options: object
        "[Option Name]":
          name: string (Display name in Admin Panel)
          type: string (Defines input type)
          default: string (Default value)
          options: array (Used for type="select", array of {value: label} objects)

Accepted 'type' Values:
  category: Display a select field with all Store’s categories. On liquid it prints the category permalink.
  checkbox: Checkbox field who returns true or false.
  color: Displays a color picker selector.
  file: To upload files. Supports every type of files and max 2MB of size.
  google_font: Display a select field with all Google Fonts.
  icon: Display a select field with all solid and brands icons from Font Awesome. On liquid it prints the CSS class of the icon.
  image: To upload images. Supports jpg jpeg gif png svg bmp jfif ico webp icon x-icon files and max 2MB of size.
  input: Input field to insert short texts.
  link: Display a select field with all links it the Store, like products, categories and pages. Also is possible to select an external link.
  page: Display a select field with all Store’s pages. On liquid it prints the page permalink.
  ph_icon: Display a select field with all icons from Phosphor Icons. On liquid it prints the CSS class of the icon.
  product: Display a select field with all Store’s products. On liquid it prints the product permalink.
  select: List of options in a select field. It is made up of the label and the value that is printed in liquid.
  slider: Displays a slider field with a minimum and maximum range values to choose in between, it’s a liquid integer type. You can set the value’s unit for example px, em, rem, %. The unit is just for display, the result is a number.
  text: Textarea field to insert large texts.
  video: Input field to insert a video link. Only accepts YouTube and Vimeo links.
```

--------------------------------

### cURL Example to Exchange Authorization Code for Tokens

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/oauth-2

A cURL command example demonstrating how to make the POST request to the Jumpseller token endpoint, providing required form parameters.

```cURL
curl -F grant_type=authorization_code \
-F client_id=6e19c63534c711bd2ec82da2a4bcc80638c79223b6bad064ce81a8987ec49ecb \
-F client_secret=bfab60ff47504b29bf2a29c4a8f30800286a36b590b1c36ce619f5255f43b0ef \
-F code=f04bb200f5779644a65e0a174f49776004bc3de060a96f961f72c5835533d006 \
-F redirect_uri=urn:ietf:wg:oauth:2.0:oob \
-X POST https://accounts.jumpseller.com/oauth/token
```

--------------------------------

### Product Variant Liquid Object Reference

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Documents the available properties and collections for the `product.variants` and `variant` Liquid objects, including identifiers, stock, pricing, images, and URLs for cart actions and wishlists.

```APIDOC
Collection: product.variants - Collection of Variants of a Product
Object: variant
  id: Number - Product Variant unique identifier
  sku: String - Product Variant Sku
  stock: Number - Product Variant Stock
  stock_unlimited: Boolean - Product Variant Stock Unlimited
  stock_locations['Location Name'].stock: Number - Product Variant Stock quantity based on the store’s location(s)
  price: Number - Product Variant Price
  discount: Number - Product Variant Discount
  tax: Number - Tax amount applied to the Product Variant
  discount_begins: Date - Product Discount initial date if there is an begin date
  discount_expires: Date - Product Discount expiration date if there is an expiration
  image: String - Product Variant Image URL
  image_id: Number - Product Variant Image ID
  values: Collection - Collection of Product Options Values (e.g. Red x Large, or Yellow x Small)
  attachments: Collection - Collection of Attachments of a Variant
  add_to_cart_url: String - URL to Add to Cart the given product’s variant
  wishlisted: Boolean - Returns true if the variant is in the Customer’s Wishlist
  wishlist_remove_url: String - Returns the URL to remove a variant from the Wishlist
```

--------------------------------

### Configure Compact Header Version

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/simple-theme

Steps to activate the Compact header version and enable social networks links for visibility at the left side of the Header.

```APIDOC
1. Go to the Header component settings and choose `Compact`.
2. Next, open the Other options group and enable the `Show social networks links` option, so these can be visible at the left side of the Header.
```

--------------------------------

### APIDOC: Performance Optimization Guidelines

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/themes-guidelines

Emphasizes the importance of loading time optimization for Jumpseller stores and suggests tools and libraries for performance improvement.

```APIDOC
Performance:
  - Prioritize shortest loading time, especially for stores.
  - Consider improving image loading with libraries like lazysizes.
  - Use tools like Gtmetrix and PageSpeed Insights for review.
```

--------------------------------

### Make GET Request to Jumpseller external_payment_complete Endpoint

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/external-payment-gateways

This snippet demonstrates how to send a GET request to the "external_payment_complete" endpoint. This is typically used for redirection after a payment process. The response body will contain the HTML of the redirected page.

```Ruby
require "uri"
require "net/http"

url = URI("https://demostore.jumpseller.com/checkout/external_payment_complete/1026?x_signature=c6296d5a1b67c691e209a2023bee341f60d11b479f864b2016a8005a21888c64&x_shop_name=Manchester Plant &x_account_id=129785&x_amount=300.0&x_currency=CLP&x_reference=1026&x_result=completed&x_timestamp=2020-06-12T18:17:15.898Z&x_message=\\nProducto:\\n1 x Prueba de pago: $300")

https = Net::HTTP.new(url.host, url.port)
https.use_ssl = true

request = Net::HTTP::Get.new(url)
response = https.request(request)
```

```NodeJs
var request = require('request');

var options = {
  'method': 'GET',
  'url': 'https://demostore.jumpseller.com/checkout/external_payment_complete/3120?x_signature=be8d4df696d4e2c770b1890e67351b1f9be9f98cd94f421dfc7787c39f0e23c7&x_account_id=1988063&x_amount=1000.0&x_currency=EUR&x_reference=3120&x_result=completed&x_timestamp=2020-06-12T18:17:15.898Z&x_message=\\nProducto:\\n1 x Prueba de pago: $300'
};

request(options, function(error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});
```

--------------------------------

### APIDOC: Theme Options Best Practices

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/themes-guidelines

Provides guidelines for implementing theme options, emphasizing the use of complete URLs and conditional display logic.

```APIDOC
Theme Options:
  - Prefer complete URLs for emails, social networks, etc.
  - Avoid logic with usernames and account IDs
  - If field is empty, do not display corresponding code on web
```

--------------------------------

### Get Current Category Information

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/javascript-library

Retrieves the JSON representation of the current category. This function calls the GET /api/categories/:permalink.json method of the Jumpseller Javascript API. It accepts an options object with a callback function, which receives the category data upon success.

```APIDOC
Function: getCurrentCategoryInfo
  Description: Retrieves the JSON representation of the current category.
  Method: GET /api/categories/:permalink.json
  Parameters:
    options: object - Configuration options.
      callback: function(data) - Callback function executed upon completion.
  Returns: JSON representation of the current category.
```

```Javascript
<script type="text/javascript">
  var callbackFunction = function(data){ console.log(data); }; // outputs the category's available data
  Jumpseller.getCurrentCategoryInfo({callback: callbackFunction})
</script>
```

--------------------------------

### Display Product Data using Liquid Output Markup

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This Liquid snippet demonstrates how to embed dynamic content within HTML using output markup (`{{ }}`). It shows how to display product properties like name, price, and description directly on a webpage.

```Liquid
<div id="product-page">
    <h1>{{product.name}}</h1>
    <ul id="product-details">
        <li>Price: {{product.price}}</li>
        <li>Description: {{product.description}}</li>
    </ul>
</div>
```

--------------------------------

### Product Block Image Transition: Show Second Image

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/simple-theme

Displays the first product image initially, then transitions to the second image in the product's image list upon hover. Requires at least two images.

```APIDOC
Setting: Image Transition
  Option: Show second image
  Behavior: First image -> Second image on hover.
  Requirement: Product must have at least 2 images.
```

--------------------------------

### Get Current Product Information

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/javascript-library

Retrieves the JSON representation of the current product. This function calls the GET /api/products/:permalink.json method of the Jumpseller Javascript API. It accepts an options object with a callback function, which receives the product data upon success.

```APIDOC
Function: getCurrentProductInfo
  Description: Retrieves the JSON representation of the current product.
  Method: GET /api/products/:permalink.json
  Parameters:
    options: object - Configuration options.
      callback: function(data) - Callback function executed upon completion.
  Returns: JSON representation of the current product.
```

```Javascript
<script type="text/javascript">
  var callbackFunction = function(data){ console.log(data); }; // outputs the product's available data
  Jumpseller.getCurrentProductInfo({callback: callbackFunction})
</script>
```

--------------------------------

### Get Current Search Information

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/javascript-library

Retrieves the JSON representation of the current search results. This function calls the GET /api/search/*query method of the Jumpseller Javascript API. It accepts an options object with a callback function, which receives the search result data upon success.

```APIDOC
Function: getCurrentSearchInfo
  Description: Retrieves the JSON representation of the current search.
  Method: GET /api/search/*query
  Parameters:
    options: object - Configuration options.
      callback: function(data) - Callback function executed upon completion.
  Returns: JSON representation of the current search.
```

```Javascript
<script type="text/javascript">
  var callbackFunction = function(data){ console.log(data); }; // outputs the search query result data
  Jumpseller.getCurrentSearchInfo({callback: callbackFunction})
</script>
```

--------------------------------

### Jumpseller Liquid: Iterate and Display Latest Products

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

This Liquid code snippet demonstrates how to loop through the `products.latest` collection to display the name, price, and description of each product. It renders each product within a `div` with `product-page` ID and its details in an unordered list.

```Liquid
{% for product in products.latest %}
<div id="product-page">
  <h1>{{product.name}}</h1>
  <ul id="product-details">
    <li>Price: {{product.price}}</li>
    <li>Description: {{product.description}}</li>
  </ul>
</div>
{% endfor %}
```

--------------------------------

### APIDOC: Image Handling Best Practices

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/themes-guidelines

Guidelines for optimizing image display in Jumpseller themes, including resizing, `alt` tags, and placeholder usage.

```APIDOC
Images:
  - Products, categories, pages images must be resized using Liquid `resize` filter.
  - `resize` should always be favored over `Thumb`.
  - All images should have both `alt` and Text tag.
  - If no image, display a placeholder image.
```

--------------------------------

### Liquid Breadcrumbs Display Example

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

An HTML snippet using Liquid to iterate through a collection of breadcrumbs, displaying them as an unordered list with links, highlighting the last item.

```HTML
<div class="breadcrumbs">
  <ul>
  {% for breadcrumb in breadcrumbs %}
    {% if forloop.last %}
      <li><strong>{{breadcrumb.text}}</strong></li>
    {% else %}
      <li><a href="{{breadcrumb.url}}">{{breadcrumb.text}}</a></li>
    {% endif %}
  {% endfor %}
  </ul>
</div>
```

--------------------------------

### Jumpseller Event Parameters: begin_checkout

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/google-tag-manager

Defines the data structure for the 'begin_checkout' event, triggered when a customer starts the checkout process. It includes order currency, items, and total value.

```JSON
{ "currency": "order.currency",
  "items": "order_items",
  "value": "order.total" }
```

--------------------------------

### Display Ordered Product Digital Products (Liquid)

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Iterates through ordered products and their digital products to display a list of digital product names as clickable links to their URLs within an HTML table.

```Liquid
<table>
  {% for orderedproduct in order.products %}
    {% for digital in orderedproduct.digital_products %}
      <tr>
        <td><a href="{{digital.url}}">{{digital.name}}</a></td>
      </tr>
    {% endfor %}
  {% endfor %}
</table>
```

--------------------------------

### Jumpseller Liquid: Product Option Object API

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Outlines the properties available for a `option` object in Liquid, including its name, unique identifier, associated values (e.g., colors, sizes), and a placeholder for input/text type options.

```APIDOC
option.name: Product Option Name
option.id: Product Option unique identifier (Number).
option.values: Collection of Values (e.g. Blue, Red) for the given Product Option (e.g. Color)
option.placeholder: Placeholder for input and text type options
```

--------------------------------

### Troubleshoot Blog Category Visibility

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

A troubleshooting step to verify that the 'Status' of your blog category (or any custom category) is set to 'Public' in the Admin Panel, ensuring it's visible on your storefront.

```APIDOC
**Step 2: Check Your Blog Category**
* Go to `Admin Panel → Pages`.
* On the left sidebar, click the **Edit** icon next to the **Blog** category (or the name of the category you created).
* Make sure the **Status** is set to `Public`.
```

--------------------------------

### Facebook Domain Verification TXT Record

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/facebook-and-instagram-app

Example of the TXT record value provided by Facebook for domain ownership verification. This value needs to be added to your domain's DNS configuration.

```DNS TXT
facebook-domain-verification=xxxxxxxxxxxxxxx
```

--------------------------------

### Configure CNAME Record for Subdomain in DNS

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/set-up-domain

Instructions for creating a CNAME record in your domain's DNS settings (e.g., Cpanel, Godaddy, DNS Zone) to point a subdomain to your Jumpseller store. This is crucial for using a custom subdomain like 'store.mydomain.com' with your Jumpseller shop.

```plaintext
Name: store.mydomain.com
Type: CNAME
Address: xxx.jumpseller.com
```

```plaintext
Name: store
Type: CNAME
Address: xxx.jumpseller.com
```

--------------------------------

### Make Jumpseller API Request with Access Token

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/oauth-2

Demonstrates how to use the obtained access token to authenticate requests to the Jumpseller API, specifically making a GET request to the /v1/store/info.json endpoint.

```cURL
curl -H 'Content-Type: application/json' \
-H "Authorization: Bearer 80de978742714f8747036188cf6bab538e976adf72144d545e185ae444bc473d" \
https://api.jumpseller.com/v1/store/info.json
```

--------------------------------

### Troubleshoot Blog Template Display Issues

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/add-store-to-blog

A troubleshooting step to check the 'Page Category → Default' template in the Visual Editor if your blog page or posts are not displaying content correctly.

```APIDOC
**Step 1: Check the Blog Template**
* Go to `Themes → Visual Editor`.
* At the top-right corner, open the dropdown and select `Page Category → Default`.
* Make sure it shows the title of your **Blog** category.
```

--------------------------------

### Promotions and Discounts Object Properties

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Details the properties related to discounts on products, carts, orders, and shipping, along with coupon form and applied coupons.

```APIDOC
product.discount: Discount value on a product.
cart.discount: Discount value on all product’s cart.
order.discount: Discount value on a order.
order.shipping_discount: Shipping discount value on a order.
coupon_form: Outputs the coupon code form at the Cart or Checkout block.
order.coupons: Outputs a comma separared list of applied coupons to the order.
```

--------------------------------

### Product Block Image Display: Resize

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/simple-theme

Configures product images to adapt as much as possible to the available space based on the selected image dimension.

```APIDOC
Setting: Image Display
  Option: Resize
  Behavior: Images adapt to available space based on selected dimension.
```

--------------------------------

### Including Subcomponent Liquid File for Code Reuse

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/liquid

Demonstrates the recommended way to include a subcomponent's dedicated Liquid file. This approach simplifies the parent component's Liquid and promotes code reuse by passing the subcomponent object as a variable to the included partial.

```Liquid
{% include 'components/logo', logo: component.subcomponents.logo %}
```

--------------------------------

### Jumpseller API: Store Data Response

Source: https://jumpseller.com/support/liquid/?jslr=https://jumpseller.cl/support/liquid/&jsr=https://jumpseller.cl/design/oauth-2

Example JSON response received by the client after a successful API request, detailing basic store information such as name, code, currency, country, and email.

```JSON
{
  "store": {
    "name":"Your Store",
    "code":"yourstore",
    "currency":"EUR",
    "country":"PT",
    "email":"youremail@example.com"
  }
}
```
Tokens:
Raw