Hi,
I am designing a very simple shop for a client who didn’t want to go for Ecwid or similar embed.
So the setup is a Volt gallery of nine images with each image linking to a shop item page with Volt Content. I’d originally designed this page without any Volt component and included button to purchase that links to checkout link of the item in Stripe.
That approach meant the client would need my input every time a product sold and he wanted to add a new one. I’m currently creating a Volt content version but can’t work out how to add a button. I can see there is a code option but after logging into the dashboard the code option is disabled.
So, under what circumstances does the code option become available, and is adding a button that can have its link updated via Volt possible?
Regards, Robert
You could try to add the .btn default bootstrap button class to a link. It’s not very intuitive unfortunately.
Right, hadn’t thought of that, thanks. I’m not very deep in to Bootstrap but probably know enough to dive in and try it as an option.
Hi, I’ve just returned to this topic and tried to add a basic btn class and then add the link.
The <> editing only becomes possible once some content is added so I input some text then select and then paste the code.
Please see current result here:
https://www.steveperfect.com/spn4/
I’ve clearly misunderstood something…
I just want to create a very basic button in a 1px border that says ‘Purchase’ that can have its link updated by my client via Volt CMS.
Yes, I know, at the end it’s not supported.
Then you might have to try with some custom CSS for links.
Sure, all understood. I will determine the CSS required I just want to confirm how the insertion of code content works within Volt.
For anyone trying to do similar, i.e. create a button link in Volt CMS, this worked for me:
.purchase-btn {
a:link, a:visited {
background-color: FAF9F6;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
border: 1px solid black;
display: inline-block;
}
a:hover, a:active {
background-color: #239b56;
color: white !important;
}
}
@jannis Hi, I’ve sorted the CSS see above. Hope it helps someone avoid the rabbit holes I’ve been down!
I still don’t understand the code tool. I tried adding different code elements that I’m used to adding to boxes labelled ‘code’ but it just seemed to turn the content pink and I couldn’t reset it without deleting and starting again.
Works as expected. It’s just a code tag.
Thanks, understand now.