Hi,

Thank you for the info.

In order to load the shopify script, we have to add this snippet in the functions.php file.

/*
 *  add shopify script
 */
function ava_script_shopify_script(){
?>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
	window.shopifyOptions = {
		"product": {
		"styles": {
		"product": {
		"@media (min-width: 601px)": {
		"max-width": "100%",
		"margin-left": "0",
		"margin-bottom": "50px"
		},
		"text-align": "left"
		},
		"title": {
		"font-family": "Lato, sans-serif",
		"font-size": "30px",
		"color": "#4e3a5e"
		},
		"button": {
		"font-family": "Lato, sans-serif",
		":hover": {
		"background-color": "#2395e6"
		},
		"background-color": "#27a5ff",
		":focus": {
		"background-color": "#2395e6"
		},
		"border-radius": "35px",
		"padding-left": "55px",
		"padding-right": "55px"
		},
		"price": {
		"font-family": "Lato, sans-serif",
		"font-size": "26px",
		"color": "#a87bc9"
		},
		"compareAt": {
		"font-family": "Lato, sans-serif",
		"font-size": "22.099999999999998px",
		"color": "#a87bc9"
		},
		"unitPrice": {
		"font-family": "Lato, sans-serif",
		"font-size": "22.099999999999998px",
		"color": "#a87bc9"
		},
		"description": {
		"font-family": "Lato, sans-serif",
		"font-size": "17px",
		"color": "#827191"
		}
		},
		"layout": "horizontal",
		"contents": {
		"img": false,
		"imgWithCarousel": true,
		"button": false,
		"buttonWithQuantity": true,
		"description": true
		},
		"width": "100%",
		"text": {
		"button": "Add to cart"
		},
		"googleFonts": [
		"Lato"
		]
		},
		"productSet": {
		"styles": {
		"products": {
		"@media (min-width: 601px)": {
		"margin-left": "-20px"
		}
		}
		}
		},
		"modalProduct": {
		"contents": {
		"img": false,
		"imgWithCarousel": true,
		"button": false,
		"buttonWithQuantity": true
		},
		"styles": {
		"product": {
		"@media (min-width: 601px)": {
		"max-width": "100%",
		"margin-left": "0px",
		"margin-bottom": "0px"
		}
		},
		"button": {
		"font-family": "Lato, sans-serif",
		":hover": {
		"background-color": "#2395e6"
		},
		"background-color": "#27a5ff",
		":focus": {
		"background-color": "#2395e6"
		},
		"border-radius": "35px",
		"padding-left": "55px",
		"padding-right": "55px"
		}
		},
		"googleFonts": [
		"Lato"
		],
		"text": {
		"button": "Add to cart"
		}
		},
		"option": {},
		"cart": {
		"styles": {
		"button": {
		"font-family": "Lato, sans-serif",
		":hover": {
		"background-color": "#2395e6"
		},
		"background-color": "#27a5ff",
		":focus": {
		"background-color": "#2395e6"
		},
		"border-radius": "35px"
		},
		"title": {
		"color": "#919191"
		},
		"header": {
		"color": "#919191"
		},
		"lineItems": {
		"color": "#919191"
		},
		"subtotalText": {
		"color": "#919191"
		},
		"subtotal": {
		"color": "#919191"
		},
		"notice": {
		"color": "#919191"
		},
		"currency": {
		"color": "#919191"
		},
		"close": {
		"color": "#919191",
		":hover": {
		"color": "#919191"
		}
		},
		"empty": {
		"color": "#919191"
		},
		"noteDescription": {
		"color": "#919191"
		},
		"discountText": {
		"color": "#919191"
		},
		"discountIcon": {
		"fill": "#919191"
		},
		"discountAmount": {
		"color": "#919191"
		},
		"cart": {
		"background-color": "#f9f9f9"
		},
		"footer": {
		"background-color": "#f9f9f9"
		}
		},
		"text": {
		"title": "Shopping Cart",
		"total": "Subtotal",
		"button": "Checkout"
		},
		"contents": {
		"note": true
		},
		"popup": false,
		"googleFonts": [
		"Lato"
		]
		},
		"toggle": {
		"styles": {
		"toggle": {
		"font-family": "Lato, sans-serif",
		"background-color": "#27a5ff",
		":hover": {
		"background-color": "#2395e6"
		},
		":focus": {
		"background-color": "#2395e6"
		}
		}
		},
		"googleFonts": [
		"Lato"
		]
		},
		"lineItem": {
		"styles": {
		"variantTitle": {
		"color": "#919191"
		},
		"title": {
		"color": "#919191"
		},
		"price": {
		"color": "#919191"
		},
		"fullPrice": {
		"color": "#919191"
		},
		"discount": {
		"color": "#919191"
		},
		"discountIcon": {
		"fill": "#919191"
		},
		"quantity": {
		"color": "#919191"
		},
		"quantityIncrement": {
		"color": "#919191",
		"border-color": "#919191"
		},
		"quantityDecrement": {
		"color": "#919191",
		"border-color": "#919191"
		},
		"quantityInput": {
		"color": "#919191",
		"border-color": "#919191"
		}
		}
		}
		};
	var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

	if (window.ShopifyBuy) {
		if (window.ShopifyBuy.UI) {
			ShopifyBuyInit();
		} else {
			loadScript();
		}
	} else {
		loadScript();
	}

	function loadScript() {
		var script = document.createElement('script');
		script.async = true;
		script.src = scriptURL;
		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
		script.onload = ShopifyBuyInit;
	}

	function ShopifyBuyInit() {
		var client = ShopifyBuy.buildClient({
			domain: 'shop-smileicon-de.myshopify.com',
			storefrontAccessToken: '2bf601fd5327e67d70751fad741c6fa5',
		});

		document.querySelectorAll('.product-component-shopify').forEach(function(el) {
			console.log(el)
			ShopifyBuy.UI.onReady(client).then(function (ui) {
				ui.createComponent('product', {
					id: '6147674898616',
					node: document.getElementById(el.id),
					moneyFormat: '%E2%82%AC%7B%7Bamount_with_comma_separator%7D%7D',
					options: window.shopifyOptions,
				});
			});
		});
	}
	})();
	/*]]>*/
</script>
<?php
}
add_action('wp_footer', 'ava_script_shopify_script', 9999);

And the following code creates the new shortcode.

// shopify button
function avs_shopify_button_cb( $atts ) {
	$param = shortcode_atts( array(
		'component' => '',
	), $atts );

	return "<div class='product-component-shopify' id='product-component-{$param["component"]}'></div>";
}
add_shortcode( 'avs_shopify_button', 'avs_shopify_button_cb' );

To add a new shopify button in a page, insert a code or text block, then use this shortcode.

[avs_shopify_button component="1612524419965"]

Just replace the value of the component attribute or parameter with the actual id of the shopify product component.

Best regards,
Ismael

Hi,

The draft page is no longer accessible. Did you remove it?

We modified the tab_section.js file and did the changes above. We also deactivated the Performance > File Compression settings to regenerate the scripts and stylesheets. The tab section is now resizing itself again once the transition or the layout of the portfolio grid is complete. Please check the screenshot below.

Screenshot: https://imgur.com/udw1l55

Best regards,
Ismael

Hey FayeMcC,

Thank you for the inquiry.

The favicon is showing correctly on our end. Have you tried removing the browser cache on your mobile device, or do a hard refresh? You should also try to check it while you are on incognito mode.

Best regards,
Ismael

Hi,

Glad to know that the script above is working. If you would like to apply it on a specific page, please use the following script instead.

// disable masonry link
function ava_script_disable_masonry_link() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', '
		(function($) {
                        if($("body").is(".page-id-31") == false) {
                             return false;
                        }

			$(".av-masonry-entry").on("click", function(e) {
			  e.preventDefault();
			  return false;
			});
		  })(jQuery);
	');
    }
 }
add_action( 'wp_enqueue_scripts', 'ava_script_disable_masonry_link', 9999);

We are just checking if the body tag contains the class name page-id-31, which contains the ID of the page “Team”.

Best regards,
Ismael

Hi,

We just found out that it is the default markup of the product gallery — the images are not linked by default. You have to override the woocommerce\templates\single-product\product-image.php file and add the links manually. For more info on how to override a product template, please check the following documentation.

// https://docs.woocommerce.com/document/template-structure/

We will close this thread for now. Please do not hesitate to open another if you need more help.

Best regards,
Ismael

Hey marcobe,

Thank you for the inquiry.

The latest version will be available very soon but we do not have an exact date yet. It will contain fixes for the pagination and other issues, and will also include a new template option called Custom Elements, which should allow you to create global elements.

Best regards,
Ismael

Hi,

Thank you for the info.

Have you tried applying a height limit to the color section containing the svg image? The svg image should inherit the height of its parent container, so this should work.

.page-id-7062 #av_section_1 {
	max-height: 50vh;
}

To avoid using generic selectors such as the one above (#av_section_1), you could apply a unique custom css class name or ID to the color section element from its Advanced > Developer Settings panel.

Best regards,
Ismael

Hi,

Glad it solved the issue.

And regarding the text alignment and the space between the avatar and the name, please try to use this css code.

.bbp-author-link.alignnone {
	display: inline !important;
}

.bbp-author-avatar {
	margin-bottom: 20px;
	display: block;
}

Best regards,
Ismael

Hi,

Yes, you are right. Looks like the switch only works once a particular size has been selected. Would it help if we preselect a default size on page load? You can use this script in the functions.php file to do that.

// preselect product size
function ava_script_preselect_product_size() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', '
		(function($) {
			$(document).ready(function() {
				$(".rtwpvs-term.rtwpvs-button-term.button-variable-term-m").trigger("click");
			});
		})(jQuery);
	');
    }
 }
add_action( 'wp_enqueue_scripts', 'ava_script_preselect_product_size', 9999);

The script above activates the medium size button on page load.

Best regards,
Ismael

Hi,

Thank you for the update.

Would you mind providing access to one of the sites so that we could check the issue properly? By the looks of it, the Advance Layout Builder (ALB) is not active in the page above. Are you sure that you switched the editor to ALB?

Best regards,
Ismael

Hi,

Thank you for following up.

There is obviously an incompatibility issue between the theme and the plugin since it is not working as expected, but what we are trying to point out is that, it is not a problem with how the code block renders the shortcode. Again, you could try a default shortcode from WP or a shortcode from a different plugin and it will work just fine, so the issue is how the plugin renders its shortcode. Unfortunately, we do not know how the plugin works and we are not familiar with its code, so it would be a huge help if the plugin developers could provide additional insights as to how the plugin render its shortcode, what function it is currently using or which filter or hook it is utilizing to render the output of the shortcode.

Best regards,
Ismael

Hi,

Thank you for the update.

This is what we get when we manually adjust the background position using the recommended css code above.

Screenshot: https://imgur.com/3QczJAw

As you may noticed, the children are now visible in the color section area.

Now if you want to adjust the actual height of the parallax container like the screenshot below..

Screenshot: https://imgur.com/hcOjW3l

.., please use this css code.

@media only screen and (max-width: 767px) {
.home #av_section_1 .av-parallax.active-parallax {
	height: 100% !important;
	top: 0 !important;
	transform: translate3d(0px, 0, 0px) !important;
}
}

Best regards,
Ismael

Hi,

For some reason, the modification above is not working as expected. Would you mind removing the header.php file template in the child theme? We noticed that the alternate menu is being included in the site when it is not supposed to.

Best regards,
Ismael

Hey marcobe,

Thank you for the inquiry.

Have you tried updating the theme to the latest version (4.7.6.4)? The latest version should contain the fix for the pagination. If the latest version of the theme is already installed and the pagination is still not working as it should, please try the solution provided in the following thread.

// https://kriesi.at/support/topic/the-grid-with-products-does-not-work-pagination/#post-1254673
// https://kriesi.at/support/topic/enfold-blog-posts-and-magazine-navigation-link-to-previous-page-not-working/#post-1264664

Best regards,
Ismael

Hey Talker77,

Thank you for the inquiry.

The advance layout builder is automatically disabled on the base shop page, but you can use the following snippet in the functions.php file to enable it back.

add_theme_support( 'avia_custom_shop_page' );

However, please not that enabling this may cause default features such as the product sorting or when using a default product widget to not work correctly in the shop page. For more info, please check the documentation.

// https://kriesi.at/documentation/enfold/woocommerce-shop/#custom-woocommerce-shop-overview-with-advanced-layout-editor

Best regards,
Ismael