Bienvenido a tu

Tienda de MercadoLibre

con Gatsby 🚀

Setup your Store

Import data

Open gatsby-config.js and add your MercadoLibre info.

options: {
  mercadoLibre: {
    siteID: "yoursiteid",
    user: "youruser",
  }
}
Read more >

Paths and Pagination

You can customize the slug for the products listing and the detail page paths.

The default pagination format is a "load more" button, but you can setup "paginated" pagination.

options: {
  productDetail: {
    slug: "producto",
  },
  productsListing: {
    slug: "productos",
    enablePagination: true, // defaults to false
    productsListingPerPage: 3
  },
}

Title and Logo

Use the siteMetadata for the title. We'll use this for SEO, and if there isn't a logo image.

siteMetadata: {
  title: "Plants Store",
}

To import a logo, configure:

options: {
  site: {
    logoURL:
      "https://placeholder.com/wp-content/uploads/2018/10/placeholder.com-logo3.jpg",
    }
  }
}

Shadow theme files

To override any file from the theme, create in your site's src/ folder:

src/@florantara/gatsby-theme-mercadolibre-store/

Then replicate the same folder/file structure from the theme that you want to shadow.

Remember to restart the server for this to take effect.

Theming

Most components come with a Theme UI variant setup you can use to style them, or you can style any component that the Theme Spec provides.

Variants reference >

Override the settings

Create the file settings/theme.js in the site's src/@florantara/gatsby-theme-mercadolibre-store/ folder and add the following:

import { theme as baseTheme } from "@florantara/gatsby-theme-mercadolibre-store/src/settings/theme";

export const theme = {
  ...baseTheme
  // Your overrides here
};

Note: You'll need to spread every nested object you want to override. We recommend using lodash's merge method to mitigate this.

Typography

The theme uses Roboto for the body and headings too.

You can configure any other typography you want in the theme settings - after importing it to your site with a plugin such as gatsby-plugin-prefetch-google-fonts.

Use the fonts property of Theme UI.

fonts: {
  heading: "Roboto, system-ui, sans-serif",
  body: "Roboto, system-ui, sans-serif",
}

Site settings

We provide a set of settings for hiding/showing things, like the price on the products and the category, and also other site-wide configurations.

Following the same directions as with Theming, shadow this file: settings/siteConfig.js.

import { siteConfig as baseSiteConfig } from "@florantara/gatsby-theme-mercadolibre-store/src/settings/site";

export const siteConfig = {
  ...baseSiteConfig
  // Your overrides here
};

Note: You'll need to spread every nested object you want to override. We recommend using lodash's merge method to mitigate this.

Settings reference >

Homepage and Pages

Use MDX to create pages, and edit this page from src/static-pages. At the top of the page, setup the path in the frontmatter data:

---
path: "/nueva-pagina"
title: "Nueva Página"
---

Fragments for MDX

There's a few available reusable components we are calling "fragments" available:

  • Hero (the orange at the top ^)
  • Paper (this one!)
  • FeaturedProducts
  • Layout (width compact and tiny options)

(more to come!)

This is how the FeaturedProducts looks like:

Destacados