Installation

Once you click the install button in our DB Size Chart & Size Guide app page in the app store, you will be redirected to get the permission prior to installation. If you agree to give the permission, you can click on the install button.

Setup Guide

Online Store

When you are done installing, you will be redirected to the main page. If you are maintaining There we have provided a quick guide to set up the app for ready to use in a quick manner. Once you follow these steps, you can have the app featured without any hesitation.

Step 1

We have provided default settings for you. However, you can edit in the settings page as you prefer.

Step 2

We have created a default size chart for you. We have provided 11 presets as well to create size charts in a quick manner. However, you have to publish one of the size charts you create before use.

Step 3

You have to enable the app main widget embedded block in the theme editor. You will be directed to the theme editor by clicking on the button.

Step 4

Finally you have to enable the inline button widget in the product page. You will be directed to the theme editor by clicking on the button.

Hydrogen Stores

Our app supports Hydrogen stores as well. Setting up is a bit different than for online stores. Settings in the app setting page are not available for Hydrogen components. The styling settings are managed using custom CSS. Then you can adjust the CSS manually which is best fit for your website. The reason for doing it is also simple. The purpose of developing Hydrogen stores is for developing a custom online store. So, we think that our app UI also should be native to the custom website as much as possible. For you to quickly set up. We have created an example CSS file with default settings which you can download from here.

Step 1

After installing the app, you have to publish at least one size chart as described in the step 2 for the online store above.

Step 2

Since the Hydrogen projects are based on react in Hydrogen framework, we have created an app UI component which has to be installed via NPM to the Hydrogen project base.

npm i db-size-chart-and-size-guide

Now you can import the UI component which is <DbSizeChartSizeGuide /> where you want in the product page as below. In this example, we have placed the component above the add to cart button inside the <ProductForm />

function ProductForm({
  product,
  selectedVariant,
  variants,
  sizeChartData,
}: {
  product: ProductFragment;
  selectedVariant: ProductFragment['selectedVariant'];
  variants: Array<ProductVariantFragment>;
  sizeChartData: any
}) {
  return (
    <div className="product-form">
      <VariantSelector
        handle={product.handle}
        options={product.options}
        variants={variants}
      >
        {({option}) => <ProductOptions key={option.name} option={option} />}
      </VariantSelector>
      <br />


      <DbSizeChartSizeGuide />


        <AddToCartButton
          disabled={!selectedVariant || !selectedVariant.availableForSale}
          onClick={() => {
            window.location.href = window.location.href + '#cart-aside';
          }}
          lines={
            selectedVariant
              ? [
                  {
                    merchandiseId: selectedVariant.id,
                    quantity: 1,
                  },
                ]
              : []
          }
        >
          Add to cart
        </AddToCartButton>
    </div>
  );
}

Step 3

To feed size chart data, you have to define a storefront graphql API fragment.

// Size chart meta object query fragments

const METAOBJECT_FIELDS_FRAGMENT = `#graphql
  fragment MetaobjectFields on Metaobject {
    id
    fields {
      key
      value
    }
  }
` as const;

const METAOBJECT_QUERY = `#graphql
  query Metaobjects($type: String!, $first: Int!) {
    metaobjects(type: $type, first: $first) {
      edges {
        node {
          ...MetaobjectFields
        }
      }
    }
  }
  ${METAOBJECT_FIELDS_FRAGMENT}
` as const;

Along with this, you have to get the login country details of the customer. The graphql API fragment is as below.

// To get the customer country

const CUSTOMER_COUNTRY_QUERY = `#graphql
    query GetCustomerCountry @inContext {
      localization {
        country {
          isoCode
          name
        }
      }
    }
  `;

Step 4

Now you have to create an object called sizeChartData as a prop in the loader function of the product page. The object is as below.

const sizeChartData = {
    sizeCharts: sizeChartObjects,
    buttonText: "Size Chart",
    iconOption: "1",
    productId: productId,
    customerCountry: customerCountry
  }

For sizeCharts, you have to call the size charts metaobject graphql API and get the values

const campaignSettings = await storefront.query(METAOBJECT_QUERY, {
    variables: {
      type: "devbranch_size_chart_campaign_settings",
      first: 250
    },
  });

buttonText means the text value that displays in the inline and floating buttons along with the button icon.

iconOption means the option number of the button icons. The option numbers are as below.

You may provide the productId as a string as below.

const productId = product.id.replace("gid://shopify/Product/", "");

The total implementation of the data is as below.

export async function loader({params, request, context}: LoaderFunctionArgs) {
  const {handle} = params;
  const {storefront, session} = context;
  /*
	Other implementations
  */
  const productId = product.id.replace("gid://shopify/Product/", "");

  const campaignSettings = await storefront.query(METAOBJECT_QUERY, {
    variables: {
      type: "devbranch_size_chart_campaign_settings",
      first: 250
    },
  });

  const sizeChartObjects = campaignSettings.metaobjects

  const customerCountry = (await storefront.query(CUSTOMER_COUNTRY_QUERY)).localization.country;

  const sizeChartData = {
    sizeCharts: sizeChartObjects,
    buttonText: "Size Chart",
    iconOption: "1",
    productId: productId,
    customerCountry: customerCountry
  }
  return defer({product, variants, sizeChartData});
}

Step 5

Now we have to implement the css file in the project. Upload the devbranch-size-chart.css file downloaded in the styles folder of the Hydrogen project. Then you have to link the css file in the root.tsx file.

import sizeChartStyles from './styles/devbranch-size-chart.css?url';

export function links() {
  return [
    {rel: 'stylesheet', href: sizeChartStyles},
    {
      rel: 'preconnect',
      href: 'https://cdn.shopify.com',
    },
    {
      rel: 'preconnect',
      href: 'https://shop.app',
    },
    {rel: 'icon', type: 'image/svg+xml', href: favicon},
  ];
}

Step 6

You may have to allow the link of our base app under content security policy – https://db-sizechart-app-ce28eecccd26.herokuapp.com/