Product menu

Solved
CamiC
Excursionist
32 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)

Accepted Solutions
marcoswatanabe
Shopify Partner
37 4 9

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, talk to one of our experts at https://whymatters.co.uk/

View solution in original post

KetanKumar
Shopify Partner
24919 2496 9029

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
24919 2496 9029

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

marcoswatanabe
Shopify Partner
37 4 9

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, talk to one of our experts at https://whymatters.co.uk/
CamiC
Excursionist
32 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

marcoswatanabe
Shopify Partner
37 4 9

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, talk to one of our experts at https://whymatters.co.uk/

View solution in original post

CamiC
Excursionist
32 0 13

it didn´t work on the phone thou

KetanKumar
Shopify Partner
24919 2496 9029

@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
marcoswatanabe
Shopify Partner
37 4 9

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, talk to one of our experts at https://whymatters.co.uk/
CamiC
Excursionist
32 0 13

Screenshot_20211022_202625_com.android.chrome.jpg

 not yet