Skip to main content

Configuration for launchpad

In short; everything is set up for you. You can start building your store right away. But if you want to change some settings. This launchpad comes with a test drive payment gateway and a freight checkout. This means that you can test your store right out-the-box without having to set up a payment gateway or freight provider.

Overview

There are some settings that you can change to make your store your own. These settings are located in the nuxt.config.js file. This file is located in the root of the project.

PWA settings

The PWA settings are used to configure the PWA. You can change the name, description and theme color of the PWA. This gives your store the look and feel of your brand.

nuxt.config.js
  return {
loading: { color: '#353797', height: '5px' }, // Loading bar color
...
pwa: {
....
manifest: {
name: 'Ralph', // Name of the PWA
short_name: 'Ralph', // Short name of the PWA
description: defaultMeta.description, // Description of the PWA
theme_color: '#363636' // Theme color of the PWA (adds white space around the PWA in a phone for example)
},

Router settings

The router settings are used to configure the router. You can change the base url of the store. This is useful if you want to deploy your store to a subdomain.

nuxt.config.js
  return {
...
router: {
....
extendRoutes(routes, resolve) {
routes.push({
name: 'pdp',
path: routePaths.product + '/:alias',
component: resolve(__dirname, 'pages/product/_alias.vue')
});
...
info

This is important to remember when setting up your own page types. You need to add the route to the router settings.

Image sizes settings

You will find all avalible image sizes in ./static/ImageSize.csv. This file is just used as refrence and is not used to scale the images. The image sizes are set in merchant center.

Best Practice

Find the best image sizes for your store. If you want another image size use a cdn to resize the images on the fly. Examples of cdns are Cloudinary and Imgix.

You can use Google PageSpeed Insights to find the best image sizes for your store.

Language & Locale (i18n settings)

When adding languages to your store, you need to add the language to the i18n settings for system pages like checkout. You can also change the default and fallback language or turn on browser detection of language.

nuxt.config.js
  return {
...
modules: [
...
// Doc: https://github.com/nuxt-community/i18n-module
'@nuxtjs/i18n',
{
...
angDir: 'languages/',
defaultLocale: 'sv',
lazy: true,
vueI18n: {
fallbackLocale: 'sv'
},
detectBrowserLanguage: false,
...

Store settings

You can find theese settings under the publicRuntimeConfig object. These settings are used throughout the project. Its recommended that you change these settings to your own.

Customer Serice details

The customer service details are used throughout the project. You are recommended to change these details to your own.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
....
customerServiceEmail: '[email protected]',
customerServicePhone: '+46 123 23 43 45',

The social media links are used throughout the project. Change these details to your own or remove if not used.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
....
socialMediaLinks: [
{
icon: 'facebook',
title: 'Facebook',
link: 'https://www.facebook.com'
},
{
icon: 'instagram',
title: 'Instagram',
link: 'https://www.instagram.com'
}
...

Customer Types

If you want to use the customer types feature, you need to enable it and add the customer types. You can also enable or disable the VAT field for each customer type. Add the types you want to use according to set up in merchant center.

Tip

This feature is powerful and can be used to create different customer groups. For example, you can create a customer type for wholesale customers and a customer type for retail customers. You can then use this feature to create different prices for each customer type.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
...
customerTypesToggle: true,
customerTypes: [
{
type: 'Retail',
vat: true
},
{
type: 'Wholesale',
vat: false
}
...

Product Lists Pages

Make your default settings for Product List Pages here. You can change the default sorting and the default number of products per page. You can also change the number of products are on the same row for different screen sizes.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
...
productListDefaultSort: 'LATEST', // Default sorting for product lists
productListPageSize: 20, // Default page size for product lists
productListScrollSize: { // Default number of products per row for different screen sizes
phone: 2, // Media query: 0 - 767px
tablet: 3, // Media query: 768px - 1023px
laptop: 5, // Media query: 1024px - 1279px
desktop: 5 // Media query: 1280px and above
},

Product Details Pages

Make your default settings for Product Detail Pages here. Set the main text field for the product description. You can also set the default image size for the product schema.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
...
productStockFewLeftLimit: 6, // Few left limit for stock to use in product lists and product details
productSchemaOptions: {
productSkuLabelIsSize: false, // Product SKU label is size
productDescriptionField: 'text1', // Product description field from Merchant Center
schemaImageSize: '700f700', // Rich snippets image size
extraOfferProperties: {
itemCondition: 'https://schema.org/NewCondition' // Rich snippets item condition
}
},
productShowRelated: true, // Show related products
Notice

Make sure to change image size to the correct size. You can find the correct size in the Media section in Merchant Center.

Checkout

Make changes to the checkout settings here. You can enable or disable the different checkout steps. You can also set the default payment and shipping method.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
...
checkout: {
promoCodes: true, // Accept promo codes on checkout
shippingAddress: true, // Collect shipping address on checkout
identityNumber: true, // Collect identity number on checkout
entryCode: true, // Accept entry code on order for last mile deliery sercices
message: true, // Accept message from customer on order
defaultPaymentId: 123, // Default payment method id form Merchant Center
defaultShippingId: 123 // Default shipping method id form Merchant Center
},
...

Cart

Make changes to the cart settings here. You can hide the selected value for sku items with certain values. You can also change the quantity changer type for sku items in cart.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
...
cart: {
hiddenSkuValues: ['-', 'One size'], // Dont show selected value for sku with these values in cart
quantityChangerType: 'default' // Quantity changer type for sku items in cart
},
...

User

Settings for the user object. You can enable or disable the different user fields. You can also enable or disable the different price lists for different users.

nuxt.config.js
  return {
...
publicRuntimeConfig: {
...
user: {
gender: false, // If set to true, gender must be added to user.graphql
country: false, // If set to true, country must be added to user.graphql
priceLists: true // Set to true if using different price lists for different users
}
...

Conclusion

This concludes the setup of the project. You can now start developing your own store. Remember to check out the documentation for more information about the project.