Button Background Custom Section Script | Envy Theme

Store Design
1

Hi,

I prepared a first custom script that show and image and a video next to each-other. Everything works fine now but I just cannot seem to get the theme’s buttons right. It does show the button text but not the button background.

So frustrating since I cannot find out why this is or what to do about it.

Can anybody help me with this? Very much appreciated!

I included a print screen as seen below and included the original code in a separate file for your reference.

store url: https://mood-street-petit.myshopify.com/

button background.jpg
button background.jpg1920×1080 168 KB

2

Hello,

One way to achieve this, assuming that the variable is read, is by modifying the first CSS lines.

From:

To:

Alternatively, if you want the button to take the same styles as your other buttons, consider adding 'btn’ class to your button/anchor.

{{ block.settings.button_text }}

Would become:

{{ block.settings.button_text }}

GabrielS_0-1666309684747.png
GabrielS_0-1666309684747.png2014×1018 297 KB

Let me know if this was relevant to your case or if you require further assistance.

Cheers!

Gabriel

3

Hi @Teddy9

Please follow the instructions below to duplicate the style you have

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the style.css
  3. Paste the code below at the very bottom of the file.
a.Button.MosaicButton {
    border: 0 none;
    padding: 12px 30px;
    border-radius: 0;
    background: var(--button-background-color);
    color: var(--button-text-color);
    text-transform: var(--buttons-transform);
    letter-spacing: var(--buttons-letter-spacing);
}

a.Button.MosaicButton:hover {
    background: var(--button-background-hover-color);
    color: var(--button-text-color);
}
4

Hi @Teddy9 Also see the dawn themes collage for use or as reference

https://github.com/Shopify/dawn/blob/main/sections/collage.liquid

An inspection of the live storefront shows the following CSS rule that is defining CSS variables with names indicating use with the background-color property but are then never used.

#section-template--15621069734041__d3265110-caa7-4de4-a280-502c81cca2ee {
    --button-text-color: #ffffff;
    --button-background-color: #c5a253;
}

Which would then be used like this

.MosaicList .MosaicButton {
    background-color: var(--button-background-color);
}

There is also what seems like a dead CSS rule:

.MosaicButton:before {
    background-color: #fff;
    background-color: var(--button-background-color, #fff)
}

If you intend to use a pseudo element for a background/underlay that would be a lot more work and often needs to be on either a child or wrapper parent for any text to even show due to browser compositing/stacking-order of elements/text/pseudo.

https://stackoverflow.com/questions/3032856/is-it-possible-to-set-the-stacking-order-of-pseudo-elements-below-their-parent-e

General approaches below if those aren’t the issue.

Goodluck.

Troubleshooting 102: weird theme color behaviors

For button styles in some themes there can also be other “button”/color related settings either global or for the template used for things such as making background-colors transparent.

Be aware some themes/front-end-systems have “smart” color behaviors that change the end results based on things like calculated contrast values that would cause accessibility issues if allowed; because merchants love putting white on light pink etc. These calcs may be in the css files themselves for client-side output, or in a snippet like colors.liquid or css-variable.liquid , or in theme.liquids area. It’s rare for javascript to be use for this but is indicated if style attributes on the element are what’s messing with colors.

If that doesn’t dial it in , then troubleshooting 101:

If this issue isn’t actually live make an actually inspectable theme and possibly provide reproduction steps to find the related code in dev tools. Or a reduced use case page with ONLY that section.

To increase a problems chances for a solution:

  • Always consider the size of possible audience not everyone has a specific theme, try to replicate the issue in a free theme then attack it as a post based on a free theme.
  • Always consider the number of steps a possible contributor would have to go through: Simply providing a txt/zip/image file that has to be downloaded,scaned then opened isn’t that useful especially in the context of a very specific theme behaving oddly vs an inspectable link to the theme problem. Because #1 not everyone has that theme, #2 the codes behavior is impacted by surrounding code which contributors can’t/wont replicate due to either #1 , or not wanting to do all the extra steps to setup a theme with a custom section.
5

Thanks that worked great!

6

Thanks for the extensive feedback. Fantastic! Thanks again!

7

Wow, thanks for the great exploitation and steps to take. This works as well! Very much appreciated!