Shopify themes, liquid, logos, and UX
Hello,
Link: shifabynajla.myshopify.com
Password: shifabynajla
The theme is stiletto.
I want the divider under the main menu to be in a different color #B1987C. Please find attached.
Also, the sub menu of collection should be full width. How can I do it?
Also, how can I make the layout of the product page similar to the one below. Currently, in the product page, there are spaces between the product image and the image next to NOTES, I want to make the edges of both images together as in the attached.
Kindly note that these changes require coding, I tried in the customization theme but it didn't work.
Thank you.
Solved! Go to the solution
This is an accepted solution.
Hi @joysa,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
.header__inner {
box-shadow: 0 calc(var(--divider-width)* -1) 0 #B1987C inset;
}
This is an accepted solution.
Hi @joysa,
Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:
.header__inner {
box-shadow: 0 calc(var(--divider-width)* -1) 0 #B1987C inset;
}
Thank you so much, it worked!
Hi @joysa,
If you have any questions, you can contact me directly.
Nice to meet you 😊
Step 1: Go to Admin -> Online store -> Theme > Edit code
Step 2: Search for the file theme.liquid
Step 3: Add this code before </body> tag
<style>
.navigation__submenu {
left: 19px!important;
width: 100vw!important;
max-width: 100vw!important;
}
.navigation__submenu-list {
width: 100vw!important;
border: 1px solid #B1987C;
}
</style>
Result:
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Thank you, it worked but with a little twist, I need the submenu to appear under the main menu title instead of on the top left.
@joysa, I think you should use a mega menu. The reference site is also using a mega menu. This is the tutorial for you: https://www.youtube.com/watch?v=458fPX8buBo
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
It didn't work unfortunately. I tried the customization already but no results
@joysa, did you try using mega menu? I mean using mega menu first and i will help you with center them.
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Now I am using mega menu plus added your code in theme.liquid. This is what I got.
when I added the code in theme.css instead of theme.liquid, and didn't enable the mega menu yet. It was better.
what is the next step?
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024