iero
June 8, 2021, 10:57pm
1
Hello
I try to integrate my gumroad shop in my ghost blog.
So, I tried the share code provided:
<script src="https://gumroad.com/js/gumroad-embed.js"></script>
<section class='gumroad'>
<div class="gumroad-product-embed"><a href="https://gumroad.com/l/DBvEo">Coffee Roasters...</a></div>
<div class="gumroad-product-embed"><a href="https://gumroad.com/l/iKiwx">Breweries...</a></div>
</section>
Example here: Maps
I understand that the js code replace the div by a sort of widget, but with 100% width and I cannot find a way to reproduce the store (a sort of gallery with the widgets).
Any idea?
Hey!
First put the following in the Code Injection footer of the post/page in which you want the Gumroad embeds:
<script src="https://gumroad.com/js/gumroad-embed.js"></script>
then in the HTML card put the rest of the code:
<section class='gumroad'>
<div class="gumroad-product-embed"><a href="https://gumroad.com/l/DBvEo">Coffee Roasters...</a></div>
<div class="gumroad-product-embed"><a href="https://gumroad.com/l/iKiwx">Breweries...</a></div>
</section>
then you have to give the classes gumroad
and gumroad-product-embed
the CSS love.
For example you could put this code in the Code Injection header of the post/page:
<style>
.gumroad {
display:grid;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
grid-gap:8vmin 10vmin;
grid-template-columns:1fr 1fr
}
@media (max-width:800px) {
.gumroad-product-embed {
grid-template-columns:1f
}
}
.gumroad-product-embed {
display:grid;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between;
grid-gap:35px;
grid-template-columns:1fr;
margin-bottom:15px
}
</style>
It may not look great with the above CSS, but you get the idea.
You will have to play with the CSS classes a bit, to see what looks best in your theme.
Hope that helps.
2 Likes
iero
June 10, 2021, 12:10am
3
Awesome, thanks for your help!