🌵Plants Store

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:

@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 >

Customize the theme

  1. Install lodash
npm i --save lodash
  1. Create a folder in your site to store the shadow files: yourProjectRoot/src/@florantara/gatsby-theme-mercadolibre-store
  1. Inside that folder create a settings folder, and then theme.js file inside of it:
// In settings/theme.js
import merge from "lodash/merge"
import { theme as base } from "@florantara/gatsby-theme-mercadolibre-store/src/settings/theme"

export const theme = merge(base, {
  // Your overrides here
})

Follow the Theme UI documentation to know what properties to use.

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.

Settings reference >

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

// In settings/site.js
import merge from "lodash/merge"
import { siteConfig as base } from "@florantara/gatsby-theme-mercadolibre-store/src/settings/site"

export const siteConfig = merge(base, {
  // Your overrides here
})

Pages

Homepage

This page is created automatically. From here, you can edit it from src/static-pages/index.mdx.

Create and edit

Use markdown + jsx (MDX) to create more pages.

At the top of the page, setup the path and title like so:

You can also specify a css class that will be added to the page container if you need to add styles to your new page, using the bodyClass field.

For example: src/static-pages/nueva-pagina.mdx

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

Fragments for Pages

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)
  • Container (wraps everything with a maxWidth container)

(more to come!)

Custom Fragments

You can create as many fragments as you want to use on the MDX pages. These can be buttons, banners, ads, etc.

  1. In the shadow folder (read the "Override the settings" if you don't have one yet), create a fragments folder, and then an index.js file inside, with:
// In fragments/index.js
import merge from "lodash/merge"
import { fragments as base } from "@florantara/gatsby-theme-mercadolibre-store/src/fragments/index"

export const fragments = merge(base, {
  // Your new fragments here
})

Example:

// In fragments/index.js
import merge from "lodash/merge"
import { fragments as base } from "@florantara/gatsby-theme-mercadolibre-store/src/fragments/index"

import { MyCustomButton } from "../components/MyCustomButton";

// Custom fragments
export const fragments = merge(base, {
  MyCustomButton
})

This is how the FeaturedProducts looks like:

Destacados