<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Avni Arora</title>
    <description>The latest articles on DEV Community by Avni Arora (@avni_arora_7a6959c91fd168).</description>
    <link>https://dev.to/avni_arora_7a6959c91fd168</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4172779%2F24dcddc5-8abf-4c93-9a16-d32a094c29c6.png</url>
      <title>DEV Community: Avni Arora</title>
      <link>https://dev.to/avni_arora_7a6959c91fd168</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/avni_arora_7a6959c91fd168"/>
    <language>en</language>
    <item>
      <title>Cushion Covers for Living Room: 7 Easy Ways to Refresh Your Sofa Without Buying New Furniture</title>
      <dc:creator>Avni Arora</dc:creator>
      <pubDate>Thu, 22 Oct 2026 07:37:47 +0000</pubDate>
      <link>https://dev.to/avni_arora_7a6959c91fd168/cushion-covers-for-living-room-7-easy-ways-to-refresh-your-sofa-without-buying-new-furniture-3e1m</link>
      <guid>https://dev.to/avni_arora_7a6959c91fd168/cushion-covers-for-living-room-7-easy-ways-to-refresh-your-sofa-without-buying-new-furniture-3e1m</guid>
      <description>&lt;p&gt;Have you ever looked at your living room and felt that something was missing, even though your furniture was perfectly fine?&lt;/p&gt;

&lt;p&gt;Maybe your sofa looks a little plain. Perhaps the room needs more colour, or you're simply bored of seeing the same arrangement every day.&lt;/p&gt;

&lt;p&gt;The good news is that you don't need a new sofa or an expensive home makeover to change the way your living room looks.&lt;/p&gt;

&lt;p&gt;Sometimes, switching your cushion covers is enough to make the entire space feel fresh and inviting.&lt;/p&gt;

&lt;p&gt;From colourful prints to elegant embroidery, the right &lt;strong&gt;cushion covers for living room&lt;/strong&gt; styling can add personality, comfort and character to your home.&lt;/p&gt;

&lt;p&gt;Here are seven simple ways to get started.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Start with Your Sofa Colour
&lt;/h2&gt;

&lt;p&gt;Before choosing cushion covers, take a good look at your sofa.&lt;/p&gt;

&lt;p&gt;If you have a beige, cream or grey sofa, you're already working with a versatile base. These neutral colours look beautiful with floral prints, geometric patterns, earthy shades and colourful embroidery.&lt;/p&gt;

&lt;p&gt;For a dark blue or green sofa, try cream, ivory, mustard or soft beige cushion covers to create contrast.&lt;/p&gt;

&lt;p&gt;If your sofa already has a bold colour, consider balancing it with lighter or more subtle patterns.&lt;/p&gt;

&lt;p&gt;You don't need every cushion to match perfectly. A combination of complementary colours often looks more natural and stylish.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Mix Plain and Decorative Cushion Covers
&lt;/h2&gt;

&lt;p&gt;One of the easiest living room styling tricks is to combine simple cushions with statement designs.&lt;/p&gt;

&lt;p&gt;For example, on a three-seater sofa, you can place two plain cushions at the corners and add one or two embroidered or printed cushions in the middle.&lt;/p&gt;

&lt;p&gt;This creates visual balance without making the sofa look overcrowded.&lt;/p&gt;

&lt;p&gt;If you love traditional Indian designs, embroidered floral patterns, Pichwai-inspired artwork or decorative motifs can add a distinctive touch.&lt;/p&gt;

&lt;p&gt;You can explore different &lt;a href="https://www.ramayajewellery.com/collections/cushion-covers" rel="noopener noreferrer"&gt;decorative cushion covers&lt;/a&gt; from Ramaya Home, including colourful, embroidered and contemporary designs that can complement a variety of living room interiors.&lt;/p&gt;

&lt;p&gt;The goal is to create a sofa arrangement that looks thoughtfully styled but still feels comfortable for everyday use.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Experiment with Different Textures
&lt;/h2&gt;

&lt;p&gt;Colour is important, but texture can make your living room feel more interesting.&lt;/p&gt;

&lt;p&gt;Cotton cushion covers create a relaxed and casual appearance, making them suitable for everyday home styling.&lt;/p&gt;

&lt;p&gt;Embroidered cushion covers add depth and detailing, especially when paired with plain sofa upholstery.&lt;/p&gt;

&lt;p&gt;Woven textures can bring warmth to minimalist interiors, while decorative fringes and raised stitching can create a more traditional look.&lt;/p&gt;

&lt;p&gt;Try combining two or three complementary textures rather than using the same fabric for every cushion.&lt;/p&gt;

&lt;p&gt;Even when the colours are similar, different textures can make the arrangement feel layered and inviting.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Choose the Right Cushion Cover Size
&lt;/h2&gt;

&lt;p&gt;A beautiful cushion cover should also fit your cushion insert properly.&lt;/p&gt;

&lt;p&gt;For many Indian homes, 16 × 16 inch cushion covers are a popular choice for sofas, accent chairs and bedroom styling.&lt;/p&gt;

&lt;p&gt;Larger 18 × 18 or 20 × 20 inch cushions can create a fuller appearance on spacious sofas.&lt;/p&gt;

&lt;p&gt;If you have a compact two-seater sofa, smaller cushions may help maintain balance without taking up too much seating space.&lt;/p&gt;

&lt;p&gt;Before purchasing, check the dimensions of your existing cushion inserts.&lt;/p&gt;

&lt;p&gt;A correctly sized cover helps maintain a neat shape and makes your sofa arrangement look more polished.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Give Your Living Room a Festive Makeover
&lt;/h2&gt;

&lt;p&gt;Indian homes often get a fresh look during festivals and family celebrations.&lt;/p&gt;

&lt;p&gt;But festive decorating doesn't always require new curtains, furniture or expensive accessories.&lt;/p&gt;

&lt;p&gt;Changing your cushion covers can be a simple way to introduce festive colours and patterns.&lt;/p&gt;

&lt;p&gt;For Diwali, consider rich shades such as mustard, rust, maroon, teal or gold-inspired accents.&lt;/p&gt;

&lt;p&gt;Traditional embroidery, floral motifs and decorative patterns can complement diyas, flowers and warm lighting.&lt;/p&gt;

&lt;p&gt;For a softer festive look, choose ivory or beige cushion covers with detailed embroidery.&lt;/p&gt;

&lt;p&gt;The best part is that many of these designs can continue to complement your home even after the celebrations are over.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Create a Stylish Sofa Arrangement
&lt;/h2&gt;

&lt;p&gt;You don't need professional interior design experience to arrange cushions beautifully.&lt;/p&gt;

&lt;p&gt;Start with larger cushions at the corners of your sofa.&lt;/p&gt;

&lt;p&gt;Place medium-sized or decorative cushions slightly in front to create layers.&lt;/p&gt;

&lt;p&gt;If you have a three-seater sofa, try using three to five cushions depending on the size of the furniture.&lt;/p&gt;

&lt;p&gt;For a minimalist look, use fewer cushions in coordinating colours.&lt;/p&gt;

&lt;p&gt;For a more colourful and cosy appearance, mix patterns and textures while keeping one or two common shades.&lt;/p&gt;

&lt;p&gt;Avoid filling every inch of the sofa with cushions. Leave enough comfortable seating space for your family and guests.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Check Fabric and Care Instructions Before Buying
&lt;/h2&gt;

&lt;p&gt;When shopping for sofa cushion covers online, don't choose only by appearance.&lt;/p&gt;

&lt;p&gt;Read the product description to understand the fabric, dimensions and design details.&lt;/p&gt;

&lt;p&gt;If you're buying embroidered cushion covers, check the product photographs to see the stitching and decorative elements.&lt;/p&gt;

&lt;p&gt;For printed covers, look at the colour combinations and whether the pattern suits your existing furniture.&lt;/p&gt;

&lt;p&gt;Also, check whether the cover includes a cushion insert or is sold separately.&lt;/p&gt;

&lt;p&gt;Care requirements can vary between cotton, woven and embroidered fabrics, so always follow the washing instructions provided for the specific product.&lt;/p&gt;

&lt;p&gt;Choosing the right fabric and maintaining it properly can help your cushion covers stay attractive for longer.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Refreshing your living room doesn't have to involve expensive furniture or a complete interior makeover.&lt;/p&gt;

&lt;p&gt;Sometimes, small changes create the most noticeable difference.&lt;/p&gt;

&lt;p&gt;Whether you prefer colourful prints, traditional embroidery, neutral textures or modern patterns, the right cushion covers can make your sofa feel more inviting and personal.&lt;/p&gt;

&lt;p&gt;Start with your sofa colour, experiment with complementary designs and choose fabrics that suit your everyday lifestyle.&lt;/p&gt;

&lt;p&gt;After all, a beautiful living room isn't only about how it looks. It's about creating a space where you enjoy spending time with family and friends.&lt;/p&gt;

</description>
      <category>homedecor</category>
    </item>
    <item>
      <title>Building a Dependency-Free Table Size Calculator for a Shopify Collection Page</title>
      <dc:creator>Avni Arora</dc:creator>
      <pubDate>Fri, 09 Oct 2026 07:49:36 +0000</pubDate>
      <link>https://dev.to/avni_arora_7a6959c91fd168/building-a-dependency-free-table-size-calculator-for-a-shopify-collection-page-1dhb</link>
      <guid>https://dev.to/avni_arora_7a6959c91fd168/building-a-dependency-free-table-size-calculator-for-a-shopify-collection-page-1dhb</guid>
      <description>&lt;p&gt;Most product filters answer "what do you sell?" Very few answer "will this fit?"&lt;/p&gt;

&lt;p&gt;I work on the Shopify store for Ramaya, a home decor brand. One of the collections is &lt;a href="https://www.ramayajewellery.com/collections/table-runner-placemat-sets" rel="noopener noreferrer"&gt;table runner and placemat sets&lt;/a&gt;: one runner plus six matching placemats. Customer questions on that page were almost never about colour or fabric. They were about size. "Will a 72 inch runner fit my table?" "Will the runner cover the placemats?"&lt;/p&gt;

&lt;p&gt;So I built a small calculator that sits on the collection page and answers those questions. It has no libraries and no app install. It's one Liquid section and about 40 lines of JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  The rules behind the math
&lt;/h2&gt;

&lt;p&gt;Before writing code, I needed rules a customer would accept. These are the standard table linen conventions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Runner length&lt;/strong&gt; = table length + 12 to 24 inches. That gives 6 to 12 inches of drop at each end.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Runner width&lt;/strong&gt; ≈ one-third of the table width, kept between 12 and 16 inches. Narrower looks lost, wider starts to look like a tablecloth.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Placemats&lt;/strong&gt; are 12 × 18 inches, with the 12-inch side at the table edge.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Each seat&lt;/strong&gt; needs about 24 inches of edge.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The interesting part is the collision check. Two facing placemats take 24 inches of the table's width. Whatever is left is the centre gap. If the runner is wider than that gap, it overlaps the placemats.&lt;/p&gt;

&lt;h2&gt;
  
  
  The core function
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;PLACEMAT_DEPTH&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// inches, the side facing the table edge&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;SEAT_SPACE&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;     &lt;span class="c1"&gt;// inches of edge per diner&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;recommendTableSet&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;lengthIn&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;widthIn&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;runnerMin&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;lengthIn&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;runnerMax&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;lengthIn&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;24&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="c1"&gt;// one-third of the width, clamped to 12–16 inches&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;runnerWidth&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;min&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;max&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;12&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;round&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;widthIn&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)));&lt;/span&gt;

  &lt;span class="c1"&gt;// space left between two facing placemats&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;centreGap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;widthIn&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;PLACEMAT_DEPTH&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;overlapPerSide&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;max&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;runnerWidth&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="nx"&gt;centreGap&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="c1"&gt;// seats along both long sides, plus ends only on wider tables&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;seatsPerSide&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;lengthIn&lt;/span&gt; &lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="nx"&gt;SEAT_SPACE&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;endSeats&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;widthIn&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;=&lt;/span&gt; &lt;span class="mi"&gt;36&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;seats&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;seatsPerSide&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;endSeats&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;runnerMin&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;runnerMax&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;runnerWidth&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;centreGap&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;overlapPerSide&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;seats&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Run it against three common table sizes:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Table (in)&lt;/th&gt;
&lt;th&gt;Runner length&lt;/th&gt;
&lt;th&gt;Runner width&lt;/th&gt;
&lt;th&gt;Centre gap&lt;/th&gt;
&lt;th&gt;Overlap per side&lt;/th&gt;
&lt;th&gt;Seats&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;30 × 48&lt;/td&gt;
&lt;td&gt;60–72&lt;/td&gt;
&lt;td&gt;12&lt;/td&gt;
&lt;td&gt;6&lt;/td&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;36 × 60&lt;/td&gt;
&lt;td&gt;72–84&lt;/td&gt;
&lt;td&gt;12&lt;/td&gt;
&lt;td&gt;12&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;td&gt;6&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;40 × 72&lt;/td&gt;
&lt;td&gt;84–96&lt;/td&gt;
&lt;td&gt;13&lt;/td&gt;
&lt;td&gt;16&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;td&gt;8&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The 30-inch table is the case customers kept asking about. A 12-inch runner overlaps each placemat by 3 inches. That isn't a defect. It's a layered look, but people want to know before they buy.&lt;/p&gt;

&lt;p&gt;The end-seat rule is a heuristic. My first version gave a 30 × 48 table six seats, which is wrong for most 4 seaters. Adding end seats only when the table is at least 36 inches wide fixed it for the sizes our customers actually own.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wiring it to the page
&lt;/h2&gt;

&lt;p&gt;The section markup, saved as &lt;code&gt;sections/table-size-calculator.liquid&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight liquid"&gt;&lt;code&gt;&amp;lt;div class="table-calc"&amp;gt;
  &amp;lt;form id="table-calc-form"&amp;gt;
    &amp;lt;label&amp;gt;Table length (inches)
      &amp;lt;input type="number" name="length" min="24" max="144" required&amp;gt;
    &amp;lt;/label&amp;gt;
    &amp;lt;label&amp;gt;Table width (inches)
      &amp;lt;input type="number" name="width" min="20" max="60" required&amp;gt;
    &amp;lt;/label&amp;gt;
    &amp;lt;button type="submit"&amp;gt;Check fit&amp;lt;/button&amp;gt;
  &amp;lt;/form&amp;gt;
  &amp;lt;p id="table-calc-result" aria-live="polite"&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;

&amp;lt;script src="&lt;span class="cp"&gt;{{&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s1"&gt;'table-calc.js'&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;|&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nf"&gt;asset_url&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="cp"&gt;}}&lt;/span&gt;" defer&amp;gt;&amp;lt;/script&amp;gt;

&lt;span class="cp"&gt;{%&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;schema&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="cp"&gt;%}&lt;/span&gt;
{
  "name": "Table size calculator",
  "presets": [{ "name": "Table size calculator" }]
}
&lt;span class="cp"&gt;{%&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;endschema&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="cp"&gt;%}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;presets&lt;/code&gt; block lets the merchant add the section to the collection template from the theme editor. No code change is needed per page.&lt;/p&gt;

&lt;p&gt;Then the handler in &lt;code&gt;assets/table-calc.js&lt;/code&gt;, below the function above:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;table-calc-form&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;submit&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;preventDefault&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;FormData&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;r&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;recommendTableSet&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
    &lt;span class="na"&gt;lengthIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;length&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)),&lt;/span&gt;
    &lt;span class="na"&gt;widthIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nc"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;width&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)),&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;overlap&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;r&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;overlapPerSide&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
    &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="s2"&gt;`The runner will overlap each placemat by about &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;r&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;overlapPerSide&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;".`&lt;/span&gt;
    &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;The runner and placemats will sit flat with no overlap.&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;table-calc-result&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt;
    &lt;span class="s2"&gt;`Runner: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;r&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;runnerMin&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;–&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;r&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;runnerMax&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;" long, about &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;r&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;runnerWidth&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;" wide. `&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt;
    &lt;span class="s2"&gt;`Seats: &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;r&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;seats&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;. &lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;overlap&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Two choices worth pointing out:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;textContent&lt;/code&gt;, not &lt;code&gt;innerHTML&lt;/code&gt;.&lt;/strong&gt; The output is built from user input. Even though it's numeric, there's no reason to open an injection path.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;&lt;code&gt;aria-live="polite"&lt;/code&gt;&lt;/strong&gt; on the result. Screen reader users hear the answer without the focus jumping.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What I left out, on purpose
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Round tables.&lt;/strong&gt; A runner on a round table follows completely different rules (usually the diameter plus drop, or two crossed runners). Mixing that into one form made it confusing, so round tables get their own calculator.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Centimetres.&lt;/strong&gt; Many international customers measure in cm. The next version adds a unit toggle and divides by 2.54 before calling the same function, so the core logic doesn't change.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Product matching.&lt;/strong&gt; It's tempting to filter the product grid by the result. But most sets ship with six placemats regardless of runner length, so filtering would hide valid products. The calculator informs. It doesn't filter.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Takeaways
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Before building any filter, read the customer questions. Ours were all "will it fit?", and none of our existing filters answered that.&lt;/li&gt;
&lt;li&gt;Find the non-obvious rule. Runner length is easy. The runner-to-placemat overlap is what customers couldn't work out on their own.&lt;/li&gt;
&lt;li&gt;Keep it out of the app ecosystem when you can. A section plus a small script loads instantly, and the merchant controls where it appears.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;If you've built fit calculators for furniture, rugs or curtains, I'd like to know how you handled the edge cases, especially unit conversion and non-rectangular shapes.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>shopify</category>
      <category>webdev</category>
      <category>ecommerce</category>
    </item>
  </channel>
</rss>
