Apparel Theme - Basics

Next you can find a few examples on how logos look and vary depending on the file type in which they are exported.

If you pass your mouse over them their size will slightly expand and you will be able to see how .png and .jpg formats "pixelate" a bit, while the logo in .svg format don't.

SVG

PNG

JPG

All the colors here are the “base” colors of the theme, so if you change any of them, it will affect several sections and/or elements where that color is applied.

If you enable that option on the sections where it’s available, those colors will gain priority on top of the Theme Colors.

This section is where your Store’s Logo displays, or your Store’s Name if you haven’t defined a Logo. It will always be aligned to the center of the page.

This section it’s only visible for Desktop devices that have a width equal or greater than 1200px. It displays the menu available at Customization > Navigation > Main Menu and its items and subitems. It will hide for devices with a width that’s less of the dimension mentioned before.

This section is the one positioned at the right side of the Header and contains several elements that can be displayed:

This section it’s only visible for devices that have a width equal to or less than 1199px and it’s positioned on the left side of the Header. It displays the following two elements:

You will be able to notice that all elements display an icon and a text. The icon is the one element that will always be visible on all devices. All texts, except the “products count”, will hide for devices that have a width equal or less than 767px, like for example an iPad Mini, which is a Tablet. This behavior is intentional to prevent -or try to- items from collapsing on smaller devices.

In the image above the Slider component has been defined to take the full width of the browser window.

In the image above the Slider component has been defined to take and respect the width of the maximum container width.

The last one it’s useful if for example you don’t want sections and most importantly images, to go as far as the browser allows them to, because that could mean that images could get pixelated by trying to stretch and respect the browser’s width. Let’s look at an example:

Because of the previous example, you will find one option -we'll let you know where- from which you can define the maximum width that the Store’s Grid will have, in order to prevent cases such as this.

That way, your store can look as beautiful as you want and you don't have to worry about uploading humongous and heavy images that can negatively impact your store’s loading speed.

The section that contains the Product Brand, the Product Name, the Product Price and the Product Description.

The section that contains the title or category name, and if added, the category description. As well as the Filters button that opens the filters sidebar panel.

The section that contains the title of the page and depending on the search results found, a description with a bit of detail. Here if available, the filters button will also be displayed.

For example a Terms and Conditions page is mainly composed of a Title and the Body (or description if you may). In this case the Title would be the Heading.

Are the inner (top and bottom) margins that allow separation of the content (e.g. Heading, like Featured Products title) with the upper and lower parts of the component. This can be more visible and best understood if the component has a background color different from white.

Are the top and bottom margins -outer, if you like- that allow to separate and create space (commonly referred as “white space”) between the component and other sections (or components) that appear before or after.

The amount of products that will be visible on the Carousel will vary depending on the device where the store is being seen, based on the following table:

The amount of products per horizontal row will vary depending on the device where the store is being seen, based on the following table:

This page is the first one and presents the customer with the products they have added on the Content section, where they can edit the product’s quantities and/or remove them.

At the Summary section the following subsections are available:

• Estimate Shipping: Allows customers to see all the available shipping methods you have defined at the store, always based on the country, region and municipality configuration you have set.
• Discounts codes: If you have created a Promotion on your store and it works by adding a Promotion Code in order to be applied, the respective section will display.
• Totals: As it was mentioned before, this subsection contains all the details regarding the monetary numbers of the order.

This is the second page of the shopping process and at the Content section it displays the Checkout form, which is the one customers have to fill in order to move to the next section. This form is divided into the following subsections:

• Contact Information: Here the customer must add their email address (mandatory and cannot be removed) and phone number (which you can enable or not).
• Shipping Information: Here the customer must add all the information to where the order will be shipped to.
• Billing Information: Here customers can add different information for the Billing if they want it to be different from the Shipping. By default this will be hidden, but can click on a checkbox in order to open it and fill the respective fields.
• Other: An additional subsection can be displayed that contains a field that comes by default to add “Special instructions” for the order.
• Payments methods: This subsection presents the list of available payment methods for your customers to choose from.
• Shipping options: This subsection presents the list of available shipping methods for your customers to choose from. This list it’s completely dynamic, meaning that each Shipping method will display its price. Every time they change any of those select values, prices will change and update, depending on the Country, Region and Municipality they have selected.

Additionally, you can add all the fields you want or need on any of these sections, from different types, like text input, select lists, checkboxes, radio buttons and textareas. This will allow you to have a more customized Checkout form, where a few examples could be:

• Gift checkbox field: Add a “Checkbox” type additional field so your customers can choose if they want their order to be a Gift.
• Delivery Date field: Add a “Date” type additional field so your customers can select a date on which you need to deliver the order.

In the Summary section customers will find the list of products they have in their Cart, but they won’t be able to edit them. This is intentional, as the focus is that if they get to this part, they finish the process. If they need to edit products, they can go back to the Cart page. The Totals subsection it’s also available here.

This is the third page of the shopping process and the Content section will present all the information that they added at the Checkout page, in almost the same order:

1. Contact Information
2. Shipping and Billing Information
3. the selected Payment Method
4. the selected Shipping Method
5. Additional Information if it was added.
6. Additional fields you may have added to your Checkout form will appear in this last section as well.

At the Summary section they will find the same information than in the Checkout page. The only difference will be the text inside the button that allows customers to Place the order. Below this button there will be links so customers can go back to the previous shopping process pages or to the Homepage of the store.

The final page of the Shopping Process is the Success page, where customers arrive when they have successfully completed an order, whether it is from an external Payment Gateway like PayPal or directly through a manual payment option like a Bank Transfer.

In this page they will find all the details from their purchase, like the order number, the totals (e.g. subtotal, discounts, shipping costs, total) as well as the full list of products included in the order.

For the first three, this section will display if products in the page are more than the amount defined. Let’s look at an example:

Let’s say that in a Category you have a total of 120 products and you have defined at the respective settings (which you will find further below this Documentation) that the maximum amount to be displayed per page is 40. That will result in the category having 3 pages that can be “paginated”, where customers can switch and go back and forth between them.

The same applies for the Search Results page: If a customer searches for the “a” word and the search matches with 120 results (products), the Pagination will display 3 pages, with 40 products each.

For the Blog page the logic is pretty similar, as you can define how many articles will be displayed per page and that will define how many pages can be “paginated”.

In the case of the Blog Article page, the Pagination section is much simpler: It allows customers to go to the Previous and Next article -if they exist- based on the article they are currently seeing.

In Jumpseller you can create what is called Product Options within a specific product and you might ask, why should I?

Well, let’s say you sell clothes and you have a Black T-shirt with different sizes: Small, Medium and Large. Normally you would create each of those sizes as individual products and would get something like:

• Black T-shirt Size Small
• Black T-shirt Size Medium
• Black T-shirt Size Large

Working with Product Options you can create just one product that has all those sizes as options, or strictly, variants. So for example, you could create just one product like Black T-shirt with options and create the option called Size. Then, on that option you would create the different variants mentioned above: Small, Medium and Large. Once you do that, customers can go to the product page and select the size (variant) they want to buy.

If you do the same for other products in your store then customers would be able to filter products on category pages and the search results page by Size.

Another way for creating filters is by adding a Custom Field on your products with the type Selection. For each one of these types of custom fields you can add several values that will be the filter options.

So, for example you could create a Custom Field called Brand and add to this field all the brand names of the products you have in your store. This way on a category page customers would be able to filter products by Brand.

Product Options and Custom Fields (of type Selection) automatically create filters in the store, which you can view by going to Products > Filters at your store’s Administration Panel and re-order them or even disable the ones you don't want to appear. at the filters list.

So for example let’s say customers get to visit your T-shirts category and they will find the Filters button which by clicking will open the Sidebar Filters panel.

In there, they would find all the available filters that have been created and can select them simultaneously in order to make the most accurate selection based on what they’re looking for.

When you create your store and go to Pages > All pages you will find that there are two pages already created: Blog and Blog post. There will also be two page categories created: Blog and Post. You won’t be able to remove or delete the categories, nor the Blog page, as they are all necessary for everything to work properly. In the case of the Blog page, you can change everything from it, like the name, permalink, etc.

So, the relationship between the Blog page and each Article is defined based on the category you define that will be used to group all of the articles, which by default is Post. This will make that on the Blog page, all articles that have this category assigned will be displayed together. This also applies for the Blog component. You can modify how all this relationship works at the Visual Editor section of your store. For more detail check the Blog and Articles section of this documentation.

Another point to notice is that all stores come with two Page templates already created, one for each page: Blog and Post.

So, if you go to the details of the Blog page and scroll down to the “Theme” section you will find that it uses the Blog template. The same goes for the Articles, which uses the Post template.

Therefore, in order for all your articles to have the same design, it’s extremely important that everytime you create a new Article (page) you apply the respective category and template to them, otherwise, they will look as a “normal” page because when you create a new page it uses the Default page template.

You can see what’s the design for both pages on Apparel’s Demo store.

In order for you to get the most out of your Blog and Articles and they also look well, we leave here a detail of how images are used in the theme.

On the Article page the image will be used as the background of the main section, which includes: the title, the date (optional) and the share section. You have an option to control the width of this section and depending on what you choose, the image size should be one of the following:

1. Browser Width: 1600x800px. You must consider here that the width should relate to what you have defined as the maximum width for the grid of your store, which is explained in the Store Grid section of this documentation.
2. Grid Width: 1300x560 px.

On the Articles block, which are the ones that display for example at the Blog page, this works a bit different. As you will have the ability to define how they will be displayed, they will do proportionally based on the device where they are be seeing:

• Desktop and Tablet devices: 636x397px.
• Mobile devices: 575x358 px.

This will only apply if the selected option is Resize or Crop. You can read what each of these options do in the respective section.

To resume, the image you upload to the Article must be at the size that’s gonna be displayed in the Article page. For the blocks, the store will adapt it through code based on the selected option.

This page is the one that allow customers to access (log in) to their accounts and consists of basically two sections:

Login Form section

This is the form where customers can enter their email and password in order to login. They also have the link that allows them to reset their password in case they have forgotten or need to change it.

Create account section

This section allows customers that don't have an account yet, to go to the respective page in order to do so.

This is the page where customers can create an account in your store and it displays the form that has the following mandatory fields: Email, Phone, Password and Confirm password.

The Apparel theme includes a section that can be displayed along with this form to detail and show the benefits of creating an account. You can read more about it at the respective section in this documentation.

This page is also used so customers can edit the basic details that have already been added.

This page is available for customers who already have an account in your store and is divided into two sections (or "tabs"):

Order history

This section presents a list of all the orders that a customer has made in your store, with all the details for each order. It also includes the link for customers to repeat an order. This link can be disabled if necessary.

Customer Information

This section presents all the information that a customer has added, which is divided into 3 subsections, which are related to the details a customer has to fill at the Checkout page of the store: Contact Information, Shipping Information and Billing Information.

Customers will have the ability to add multiple Shipping and Billing addresses if they want to, so they can choose where orders need to be shipped or which Billing details will be used for an order.

This page is the one that’s available for customers who already have an account and allows them to Add a new Address or edit one that already exists. It’s used for both Shipping and Billing details.

This page is the most basic one and it’s only used for customers that have requested to recover or reset their password. The reset or recover password process for all Jumpseller stores is the same and can be explained in the following steps:

1. When customers are at the Login page and click on the Reset password link they will be asked to provide the email address related to their account.
2. They will get an email at the address they defined with a link that works for just 24 hours. When they click on the link, it will redirect them to the Reset Password page.
3. Once they get to the page they will need to set the new password and confirm it.