How to change the layout of product variants on mobile

How to change the layout of product variants on mobile

1 variant per row by default (1 column)


By default, variants/options are displayed one per row. But you can also display them 2 per row. This setting is located in Customize Theme > General Settings > Mobile Tweaks.



2 variants per row (2 columns)

You can see some examples below.

0 variant (only the quantity picker)



1 variant



2 variants



3 variants




You can also hide the variant labels (eg. Sizes, Colors...)



Variant Swatches (instead of dropdowns)

You can also use Swatches (see Add Variant Swatches) instead of Dropdown. In this case, the 2-column layout will be disabled, and the variant(s) will be displayed 1 per row.

    • Related Articles

    • How to add custom colors into the color swatches for variants/options on the product page

      When I add a single color name like red, green it works fine but when the color name is like dark grey, indigo blue it's not showing up any color? You need to create custom colors from theme settings. If you want to define the Dark grey color, please ...

    • Hide variant dropdown on the product page when there is only 1 option (1 variant)

      You can hide variant dropdown on the product page when there is only 1 option (1 variant) in the Konversion theme. Go to Customize Theme > Product Pages (section) > Scroll to Hide variants with only one option

    • Latest releases of the Konversion theme

      Versioning logic - Version X.Y.Z X means a major change in theme due to a change in Shopify's core Y means a big enough change that involves new key features and/or big change/fix X means small bug fixes and small features release. Make sure you have ...

    • Display Trust Badges in your Product Pages of your Shopify Store

      With the Konversion theme, you can upload your own trust icons, and now you can also upload your own image for trust/security/conversion badge.  By default, we provide the trust badge image below for free. But you can change the trust badge image and ...

    • Product Page Upsell

      1) HOW DOES IT WORKS? Create a navigation menu called Product upsell. The handle needs to be: product-upsell 2) WHERE IS IT DISPLAYED? In a specific product page: Add a menu item and name it following this structure: products/product-handle And/Or In ...