Integrate gumroad shop

Developer help
2

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