Shopstyle widget (or workaround)

  • Author
    Posts
  • #132306

    tyeglover
    Member

    Is there a way I can add a shopable widget in this theme? It looks like there is no way I can add the below HTML but is there a workaround where I can have a similar horizontal widget or gallery on my blog homepage that visitors cam click?

    <!– COLLECTIVE WIDGET CODE START –> !function(doc,s,id){ var e, p, cb; if(!doc.getElementById(id)) { e = doc.createElement(s); e.id = id; cb = new Date().getTime().toString(); p = ‘//shopsensewidget.shopstyle.com/widget-script.js?cb=1530588172061?cb=’ + cb; e.src = p; doc.body.appendChild(e); } if(typeof window.ss_shopsense === ‘object’){ if(doc.readyState === ‘complete’){ window.ss_shopsense.init(); } } }(document, ‘script’, ‘shopsensewidget-script’); //shopsensewidget.shopstyle.com/#/?options=%7B%22widgetId%22%3A%225b3af3738be45c54d33a2b33%22%2C%22version%22%3A1%2C%22pid%22%3A%22uid1504-30697748-49%22%2C%22size%22%3A200%2C%22columns%22%3A8%2C%22rows%22%3A1%2C%22url%22%3A%22https%3A%2F%2Fapi.shopstyle.com%2Fapi%2Fv2%22%2C%22iframeHeight%22%3A275%2C%22iframeWidth%22%3A1780%7D <!– COLLECTIVE WIDGET CODE END –>

    The blog I need help with is notorioustye.com.

    #132308

    fotispapafotiou
    Theme Author

    Hi there,
    I am afraid this embeds are not permitted in general in WordPress.com. Please have a look here on what you can embed are what not https://en.support.wordpress.com/code/

    Let me know if you need additional help on this.

    #132346

    tyeglover
    Member

    Is there a way I can add a horizontal widget or gallery on my blog homepage that visitors can click that links to a product my visitors can shop? Something similar to how the “Shop My Favorites” widget on the below blog looks? It doesn’t need to be shopstyle but I would love a similar look.

    http://www.locksandtrinkets.com/

    #132351

    fotispapafotiou
    Theme Author

    Hi there,
    I am afraid this is not possible, since it will require code changes that are not supported in WordPress.com. I am sorry.

    #132430

    tyeglover
    Member

    Hi again! I figured out how to add an image widget to my footer that links to my shopstyle. Is there any way I can get the images to show up side by side instead of on top of each other? Also it seems I can only add 1 image to this widget is there a better way to achieve a similar look maybe a different widget or code?

    https://notorioustye.wordpress.com/?customize_changeset_uuid=bacbfb1c-99a0-41bd-b1d2-0e4cd18a99b1

    #132434

    fotispapafotiou
    Theme Author

    Hi,
    I suggest remove the “Shop my Favorites” widget title and add a simple widget instead with the same text
    Then add this

    .widget-area-footer section{
     float:left;
        border:none;
        
    }
    .widget-area-footer+.site-footer,#wpcom_instagram_widget-13{
     clear:left;   
    }
    .widget-area-footer{
     width:100%;   
    }

    in your custom CSS box.

    You might need extra styling for the text widget, feel free to left me know how I can help out.

    #132502

    tyeglover
    Member

    When I add this to my CSS box my instagram widget disappears. Did I do something wrong? Also is there a way I can get this widget to be in the center of my page instead of the footer?

    https://notorioustye.wordpress.com/?customize_changeset_uuid=1cabf1a4-7122-4517-9626-21b645ecb99d

    #132510

    fotispapafotiou
    Theme Author

    Hi there,
    try this instead

    .widget-area-footer > section.widget_media_image{
     float:left;
        border:none;
        
    }
    .widget-area-footer+.site-footer,#wpcom_instagram_widget-13{
     clear:left;   
    }
    .widget-area-footer{
     width:100%;   
    }

    in your custom CSS box

    I am afraid you cannot move this without code changes, which are not permitted in WordPress.com

    #132544

    tyeglover
    Member

    Thanks! That worked! So when I add additional images to the widget what do I need to do to make sure it stays in 1 horizontal line? I think I will likely add as many as 9 images (assuming that’s possible). Will the images automatically shrink to fit in the footer as I add new images? Also I added a text widget but can you help with styling? I’d want it to have black font, no background color and lines on both sides of the text going across the screen if possible. Similar to this.

    https://www.dropbox.com/s/o3neucu7efu5179/widget%20inspo.png?dl=0

    #132546

    fotispapafotiou
    Theme Author

    Hi there,
    Well you cannot create a slider, but you can add 9 images like you do already and add this

    
    @media(min-width:991px){
        .widget-area-footer > section.widget_media_image{
            width:11%;
        }
    }

    in your custom CSS box

    #132565

    tyeglover
    Member

    Thank you! Is there a way the photos can auto format to be the same height as well? Or would I have to upload them as the size I want them to be? Can you help with the text styling?

    #132566

    fotispapafotiou
    Theme Author

    Hi there,
    no you will need to have them in the same size.
    In which text styling are you referring to?

    #132567

    tyeglover
    Member

    The text widget above the image widgets. It says “Current Favorites”

    https://notorioustye.wordpress.com/?customize_changeset_uuid=1cabf1a4-7122-4517-9626-21b645ecb99d

    Is there a way to make my text look like the the text in the below image?

    https://www.dropbox.com/s/o3neucu7efu5179/widget%20inspo.png?dl=0

    #132570

    fotispapafotiou
    Theme Author

    Hi,
    try this

    
    #text-3 h2 {
        background:#fff;
        color:#121212;
        display:inline-block;
        width:200px;
        margin:auto;
        position:relative;
        z-index:3;
    }
    #text-3:after {
        background:#111;
        width:100%;
        height:1px;
        content:'';
        position:absolute;
        display:block;
        top:20px;
        z-index:1;
    }
    #text-3 {
        position:relative;
        text-align:center;
    }

    in your custom CSS box.

    #132575

    tyeglover
    Member

    That didn’t work it just created a line through the widget I already had.

    https://notorioustye.wordpress.com/?customize_changeset_uuid=1cabf1a4-7122-4517-9626-21b645ecb99d

    #132583

    fotispapafotiou
    Theme Author

    Hi there,
    I am afraid I did not get that correctly.
    Can you try this

    @media(min-width:991px){
        .widget.widget_media_image {
        float:left;
        width:11%;
    }
    .widget_wpcom_instagram_widget {
        clear:left;
    }
    #text-3 h2 {
        background:#fff;
        color:#121212;
        display:inline-block;
        width:260px;
        margin:auto;
        position:relative;
        z-index:3;
        font-size: 22px;
        top: -10px;
    }
    #text-3:after {
        background:#111;
        width:100%;
        height:1px;
        content:'';
        position:absolute;
        display:block;
        top:20px;
        z-index:1;
    }
    #text-3 {
        position:relative;
        text-align:center;
    }
    }

    as a solution for everything requested

    #132612

    tyeglover
    Member

    That worked! Almost there… now the font looks different from the default font on the rest of the blog. What should I do to change to the default font? Also can I remove the grey lines from above and below the pictures and can I get the text widget and the image widgets to be closer together?

    https://notorioustye.wordpress.com/?customize_changeset_uuid=1cabf1a4-7122-4517-9626-21b645ecb99d

    This is an unrelated topic but is there a way to get the featured post slider and the footer (just the Instagram widget is preferred but the entire footer is ok too) to stretch across the width of my homepage? And to have the footer stretch across the width of all pages on my site?

    #132613

    fotispapafotiou
    Theme Author

    Hi there,
    I am afraid you cannot change the font in certain elements, but you can try this

    #text-3 .widget-title{
        font-family:"Lora",sans-serif;
    }

    to get the default font for headings
    Try this to remove the lines

    footer .widget{
    border:none;
    }

    from all footer widgets.

    For the last one, I am afraid this requires code changes that are not permitted in WordPress.com.

    Let me know if this works, or if I can help out more.

    #132614

    tyeglover
    Member

    The code you gave to change the font worked. If I put other font names where “Lora” is would that show other options. Would like to see what other fonts may work better. Or is there a way to make the font less bold?

    The code you gave to remove the borders did not work.

    Thanks for letting me know about the width. Is there a way to make the page wider at all? There is a lot of white space on both sides and want to minimize it if possible.

    #132621

    fotispapafotiou
    Theme Author

    Hi,
    Well you can only use native fonts that come with the theme, If you need to change fonts in general try from Customize->Fonts.
    My bad try this

    .widget-area-footer .widget{
    border:none;
    }

    Making the page wider will make all image look awfully bad, because they are cropped for a smaller container. But you can check it by adding

    .container{
     width:86%;   
    }

    in your custom CSS box.

You must be logged in to reply to this topic.