Support Center

Guidelines for a Custom HTML Theme

On this page

General

  • Themes should be W3 compliant. Both markup and styles
  • Javascript Libraries, Plug-ins (slideshows, lightboxes, etc) should always be keept updated. If possible on the latest stable release version
  • Remove http: or https: from external resources, this prevents warnings from unsafe sites. Urls should be: //resource.com/library.js
  • Inline CSS should be avoided and passed to one or more css assets
  • The themes must be completely Responsive
  • Javascript and CSS should be deferred to the footer
  • Javascript libraries should be hopefully minified
  • If only 1 language per store, language menu should not be displayed
  • If only 1 currency per store, currency menu should not be displayed
  • The main menu should display at least 3 category levels (Category > Sub-category > Sub-sub-category)
  • If the menu has too many items, it should be able to browse/scroll them even if the screen is smaller than the list of items
  • If the main menu has many items, the mobile navigation of this must be optimized to be able to visualize all the submenus
  • Display contact options like phone number and e-mail. Displaying the contact e-mail should be a theme option
  • Display social networks if they are present on the store settings
  • Display Copyright block with the elementos: “[©] + [Current year] + [Store name]. + All Rights Reserved. Powered by Jumpseller”. Jumpseller word should have a link to Jumpseller homepage
  • Display links from footer menu

Home Layout

Home page should have these blocks available to the merchant:

  • Promotional slider to display featured images and texts. We suggest to use Owl Carousel Library
  • Display Featured Products if the theme option to display it is activated. The quantity products to be displayed should be limited in the theme options
  • Display Latest Products if the theme option to display it is activated. The quantity products to be displayed should be limited in the theme options
  • Display Blog area if the theme option to display it is activated. Blog area should show the latest pages with the “Post” category. The quantity pages to be displayed should be limited in the theme options

Optional

  • Instagram block connected with the merchant’s Instagram user
  • Newsletter connected to a Mailchimp account

Category Layout

Category page must have the following elements:

  • Title of the category within a h1 tag
  • Shows image of the category if the merchant load it
  • Shows description of the category within a h2 tag
  • Product sort select
  • List of products categorized with this category. The products must have the elements described in the section Product Block
  • Pagination limited to the quantity of products chosen by the merchant in the theme options
  • If the category don’t has associated products, should display the message “There aren’t any products available in this category”
  • Support for product filters. See the documentation.

Search results Layout

Search results page must have the following elements:

  • Title of the page “Search results” within a h1 tag
  • Number of results associated with the search
  • Show the phrase “You’ve searched for:” Followed by the text string that the user searched.
  • List of products that match the search. The products must have the elements described in the section Product Block
  • Pagination limited to the quantity of products chosen by the merchant in the theme options
  • If the search has no results, you should display the message: “There aren’t any products that matches your search, Try searching again”
  • Support for product filters. See the documentation.

Products

Product Block

Product block on lists must have the following elements:

  • First image of the product, if it does not have a loaded image, show a placeholder image in replacement
  • The image should have an alt tag with the product name
  • Product name within a h3 tag
  • Product price and price with discount if the product has it
  • If the product and its variants don’t have stock display a message “Out of stock”
  • If the product and its variants are not available display a message “Not available”
  • Link to the product

Product Page

  • Display multiple Product images. If the product does not have a loaded image, show a placeholder image in replacement with a message “There’s no product image available”
  • The Product images should change if the visitor choose a variant
  • Display Product brand if the product has it
  • Display Product price and price with discount if the product has it
  • Display the SKU and Stock of Product and its variants if the theme options to display it are activated
  • Display Product Custom Fields if available
  • Display Product Attachments if available (and Product isn’t Virtual)
  • Display Product Options if available
  • Hide “Add to Cart button” if the product or its variants doesn’t have Stock or it’s Unavailable
  • The product description must show correctly the most used HTML tags (e.g: ol, ul, li, strong, a, p, br, table, i, s, b, h2, h3, h4, h5, img, iframe, alignment)
  • Share on social networks icons should be shown if the merchant activated them in their theme options
  • Display “Related products” block if the merchant activate it in theme options. See the support article

Customer account

Unlogged

  • If the client is not logged in, the store must show a link for the login and registration to the customer area. It should only appear if the merchant activated the option in your store.
  • The url of the Login/Registration link should be: /customer/login. On this screen shows the Login form and a link to the registration form if the client is not yet registered.

Logged

  • When the client logged in or registered, a link to logout and his name must be shown with a link to his client account.
  • The account screen with in the url /customer should show 3 main blocks:
    • Contact information
    • Shipping addresses
    • Billing addresses
  • These last two must show links to Add new/Edit/Delete/Mark as primary.
  • The same screen shows the purchases made by the logged in client. If the client have not yet made purchases, should show the message “You have not made any purchases” and if the customer has made purchases, it will show a list of these displaying the following information:
    • Order ID
    • Order Status
    • Order updated
    • Order total
    • Button to reorder the same order
    • List of products in the order, it should show: quantity, subtotal price, name and variants if it had them. If there is a product in the list that no longer exists, the message “This product does not exist” should be displayed
    • Overview block with: shipping cost, subtotal, applied discounts and order total

Purchasing process

Cart Page

  • Display the table of products added to the shopping cart with the following elements for each product:
    • image
    • product name and its variants
    • quantity with the possibility of updating it
    • price and discount if the product has it
    • subtotal
    • option to remove the product from the cart
  • Display form for estimate shipping cost if it is activated on theme options
  • Display form for add a coupon code if the store has a promotional code created
  • Display a table with order review, showing elements from current order in process: subtotal, discounts, taxes, total, shipping cost
  • Display a submit button to go to the Checkout page
  • If there are no products in the cart, should display a message like: “The shopping cart is currently empty. You can go back and start adding products.”

Checkout Block

  • Display Checkout form supporting Custom fields
  • Display payment options added by merchant
  • Display shipping options added by merchant. Hide it if the products are digital
  • Display a table with order review, showing elements from current order in process: subtotal, discounts, taxes, total, shipping cost
  • Display a submit button to go to the Review page

Review Order Block

  • Display the table of ordered products with the following elements for each:
    • image (without link)
    • product name and its variants
    • quantity without the possibility of updating it
    • price and discount if the product has it
    • subtotal
    • product delete should be avoided
  • Display a table with order review, showing elements from current order in process: subtotal, discounts, taxes, total, shipping cost
  • Shipping (if available) and Billing Information should be displayed

Success Block

  • A success or unsuccess message (p.e. ‘Thanks for you purchase’) should be displayed
  • The Order Number {{ order.id }} should be displayed
  • The Shipping Information and Payment Information should be displayed
  • If Customer Login is optional or required, the Customer Create Password form should be displayed
  • If theme option “Product Table at Success Page” is activated, should display it

Pages

  • The body of all pages must show correctly the most used HTML tags (e.g: ol, ul, li, strong, a, p, br, table, i, s, b, h2, h3, h4, h5, img, iframe, alignment)
  • All themes have by default 3 page templates: Blog, Post and Default

Other

Theme Options

  • Prefer using complete URLs for emails, social networks or others and avoid creating a logic with usernames and account IDs
  • If the field is empty, create the logic to not display this code on the web

Images

  • The images of products, categories and pages must be correctly resized using the label liquid: {% "image.jpg" | resize: npx x npx %}. In this way, the store’s load is optimized
  • “Resize” should always be favoured to “Thumb”
  • All images should have both a alt and Text tag
  • If no image, display a placeholder image in replacement

Code

  • HTML code should be indented using our Editor shortcut keys: Select All (Ctrl + A) and Shift + Tab

Translations

  • Non ending text, like full stops (.) or colons (:) should be outside of translation strings. {% t 'Sorty by' %}:
  • Themes should be fully translated in our main languages before publish at https://translate.jumpseller.com
  • Translations should be thought to benefit the final customer. e.g. no need to translate merchant help strings: “This product has no image”

SEO

  • At Home Page, Store’s Name should be h1, Store Description should be h2 and Product’s Names should be h3
  • At Category Page, Category’s Name should be h1, Product’s Name should be h2 and Product’s Description should be h3
  • Follow general SEO Web Design Guides like: http://webdesign.tutsplus.com/articles/seo-articles/seo-checklist/

Performance

  • Always take into account the performance and especially in stores, it is necessary that the loading time is the shortest
  • Read more about it on https://web.dev/fast/.
  • Consider improve your image loading with a library as lazysizes
  • Try to use tools such as Gtmetrix and PageSpeed Insights to review.

Components

  • Component functionality comes in the main themes (example: Starter, Simple, Mega, etc.) See the support article
  • Some components have subcomponents. See the support article
  • Components can be used in different templates. Some examples are “contact page” and “home”. Each template has different options that can be found in the visual editor.

Related Articles

Start your journey with us!

Free trial for 14 days. No credit card required.

Get Started Now