How to set up options for prescription glasses

You can check out our demo set up for prescription glasses by clicking here

We used the product option grid.

  • Go to your product in the BCPO App.
  • Click Add Virtual Option
  • Choose Grid for the type of product option.

In the example on our demo page I entered in this data.

For the Keys for x-Axis I entered:

SPH, CYL, AXIS, ADD

For the Keys for y-Axis I entered:

OD (Right), OS (Left)

Below are some of the numbers we used in the demo so you can easily copy and paste them into your product options.

For SPH

To top

+8.00, +7.75, +7.50, +7.25, +7.00, +6.75, +6.50, +6.25, +6.00, +5.75, +5.50, +5.25, +5.00, +4.75, +4.50, +4.25, +4.00, +3.75, +3.50, +3.25, +3.00, +2.75, +2.50, +2.25, +2.00, +1.75, +1.50, +1.25, +1.00, +0.75, +0.50, +0.25, 0.00, -0.25, -0.50, -0.75, -1.00, -1.25, -1.50, -1.75, -2.00, -2.25, -2.50, -2.75, -3.00, -3.25, -3.50, -3.75, -4.00, -4.25, -4.50, -4.75, -5.00, -5.25, -5.50, -5.75, -6.00, -6.25, -6.50, -6.75, -7.00, -7.25, -7.50, -7.75,  -8.00, -8.25, -8.50, -8.75, -9.00, -9.25, -9.50, -9.75, -10.00,-10.25, -10.50, -10.75, -11.00, -11.25, -11.50, -11.75, -12.00, -12.25, -12.50, -12.75, -13.00, -13.25, -13.50, -13.75, -14.00, -14.25, -14.50, -14.75, -15.00,

For CYL

To top

+6.00, +5.75, +5.50, +5.25, +5.00, +4.75, +4.50, +4.25, +4.00, +3.75, +3.50, +3.25, +3.00, +2.75, +2.50, +2.25, +2.00, +1.75, +1.50, +1.25, +1.00, +0.75, +0.50, +0.25, 0.00, -0.25, -0.50, -0.75, -1.00, -1.25, -1.50, -1.75, -2.00, -2.25, -2.50, -2.75, -3.00, -3.25, -3.50, -3.75, -4.00, -4.25, -4.50, -4.75, -5.00, -5.25, -5.50, -5.75, -6.00,

For AXIS

To top

1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180,

For Add

To top

0.00, +0.25, +0.50, +0.75, +1.00, +1.25, +1.50, +1.75, +2.00, +2.25, +2.50, +2.75, +3.00, +3.25, +3.50, +3.75, +4.00, +4.25, +4.50, +4.75, +5.00

 How to create options for the PD.

To top
  • Add a new virtual option
  • Make the title “PD”
  • Use the option type “dropdown”
  • Add the values

I used the following values:

55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,

Next I created the option for Two PD numbers.

  • Add a new virtual option
  • Make the title “Two PD numbers
  • Use the option type “checkbox
  • Add the value Yes

When the customer clicks Yes it will bring up the options for the second PD number. Lets set that up now.

  • Add a new virtual option
  • Make the title “Second PD
  • Use the option type “dropdown”
  • Click the conditional checkbox
  • Select “Two PD numbers”, “Yes”
  • Add the values

Conditional Logic is only available on the Advanced Plan.

Values

55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75,

Grid Styling

To top

Add this code to the theme.liquid file after the <head> tag. Here is more info on editing theme code.
<style>
#bcpo .bcpo-table thead tr:first-child td {
background: white !important;
border: 1px solid gray !important;
color: black !important;
}</style>

This CSS handles the styling at the top. It changes the background color of the first row as well as the border color and text color. The text color is “color” in the css.

Was this article helpful?
Dislike