Write in Purchase Buttons

hulsebos58 · 2017-02-01 22:08:14

I read the instructions for creating Write-in Purchase Buttons here:
http://backlight.theturninggate.net/doc … se_buttons

But it's not clear where I place it. I seriously wish the docs were written from the viewpoint that the reader doesn't know much about the subject. Can anyone help.

rod barbee · 2017-02-01 22:37:53

put it in any page copy area. Either in a Backlight page or album/set templates or in the page copy areas in albums and album sets in Lightroom.

Also, write the code either in the page copy areas or in a plain text editor. I suggest doing it in an editor and then copy/pasting into the page copy fields.

hulsebos58 · 2017-02-01 22:57:49

If I want to have it appear only in the large image view, where do I place it. I tried it in the Album Settings Main Copy section, and it put the button on the thumbnails page only.

rod barbee · 2017-02-01 23:15:02

the write in buttons can only go in areas where you can add text.
However, if you're using the HTML single image presentation, you can use phplugins to insert content after the large images using the ttg_single_bottom hook.

And as long as the write-in button code needs to be the same for all images, this would be a good solution. But if each button needs to be different, then it won't work as you need it to.

hulsebos58 · 2017-02-02 00:52:20

Each button needs to go to the cart, just as the current cart icon does. Does that mean it is unique? I just want the button to say "Purchasing Options" and have a larger cart icon, which currently is miniscule. The current small icon is above the large image. Can the new button be there also. If not, can that tiny icon be changed?

rod barbee · 2017-02-02 01:12:55

What you want to do won't work. The write-in buttons are for selling products or services other than those in image galleries.

You should be able to change the size of that icon with custom css or jQuery. Which large image presentation are you using?

hulsebos58 · 2017-02-02 01:16:57

I am using Single image

hulsebos58 · 2017-02-02 01:18:01

Can I create my own icon?

rod barbee · 2017-02-02 01:19:34

hulsebos58 wrote:

Can I create my own icon?

I suppose you could. Then use jQuery to swap it out. Or you could look at options over at the Font Awesome site and use one of those (since Font Awesome (4.7.0) is already included in Backlight)
It's easy to increase the size of the existing icon too, just append the icon code as noted here: http://fontawesome.io/examples/

rod barbee · 2017-02-02 01:22:13

Here's how you can use jQuery to swap out icons.
http://ttg-tips-and-tricks.barbeephoto. … -ttg-page/

rod barbee · 2017-02-02 01:41:39

all that being said, if you increase the size of the icon you'll probably want to change all the others up there too, otherwise it's going to look awkward.
Personally, I think the size is fine and easily noticeable.

hulsebos58 · 2017-02-02 01:46:11

Check out the large picture page and see how the cart icon at the upper right is dwarfed by the picture:
http://www.martyhulsebos.com/galleries/color/aspens/
I want it to be clear to potential customers that this picture is for sale, and here is the link to how to purchase it. To me, my website needs to be more about selling than just showing.

rod barbee · 2017-02-02 02:02:12

this is the code that control what icon is displayed:

<i class="fa fa-fw fa-shopping-cart"></i></a></li>

apparently, the fa-fw is to set the icons at a fixed width. But if you want it bigger, you can swap out fa-fw for fa-lg (or fa-2x etc.)

I don't know the ramification of this for mobile view though.

charlie.choc · 2017-02-02 02:05:48

I think I'm using the default buttons and they look OK to me: https://stalkinglight.com/galleries/flo … single.php

Mine seem larger in proportion to the picture than yours.

rod barbee · 2017-02-02 02:10:58

the actual cart icons are the same size, it's just that you've got a black UI background color set, while on Marty's site, he's set the UI background color to the same as the page color.

rod barbee · 2017-02-02 02:20:39

Marty,
Looks like you can also increase the size of the shopping cart with custom css (to a limit)

.fa-shopping-cart {
    font-size: 1.5em;
}

2.2em seems to be the limit before the icon outgrows the space allotted.

charlie.choc · 2017-02-02 02:30:47

rod barbee wrote:

the actual cart icons are the same size, it's just that you've got a black UI background color set, while on Marty's site, he's set the UI background color to the same as the page color.

That's sort of what I meant by look larger, I should have been more specific.

hulsebos58 · 2017-02-03 07:49:50

Thanks for your tips Rod and Charlie. I made the background red with white text and it is much more visible. As to having write-in text, I was able to do it with CE4. Was this option removed in Backlight?

rod barbee · 2017-02-03 08:00:01

the write-in buttons are the same in Backlight as they are in CE4. They're intended to sell products other than images and downloads. They are not replacements for the existing cart buttons.

Are you wanting to replace the cart icon with text?

hulsebos58 · 2017-02-03 08:30:05

Yes I do want to replace the cart icon with text. CE4 let me do it.

rod barbee · 2017-02-03 09:37:45

ok, which icon? The one in the thumbnail grid or the one with the large image in the HTML Single presentation?
You can use custom css to replace either with any text you want. But there's not much room to add text so you'll have to mess with other styling too probably.

figure button.add-to-cart::after {
    content: "Cart";

In CE4 Gallery there is an option to add a button label for the large image page. It adds text to the existing icon. Is this what you mean?
If so, there's no easy way I can see of doing this.

You can add text to the content property in the css, but there's not mcuh room for text and an icon without changing more styling.
But you can give this a try in custom css:

.fa-shopping-cart::before {
    content: "\f07a Add to Cart";
}

It looks like crap, but maybe you can figure out the styling that needs to be changed to accommodate it.

Frankly, I think most people understand what a cart icon means.

Perhaps Matt has a better idea on how to handle it.

hulsebos58 · 2017-02-03 11:39:12

The icon I want to change (add text next to) is the large image cart button. I tried using the css you offered:
.fa-shopping-cart::before {
content: "\f07a Add to Cart";
}

...and yes that is not ready for prime time. I tried to add some CSS styling, but not being proficient enough with CSS, I didn't get very far. Any tips on making the red box wider so the text falls entirely into it? See the page: http://www.martyhulsebos.com/galleries/ … single.php

My marketing consultant is harping on me to make it overwhelming simple to people how to make a purchase. A shopping cart icon to someone who is web illiterate may not be obvious. I do have customers like this and I want to be considerate of this.

I want the text to say "Purchasing Options". It's really not a shopping cart since they haven't made their selections yet. They just need to get to the place where they can select size, presentation, etc.

Last edited by hulsebos58 (2017-02-03 11:46:05)

rod barbee · 2017-02-03 12:01:20

Any tips on making the red box wider so the text falls entirely into it?

Not really. I spent some time looking at that earlier but couldn't easily see what needed to be done.

Another thought is to add some instructional text to your album template that lets any potential buyer know that the little icon that looks remarkably like a shopping cart is just that. You can even add the icon to the instructional text to make it painfully obvious. Just add the Font Awesome icon code to the copy area inline with the text you want to use.

hulsebos58 · 2017-02-03 12:03:47

Yes, that's a good idea. Thanks Rod.

hulsebos58 · 2017-02-03 12:05:54

What is that Font Awesome code?

Community @ The Turning Gate

#1 2017-02-01 22:08:14

Write in Purchase Buttons

#2 2017-02-01 22:37:53

Re: Write in Purchase Buttons

#3 2017-02-01 22:57:49

Re: Write in Purchase Buttons

#4 2017-02-01 23:15:02

Re: Write in Purchase Buttons

#5 2017-02-02 00:52:20

Re: Write in Purchase Buttons

#6 2017-02-02 01:12:55

Re: Write in Purchase Buttons

#7 2017-02-02 01:16:57

Re: Write in Purchase Buttons

#8 2017-02-02 01:18:01

Re: Write in Purchase Buttons

#9 2017-02-02 01:19:34

Re: Write in Purchase Buttons

#10 2017-02-02 01:22:13

Re: Write in Purchase Buttons

#11 2017-02-02 01:41:39

Re: Write in Purchase Buttons

#12 2017-02-02 01:46:11

Re: Write in Purchase Buttons

#13 2017-02-02 02:02:12

Re: Write in Purchase Buttons

#14 2017-02-02 02:05:48

Re: Write in Purchase Buttons

#15 2017-02-02 02:10:58

Re: Write in Purchase Buttons

#16 2017-02-02 02:20:39

Re: Write in Purchase Buttons

#17 2017-02-02 02:30:47

Re: Write in Purchase Buttons

#18 2017-02-03 07:49:50

Re: Write in Purchase Buttons

#19 2017-02-03 08:00:01

Re: Write in Purchase Buttons

#20 2017-02-03 08:30:05

Re: Write in Purchase Buttons

#21 2017-02-03 09:37:45

Re: Write in Purchase Buttons

#22 2017-02-03 11:39:12

Re: Write in Purchase Buttons

#23 2017-02-03 12:01:20

Re: Write in Purchase Buttons

#24 2017-02-03 12:03:47

Re: Write in Purchase Buttons

#25 2017-02-03 12:05:54

Re: Write in Purchase Buttons

Board footer