Palo Alto 6.2.1 has been released
Release notes
Palo Alto Doumentation
NewSupport
Latest version
Latest version
  • Palo Alto theme documentation
  • Updates
    • What's new in Palo Alto
      • Release notes
      • About 6.2 Release
      • About 6.1 Release
      • About 6.0 Release
      • About 5.9 Release
      • About 5.8 Release
      • About 5.7 Release
      • About 5.6 Release
      • About 5.5 Release
      • About 5.4 Release
      • About 5.3 Release
  • Sections
    • Palo Alto sections
      • Explore the sections
      • Accordions
        • Text block
        • Page block
      • Accordions with images
        • Text block
        • Page block
      • Banner image
        • Subheading block
        • Heading block
        • Text block
        • Timer block
        • Buttons block
        • Video button block
      • Banner with text columns
        • Column block
      • Blog posts
      • Buttons list
        • Button block
      • Collection list
        • Collection block
      • Contact form
        • Form heading block
        • Email block
        • Message block
        • Text line block
        • Telephone block
        • Divider block
        • Single checkbox block
        • Select dropdown block
        • Radio buttons block
      • Countdown
        • Subheading block
        • Heading block
        • Text block
        • Timer block
        • Buttons block
        • Video button block
      • Custom code
      • Custom content
        • Image block
        • Text block
        • Newsletter block
        • Testimonial block
        • Product block
        • Video block
        • Collection block
      • Divider
      • Featured collection
        • Promo block
      • Featured product
      • Grid
        • Collection block
        • Product block
        • Image block
        • Text block
      • Icons row
        • Item
      • Image
      • Image accordions
        • Image block
      • Image with scrolling text
        • Scrolling text block
        • Subheading block
        • Heading block
        • Text block
        • Timer block
        • Buttons block
        • Video button block
      • Image with text
        • Subheading block
        • Heading block
        • Text block
        • Button block
        • Accordion block
      • Locations
        • Locations block
      • Marquee
        • Text block
        • Free shipping message block
        • Custom HTML block
        • Image block
      • Multi column
        • Text block
        • Image block
        • Menu block
        • Collection block
      • Newsletter
      • Overlapping images
      • Press/Logo
        • Press block
      • Products list
      • Products with image
      • Promotion row
        • Custom promo block
      • Recently viewed products
      • Shop the look banner
        • Product block
      • Shop the look grid
        • Product block
      • Shoppable blog posts
        • Article block
      • Slideshow
        • Slide block
      • Social gallery
        • Image block
      • Split images
        • Image block
      • Sticky image cards
        • Image card with text block
      • Sticky images and text
        • Sticky images and text: Horizontal
        • Image and text block
      • Tab collections
        • Collection - block
      • Testimonials
        • Testimonial block
        • Text block
      • Testimonials with images
        • Testimonial block
        • Text block
        • Image block
      • Text
        • Subheading block
        • Heading block
        • Text block
        • Split text block
        • Button block
        • Image block
        • Icon block
        • Icon row block
      • Text columns with images
        • Column block
      • Video
  • Theme Settings
    • Theme settings
      • How to make changes
      • Colors
      • Typography
      • Buttons
      • Product grid
      • Product form
      • Quick shop
      • Cart
      • Upsells
      • Loading overlay
      • Appearance
      • Animation
      • Badges
      • Swatches
      • Pagination
      • Search
      • Social media
      • Currency
      • Favicon
      • Size chart
      • Custom CSS
      • Theme style
  • Header
    • Announcement bar
      • Settings and blocks
      • Text
      • Free shipping message
      • Custom HTML
      • Target settings
      • Image
    • Header
      • Header settings
      • Mega menu
      • Logo
      • Highlighted link
      • Transparent header
    • Mobile menu
      • Menu
  • Footer
    • Footer
      • Settings and blocks
      • Logo
      • Text
      • Link list
      • Newsletter
      • Blog
  • Products
    • Product pages
      • Variant images
      • Settings and layout
      • Size chart tabs
      • Size chart metafields
      • Custom color swatches
      • Pre-order
      • Gift card product
      • Out of stock notification
      • Metaobjects
      • Creating new product page templates
    • Blocks
      • Product blocks
      • Title and price
      • Form
      • Product description
      • Cutline
      • Accordion
      • Upsell
      • Share button
      • Pickup availability
      • Custom code
      • Text
      • Icon
      • Icon row
      • Siblings
      • Inventory countdown
      • Popup text
      • Line item property
      • Divider
      • Feature
      • Complementary products
      • Badges
      • Timer
      • Fit guide
  • Collections
    • Collection pages
      • Filtering options
      • Custom product badges
      • Cutline
      • Catalog banner images
      • Collection pages promo
  • Cart
    • Palo Alto Cart
      • Cart types
      • Empty cart buttons
      • Free shipping message
      • Custom message
      • Terms and conditions
      • Upsell promotion
  • Pages
    • Page templates
  • Blogs
    • Blogs and articles
      • Settings and layout
      • Recommended posts
      • Creating blog page templates
  • Overlay
    • Popups
      • Popup with image
      • Popup small
      • Cookie consent
      • Popup behavior
  • Promotions
    • Upselling
      • Upsell promotions
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Define a metaobject
      • Add product list entries
      • Activate using a metafield
      • Bulk update sibling products
      • Siblings block
  • FAQ
    • Frequently asked questions
      • Updating your theme
      • Highlight words
      • Image aspect ratio
      • Recommended image sizes
      • Adding a section
      • Reordering sections
      • Sharing a preview link
      • Check your theme version
      • How to add custom fonts
      • Remove 'Powered by Shopify'
      • CSS customizations
  • License
    • Theme license
  • Support
    • Theme support policy
    • Contact support
    • Hire a Shopify expert
Powered by GitBook
On this page
  • How to
  • Step 1 - Pages
  • Step 2 - Tags
  • Step 3 - Customize
  • Result
  • Edit language
Export as PDF
  1. Products
  2. Product pages

Size chart tabs

Display multiple size charts for any product

PreviousSettings and layoutNextSize chart metafields

Palo Alto provides the flexibility to use multiple size charts for different products. Display more than one size chart to improve your customer experience and reduce returns significantly:

Enjoy flexible sizing: Palo Alto enables you to associate different size charts with individual products.

How to

Palo Alto uses the pages you create in your Shopify Admin and renders them in a size chart drawer for your customers. The steps are simple:

  • Create size chart pages using the Pages editor in your Shopify Admin.

  • Add custom tags to any of your products.

  • Fine-tune the tab options in the Theme settings.

Step 1 - Pages

The first step is to build your size chart pages in the main Shopify Admin -> Online Store -> Pages

  • Create as many size-chart pages as necessary for your products.

Step 2 - Tags

About Palo Alto's Size Charts:

  1. Static (easiest) - Instantly displays one size chart for all your products. Choose a page, and that chart will appear on all product pages.

  2. Metafields - This method uses a custom metafield to display unique size charts for any product. It lets you pick which products will show a size guide link and associate it with a specific page you've created.

  3. Tags (this method) - With tags, you can display single or multiple size charts in tabs. Each product is configured individually. Products without a tag won't display a size chart unless the static version is used or the product has a metafield. This method can be combined with Static and Metafield charts, displaying all charts in tabs.

The tags method is very flexible and simple to set up. Palo Alto uses a custom tag prefix to trigger and map a product to a size chart page.

The custom tag format has two parts:

  • Prefix

  • Page handle

Here's an example of the tags we used to show two size charts:

Prefix

The prefix (first part of the custom tag) is:

_size_

Page handle

The page handle is found at the bottom of each size chart page:

Use the "Edit website SEO" link to copy the handle to your clipboard. The exact handle is required, as a typo will break the link.

Together

Put them together to build your tags.

Prefix: _size_

+

Sample page handle: metric-guide

=

_size_metric-guide

Final tag example: _size_metric-guide

Remember to use the page handle from your pages built in the Shopify page editor.

Add to products

Add your custom tags to individual products. Use a single tag to display one size chart, or add additional tags to display multiple size changes.

Example of multiple tags:

After you've created custom tags, they can be chosen easily when adding to other products:

Step 3 - Customize

In the Theme Editor, you can customize how the tabs appear. Use the Theme settings -> Size chart options to finetune the look of your size chart drawer:

Tab heading style

  • Choose the preset font style.

Tab heading size

  • Adjust the size of the heading.

Tab underline color

  • The underline uses the Accent color from your Theme settings:

Note: Changing this value will affect other areas in the theme where the accent color is used.

Result

Palo Alto will use the custom tag(s) applied to each product and display them when the customer uses the Size guide icon on the product page:

Edit language

You can edit the default theme content to change the text "Size Guide" next to the ruler icon.

Click on the ellipsis (three dots) at the top-left of the Theme Editor and choose "Edit default theme content":

In the Content editor, sometimes known as the Language editor, under the General tab, modify the text that's under Size chart -> Button:

Save the changes.

Tabbed size charts
Example of tag format - Last two tags
Copy the page hadle to your clipboard
Two tags used will display two chart tabs
Tags can be selected after initial creation