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 ...