Re-usability of site pages and containers, a la PlusKit?

Elements
1

Is that a possibility or am I missing a concept in Elements that negates such a request?

2

I think Global Templates are what you’re after; they are super powerful :flexed_biceps:

If there’s something specific to PlusKit you need to do, let me know and I’ll tell you how you can do it in Elements :blush:

3

Ah, yes, Globals. Amazingly, I forgot about them (I haven’t been working with Elements in a while.) Very much better than PlusKit.

litella-2
litella-2256×197 28.6 KB

:wink:

4

I did find one thing that I can’t figure out how to do. I was using PlusKit to bring in my ecwid store into a page. Specifically, I was able to place that into another stack that let me set the typography for the PlusKit imported store. Can I stylize the text of the HTML component without having to code the HTML itself? (I’m not a developer).

5

You can certainly embed the Ecwid store using a custom component. You’d then just need to override some styles… probably with code :grimacing:

However, if you know what things you’d like to change, we can probably help you out with that :blush:

6

Thanks, Dan. I did actually use the HTML component to embed the store; that’s when I saw/realized I needed to have some sort of control for typography. I have a Pro license. How do I go about requesting code help with this?

7

If you share your project via Elements Cloud, I can take a look. You’ll also need to let me know exactly what you need changed — the more details you give, the better :blush:

If the project contains private data, you can send the link via email.

8

Thanks, Dan. I think this is pretty simple. I’ve uploaded the project. Here is the link.

I just need all of the text for each item in the store to be local font ‘ContoRegular’ and color Hex #333333. There are two hyperlinks at the bottom of each item but I suspect that will be automatically handled without having to specify them…or am I worng on that?

For your reference, here is a link to the live store page. And here is a screen shot of the page in RWC:

Order Page RWC
Order Page RWC1920×4731 1.54 MB

9

Thanks, Dan. I think this is pretty simple. I’ve uploaded the project. Here is the link.

I just need all of the text for each item in the store to be local font ‘ContoRegular’ and color Hex #333333. There are two hyperlinks at the bottom of each item but I suspect that will be automatically handled without having to specify them…or am I worng on that?

For your reference, here is a link to the live store page. And here is a screen shot of the page in RWC:

(attachments)

Order Page RWC.jpg
Order Page RWC.jpg2258×5564 1020 KB

10

Hi @luckylindy

You can paste the following code into the CSS area in the Extra Code window:

.ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
color: #333333 !important;
font-family: ContoRegular !important;
}

CleanShot 2025-05-14 at 5 .57.20@2x
CleanShot 2025-05-14 at 5 .57.20@2x1920×1347 585 KB

However, there is one issue: “ContoRegular” doesn’t exist on your site, so you’ll need to add that to your site before the font will display correctly. How were you doing that in Classic?

Ecwid also has a css styling cheat-sheet available here, might be handy for future reference.

11

Thanks, Dan. In Classic, I had the font in Resources. I hadn’t added it to this test project yet. That would be via the Resources section, too? If so, I tried it and it didn’t work. It should work in Preview, correct? Here is the link to the updated project.

12

Hi @luckylindy

I updated your custom component to included the required code at the top!

@portal(headEnd)
    <style>
        @font-face {
        font-family: 'Conto-Regular';
        src: url('resources/fonts/Conto-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        }

        .ecwid div, .ecwid span, .ecwid a, .ecwid p, .ecwid h1 {
        color: #ff0000 !important;
        font-family: Conto-Regular !important;
        }
    </style>
@endportal

<div id="my-store-78739515"></div>
<div>
<script data-cfasync="false" type="text/javascript" src="https://api-e.lightspeed.app/script.js?78739515&data_platform=code&data_date=2025-05-13" charset="utf-8"></script><script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-78739515");</script>
</div>

And here’s the working project for you.

13

Thanks Dan. This does it, mostly, except for one thing: After I changed the code to my desired text color (#333333), the text changes everywhere, including the hyperlinks at the bottom and, more important, the ‘Add to Bag’ button at the bottom right.

It seems to me that taking the load off of RealMac support, Ecwid’s code solution should have worked. Is there something in Tailwind or yor implementation for Elements that makes it so that I have to bug you for additional help? :slightly_frowning_face:

Best,
Jay Sig