How can I create price list pages displaying variant skus and prices?

[adventmedia]

I need to create price list pages. I would like to be able to pull the data from the product pages and display a list of variant skus and prices. How can this be done?

[MarinaPetrovic]

Hi @adventmedia , to be clear, you’d like to list all variants and their skus, for all of your products on one page?

[adventmedia]

This page is a metafield linked to main the product page that loads into the Collapsible Tab by using a Custom Liquid block in the product page in the Customizer. The page content is a static table provided by my client and I want to make those fields dynamic so the client won’t have to make manual updates. The rows are all attributes of the product variants.

I do not know how to make these fields dynamic.

[SheetalZadfiya]

Hi @adventmedia

1. For create dynamic variant detail table. First you need to create 3 metafields

• Settings > Metafields > Variants > Add definition


2**.** Second replace or add below code in main-product.liquid file

• SALES CHANNELS > Online Store > Themes > Actions > Edit code > Sections > main-product.liquid

{%- when 'collapsible_tab' -%}
  
    {%- assign heading = block.settings.heading | handle -%}
    {%- if heading != 'view-size-price-table' or product.has_only_default_variant == false -%}
    
    {%- endif -%}
  

3. Add Collapsible row block from CMS and add title View Size / Price Table


4. Add variant detail from product

• Products > Select Product > Variants


5. Show below screenshot.

Happy Coding!!

[adventmedia]

Thank you for this tutorial. The Part No. is actually the variant sku. So, I don’t think that I need to create a metafield for that, but would the proper code be variant.sku?

[adventmedia]

Is there a way to load this table into a pop-up instead of the collapsible tab? Some of my tables have too much content (too wide) to load into the collapsible tab. I think pop-up might be better.

[SheetalZadfiya]

Hi @adventmedia

Okay then to display sku list you need to replace Part No. with variant sku as {{ variant.sku }}

To create pop-up instead of collapsible tab first add one block option in schema inside main-product.liquid file

,
{
  "type": "sizechart",
  "name": "Size Chart",
  "limit": 1,
  "settings": [
	{
      "type":"text",
      "id":"title",
      "label":"Heading"
	},
    {
      "type": "checkbox",
      "id": "enable_sticky_info",
      "default": true,
      "label": "Enable Size Chart"
    }
  ]
}

• Then add below code before variant_picker code inside main-product.liquid file

{%- when 'sizechart' -%}
{%- if block.settings.enable_sticky_info and product.has_only_default_variant == false -%}

  {{ block.settings.title }}

  
    {%- include 'icon-close' -%}
  
  

    ## {{ block.settings.title }}
    
          {%- liquid 
                	assign sku = '' 
                    assign color = '' 
                    assign dia = '' 
                    assign thickness = '' 
                    assign price = '' 
                -%}
          {%- for variant in product.variants -%}
          {%- assign sku = variant.sku -%}
          {%- assign color = variant.title -%}
          {%- assign dia = variant.metafields.custom.dia -%}
          {%- assign thickness = variant.metafields.custom.thickness -%}
          {%- assign price = variant.price -%}
          {%- endfor -%}
          {%- if sku != blank -%}{%- endif -%}
          {%- if color != blank -%}{%- endif -%}
          {%- if dia != blank -%}{%- endif -%}
          {%- if thickness != blank -%}{%- endif -%}
          {%- if price != blank -%}{%- endif -%}
        
        {%- for variant in product.variants -%}
        
          {%- if variant.sku != blank -%}{%- endif -%}
          {%- if variant.title != blank -%}{%- endif -%}
          {%- if variant.metafields.custom.dia != blank -%}{%- endif -%}
          {%- if variant.metafields.custom.thickness != blank -%}{%- endif -%}
          {%- if variant.price != blank -%}{%- endif -%}
        
        {%- endfor -%}
      

| SKU | Color | Dia. | Thickness | Price |
| - | - | - | - | - |
| {{ variant.sku }} | {{ variant.title }} | {{ variant.metafields.custom.dia }} | {{ variant.metafields.custom.thickness }} | {{ variant.price | money }} |

  

{%- endif -%}

• Add below script before schema inside main-product.liquid file

• Add below CSS inside base.css file

.sizechart_active{
    position:relative;
}
.sizechart_popup{
  position: fixed;
  max-width: 100%;
  max-height:calc(100% - 50px);
  background: #fff;
  transition: 1s;
  z-index: 100;
  left: 50%;
  top: 0;
  transform: translate(-50%, -100%);
  margin:0 !important;
  padding:30px;
  display:none;
}
.sizechart_active .sizechart_popup{
  transform: translate(-50%, -50%);
  top: 50%;
  display:block;
  overflow:auto;
}
.sizechart_popup_overly{
  width: 100%;
  height: 100%;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #000000ab;
  transition: .5s;
  z-index: 99;
  display:block !important;
  margin:0 !important;
}
.sizechart_active .sizechart_popup_overly{
  visibility:visible;
  opacity:1;
}
.sizechart_popup_close{
  position:absolute;
  top:20px;
  right:20px;
}
.sizechart_popup_close svg{
  width:15px;
  height:15px;
}
.sizechart_popup_close svg path{
  fill:#000;
}
.sizechart_head{
  margin:0 0 20px;
}

• Add size chart option from CMS

• on View Size / Price Table link click pop-up will open

I hope it’s helpful to you.

[adventmedia]

Very helpful instructions, however the link for the pop-up does not open a window. Rather, it goes to this url: /products/View%20Size%20/%20Price%20Table