Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi, so I have a product and it has a color ("finish" in my case) associated to it. When my color name goes past 15 characters, the selections turn into a dropdown. I would like for this not to happen. Is there a way to remove this or to increase the character limit on the option names?
I like the chips, so people can see all of the options instead of scrolling through a dropdown. I've tested it, and the only limitations that create the dropdown is the amount of characters in a name.
I'm using Pipeline Theme Version 7.2.2
Hello @MichaelAtKitch ,
If there is a character limitation definitely it can be changed.
Can you please share a piece of the code where you find the limitation ?
btw just want to let you know, you are using a premium theme and we don't have access to it.
Thanks
I thought that it might be in the product.json file. Below is the code from one of the products pages using the product.json template. I looked at it and thought maybe '"option_space": 30,' was the character limit, but I changed it and nothing happened when I did.
--- Code ---
{
"sections": {
"main": {
"type": "product",
"blocks": {
"title": {
"type": "title",
"settings": {
"text_size": 9,
"product_show_cutline": true,
"show_rating": true,
"show_rating_count": false,
"padding_bottom": 20
}
},
"variants": {
"type": "variant-selectors",
"settings": {
"option_size_swatch": 34,
"option_size_radio": 50,
"option_space": 30,
"padding_bottom": 30
}
},
"subscriptions": {
"type": "subscription",
"settings": {
"subscriptions_enable_selectors": true,
"padding_bottom": 20
}
},
"quantity": {
"type": "quantity",
"settings": {
"show_quantity": true,
"padding_bottom": 20
}
},
"sizes-remaining": {
"type": "size-remaining",
"settings": {
"info_page": "",
"title": "",
"show_remaining": true,
"show_remaining_style": "low",
"countdown": 10,
"padding_bottom": 0
}
},
"buttons": {
"type": "add-buttons",
"settings": {
"enable_payment_button": true,
"enable_gift_card_recipient": true,
"padding_bottom": 20
}
},
"description": {
"type": "description",
"settings": {
"style": "accordions",
"enable_description": true,
"read_more": true,
"icon_description": "",
"description_expanded": true,
"title_1": "Product Specs",
"icon_name_1": "",
"raw_content_1": "<p>{{ product.metafields.my_fields.product_specs | metafield_tag }}<\/p>",
"title_2": "Good to Know",
"icon_name_2": "",
"raw_content_2": "<p>{{ product.metafields.my_fields.good_to_know | metafield_tag }}<\/p>",
"title_3": "",
"icon_name_3": "",
"raw_content_3": "",
"title_4": "",
"icon_name_4": "",
"raw_content_4": "",
"title_5": "",
"icon_name_5": "",
"raw_content_5": "",
"padding_bottom": 20
}
}
},
"block_order": [
"title",
"variants",
"subscriptions",
"quantity",
"sizes-remaining",
"buttons",
"description"
],
"custom_css": [
".btn--primary.btn--outline {--btn-text: var(--COLOR-TEXT);}"
],
"settings": {
"layout": "thumbnails-below@slides",
"image_width": "wide",
"image_spacing": 10,
"align": "left",
"bg": "palette--light bg--neutral",
"mobile_layout": "carousel",
"enable_video_looping": true,
"zoom_enable": true,
"alt_text_enable": true,
"alt_text_icon": "icon-ruler",
"product_breadcrumbs_enable": false,
"product_breadcrumbs_list": [
],
"width": "wrapper",
"padding_top": 24,
"padding_bottom": 36
}
},
"reviews": {
"type": "reviews",
"disabled": true,
"settings": {
"product_reviews_enable": false,
"bg": "palette--light bg--accent",
"width": "wrapper",
"padding_top": 36,
"padding_bottom": 36
}
},
"related": {
"type": "related",
"disabled": true,
"settings": {
"heading": "You might also like",
"bg": "palette--light bg--neutral",
"grid_large": 4,
"grid_medium": 3,
"grid_small": 1.2,
"related_products_enable": true,
"limit": 6,
"product_recommendations_heading": "Related products",
"show_recently_viewed": true,
"product_recently_limit": 6,
"product_recently_minimum": 4,
"product_recently_heading": "Recently viewed",
"width": "wrapper",
"padding_top": 36,
"padding_bottom": 36
}
},
"6adc5c69-0494-45db-8b03-869dcbef9123": {
"type": "section-columns",
"blocks": {
"template--16715822760167__6adc5c69-0494-45db-8b03-869dcbef9123-1678142456203b7987-0": {
"type": "text_block",
"settings": {
"enable_image": true,
"image": "shopify:\/\/shop_images\/gruv-kitchen.png",
"shape_class": "",
"title": "Deco",
"text": "",
"button_label": "",
"button_link": "shopify:\/\/products\/sample-deco",
"button_color": "btn--neutral",
"button_style": "btn--soft uppercase",
"enable_video": false,
"video_link": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc",
"video_button_color": "text--white"
}
},
"template--16715822760167__6adc5c69-0494-45db-8b03-869dcbef9123-1678142456203b7987-1": {
"type": "text_block",
"settings": {
"enable_image": true,
"image": "shopify:\/\/shop_images\/slab-kitchen.png",
"shape_class": "",
"title": "Slab",
"text": "",
"button_label": "",
"button_link": "shopify:\/\/products\/sample-slab",
"button_color": "btn--neutral",
"button_style": "btn--soft uppercase",
"enable_video": false,
"video_link": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc",
"video_button_color": "text--white"
}
},
"template--16715822760167__6adc5c69-0494-45db-8b03-869dcbef9123-1678142456203b7987-2": {
"type": "text_block",
"settings": {
"enable_image": true,
"image": "shopify:\/\/shop_images\/shaker-bevel-kitchen.png",
"shape_class": "",
"title": "Shaker Bevel",
"text": "",
"button_label": "",
"button_link": "shopify:\/\/products\/sample-shaker-bevel",
"button_color": "btn--neutral",
"button_style": "btn--soft uppercase",
"enable_video": false,
"video_link": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc",
"video_button_color": "text--white"
}
},
"05f7d52b-d735-4a21-b9eb-faef7dcef369": {
"type": "text_block",
"settings": {
"enable_image": true,
"image": "shopify:\/\/shop_images\/shaker-slim_0b7e9eaf-e49a-42fb-983d-9529619b5be2.png",
"shape_class": "",
"title": "Shaker Slim",
"text": "",
"button_label": "",
"button_link": "shopify:\/\/products\/sample-shaker-slim",
"button_color": "btn--neutral",
"button_style": "btn--soft uppercase",
"enable_video": false,
"video_link": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc",
"video_button_color": "text--white"
}
}
},
"block_order": [
"template--16715822760167__6adc5c69-0494-45db-8b03-869dcbef9123-1678142456203b7987-0",
"template--16715822760167__6adc5c69-0494-45db-8b03-869dcbef9123-1678142456203b7987-1",
"template--16715822760167__6adc5c69-0494-45db-8b03-869dcbef9123-1678142456203b7987-2",
"05f7d52b-d735-4a21-b9eb-faef7dcef369"
],
"settings": {
"title": "Try a different style",
"bg": "palette--light bg--neutral",
"align_text": "text-center",
"scale_image": true,
"wh_ratio": 1,
"grid_large": 4,
"grid_medium": 4,
"grid_mobile": 1.5,
"progress_bar_mobile": false,
"width": "wrapper",
"padding_top": 36,
"padding_bottom": 36
}
},
"eedb69ff-e158-4d07-9d26-f26e0ae007ec": {
"type": "section-faq",
"blocks": {
"template--16715822760167__eedb69ff-e158-4d07-9d26-f26e0ae007ec-1678142030bc9c3070-0": {
"type": "text",
"settings": {
"title": "What is the lead time on my order?",
"content": "<p>Kitch orders are ready to ship in 6-8 weeks.<\/p>"
}
},
"template--16715822760167__eedb69ff-e158-4d07-9d26-f26e0ae007ec-1678142030bc9c3070-1": {
"type": "text",
"settings": {
"title": "What cabinet systems do you make doors for?",
"content": "<p>We make doors that fit the SEKTION® kitchen systems. We also offer our own modular cabinet collection, <a href=\"https:\/\/mykitch.ca\/pages\/kitch-pro\" target=\"_blank\" title=\"Kitch Pro\">KitchBOX<\/a>!<\/p>"
}
},
"template--16715822760167__eedb69ff-e158-4d07-9d26-f26e0ae007ec-1678142030bc9c3070-2": {
"type": "text",
"settings": {
"title": "What is your return policy?",
"content": "<p>Because Kitch doors are made-to-order — nothing is made until your order is processed. Therefore, we can't offer returns. However, we will fix any manufacturer-related imperfections if a claim is made within 15 days of arrival.<\/p>"
}
}
},
"block_order": [
"template--16715822760167__eedb69ff-e158-4d07-9d26-f26e0ae007ec-1678142030bc9c3070-0",
"template--16715822760167__eedb69ff-e158-4d07-9d26-f26e0ae007ec-1678142030bc9c3070-1",
"template--16715822760167__eedb69ff-e158-4d07-9d26-f26e0ae007ec-1678142030bc9c3070-2"
],
"settings": {
"title": "",
"title_align": "text-left",
"title_size": 4,
"heading_size": 6,
"text_size": 5,
"text_color": "text--neutral",
"bg": "palette--light bg--neutral",
"width": "wrapper--narrow",
"padding_top": 36,
"padding_bottom": 36
}
}
},
"order": [
"main",
"reviews",
"related",
"6adc5c69-0494-45db-8b03-869dcbef9123",
"eedb69ff-e158-4d07-9d26-f26e0ae007ec"
]
}
Try to change all with 50 excluding padding bottom
"variants": {
"type": "variant-selectors",
"settings": {
"option_size_swatch": 34,
"option_size_radio": 50,
"option_space": 30,
"padding_bottom": 30
}
}
and make to sure to take backup before making any change.
And if still doesn't work try to share the liquid code.