How can I add fractions to product dimensions in Boost theme?

Store Design

Topic summary

A merchant wants to display product dimensions as fractions (instead of decimals) in the Boost theme and asks where to insert a provided styling snippet.

Key details:

  • They share a CSS/SCSS-style snippet for a .fraction class that uses pseudo-elements (:before/:after) and attr(top)/attr(bottom) to render numerator and denominator with a horizontal line.
  • Styling includes inline-block layout, centered text, and a border-bottom to form the fraction bar.

Clarifications:

  • The approach relies on HTML attributes (top and bottom) to supply fraction values via CSS content.
  • The snippet appears central to implementing the feature, but the exact file or location within Boost to add it is unknown to the poster.

Status:

  • No guidance yet on where in the theme to place the code or how to wire it to product details.
  • Discussion is open with unanswered questions about implementation steps in Boost.
Summarized with AI on February 24. AI used: gpt-5.
1

Hi,

I am adding dimensions to a few small products details and need fractions. I would prefer not to use decimals.

I found some code that I think might work but do not know where to insert it my theme code. Theme is Boost.

.fraction {
display: inline-block;
font-size: 0.7em;
padding: 0 0.1em;
text-align: center;
vertical-align: middle;

&:before {
border-bottom: 1px solid #000;
content: attr(top);
display: block;
line-height: 1em;
padding: 0 0.1em;
}
&:after {
content: attr(bottom);
display: block;
line-height: 1em;
padding: 0 0.1em;
}
}