In shopify Debut Theme, I am trying to change the location of the button tag “shop now” on an image with text overlay at the bottom of my site home page.
I think I have found the code to do this but I cannot find the shop section ID by using the inspect function. I may need help with the code as well.
Which theme are you using?
A lot of themes will have built-in settings for the block, within the ‘customize theme’ section of the admin, for changing the positioning of the buttons.
If not, you’d want to add some custom CSS to the block via the ‘customize theme’ page (rather than directly to the theme’s coding – as that’ll change the button location for all of that kind of block, rather than just the 1 specific block you’re wanting to edit).
If you let us know which theme you’re using, you’ll be more likely to get a complete answer from me (or someone else) on the forums here.
Hi,
It is the Debut theme. So I would be looking at add code to the custom CSS box in ‘edit theme’.
Hi @Viejita
This is Richard from PageFly - Shopify Page Builder App
If you are looking for this button selector ID, here you go, you can use this to apply custom css code
#shopify-section-hero-2 a.btn.hero__btn
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Thanks! I’m not sure if I have the correct code. I have:
#shopify-section-hero-2 a.btn.hero__btn .hero__inner{vertical-align: bottom;}
@media screen and (max-width:749px){
#shopify-section-1616076896d84b84a3 .hero__inner{padding-bottom: 10px;}
}
pasted at the end of the theme.css, but not seeing a difference
Hey @Viejita
You won’t be able to align JUST that one block in the way you’re wanting, as the text & buttons are wrapped in a div container that’s forced to be centered in the image with a CSS class. See below:
So even if you do apply some CSS, to make the button be bottom-aligned, it’s only going to be on the bottom of the red box from my screenshot.
You’d have to delete the “text-center” coding from the div class within the “hero__inner” div … from the block/section’s template, which would change how it works for all ‘text with overlay’ blocks/sections that you’re using on the site (not just this one block).
Debut is an old theme (they don’t even let you add this theme to your store anymore – it’s not listed on the Shopify theme store).
I’d recommend switching themes at this point. The free “Dawn” theme (https://themes.shopify.com/themes/dawn/styles/default) will allow you to set the button’s location, without needing any coding.
If you’re willing to spend some money on a premium theme, here are some good themes to pick from:
Symmetry - https://themes.shopify.com/themes/symmetry/styles/beatnik
Flex - https://outofthesandbox.com/products/flex-theme
Palo Alto - https://themes.shopify.com/themes/palo-alto/styles/vibrant
Turbo - https://outofthesandbox.com/collections/turbo-theme
Cheers,
Stephen
Got it, thanks!
@Viejita Make sure you code is working properly first.
#shopify-section-hero-2 a.btn.hero__btn .hero__inner{vertical-align: bottom;}
This is just change the vertical align to bottom
@media screen and (max-width:749px){
#shopify-section-1616076896d84b84a3 .hero__inner{padding-bottom: 10px;}
}
This only add 10px at bottom padding on mobile
I tried both of those code to preview devtool, and its doesn’t do anything.
What you would like to do with the button? i can try to give you the code
