Show Collections as buttons in Collections Section - Refresh Theme

PBarnard
Visitor
2 0 0

Hi,

 

Kindly assist. My site is at afrinames .co .za

 

I would like to display my collections (which act as categories) like buttons in the below example:

 

categories.png

Please let me know if this is possible and how I can achieve it?

 

I am using Refresh theme.

 

Thank you.

Replies 3 (3)

BSS-Commerce
Shopify Expert
3401 450 503

Hello, if you want to do that, please follow these instructions:
1. Go to your Shopify admin page and select Sale channels, then select Online Store

2. Here you select Themes and find the theme you are using, select Edit code

view - 2024-01-30T183612.788.png

3. In the code folder, find the base.css file

view - 2024-01-30T183640.918.png

4. Paste the following code at the end of the file and Save

ul.list-menu.list-menu--inline li{
    margin-right: 10px;
    background-color: #2f2a6e;
    border-radius: 25px;
}

ul.list-menu.list-menu--inline li:hover {
    opacity: 0.6;
}

Result:

view - 2024-01-30T183936.718.png 

Hope it helps @PBarnard 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

PBarnard
Visitor
2 0 0

Thanks, but I dont want the Menu links turned to buttons, I want the "Collections" turned to buttons.

BSS-Commerce
Shopify Expert
3401 450 503

Hi,

You can add the following CSS to the global CSS file in Edit code:

#menu-drawer .list-social form.shopify-currency-form {
    position: absolute;
}
#menu-drawer .list-social form.shopify-currency-form select {
    color: #9D9898;
}

I tried them and they are exactly what you want.

view - 2024-01-30T184110.193.png 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development