How can I improve the visual appeal of my product page menu?

Solved

How can I improve the visual appeal of my product page menu?

CamiC
Excursionist
34 0 13

Hi, is there any chance someone can help me with this menu?

On my product page (warehouse) I´ve add some options for more information on the product in this way

Screenshot 2021-10-22 at 08.03.15.png

I would like that this menu is visually nicer, maybe as the menu I have on my foot page: each option of the menu closer.

Thanks!

Screenshot 2021-10-22 at 08.03.59.png

 

The URL of my web apge is https://coyoterosa.cl/?_ab=0&_fd=0&_sc=1&key=63d5a315327495a4f38ec6c1c839107415a1e14ddfa3d427d97cca4... 

Accepted Solutions (2)
marcoswata
Shopify Partner
123 10 37

This is an accepted solution.

I don't see the code in place.

But if you want them to be even closer to each other, add this code to the bottom of the theme.css file:

.product-block-list__item .card .card__collapsible-button {
  padding:0 20px;
}
@media screen and (min-width: 641px) {
  .product-block-list__item .card .card__collapsible-button {
     padding:0 30px;
  }
}

 PS: add the previous code too.

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!

View solution in original post

KetanKumar
Shopify Partner
36932 3642 11997

This is an accepted solution.

@CamiC 

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

.card__collapsible-button {padding: 0px 20px !important}

After Code add view

KetanKumar_0-1634945030313.png

 

 

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

View solution in original post

Replies 11 (11)

KetanKumar
Shopify Partner
36932 3642 11997

@CamiC 

yes your have easy to manage this read this article 

https://support.maestrooo.com/article/83-product-adding-different-tabs-per-product#:~:text=To%20do%2....

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
CamiC
Excursionist
34 0 13

Thanks, but I don´t think you understood me. I want to make the space between each of the options (Descripción, qué talla soy, envíos, cambios...) smaller, so they look as one menu instead of things separated.

marcoswata
Shopify Partner
123 10 37

Try this below.

In assets/theme.css, add to the bottom:

.product-block-list__item .card {
  margin-bottom:0;
}
@media screen and (min-width: 641px){
  .product-block-list__item .card {
    margin-bottom:0;
  }
}


I made the selector more specific, since .card is very generic and could affect other parts of your store.

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
CamiC
Excursionist
34 0 13

Thanks, it didn´t work thou...

It´s still as the first picture, I want something more as the second one (not about the color, but how they are closer to each other)

Screenshot 2021-10-22 at 18.53.07.pngScreenshot 2021-10-22 at 18.53.17.png

marcoswata
Shopify Partner
123 10 37

This is an accepted solution.

I don't see the code in place.

But if you want them to be even closer to each other, add this code to the bottom of the theme.css file:

.product-block-list__item .card .card__collapsible-button {
  padding:0 20px;
}
@media screen and (min-width: 641px) {
  .product-block-list__item .card .card__collapsible-button {
     padding:0 30px;
  }
}

 PS: add the previous code too.

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
CamiC
Excursionist
34 0 13

it didn´t work on the phone thou 😞

KetanKumar
Shopify Partner
36932 3642 11997

@CamiC 

which device for that issue 

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
marcoswata
Shopify Partner
123 10 37

I'm having a hard time trying to find why the browser is not picking up that change. Try this please (replace the previous codes with this one):

 

.product-block-list__item .card {
  margin-bottom:0;
}
.product-block-list__item .card .card__collapsible-button {
  padding:0 20px;
}
@media screen and (max-width: 640px){
  .product-block-list__item .card {
    margin-bottom:0;
  }
  .product-block-list__item .card .card__collapsible-button {
    padding:0 20px;
  }
}
@media screen and (min-width: 641px) {
  .product-block-list__item .card {
    margin-bottom:0;
  }
  .product-block-list__item .card .card__collapsible-button {
     padding:0 30px;
  }
}

 

Redundant but might solve it, since I can't spot the causes of the issue on mobile

 

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!
CamiC
Excursionist
34 0 13

Screenshot_20211022_202625_com.android.chrome.jpg

 not yet

KetanKumar
Shopify Partner
36932 3642 11997

This is an accepted solution.

@CamiC 

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

.card__collapsible-button {padding: 0px 20px !important}

After Code add view

KetanKumar_0-1634945030313.png

 

 

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
CamiC
Excursionist
34 0 13

Took the other code and add only this one and it worked! Thank you so much!!