SScale Themedocs

Everything you need to know about the Scale Theme product page: flexible layout, configurable columns, 30+ blocks, and sticky ATC bar.

Product Page

The Scale Theme product page is designed to maximize conversion. Its flexible layout, 30+ blocks, and sticky ATC bar make it one of the most complete and customizable product pages on the market.

Flexible layout

The product page features a fully configurable column system that adapts to all product types.

2 or 3 columns

LayoutDescriptionBest for
2 columnsMedia on the left, information on the rightClassic products, fashion, beauty
3 columnsMedia + info + additional sidebarTechnical products with many options

and the 3-column layout (40/35/25) on the same product page)

Column widths

Each column has a configurable width as a percentage. You can adjust the distribution to suit your needs:

PresetColumn 1 (Media)Column 2 (Info)Column 3 (Extra)
Balanced50%50%-
Wide media60%40%-
3 columns40%35%25%
CustomFreeFreeFree
💡For fashion or beauty products where visuals are essential, go with a 60/40 ratio with a wider media column. For technical products with many options, a 50/50 split or 3-column layout will work better.

Sticky column

The right column (product information) is sticky by default: it stays visible as the user scrolls through the image gallery.

SettingDescription
Enable stickyEnable/disable the sticky behavior of the right column
OffsetTop margin when the column is sticky (to prevent it from touching the header)
ℹ️The sticky behavior is automatically disabled on mobile where columns stack vertically. The gallery appears first, followed by the product information.

30+ available blocks

The product page has over 30 blocks that you can add, reorder, and configure freely. They are organized by category:

CategoryBlocksPurpose
EssentialsTitle, Price, Description, Variant Option, Quantity Selector, Buy ButtonsThe core of the product listing
ConversionTimer, Stock, Delivery Estimation, Trust Badges, Social Proof Avatars, CouponSpeed up the purchase decision
BundlesQuantity, Variant, BOGO, Pack, Mix & MatchIncrease average order value
ReviewsStars, Reviews CarouselSocial proof
InformationCollapsible Row, Product Tabs, Shipping Info, Size Chart, Info BannerAnswer customer questions
MediaMedia, Video Carousel, DividerEnrich the visual experience
AddonsProduct Addon, Free ProductAdditional products
OtherText, Share, Icon List, Pickup Availability, Custom Liquid, AppAdvanced customization

For a detailed guide on each block, see the Product Blocks page.

Sticky ATC bar

An add-to-cart bar automatically appears when the user scrolls past the main ATC button. It stays fixed at the top or bottom of the screen so the customer can buy at any time.

SettingOptions
PositionTop / Bottom of the screen
StyleCompact / Full
ContentProduct image, title, price, variant selector, ATC button
💡The sticky bar automatically syncs the variant and quantity selected in the main form. If the customer changes the size in the form, the sticky bar reflects that choice.

For full documentation, see the Sticky Add to Cart page.

Color palette

Like all theme sections, the product page supports color palettes (color schemes). You can apply a different palette to the product section to set it apart from the rest of the page.

SettingDescription
Color paletteSelect from the palettes defined in your theme settings
Background paletteApplies to the entire section
ℹ️Color palettes are defined in Theme settings > Colors. You can create as many palettes as you need and apply them section by section.

Main settings

Layout and display

SettingDescriptionOptions
Number of columnsPage layout2 or 3 columns
Column 1 widthFirst column percentage30% to 70%
Column 2 widthSecond column percentage30% to 70%
Column 3 widthPercentage if 3 columns20% to 40%
Sticky columnFix the right columnYes / No
Content widthSection containerNormal / Wide / Full screen
SettingDescriptionOptions
Media positionGallery sideLeft / Right
Gallery styleImage presentationGrid / Slider / Stacked / Thumbnails
Image ratioImage proportionsAdapt / Square / Portrait / Landscape
ZoomEnable zoom on click/hoverYes / No
LightboxOpen in fullscreenYes / No

Use cases

Fashion product (clothing)

  • 2-column layout (60/40)
  • Thumbnails gallery to navigate between visuals
  • Blocks: Title, Price, Variant Option (color swatches + size buttons), Size Chart, Buy Buttons, Trust Badges, Reviews Carousel

Technical product (electronics)

  • 3-column layout (40/35/25)
  • Grid gallery to see all angles
  • Blocks: Title, Price, Description, Variant Option, Product Tabs (technical specs), Buy Buttons, Shipping Info, Trust Badges

Product with bundles

  • 2-column layout (50/50)
  • Blocks: Title, Price, Bundle Quantity or Mix & Match, Buy Buttons, Timer, Stock, Trust Badges
⚠️Don't overload the product page with too many blocks. Prioritize the essential conversion elements and use tabs (Product Tabs) or collapsible rows (Collapsible Row) to organize secondary information.