Customizing your embedded TWICE store involves adjusting various configuration parameters within the twice-store HTML element. This process allows for precise control over how specific products, categories, or languages are displayed on your website. For initial setup using the TWICE Embed Builder, please refer to our dedicated article on using the TWICE Embed Builder. This guide focuses on manual customization for deeper adjustments.
Configuring Manually
To customize your embedded store, you will need to directly modify the twice-store HTML element with the desired attributes:
Edit the
twice-storeElement: Incorporate thetwice-storetag into your website's HTML, specifying your customization parameters. Here is an example:<twice-store
shop="myshop"
store="mystorelocation"
category="mycategory"
/>
Understanding Configuration Parameters
See the full list of possible parameters, applicable values, and their respective behaviors in the table below. Please note that the shop parameter is the only required parameter.
Parameter | Value | Default |
shop | The name of your shop; It can be found via Account > Domains & URLs > Twice domain path e.g. shop="myshop" | None |
store | The name of a specific store location to embed; found via Account > Domains & URLs > Store URL endings Applicable only when operating multiple store locations. e.g. store="mystorelocation" | None |
locationsview | If you have multiple store locations and want to display all options for the customer to select from, set to TRUE e.g. locationsview= "true" | None |
lang | By default, the embed uses the system/browser language of the user viewing it, but if that is not available, your TWICE Admin's main language will be used as a fallback. The language parameter can take in any two-letter language code as the value. Just make sure, the respective language is activated in your TWICE store or no changes will be applied. e.g. lang="de" | User language |
height | By default, the height of the embedded store is automatically resized to fit the content within. This improves user experience, as it removes the need for a scrollbar within the embedded store. If you want, you can also set a fixed height for your embedded store by passing in a valid HTML height as the value of this parameter e.g. "1000px" or "100%" or "100vh" | None |
category | The ID of a specific category can be found via Catalog > Category > the URL ending of the respective category e.g. category="FH6YfXO0QBRDAVHAmB4P" | None |
ticket | The ID of a specific ticket product to show in the embed by default (requires Skidata integration). | None |
product | The ID of a specific product can be found via Catalog > Product > URL ending of the respective product; If provided, the category and ticket parameters will be ignored. e.g. product="Y13DRwOtR2vC7APRJab8" | None |
disableautoscroll | By default, your website user is automatically scrolled to the top of the embedded store when the page changes or a dialog is shown inside the embed. This improves user experience in most cases, but you can disable this behavior by passing in "true" as the value of this parameter. e.g. disableautoscroll="true" | false |
disableheightanimation | By default, when the height of the embedded store changes, the height is animated to its new value to prevent stutter. You can disable this behavior by passing in "true" as the value of this parameter. disableheightanimation="true" | false |
By following these guidelines, you can effectively tailor your embedded TWICE store to meet your website's specific needs and customer preferences. For more basic embedding instructions, please refer to our article on using the TWICE Embed Builder.