Solved

Round corners for product variant options Wookie Theme

Dialluredazzle
Visitor
2 0 3

I would like to round the corners of the product variant boxes . We are using Wookie Theme and the page that displays the boxes is as follows:

https://diallure.myshopify.com/products/link-ring-optimize-work 

Thanks in advanc
Screenshot 2022-12-13 231324.jpg

Accepted Solution (1)

GemPages
Shopify Partner
5589 1261 1218

This is an accepted solution.

Hello @Dialluredazzle  

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1671153322543.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1671153351376.png

<style>
ul.tt-options-swatch li a {
    border-radius: 6px !important;
}
</style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5589 1261 1218

This is an accepted solution.

Hello @Dialluredazzle  

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1671153322543.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1671153351376.png

<style>
ul.tt-options-swatch li a {
    border-radius: 6px !important;
}
</style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
Dialluredazzle
Visitor
2 0 3

Thank you a lot! 

Now its okay 🙂 I tried it before with codes but didnt work apparently. 

KetanKumar
Shopify Partner
36855 3637 11980

@Dialluredazzle 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.tt-options-swatch.options-large li a {border-radius: 10px;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

ZestardTech
Shopify Expert
5474 984 1309

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.tt-options-swatch.options-large li a {
border-radius: 5px;
}

ZestardTech_0-1671172911029.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

BrianCoff
Shopify Partner
9 1 3

Hi Dialluredazzle, 

 

There is actually a new theme available called Creative that allows you to make variants and other buttons on the site rounded, in fact, it allows you to choose just how rounded you would like them!

 

Here's an example from the theme demo:

 

BrianCoff_0-1671187570051.png

 

Definitely worth checking out, sounds like it might be the perfect theme for you.

 

I'll link it below : 

 

Shopify theme - Creative 

 

All the best, 

 

Brian

EasifyApps-Zoe
Shopify Partner
582 14 44

Hi @Dialluredazzle,

 

I see that you have already received a suggestion to round the corners of the product variant boxes. However, I would like to propose an alternative solution that is simpler and doesn't require any coding. This solution can be beneficial not only for you but also for other members who may encounter similar issues in the future 🤗.

 

To implement this solution, you can utilize the free Easify Product Options app to create your custom options and choose the shape of the variant boxes.

 

Here's a quick demonstration of how you can use the app for your setup:

 

border.jpg

 

The Easify Product Options app offers more than just the ability to change the variant box shape. It is designed to help you effectively create and manage unlimited custom product options ✌️. I encourage you to explore its other features as well.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support